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
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)
17
Thursday, 2September 2010 Create base style (head2)
18
Thursday, 2September 2010 Create base style
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
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
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
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($('
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
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