Appcelerator mobile. the doppelgänger to XPages

2,013 views
1,884 views

Published on

Slides for DanNotes. (November 2013)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,013
On SlideShare
0
From Embeds
0
Number of Embeds
999
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Appcelerator mobile. the doppelgänger to XPages

  1. 1. Appcelerator Mobile. The Doppelgänger to XPages Another Story by John Jardin
  2. 2. 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.
  3. 3. 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?
  4. 4. 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.
  5. 5. 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.
  6. 6. 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?
  7. 7. System Requirements • Appcelerator Account (Register on appcelerator.com). • Mac, Windows, Linux. • At least 1 SDK (iOS, Android, BB10, Tizen).
  8. 8. 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.
  9. 9. Download Titanium Studio
  10. 10. Log into Titanium Studio
  11. 11. Validate SDKs in Titanium Studio
  12. 12. 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?
  13. 13. Create a new Mobile Project • Example Info Required: • Project Name (DanNotes) • App ID (com.ukuvuma.dannotes) • Deployment Targets (iPhone, iPad, Android, etc.)
  14. 14. 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?
  15. 15. 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.
  16. 16. 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?
  17. 17. 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>
  18. 18. 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>
  19. 19. Remove XML Header <?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>
  20. 20. 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>
  21. 21. Remove reference to Stylesheet <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>
  22. 22. 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>
  23. 23. 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: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>
  24. 24. 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>
  25. 25. 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>
  26. 26. Both <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> <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>
  27. 27. 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?
  28. 28. 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.
  29. 29. 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.
  30. 30. 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.
  31. 31. 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.
  32. 32. Authenticate with a Domino Server Execute a function called “signIn()”
  33. 33. Authenticate with a Domino Server function signIn() { //First validate fields var username = $.username.value; var password = $.password.value; //Add your code here } return true;
  34. 34. Authenticate with a Domino Server //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);
  35. 35. 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;
  36. 36. Create and save Notes Document function 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;
  37. 37. Run XAgent function runXAgent(){ var db = ss.getDatabase(con, "crm.nsf"); db.runXAgent(”getClients.xsp", {processType:"1"}, processRunXAgent, null); return true; }
  38. 38. 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.
  39. 39. 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+
  40. 40. 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)
  41. 41. Thank you 

×