Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September...
Transcript of Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September...
![Page 1: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/1.jpg)
Web applications
Joeri de Bruin
Oqapi Software
Developing Android/Iphone Applications using WebGUI
1
Thursday, 2September 2010
![Page 2: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/2.jpg)
OverviewWeb applicationsCreate WebApp with WebGUITurn WebApp into native mobile appAdvanced WebApp featuresExamples / Questions?Further Reading
2
Thursday, 2September 2010
![Page 3: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/3.jpg)
Web applicationsMore then just a websiteExtensive use of JavascriptOne page, no browsingPossible due to frameworks (YUI, JQuery)
3
Thursday, 2September 2010
![Page 4: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/4.jpg)
Mobile ApplicationsApplications for mobile devicesCan be a WebApp or Native MobileCreate Native Apps from WebApps
4
Thursday, 2September 2010
![Page 5: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/5.jpg)
5
Create WebApp with WebGUICreate a page on your WebGUI siteCreate Javascript files Create a style template for your appFor a mobile app create a mobile styleInclude Javascript files in styles
Thursday, 2September 2010
![Page 6: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/6.jpg)
<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
My First Web app
6
Thursday, 2September 2010
![Page 7: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/7.jpg)
But WAIT
I don’t need WebGUI for
this!
7
Thursday, 2September 2010
![Page 8: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/8.jpg)
Use WebGUI Content serverServer side business logicManaging your application sourceShare content for mobile and webLet WebGUI serve mobile style for mobile
8
Thursday, 2September 2010
![Page 9: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/9.jpg)
Some examplesPrivate contentCollaboration system extensionShop systemSurveysDynamic content*
9
Thursday, 2September 2010
![Page 10: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/10.jpg)
Oqapi AppShowcase for a simple AppShows the Oqapi Twitter messagesShows content pages from the Oqapi site
10
Thursday, 2September 2010
![Page 11: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/11.jpg)
Steps Adjust WebGUI settingsCreate base style (use framework)Create page style (use framework)Create Navigation and templateCreate javascript (use framework)Create base page for app
11
Thursday, 2September 2010
![Page 12: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/12.jpg)
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
![Page 13: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/13.jpg)
use JQTouchfor stylingfor nice movementsto extend with your own code
13
Thursday, 2September 2010
![Page 14: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/14.jpg)
JQTouch Default Styles IPhone styleBlack JQT style
14
Thursday, 2September 2010
![Page 15: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/15.jpg)
Adjust WebGUI settingsSet ‘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
![Page 16: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/16.jpg)
Create Base styleKeep it simplePut javascript in separate filePut CSS in separate fileComment what it is
16
Thursday, 2September 2010
![Page 17: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/17.jpg)
<!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> <!-- admin bar will not render in jQTouch env --> <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>
Create base style (head1)
17
Thursday, 2September 2010
![Page 18: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/18.jpg)
<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><!-- admin bar will not render in jQTouch env --> </head>
Create base style (head2)
18
Thursday, 2September 2010
![Page 19: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/19.jpg)
<body><tmpl_if session.var.adminOn> <!-- admin bar will not render in jQTouch env --> ^AdminBar; <tmpl_var body.content><tmpl_else><div id="jqt"> <div id="twitter" class="current"> <div class="toolbar"> <h1>^Page("title");</h1> <!-- add menu button upper right corner --> <a id="menulink" href="/media/navigation/mobile_home" class="button slideup">menu</a> </div> <!-- class="toolbar" -->
Create base style
19
Thursday, 2September 2010
![Page 20: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/20.jpg)
<div class="info"><!-- start twitter script --><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> <!-- class="info" -->
Create base style
20
Thursday, 2September 2010
![Page 21: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/21.jpg)
<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> <!-- class="info" --> </div> <!-- id="twitter" --> <div id="home"> <div class="info"> <tmpl_var body.content> </div> </div></div><!-- id="jqt" --></tmpl_if><!-- session.var.adminOn --></body></html>
Create base style
21
Thursday, 2September 2010
![Page 22: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/22.jpg)
Create Base Layout templateSimplify CSSYou do not need admin stuff on mobileadmin stuff can interfere with your code
22
Thursday, 2September 2010
![Page 23: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/23.jpg)
<tmpl_if displayTitle> <h2><tmpl_var title></h2></tmpl_if>
<tmpl_if description> <tmpl_var description></tmpl_if>
<!-- begin position 1 --> <tmpl_loop position1_loop> <tmpl_var content> </tmpl_loop><!-- end position 1 -->
Create Base Layout
23
Thursday, 2September 2010
![Page 24: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/24.jpg)
Create Page StyleSimple style to get contents with AjaxEvery page needs unique div idCreate Toolbar and Content div
24
Thursday, 2September 2010
![Page 25: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/25.jpg)
<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>
Create Page Style
25
Thursday, 2September 2010
![Page 26: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/26.jpg)
Create NavigationFor getting pages with AjaxUse full domain name for use with native app
26
Thursday, 2September 2010
![Page 27: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/27.jpg)
<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>
Create Navigation
27
Thursday, 2September 2010
![Page 28: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/28.jpg)
Create Javascript This is where the real coding isUse different files / objects as you would do in your own natural programming
Use Frameworks
28
Thursday, 2September 2010
![Page 29: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/29.jpg)
// First create a JQTouch objectvar jQT = $.jQTouch({ icon: '^FileUrl(media/images/logo_oqapi_icon.png);', addGlossToIcon: false, startupScreen: '^FileUrl(media/images/logo_oqapi.png);', statusBar: 'black'});
Add Javascript
29
Thursday, 2September 2010
![Page 30: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/30.jpg)
// 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; } });
Add Javascript
30
Thursday, 2September 2010
![Page 31: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/31.jpg)
// 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
Add Javascript
31
Thursday, 2September 2010
![Page 32: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/32.jpg)
Create base pageChoose your mobile style Choose your mobile layout templateTest it
32
Thursday, 2September 2010
![Page 33: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/33.jpg)
Download PhoneGap (For IPhone app, Mac is required)
Install PhoneGapCreate Project in XcodeGet 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 screenBuild and Run in simulatorSubmit to ITunes
33
Turn WebApp into native mobile app
Thursday, 2September 2010
![Page 34: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/34.jpg)
Geo locationVibrationAccelerometerSoundCamera accessContacts accessSQLite functionality
34
Advanced WebApp functions
Thursday, 2September 2010
![Page 35: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/35.jpg)
35
Questions
Thursday, 2September 2010
![Page 36: Web applications€¦ · Developing Android/Iphone Applications using WebGUI 1 Thursday, 2September 2010. Overview Web applications Create WebApp with WebGUI Turn WebApp into native](https://reader036.fdocuments.us/reader036/viewer/2022063011/5fc5a7c2905e0a236d5cb55b/html5/thumbnails/36.jpg)
36
Further readingBook: Iphone Apps
Framework: jqtouch
Framework: jquery
Thursday, 2September 2010