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.



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.

Download Titanium Studio

Log into Titanium Studio

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.



<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 - Appcelerator

<?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:div styleClass="separator"></xp:div> <xp:inputText id="username" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:label value="Password" id="label2" styleClass="label"></xp:label> <xp:div styleClass="separator"></xp:div> <xp:inputText id="password" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:button value="Submit" id="button" styleClass="button"></xp:button> </xp:div></xp:view>

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:div styleClass="separator"></xp:div> <xp:inputText id="username" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:label value="Password" id="label2" styleClass="label"></xp:label> <xp:div styleClass="separator"></xp:div> <xp:inputText id="password" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:button value="Submit" id="button" styleClass="button"></xp:button> </xp:div></xp:view>

Remove XML Header

<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:div styleClass="separator"></xp:div> <xp:inputText id="username" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:label value="Password" id="label2" styleClass="label"></xp:label> <xp:div styleClass="separator"></xp:div> <xp:inputText id="password" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:button value="Submit" id="button" styleClass="button"></xp:button> </xp:div></xp:view>

Remove XML Header

<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:div styleClass="separator"></xp:div> <xp:inputText id="username" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:label value="Password" id="label2" styleClass="label"></xp:label> <xp:div styleClass="separator"></xp:div> <xp:inputText id="password" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:button value="Submit" id="button" styleClass="button"></xp:button> </xp:div></xp:view>

Remove reference to Stylesheet

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<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:div styleClass="separator"></xp:div> <xp:inputText id="username" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:label value="Password" id="label2" styleClass="label"></xp:label> <xp:div styleClass="separator"></xp:div> <xp:inputText id="password" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:button value="Submit" id="button" styleClass="button"></xp:button> </xp:div></xp:view>

Remove reference to Stylesheet


<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:div styleClass="separator"></xp:div> <xp:inputText id="username" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:label value="Password" id="label2" styleClass="label"></xp:label> <xp:div styleClass="separator"></xp:div> <xp:inputText id="password" styleClass="field"></xp:inputText> <xp:div styleClass="separator"></xp:div> <xp:button value="Submit" id="button" styleClass="button"></xp:button> </xp:div></xp:view>

Remove Style Separators


<xp:div styleClass="window"> <xp:image url="/UkuvumaLogoOnly.png" id="image1" styleClass="image"></xp:image> <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 Style Separators

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:div styleClass="window"> <xp:image url="/UkuvumaLogoOnly.png" id="image1" styleClass="image"></xp:image> <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>

Code for Login Page – XPages

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:div styleClass="window"> <xp:image url="/UkuvumaLogoOnly.png" id="image1" styleClass="image"></xp:image> <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>

Both

<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()”

Authenticate with a Domino Serverfunction signIn() { //First validate fields var username = $.username.value; var password = $.password.value;

//Add your code here

return true;}

Authenticate with a Domino Server//Add your code here (From Previous Slide)var Session = require('TiDomino');var ss = new Session();

//Create Server Connectionvar serverKey = "acme"; //Any Keyvar 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 Documentfunction submitNotesDocument(){ var db = ss.getDatabase(con, "crm.nsf"); var doc = db.createDocument({ Form:'TitaniumDoc', Status:'New’ });

doc.Title = "Test Title";

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

Run XAgent

function runXAgent(){ var db = ss.getDatabase(con, "crm.nsf"); 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 ([email protected])• Skype – (john.v.jardin)

Thank you

Technology

Appcelerator mobile. the doppelgänger to XPages