Appcelerator mobile. the doppelgänger to XPages

Appcelerator Mobile. The Doppelgänger to
XPages
Another Story by John Jardin

Who is John Jardin?
• CTO of Ukuvuma Solutions.
• Responsible for pushing the
boundaries on technology and
productizing it for businesses.
• Developer for 12 Years, primarily
focused on IBM Domino.
• I almost, almost, became a Domino
Administrator.
• IBM Champion 2013.

What you will learn in this Presentation
•
•
•
•
•
•

What is Appcelerator Titanium and why use it.
How to install Titanium Studio and what is required.
How to create a Mobile Project from scratch.
Let’s create a Login Window similar to our Login XPage.
Now, let’s compare Appcelerator and XPages.
Is TiDomino real or just a myth?

What is Appcelerator Titanium?
• A platform for developing mobile and web applications using web
technologies instead of the Operating System’s core
programming language.
• Develop mobile apps for iOS, Android, BB10 and Tizen (Windows
8 Mobile coming soon).
• Built on top of Eclipse and node.js.

Why use Appcelerator Titanium?
•
•
•
•
•

Very easy to set up and get going.
Has a well structured Object Model for cross platform development.
Has a Free Edition (Community Edition) which offers plenty.
No Objective-C, Java or C# skills required.
Instead, the minimum skillset required is:
• JavaScript
• CSS
• XML
• An understanding of the Titanium Object Model
• Extendable framework using Modules.
• Titanium converts your mobile project into a native project relevant to the
target Operating System.
• NB: Your mobile application is native, not a hybrid.

Appcelerator mobile. the doppelgänger to XPages

System Requirements
• Appcelerator Account (Register on appcelerator.com).
• Mac, Windows, Linux.
• At least 1 SDK (iOS, Android, BB10, Tizen).

How to install Titanium Studio
•
•
•
•

Download Titanium Studio from appcelerator.com.
Follow the easy install wizard to get Titanium Studio installed.
Open Titanium Studio and log in with your Appcelerator Account.
Validate that your SDKs are installed and mapped properly.

Validate SDKs in Titanium Studio

Create a new Mobile Project
• Example Info Required:
• Project Name (DanNotes)
• App ID (com.ukuvuma.dannotes)
• Deployment Targets (iPhone, iPad, Android, etc.)

Quick things you need to know
• Appcelerator makes use of Alloy MVC.
• index.xml, index.css, index.js are the starting points of any Alloy
Mobile Project.
• Alloy Models, in my opinion, have a long way to go still and will
not be used in our demo.
• The Window control is almost always used to display content on a
mobile device.
• Asynchronous functions are often used, so an understanding of
callback functions is a must.

Code for Login Page - Appcelerator
<Alloy>
<Window class="window">
<ImageView id="image1" class="image"></ImageView>
<Label id="label1" class="label" text="Username"></Label>
<TextField id="username" class="field"></TextField>
<Label id="label2" class="label" text=”Password"></Label>
<TextField id="password" class="field"></TextField>
<Button id="button" class="button" title="Submit"></Button>
</Window>
</Alloy>

Code for Login Page – XPages
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources><xp:styleSheet href="/index.css"></xp:styleSheet></xp:this.resources>
<xp:div styleClass="window">
<xp:image url="/UkuvumaLogoOnly.png" id="image1" styleClass="image"></xp:image>
<xp:div styleClass="separator"></xp:div>
<xp:label value="Username" id="label1" styleClass="label"></xp:label>
<xp:inputText id="username" styleClass="field"></xp:inputText>
<xp:label value="Password" id="label2" styleClass="label"></xp:label>
<xp:inputText id="password" styleClass="field"></xp:inputText>
<xp:button value="Submit" id="button" styleClass="button"></xp:button>
</xp:div>
</xp:view>

Remove XML Header
<?xml version="1.0" encoding="UTF-8"?>
</xp:div>
</xp:view>

Remove XML Header
</xp:div>
</xp:view>

Remove reference to Stylesheet
</xp:div>
</xp:view>

Remove Style Separators
</xp:div>
</xp:view>

Code for Login Page – XPages
</xp:div>
</xp:view>

Both
</xp:div>
</xp:view>
<Alloy>
<Window class="window">
<ImageView id="image1" class="image"></ImageView>
<Label id="label1" class="label" text="Username"></Label>
<TextField id="username" class="field"></TextField>
<Label id="label2" class="label" text=”Password"></Label>
<TextField id="password" class="field"></TextField>
<Button id="button" class="button" title="Submit"></Button>
</Window>
</Alloy>

What is TiDomino?
• An Open Source JavaScript Module allowing Appcelerator
developers to use IBM Domino scripting patterns to structure
local data sets and integrate with IBM Domino Applications.
• Licensed under Apache 2.
• Consists of 1 JavaScript file and 1 IBM Notes Database (NSF).
• The JavaScript file is used in your Appcelerator Mobile
Application.
• The Notes Database runs on your Domino Server and acts as a
communicator for your Appcelerator Mobile Application.
• Available on OpenNTF.org.

Why did I create TiDomino?
• Mobile applications make use of HTTP requests and Web Services
to send and receive data to and from remote servers.
• For most Mobile Operating Systems, these requests are
asynchronous, so callbacks will need to be managed carefully.
• In summary, a simple task like authenticating with a remote
server could require around 80 lines of code depending on the
checks that need to be performed.
• Also, asynchronous functions and callbacks might not be common
practices to XPages Developers.

How to install TiDomino
• Import the “TiDomino.js” file into the “Lib” folder of your
Appcelerator Mobile application.
• Extract the Notes Database (tidomino.nsf) to the “Data” directory
of your IBM Domino Server.
• Sign the Notes Database (tidomino.nsf) with an ID that will be
allowed to perform read/write operations to your business
applications.
• Tweak the Access Control List of the Notes Database to fit your
company’s policies.

TiDomino will allow you to peform the
following functions:
• Authenticate with a Domino Server (Login and Logout).
• Perform a “GetAllDocumentsByKey” method against a
NotesDatabase View.
• Submit new or update existing NotesDocument Objects to the
Domino Server.
• Execute custom XAgents that you’ve set up in your XPages
Applications.

Authenticate with a Domino Server

Execute a function called “signIn()”

function signIn() {
//First validate fields
var username = $.username.value;
var password = $.password.value;
//Add your code here
}

return true;

//Add your code here  (From Previous Slide)
var Session = require('TiDomino');
var ss = new Session();
//Create Server Connection
var serverKey = "acme"; //Any Key
var dominoServer = "ACME/Server”, hostName = "www.acme.com";
var isHTTPS = false, requireInternet = false;
var con = ss.createServerConnection(serverKey,
dominoServer, hostName, isHTTPS, requireInternet);
ss.loginUser(con, username, password, getAllClients, null);

Get All Documents By Key
//ss.loginUser(con, username, password, getAllClients, null);  (From Previous Slide)

function getAllClients(result, params){
var db = ss.getDatabase(con, "crm.nsf");
var view = db.getView("AllClients");
var fieldsToReturn = "Date,Employee,TimeAllocation";
view.getAllDocumentsByKey("Active", true, fieldsToReturn,
processResults, null);
}

return true;

Create and save Notes Document
function submitNotesDocument(){
var doc = db.createDocument({
Form:'TitaniumDoc',
Status:'New’
});
doc.Title = "Test Title";

}

doc.save(processSaveNotesDocument, null);
return true;

Run XAgent
function runXAgent(){
db.runXAgent(”getClients.xsp", {processType:"1"},
processRunXAgent, null);
return true;
}

What’s next for TiDomino?
•
•
•
•
•
•

More Domino Objects.
Increased Performance.
Integration with IBM Domino REST APIs.
Integration with SQLite local storage facility.
Replication.
And much much more.

Some useful links
•
•
•
•
•

TiDomino on OpenNTF
http://docs.appcelerator.com - (API Docs)
http://developer.appcelerator.com - (Q&A Forum)
http://stackoverflow.com - (tag: appcelerator)
Many groups on LinkedIn and Google+

How to contact me
•
•
•
•
•
•
•

johnjardin.ukuvuma.co.za - (My Blog)
www.ukuvuma.co.za - (Website)
Twitter – (@John_Ukuvuma)
LinkedIn – (John Jardin)
Google+ - (John Jardin)
E-Mail (john.jardin@ukuvuma.co.za)
Skype – (john.v.jardin)

Appcelerator mobile. the doppelgänger to XPages

More Related Content

What's hot (20)

Similar to Appcelerator mobile. the doppelgänger to XPages (20)

Recently uploaded (20)

Appcelerator mobile. the doppelgänger to XPages