web applications€¦ · developing android/iphone applications using webgui 1 thursday, 2september...
TRANSCRIPT
Web applications
Joeri de Bruin
Oqapi Software
Developing Android/Iphone Applications using WebGUI
1
Thursday, 2September 2010
OverviewWeb applicationsCreate WebApp with WebGUITurn WebApp into native mobile appAdvanced WebApp featuresExamples / Questions?Further Reading
2
Thursday, 2September 2010
Web applicationsMore then just a websiteExtensive use of JavascriptOne page, no browsingPossible due to frameworks (YUI, JQuery)
3
Thursday, 2September 2010
Mobile ApplicationsApplications for mobile devicesCan be a WebApp or Native MobileCreate Native Apps from WebApps
4
Thursday, 2September 2010
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
<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
But WAIT
I don’t need WebGUI for
this!
7
Thursday, 2September 2010
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
Some examplesPrivate contentCollaboration system extensionShop systemSurveysDynamic content*
9
Thursday, 2September 2010
Oqapi AppShowcase for a simple AppShows the Oqapi Twitter messagesShows content pages from the Oqapi site
10
Thursday, 2September 2010
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
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 JQTouchfor stylingfor nice movementsto extend with your own code
13
Thursday, 2September 2010
JQTouch Default Styles IPhone styleBlack JQT style
14
Thursday, 2September 2010
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
Create Base styleKeep it simplePut javascript in separate filePut CSS in separate fileComment what it is
16
Thursday, 2September 2010
<!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
<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
<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
<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
<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
Create Base Layout templateSimplify CSSYou do not need admin stuff on mobileadmin stuff can interfere with your code
22
Thursday, 2September 2010
<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
Create Page StyleSimple style to get contents with AjaxEvery page needs unique div idCreate Toolbar and Content div
24
Thursday, 2September 2010
<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
Create NavigationFor getting pages with AjaxUse full domain name for use with native app
26
Thursday, 2September 2010
<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
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
// 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
// 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 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
Create base pageChoose your mobile style Choose your mobile layout templateTest it
32
Thursday, 2September 2010
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
Geo locationVibrationAccelerometerSoundCamera accessContacts accessSQLite functionality
34
Advanced WebApp functions
Thursday, 2September 2010
35
Questions
Thursday, 2September 2010
36
Further readingBook: Iphone Apps
Framework: jqtouch
Framework: jquery
Thursday, 2September 2010