Your SlideShare is downloading. ×

Building iPhone Web Apps using "classic" Domino

3,586

Published on

Presentation at the SocBiz and NLLUG 2012, Rotterdam

Presentation at the SocBiz and NLLUG 2012, Rotterdam

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,586
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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="http://www.google.com/jsapi"></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="jqt.photo.js" 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="jqt.photo.css" />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: http://www.jqtouch.com/ ○ jQuery: http://jquery.com/ ○ AppliGate: http://www.appligate.nl● Download ○ https://docs.google.com/open?id=0B6vS2p8k5hZMT2JiQVNIbjZhNTA ○ Images are copyrighted● Books ○ Building iPhone Apps with HTML, CSS, and JavaScript, Jonathan Stark, OReilly ○ jQuery Pocket Reference, David Flanagan, OReilly

×