Your SlideShare is downloading. ×
Building iPhone Web Apps using "classic" Domino
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building iPhone Web Apps using "classic" Domino


Published on

Presentation at the SocBiz and NLLUG 2012, Rotterdam

Presentation at the SocBiz and NLLUG 2012, Rotterdam

Published in: Education, Technology, Design

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. BuildingiPhone Web Apps using"classic" Domino Rob Bontekoe
  • 2. AppliGates Working Area● Since 1994 Domino courses● Since 2009 XPages coursesand since 2011...● GAE Restful web apps● GAE Servlet + JSP ○ Mobile Web 2.0 Apps ■ HTML5 + JavaScript + jQuery + jqTouch ■ Also possible with "classic" Domino
  • 3. Agenda iPhone Web Apps● Demo application● Required knowledge ○ Structure of a mobile web app ○ Initializing the app ○ Registering event handlers ○ Communication with servers using AJAX● Using "classic" Domino ○ Design ○ <head> tag ○ <body> tag● Summary and references
  • 4. DemoA smartphone web app to register school kidsfor a course after school time:● Overview courses● Registration form● Photo album with Picasa links● Video album with YouTube links● About
  • 5. Structure of a Web App <!-- e.g. jQTouch css classes --><html> <ul class="rounded"><head><!-- .js and .css files --></head> <li class="arrow"><body> <a class="flip" href="#infoCursussen"> Page Header <img src="pens.png" /><div id="home" class="current"> Welke cursus?<div class="toolbar"><h1>Kinderopvang</h1></div> </a><!-- Page Body e.g. navigation links --> </li></div> </ul><div id="infoCursussen"><div class="toolbar"><h1>Info cursussen</h1><a class="back" href="#">Back</a></div><!-- Content and/or Links --></div></body> JavaScript frameworks, here jQTouch,</html> takes care of displaying one <div>-section (= page) at a time
  • 6. JavaScript Frameworks● XPages app with Mobile controls● jQTouchjQuery plugin● Etc.
  • 7. Initializing App// In sb.js, application specific JavaScript libraryvar jQT = $.jQTouch( { icon: "icon.png", // 32 x 32 px startupScreen: "startup.jpg", // 320 x 460 px statusBar : "black", fixedViewPort : true});// check kind of browservar userAgent = navigator.userAgent.toLowerCase();var isiPhone = (userAgent.indexOf(iphone) != -1|| userAgent.indexOf(ipod) != -1 || userAgent.indexOf(ipad) != -1) ? true :false;var clickEvent = isiPhone ? tap : click;
  • 8. Register an Event Handler the function will be invoked when the document has been loaded and the DOM is ready to be manipulated.$( function() { id used in button on HTML page $("#aanmeldButton").bind(clickEvent, function(e) { // get selected course html tag reference var selectedCourse = $("input:radio[name=course]:checked").val(); // set hidden field #course on #aanmelden form $("#course").val(selectedCourse); // add HTML to paragraph #myText on #aanmelden form $("#myText").html("<i>Aanmelding voor:</i><br />" + selectedCourse); // goto #aanmelden form jQT.goTo($("#aanmelden")); });});// $("#element_id") similair to getElementById("element_id")
  • 9. Communication with Serverfunction saveData() { // serialize form data var dataRegistrationForm = $("#aanmelden").serialize(); // AJAX get call $.get("(thankyou)?openagent", dataRegistrationForm, Callback function. function(data) { Domino agent returns a string. $("#message").prepend(data); Variable "data" jQT.goTo("#confirm"); refers to this }, (HTML) string. "html" );}
  • 10. Multiple Elements with Same ID<a id="showImage" href="#" path="" link="1.jpg,2.jpg "pictureTitle="Striptekenschool" caption="Gerben,Rob"><img src="cover.jpg" height="200" class="pic"></img></a>// Attach handler to one/more events for all elements that match #showImagevar gallery, captions;$(document).delegate( "#showImage", clickEvent, function() { // remove old gallery // build photo array // code // build captions array } // create dynamically <div> section for gallery // show <div> section);
  • 11. Call Back Functionfunction() { if (gallery != null) {gallery.remove()} var photoArray = $(this).attr("link").split(","); var photoObjectArray = new Array(); var captionArray = $(this).attr("caption").split(","); for (i = 0; i < photoArray.length; i++) { photoObjectArray[i] = {src : "" + $(this).attr("path") + photoArray[i], caption : "<font style=background-color:#999;width: 80%;>" + captionArray[i] + "</font>"}; } gallery = jQT.generateGallery("photo", photoObjectArray, { //code next page }); jQT.goTo($("#photo"));}
  • 12. Generate Gallerygallery = jQT.generateGallery("photo", photoObjectArray, { backLink : <a class="back" href="#">Back</a>, galleryName : <font style="font-size: 75%"> + $(this) .attr("pictureTitle") + ({0} of {1})</font>, galleryTemplate : <div class="jqt-photo"> + <div class="toolbar toolbar-top"></div> + <table class="jqt-photo-table"> + <tr class="jqt-photo-slide-list"></tr> + </table> + <div class="toolbar toolbar-bottom"> + <div class="jqt-photo-prev"></div> + <div class="jqt-photo-pause"></div> + <div class="jqt-photo-play"></div> + <div class="jqt-photo-next"></div> + </div> + </div>});
  • 13. HTML5 <input> Tag Attributes<input type="text" placeholder="Vul naam deelnemer in" name="student1" id="student1" autocapitalize="on" autocorrect="off" autocomplete="off" />placeholder● instructions in field itselfNew type values:● tel● email● url● number
  • 14. Using "classic" Domino● Design● HTML header● Body
  • 15. Domino NSF Folder Structure
  • 16. DesignOne HTML page● Domino Page - index.html● Properties info tab: Content type: HTML● <head> ○ References to JS Libraries and .css files● <body> ○ Embedded View
  • 17. <head>1 <head>2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />3 <meta name="viewport" content="user-scalable=no, width=device-width" />4 <script type="text/javascript" src=""></script>5 <script type="text/javascript">google.load("jquery", "1.4.2"); </script>6 <script type="text/javascript" src="jqtouch.js" charset="utf-8"></script>7 <script type="text/javascript" src="" charset="utf-8"></script>8 <script type="text/javascript" src="sb.js"></script>9 <link rel="stylesheet" type="text/css" href="jqtouch.css" />10 <link rel="stylesheet" type="text/css" href="theme.css" />11 <link rel="stylesheet" type="text/css" href="" />12 <title>Striptekenen</title>13 </head>
  • 18. BodyEmbedded View● Easiest way to manage mobile web app pages● View properties advanced tab: Treat content as HTML● View contains documents ○ each document has a field that contains a <div> section ○ if necessary an agent for creating nested navigations links from other Domino views
  • 19. Summary● Build easy and quick very nice looking mobile web apps ○ HTML5 browser needed ○ iPhone, iPod, iPad ■ Activate jQTouch: icon and splash image● Domino as a platform ○ Lot of HTML and JavaScript ○ Some knowledge of jQuery is required ○ Use Views to keep structure under control ○ Name conventions ○ jqTouch makes it all work
  • 20. References● Web sites ○ jQTouch: ○ jQuery: ○ AppliGate:● Download ○ ○ Images are copyrighted● Books ○ Building iPhone Apps with HTML, CSS, and JavaScript, Jonathan Stark, OReilly ○ jQuery Pocket Reference, David Flanagan, OReilly