Presentation is loading. Please wait.

Presentation is loading. Please wait.

Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 1.

Similar presentations


Presentation on theme: "Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 1."— Presentation transcript:

1 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 1

2 Building Mobile Applications with Oracle Application Express 4.2 Rick Greenwald Director, Product Management, Database Cloud Service

3 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 3 Program Agenda Responsive Design vs. Mobile Optimized Mobile Web Apps Overview jQuery Mobile Introduction Building Mobile Web Apps with Oracle Application Express 4.2

4 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 4 The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracles products remains at the sole discretion of Oracle.

5 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 5 Graphic Section Divider

6 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 6 Responsive Design vs. Mobile Optimized Design To fill a shape with an image. 1.Use existing picture box, DO NOT delete and create new picture box. 2.Right click on the shape. 3.At the bottom of the submenu select Format Shape 4.Select Fill at the top of the Format Shape dialog box. 5.Select Picture or Texture fill from the options. 6.And select File under the Insert from option. 7.Navigate to the file you want to use and select Insert 8.On the Format tab, in the Size group, click on Crop to Fill in the Crop tool and drag the image bounding box to the desired size 9.DELETE THIS INSTRUCTION NOTE WHEN NOT IN USE

7 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 7 Responsive Web Design An approach to web design in which a designer intends to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to mobile phones). (Wikipedia)

8 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 8 Responsive Web Design

9 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 9 Mobile Optimized Separate Desktop and Mobile web pages. The mobile interface is optimized for smaller sized screens, lighter weight and capable of responding to touch events and other device specific events, such as orientation change.

10 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 10 Mobile Optimized

11 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 11 Responsive Design vs. Mobile Optimized Responsive DesignMobile Optimized Single Page for all devicesSeparate Desktop and Mobile pages Long HTML pages and large static files (CSS, JS, images) Light weight HTML and small static file content (CSS, JS, images) Standard browser support, no built-in support for device specific events Out of the box support for touch events, orientation change, native controls, etc. Advanced HTML and CSS skills required to develop truly responsive pages Wizard generated mobile list view, report, form and chart pages require very little HTML knowledge to develop Well suited for marketing pages, public home pages, content catalogs, etc. Easier and faster to use for productivity applications, like customer management apps, business intelligence tools or inventory systems

12 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 12 Mobile Web Apps Overview To fill a shape with an image. 1.Use existing picture box, DO NOT delete and create new picture box. 2.Right click on the shape. 3.At the bottom of the submenu select Format Shape 4.Select Fill at the top of the Format Shape dialog box. 5.Select Picture or Texture fill from the options. 6.And select File under the Insert from option. 7.Navigate to the file you want to use and select Insert 8.On the Format tab, in the Size group, click on Crop to Fill in the Crop tool and drag the image bounding box to the desired size 9.DELETE THIS INSTRUCTION NOTE WHEN NOT IN USE

13 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 13 Mobile Web Apps in APEX 4.2 APEX applications generally work on most modern mobile devices, like iPhone, Android, tablets etc., but standard applications may not be ideal for smaller screens APEX 4.2 provides mobile enabled themes and templates based on jQuery Mobile Provides a more native-like mobile user experience Optimized for mobile screens and touch interfaces

14 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 14 Mobile Web Apps What are mobile web apps? Increasingly popular way to deliver content and business applications to mobile devices Alternative to developing native mobile apps No need for download and installation via an App Store Run on any OS, desktop, tablet, smartphone Require browser and Internet connection

15 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 15 Mobile Web Apps Development and Deployment Easy to develop using standard web technologies and frameworks Web apps are used through a web browser with the bulk of functionally executed on the web server Advances in HTML, CSS and JavaScript allow for shifting more functionality to the browser, providing richer user experience and better performance Easy to maintain and easy roll out updates!

16 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 16 Mobile Web Apps Limitations Browsers do not typically have access to advanced functions of a device, like GPS, camera, address book, etc. *) Web apps are often slower than native apps Mobile web apps require permanent Internet connection Using offline web application caching and platforms like PhoneGap, Titanium, etc. provides ways to address these limitations *) HTML 5 geolocation, File uploads and camera access with Media Capture and File API in iOS6

17 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 17 jQuery Mobile Introduction To fill a shape with an image. 1.Use existing picture box, DO NOT delete and create new picture box. 2.Right click on the shape. 3.At the bottom of the submenu select Format Shape 4.Select Fill at the top of the Format Shape dialog box. 5.Select Picture or Texture fill from the options. 6.And select File under the Insert from option. 7.Navigate to the file you want to use and select Insert 8.On the Format tab, in the Size group, click on Crop to Fill in the Crop tool and drag the image bounding box to the desired size 9.DELETE THIS INSTRUCTION NOTE WHEN NOT IN USE

18 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 18 jQuery Mobile Overview Touch-optimized JavaScript framework for smartphones & tablets Built on jQuery foundation Unified user interface system across all popular mobile platforms Lightweight size and minimal image dependencies for speed Responsive design techniques allow the same underlying codebase to automatically scale from smartphone to tablet and desktop-sized screens

19 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 19 jQuery Mobile Overview AJAX-based navigation system to enable animated page transitions while maintaining back button, bookmarking and and clean URLs Support for touch and mouse events to allow for different user input methods using a simple API Accessibility features like WAI-ARIA integrated throughout framework Support for screen readers and other assistive technologies

20 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 20 jQuery Mobile Differences between jQuery and jQuery Mobile jQuery: Library that makes it easier to write JavaScript through selectors, event handling and support for AJAX requests jQuery Mobile: Framework built on top of jQuery Used by developers to build mobile interfaces Coding is done using plain HTML markup for the most part jQuery Mobile automatically applies styles and add functionality to widgets

21 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 21 jQuery Mobile Progressive enhancement Brings content and functionality to all mobile and desktop platforms Rich, installed application-like experience on newer mobile platforms Basic but functional experience on older and less capable devices

22 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 22 jQuery Mobile Customizable user interface Built-in theming framework ThemeRoller application http://jquerymobile.com/themeroller/

23 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 23 jQuery Mobile Events Touch events: tap, tapholdswipe, swipeleft, swiperight Orientation change event: orientationchange Scroll events: scrollstart, scrollstop Page change events Page transition events Page initialization events

24 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 24 jQuery Mobile Supported Platforms 3-level graded platform support system, supported platforms include: Apple iOS (iPhone, iPod Touch, iPad, iPad Mini) Android Windows Phone Blackberry

25 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 25 jQuery Mobile Basic page template - Header My Page …

26 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 26 jQuery Mobile Basic page template - Body... My Title Hello world

27 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 27 jQuery Mobile Basic List View

    Acura Audi BMW Cadillac Ferrari

    28 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 28 Building Mobile Web Apps with Application Express 4.2 To fill a shape with an image. 1.Use existing picture box, DO NOT delete and create new picture box. 2.Right click on the shape. 3.At the bottom of the submenu select Format Shape 4.Select Fill at the top of the Format Shape dialog box. 5.Select Picture or Texture fill from the options. 6.And select File under the Insert from option. 7.Navigate to the file you want to use and select Insert 8.On the Format tab, in the Size group, click on Crop to Fill in the Crop tool and drag the image bounding box to the desired size 9.DELETE THIS INSTRUCTION NOTE WHEN NOT IN USE

    29 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 29 Building Mobile Web Apps with APEX 4.2 Declarative support for building mobile web applications APEX Applications support multiple user interfaces: e.g. Desktop, Smartphone Mobile pages use jQuery Mobile through jQuery Mobile based theme and templates HTML5 charts and new HTML5 item types

    30 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 30 Building Mobile Web Apps with APEX 4.2 User Interfaces APEX applications can be associated with multiple user interfaces Each user interface is associated with one theme User interface also define device specific login URLs, home page URLs, global pages (page 0) and device auto detection Individual pages support only one user interface Applications to include desktop and mobile specific pages

    31 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 31 Building Mobile Web Apps with APEX 4.2 User Interfaces

    32 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 32 Building Mobile Web Apps with APEX 4.2 Enhanced Wizards Create application wizard allows for selecting user interface Create page wizards show options available for user interfaces currently associated with an application Wizards generate components appropriate for device: Report & Form wizard creates List View & Form for mobile devices Chart wizard creates HTML5 charts for mobile devices Some elements omitted in wizards for mobile, e.g. tabs

    33 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 33 Building Mobile Web Apps with APEX 4.2 Updated Region and Item Types jQuery Mobile list view region: default for mobile navigation, drill-down, certain types of reports, report & form pages Plug-ins to allow for setting of compatibility mode (Desktop / Mobile) Dynamic actions to support touch events, tap, tap & hold, swipe, scrolling, orientation change, etc.

    34 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 34 Updated Region and Item Types New HTML5 item types Date, Email, Number, Tel, Color, Range, …. New HTML5 attributes Auto-complete, max, min, readonly, required, … Mobile Improvements Showing most appropriate keypad, native select lists, data pickers, … Building Mobile Web Apps with APEX 4.2

    35 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 35 List View Region Type Un-ordered list with data-role="listview" Used for data display, navigation, list view and form pages, etc. Full width by default with inset option Automatic dividers Declarative search filter Client and server-side search options Simple list Divided, filterable list Building Mobile Web Apps with APEX 4.2

    36 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 36 Non-Flash Charts Support for Non-Flash charts using Anycharts HTML5 charts For desktop apps, Flash-preferred is used with HTML fall-back For mobile apps charts are created as HTML5-only Building Mobile Web Apps with APEX 4.2

    37 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 37 Mobile Calendars Mobile-friendly calendar templates New list-view for date entries Monthly view to show date entries below calendar on mobile devices Building Mobile Web Apps with APEX 4.2

    38 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 38 Deployment of Mobile Applications In-house applications Deploy to APEX instance in the company internal network Access from outside the network via VPN Public-facing applications Deploy on APEX instance that is accessible from the Internet Deploy to hosted site like the Oracle Cloud

    39 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 39 Deployment of Mobile Applications Open apps in built-in web browser (Safari, Chrome, etc) Add to Home Screen (menu icon, opens app in browser) Native Apps using PhoneGap, Titanium, Rhodes, etc Wrap web app into framework that runs web apps as native apps Access to native features, like GPS, accelerometer, camera, compass Local deployment of CSS, JS, images Distribution via App Store

    40 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 40 Demo Building Mobile Web Apps with APEX 4.2

    41 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 41

    42 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 42


Download ppt "Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12 1."

Similar presentations


Ads by Google