Web Applications Developing Android/Iphone Applications Using Webgui

Web applications Developing Android/Iphone Applications using WebGUI Joeri de Bruin Oqapi Software [email protected] 1 Thursday, 2September 2010 Overview Web applications Create WebApp with WebGUI Turn WebApp into native mobile app Advanced WebApp features Examples / Questions? Further Reading 2 Thursday, 2September 2010 Web applications More then just a website Extensive use of Javascript One page, no browsing Possible due to frameworks (YUI, JQuery) 3 Thursday, 2September 2010 Mobile Applications Applications for mobile devices Can be a WebApp or Native Mobile Create Native Apps from WebApps 4 Thursday, 2September 2010 Create WebApp with WebGUI Create a page on your WebGUI site Create Javascript files Create a style template for your app For a mobile app create a mobile style Include Javascript files in styles 5 Thursday, 2September 2010 My First Web app <a href="javascript:void pickACard();">Pick a card</a> <span id='card'></span> <script type="text/javascript"> /* pick a card app */ var cards = ['2','3','4','5','6','7','8','9','10', 'Jack','Queen','King','Ace']; Array.prototype.rndItem=function Array_rndItem() { return this[parseInt(Math.random()*this.length,10)]; } function pickACard(){ document.getElementById('card').innerHTML = cards.rndItem(); } </script> View 6 Thursday, 2September 2010 But WAIT I don’t need WebGUI for this! 7 Thursday, 2September 2010 Use WebGUI Content server Server side business logic Managing your application source Share content for mobile and web Let WebGUI serve mobile style for mobile 8 Thursday, 2September 2010 Some examples Private content Collaboration system extension Shop system Surveys Dynamic content* 9 Thursday, 2September 2010 Oqapi App Showcase for a simple App Shows the Oqapi Twitter messages Shows content pages from the Oqapi site 10 Thursday, 2September 2010 Steps Adjust WebGUI settings Create base style (use framework) Create page style (use framework) Create Navigation and template Create javascript (use framework) Create base page for app 11 Thursday, 2September 2010 Frameworks YUI (WebGUI Native) JQuery* (JQTouch Native) JQTouch* (for that nice iPhone feeling) Sencha Touch (Alternative for JQTouch) And many more...... 12 Thursday, 2September 2010 use JQTouch for styling for nice movements to extend with your own code 13 Thursday, 2September 2010 JQTouch Default Styles IPhone style Black JQT style 14 Thursday, 2September 2010 Adjust WebGUI settings Set ‘Use mobile style’ to ‘Yes’ in Settings, UI tab For the use of frameworks in the uploads set "enableStreamingUploads" : "1" in your config file. 15 Thursday, 2September 2010 Create Base style Keep it simple Put javascript in separate file Put CSS in separate file Comment what it is 16 Thursday, 2September 2010 Create base style (head1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tmpl_var head.tags> <title>^Page("title"); - WebGUI</title> <tmpl_unless session.var.adminOn>  <style type="text/css" media="screen"> @import "/media/js/jqtouch2.css";</style> <style type="text/css" media="screen"> @import "/media/themes/apple/theme.css";</style> <style type="text/css" media="screen"> @import "/media/css/mobile.css";</style> 17 Thursday, 2September 2010 Create base style (head2) <script src="/media/js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"> </script> <script src="/media/js/jqtouch2.js" type="application/x-javascript" charset="utf-8"> </script> <script src="/media/js/iphone.js" type="application/x-javascript" charset="utf-8"> </script> <script src="http://widgets.twimg.com/j/2/widget.js"> </script> </tmpl_unless>  </head> 18 Thursday, 2September 2010 Create base style <body> <tmpl_if session.var.adminOn>  ^AdminBar; <tmpl_var body.content> <tmpl_else> <div id="jqt"> <div id="twitter" class="current"> <div class="toolbar"> <h1>^Page("title");</h1>  <a id="menulink" href="/media/navigation/mobile_home" class="button slideup">menu</a> </div>  19 Thursday, 2September 2010 Create base style <div class="info">  <script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 300, theme:{ shell:{background:'#333333',color:'#ffffff'}, tweets:{background:'#000000',color:'#ffffff'} }, features: {scrollbar: false,loop: false,live: false, hashtags: true,timestamp: true,avatars: false, behavior: 'all' } }).render().setUser('oqapi').start(); </script> </div>  20 Thursday, 2September 2010 Create base style <div class="info"> <a href="#home" class="grayButton flip">Home</a> Created by Joeri de Bruin <a href="http://www.oqapi.nl" target="_blank"> Oqapi</a> </div>  </div>  <div id="home"> <div class="info"> <tmpl_var body.content> </div> </div> </div>  </tmpl_if>  </body> </html> 21 Thursday, 2September 2010 Create Base Layout template Simplify CSS You do not need admin stuff on mobile admin stuff can interfere with your code 22 Thursday, 2September 2010 Create Base Layout <tmpl_if displayTitle> <h2><tmpl_var title></h2> </tmpl_if> <tmpl_if description> <tmpl_var description> </tmpl_if>  <tmpl_loop position1_loop> <tmpl_var content> </tmpl_loop>  23 Thursday, 2September 2010 Create Page Style Simple style to get contents with Ajax Every page needs unique div id Create Toolbar and Content div 24 Thursday, 2September 2010 Create Page Style <div id="user^Page("assetId");"> <div class="toolbar"> <h1>^Page("title");</h1> <a href="#" class="back">back</a> <a id="menulink" href="#menu" class="button slideup"> menu</a> </div> <div class="info"> <tmpl_var body.content> </div> </div> 25 Thursday, 2September 2010 Create Navigation For getting pages with Ajax Use full domain name for use with native app 26 Thursday, 2September 2010 Create Navigation <tmpl_loop page_loop> <tmpl_if __FIRST__> <ul id="mainNav"> </tmpl_if> <li class="arrow"> <a href="http://www.oqapi.nl/<tmpl_var page.url>" class="slide"> <tmpl_var page.menuTitle> </a> </li> <tmpl_if __LAST__> </ul> </tmpl_if> </tmpl_loop> 27 Thursday, 2September 2010 Create Javascript This is where the real coding is Use different files / objects as you would do in your own natural programming Use Frameworks 28 Thursday, 2September 2010 Add Javascript // First create a JQTouch object var jQT = $.jQTouch({ icon: '^FileUrl(media/images/logo_oqapi_icon.png);', addGlossToIcon: false, startupScreen: '^FileUrl(media/images/logo_oqapi.png);', statusBar: 'black' }); 29 Thursday, 2September 2010 Add Javascript // Create an initialize function to add some functionality $(function(){ // warn user about links outside application $('a[target="_blank"]').click(function() { if (confirm('This link opens in a new window.')) { return true; } else { $(this).removeClass('active'); return false; } }); 30 Thursday, 2September 2010 Add Javascript // Page animations end with AJAX callback event, // (load remote HTML only first time) $('#menu').bind('pageAnimationEnd', function(e, info){ if (!$(this).data('loaded')){ $(this).append($('<div>Loading...</div>'). load('/media/navigation/mobile_home', function() { $(this).parent().data('loaded', true); })); } }); // #menu function }); // main function 31 Thursday, 2September 2010 Create base page Choose your mobile style Choose your mobile layout template Test it 32 Thursday, 2September 2010 Turn WebApp into native mobile app Download PhoneGap (For IPhone app, Mac is required) Install PhoneGap Create Project in Xcode Get your main page incl. images/js/css (wget --user-agent="iPhone" -p -k http://www.oqapi.nl/index.html) Add Phonegap.js to your main page <script src="phonegap.js" type="text/x-javascript" charset="utf-8"></script> Add icon and startup screen Build and Run in simulator Submit to ITunes 33 Thursday, 2September 2010 Advanced WebApp functions Geo location Vibration Accelerometer Sound Camera access Contacts access SQLite functionality 34 Thursday, 2September 2010 Questions 35 Thursday, 2September 2010 Further reading Book: Iphone Apps Framework: jqtouch Framework: jquery 36 Thursday, 2September 2010.

Web Applications Developing Android/Iphone Applications Using Webgui

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support