Mobile Application Development Kevin Payne & Andi Saputra JWH Group

 Overview of mobile application development  Oracle mobile application development  Oracle ADF Mobile Browser  Oracle ADF Mobile – new release  Oracle Apex 4.2 – mobile features Presented By: Kevin Payne & Andi Saputra From JWH Group / IT

Native ◦ Runs on mobile O/S ◦ Mobile SDK:  xcode  IDE Eclipse (ADT plugin) Browser Based Anything that runs in a web browser !! except……. Hybrid Develop once– repackage for different devices

 Many devices  Many browsers  Many screen sizes

Desktop => Mobile? Desktop Size Trends Current Devices

 One App / Mobile button approach

 HTML5  CSS3  Jquery Mobile  Phone Gap Foundation Technologies

HTML5? Yes or No Header, footer, section, nav tags Ondrag event YES YES NO YES Spellchecker on every html object YES

CSS  Document presentation / content separation.  LAF global control  Same mark-up page presented in different styles eg printer friendly pages CSS3  Modular release: -ms browser specific  New features: ◦ rounded corners ◦ Box shadows ◦ Transparent Colours ◦ Canvas

 Framework  HTML type constructs  Not the same as Jquery  Graded Browser Support Graded Browser Support

Simple ListView Stark Lannister Barratheon Stark Lannister Barratheon Stark Winterfell 100 Lannister Casterly Rock Barratheon Kings Landing

Demo

 iPhone

 Oracle respond to growing mobile market with mobile versions of application development software:

2011 Oracle Corporation

Telephone, & Maps

Phone:

Maps:

‘goLink’ or ‘goButton’ component

Phone: Append ‘tel:’ at the start of destination Append ‘mailto:’ at the start of destination

Maps: Append ‘ at the start of destination then the address string Address string must: - Be well formatted - NOT have any spaces. Space needs to be replaced with plus sign ‘ + ‘ E.g. 80 Walters Drive Osborne Park 6918 must be formatted to 80+Walters+Drive+Osborne+Park+6918

Viewport

default setting

 Viewport need to be set ◦ Different viewport for different mobile device

Default Better!

Skinning

◦ Without Skin ◦ With Skin

◦ ADF Mobile Browser - Stylesheet

 Applying Mobile Browser Skinning ◦ How to apply  “back button”  “other button”

 Applying Mobile Browser Skinning cont. ◦ How to apply – Specify StyleClass 

 Other components that requires manual application ◦ ◦ ….. More on … Or google: Oracle Mobile Browser Developer’s Guide

HTML5 CSS3 Flexible Contents Options Declarative method ADF Mobile XML (AMX) as opposed to JSF or JSPX Local HTML Construct pages with HTML5 and/or Java Script Remote HTML “Embedded browser” inside apps / iFrame / secure ADF Mobile New Features 2011 Oracle Corporation

No Network? No Problem! SQLite for Offline DB Support FREE to use, No license cost Secure Encrypted Communication Channels Integrate with Device Services PhoneGap Java Script interface ADF Mobile New Features 2011 Oracle Corporation

Develop once, Deploy to multiple platform Platform-specific deployment profiles Designed for iOS 5+ and Android 2.3+ Deployment Method Connect and direct deploy Publish apps in Application Store Apple (App Store) Android (Google Play) ADF Mobile New Features 2011 Oracle Corporation

Direct Deployment to Device (Android) Install Android SDK Add required packages ADF Mobile New Features 2011 Oracle Corporation

Direct Deployment to Device (Android) cont. Create Signed Certificate ADF Mobile New Features 2011 Oracle Corporation

Direct Deployment to Device (Android) cont. Create Signed Certificate cont. Tools  Preference  ADF Mobile  Platforms ADF Mobile New Features 2011 Oracle Corporation

Direct Deployment to Device (Android) cont. ADF Mobile New Features 2011 Oracle Corporation

Direct Deployment to Device (Android) cont. ADF Mobile New Features 2011 Oracle Corporation

Publishing to Apple (App Store)Android (Google Play) ADF Mobile New Features 2011 Oracle Corporation

Web App to look like Native app (iOS) ADF Deployment 2011 Oracle Corporation

Web App to look like Native app (iOS) cont. ADF Deployment 2011 Oracle Corporation

 One UI – One Theme  Page 0 auto detect used with multiple logins  One app many UIs  Each page – One Theme Apex 4.2 – UI Changes 2011 Oracle Corporation

 DECLARATIVE Mobile web application building  NB Packaged apps. Mobile is non-declarative  Two approaches to mobile development:  Mobile UI design  Theme 50  Jquery Mobile Smartphone  Responsive UI design  Theme 25  Desktop - Grid Apex 4.2 – Two New Approaches 2011 Oracle Corporation

Demo of mobile Conference Timetable Nb Disclaimer

Demo of Apex 4.2 IPAD development

Demo of Apex 4.2 Responsive Apex App Demo of Apex Sample database App

Things to take away:  HTML5, CSS3,JQUERY, PhoneGap Mobile foundations  Desktop, Tablet, smartphone – one size fits all?  ADF and Apex mobile offerings  What next?  Scott Wesley – A Foray Into Apex. Mobile  Chris Muir – Develop Mobile Apps for Smart Devices: Converging Web and Native Applications  Mark Lancaster - Bootstrapping APEX for Desktops, Tablets and Mobile Devices