Web applications Developing Android/Iphone Applications using WebGUI

Size: px

Start display at page:

Download "Web applications Developing Android/Iphone Applications using WebGUI"

Patience Byrd
5 years ago
Views:

1 Web applications Developing Android/Iphone Applications using WebGUI Joeri de Bruin Oqapi Software 1

2 Overview Web applications Create WebApp with WebGUI Turn WebApp into native mobile app Advanced WebApp features Examples / Questions? Further Reading 2

3 Web applications More then just a website Extensive use of Javascript One page, no browsing Possible due to frameworks (YUI, JQuery) 3

4 Mobile Applications Applications for mobile devices Can be a WebApp or Native Mobile Create Native Apps from WebApps 4

5 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

6 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

7 But WAIT I don t need WebGUI for this! 7

8 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

9 Some examples Private content Collaboration system extension Shop system Surveys Dynamic content* 9

10 Oqapi App Showcase for a simple App Shows the Oqapi Twitter messages Shows content pages from the Oqapi site 10

11 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

12 Frameworks YUI (WebGUI Native) JQuery* (JQTouch Native) JQTouch* (for that nice iphone feeling) Sencha Touch (Alternative for JQTouch) And many more... 12

13 use JQTouch for styling for nice movements to extend with your own code 13

14 JQTouch Default Styles IPhone style Black JQT style 14

15 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

16 Create Base style Keep it simple Put javascript in separate file Put CSS in separate file Comment what it is 16

17 Create base style (head1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <tmpl_var head.tags> <title>^page("title"); - WebGUI</title> <tmpl_unless session.var.adminon>  <style type="text/css" "/media/js/jqtouch2.css";</style> <style type="text/css" "/media/themes/apple/theme.css";</style> <style type="text/css" "/media/css/mobile.css";</style> 17

18 Create base style (head2) <script src="/media/js/jquery 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=" </script> </tmpl_unless>  </head> 18

19 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

20 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

21 Create base style 21 <div class="info"> <a href="#home" class="graybutton flip">home</a> Created by Joeri de Bruin <a href=" target="_blank"> Oqapi</a> </div>  </div>  <div id="home"> <div class="info"> <tmpl_var body.content> </div> </div> </div>  </tmpl_if>  </body> </html>

22 Create Base Layout template Simplify CSS You do not need admin stuff on mobile admin stuff can interfere with your code 22

23 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

24 Create Page Style Simple style to get contents with Ajax Every page needs unique div id Create Toolbar and Content div 24

25 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

26 Create Navigation For getting pages with Ajax Use full domain name for use with native app 26

27 Create Navigation <tmpl_loop page_loop> <tmpl_if FIRST > <ul id="mainnav"> </tmpl_if> <li class="arrow"> <a href=" page.url>" class="slide"> <tmpl_var page.menutitle> </a> </li> <tmpl_if LAST > </ul> </tmpl_if> </tmpl_loop> 27

28 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

29 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

30 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

31 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

32 Create base page Choose your mobile style Choose your mobile layout template Test it 32

33 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 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

34 Geo location Vibration Accelerometer Sound Camera access Contacts access SQLite functionality Advanced WebApp functions 34

35 Questions 35

36 Further reading Book: Iphone Apps Framework: jqtouch Framework: jquery 36

Theming WebGUI. Give your WebGUI site a new theme... WUC 2010 Ning Sun (ning) Pluton IT

Theming WebGUI. Give your WebGUI site a new theme... WUC 2010 Ning Sun (ning) Pluton IT Theming WebGUI Give your WebGUI site a new theme... WUC 2010 Ning Sun (ning) Pluton IT Outline A step-by-step guide to WebGUI-lize a theme Convert htlm/css template to WebGUI theme Or how to give webgui