1. Mobile Application Development Kevin Payne & Andi Saputra JWH Group

2.  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

15. 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

16.  Many devices  Many browsers  Many screen sizes

17. Desktop => Mobile? Desktop Size Trends Current Devices

18.  One App / Mobile button approach

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

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

21. 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

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

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

25. Demo

27.  iPhone

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

29. 2011 Oracle Corporation

30. Telephone, Email & Maps

31. Phone: Email:

32. Maps:

33. ‘goLink’ or ‘goButton’ component

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

35. Maps: Append ‘http://maps.google.com/maps?q=’ 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

36. Viewport

37. default setting

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

39. Default Better!

40. Skinning

41. ◦ Without Skin ◦ With Skin

42. ◦ ADF Mobile Browser - Stylesheet

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

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

45.  Other components that requires manual application ◦ ◦ ….. More on … http://bit.ly/listOfUnskinnedComp http://bit.ly/11gR2AdfMobBrowDevGuide Or google: Oracle Mobile Browser Developer’s Guide

46. 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

47. 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

48. 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

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

50. Direct Deployment to Device (Android) cont. Create Signed Certificate http://bit.ly/AndroidSelfSignedCert ADF Mobile New Features 2011 Oracle Corporation

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

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

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

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

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

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

57.  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

58.  DECLARATIVE Mobile web application building  NB Packaged apps. Mobile is 4.1.1 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

59. Demo of mobile Conference Timetable Nb Disclaimer

60. Demo of Apex 4.2 IPAD development

75. Demo of Apex 4.2 Responsive Apex App Demo of Apex 4.1.1 Sample database App

76. 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