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

Pick a card

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)

(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)

^Page("title"); - WebGUI

17

Thursday, 2September 2010 Create base style (head2)

18

Thursday, 2September 2010 Create base style

^AdminBar;

^Page("title");

menu

19

Thursday, 2September 2010 Create base style

20

Thursday, 2September 2010 Create base style

Home Created by Joeri de Bruin Oqapi
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

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

^Page("title");

back menu

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($('

Loading...
'). 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

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:

36

Thursday, 2September 2010