Oracle Application Express 5 - PowerPoint Presentation

Slide1
Slide2

Oracle Application Express 5Mobile Development

<Name><Title><Organization><Date>Slide3
Slide4

What I want you to take away from today…The difference between “Native” and “Web-based” mobile applicationsThe advantages of Mobile-first applicationsYou can build Web-based mobile applications very quickly and easily with Oracle Application Express

4Slide5

Agenda1

2

3

4

5

Mobile Development Techniques

jQuery Mobile Overview

Building Mobile Apps with Oracle Application Express 5.0

Testing and Debugging your Mobile App

Deploying Mobile Apps

Oracle Confidential – Internal/Restricted/Highly Restricted

5Slide6

1

2

3

4

5

Mobile

Application Development

jQuery Mobile Overview

Building Mobile Apps with Oracle Application Express 5.0

Testing and Debugging your Mobile App

Deploying Mobile Apps

Oracle Confidential – Internal/Restricted/Highly Restricted

6Slide7

Mobile Application DevelopmentNative AppsApps built for a specific platformUsing platform specific language and tools Pros: Full access to device’s hardware and APIs

Potentially better performanceOffline useCons:Separate codebase for different platformsExpensive to build, maintain and distributeOracle Confidential – Internal/Restricted/Highly Restricted7Slide8

Mobile Application DevelopmentMobile Web AppsApps developed using HTML/CSS/JavaScriptPros: Can be accessed by any device with a web browserUses standard Web technologies

Easy to deploy and update on the serverMedia Capture, HTML5 Geolocation APIs Cons:Limited access to device specific hardware and APIsRequires permanent Internet connectionOracle Confidential – Internal/Restricted/Highly Restricted

8Slide9

Mobile Application DevelopmentHybrid AppsApps developed using Web technologies – deployed as native appWrapped in platform-specific container using e.g. PhoneGap / CordovaPros:

Single code base due to use of Web technologiesAccess to device specific APIsCons:Subject to store approval – best suited for apps installed locally on deviceSecurity model requires whitelisting of outside domainsOracle Confidential – Internal/Restricted/Highly Restricted

9Slide10

Mobile Application DevelopmentMobile Development with Oracle Application ExpressBuild mobile web apps using standard APEX toolsIntroduced with APEX 4.2 in 2012jQuery Mobile framework used to render mobile UI

Supports wide variety of mobile platformsResponsive features scale to different screen sizesResponds to touch events and orientation changeEasy to modify UI look & feel through ThemeRollerOracle Confidential – Internal/Restricted/Highly Restricted10Slide11

Mobile Application DevelopmentUniversal Theme vs. Mobile ThemeUniversal Theme allows for building pages thatscale to different screen sizesjQuery Mobile theme designed to build dedicated mobile pages, either for mobile-only apps or to complement desktop pages

Both use responsive design techniques for optimal use of screen real estatejQuery Mobile theme provides out-of-the-box support for touch events, orientation change, native form elementsjQuery Mobile pages generally lighter weight and optimized for smaller screen / lower bandwidth useOracle Confidential – Internal/Restricted/Highly Restricted11Slide12

1

2

3

4

5

Mobile Development Techniques

jQuery Mobile Overview

Building Mobile Apps with Oracle Application Express 5.0

Testing and Debugging your Mobile App

Deploying Mobile Apps

Oracle Confidential – Internal/Restricted/Highly Restricted

12Slide13

jQuery MobileOne Code Base, All PlatformsWorks everywhere Built on standardsBuilt on top of jQuery CoreMobile-first not Mobile-Only

Oracle Confidential – Internal/Restricted/Highly Restricted13jQuery Mobile PhilosophySlide14

jQuery MobileUnified user interface across all popular mobile platformsUser Experience based on device capabilities Lightweight size and minimal image dependencies for speedAccessibility features like WAI-ARIA integrated in frameworkSupport for screen readers and other assistive technologiesAJAX based page load and HTML5 pushstate

used for smooth / native-like page transitionsOracle Confidential – Internal/Restricted/Highly Restricted14FeaturesSlide15

jQuery MobileForm inputs enhanced to be touch-friendlyTouch-friendly UI widgetsAuto-enhances forms to become touch-friendlyAuto-grows textareasDesigned to be touch-first Oracle Confidential – Internal/Restricted/Highly Restricted

15Touch-friendly form inputs and UI widgets Slide16

jQuery MobilePanel WidgetResponsive DesignReflow Table, Column Toggle, Responsive GridsDefault Theme ImprovementsNew default theme - Flat look, two swatches, everything

defaults to swatch ASwitching icons from sprites to SVG with fallback Review of all Widgets (widget factory, performance)jQuery Mobile 1.4 Upgrade Guide: http://jquerymobile.com/upgrade-guide/1.4/Oracle Confidential – Internal/Restricted/Highly Restricted

16

New Features jQuery Mobile 1.3/1.4Slide17

1

2

3

4

5

Mobile Development Techniques

jQuery Mobile Overview

Building Mobile Apps with Oracle Application Express 5.0

Testing and Debugging your Mobile App

Deploying Mobile Apps

Oracle Confidential – Internal/Restricted/Highly Restricted

17Slide18

Building Mobile Apps with APEX 5.0Build mobile apps with the tools you knowDeclarative wizards, drag & drop page layoutWorks on any browser: Desktop, Laptop, Tablet, SmartphoneSupports Forms, Reports, HTML5 charts, Calendars, List Views, etc.

Build mobile-only apps or apps with Desktop and Mobile pagesAuto-detection takes user to appropriate pages based on device usedOracle Confidential – Internal/Restricted/Highly Restricted18

OverviewSlide19

Building Mobile Apps with APEX 5.0Apps can have multiple User InterfacesEach User Interface is associated with one ThemeIndividual Pages can have only one User InterfaceUser Interface defines:

Login URLsUI specific home pagesGlobal PagesAuto DetectionOracle Confidential – Internal/Restricted/Highly Restricted19

User InterfacesSlide20

Building Mobile Apps with APEX 5.0

All top level pages added to Navigation ListNavigation lists in Mobile apps are implemented as menu panelsShown on the left with menu button shown in top barCustom panels using “Panel” region templateChoice of display modes: Overlay, Reveal, Pushdata-role="panel"Oracle Confidential – Internal/Restricted/Highly Restricted

20

Navigation menus and slide panelsSlide21

Building Mobile Apps with APEX 5.0Default View for data display, navigation, drill-down view Based on unordered listAutomatic Dividers

Custom formatting optionsDeclarative Search Options, supporting server- and client side searchdata-role="listview" Oracle Confidential – Internal/Restricted/Highly Restricted21

List ViewSlide22

Building Mobile Apps with APEX 5.0Selectively hides columns at narrower widths as a sensible default

Offers a menu to let users manually control which columns they want to seeColumn Toggle Popup contains a dynamically generated list of columns based on the table markup Oracle Confidential – Internal/Restricted/Highly Restricted22

Column Toggle ReportSlide23

Building Mobile Apps with APEX 5.0Collapsing table data into label/data pairs for each rowStacked presentation style default

Media query used to switch to tabular style presentation above a specific screen widthOracle Confidential – Internal/Restricted/Highly Restricted23

Reflow Table ReportSlide24

Building Mobile Apps with APEX 5.0New Calendar Region type for Desktop and MobileMonthly-, Weekly-, Daily- and List ViewSupports touch eventsCustomization through CSS

Oracle Confidential – Internal/Restricted/Highly Restricted24CalendarSlide25

Building Mobile Apps with APEX 5.0Mobile theme provides a varietyof theme stylesCreate custom styles usingThemeroller

Upload Themeroller file as application or workspace filesDefine new theme style usingyour own Themeroller layoutOracle Confidential – Internal/Restricted/Highly Restricted25

ThemeRollerSlide26

1

2

3

4

5

Mobile Development Techniques

jQuery Mobile Overview

Building Mobile Apps with Oracle Application Express 5.0

Testing and Debugging your Mobile App

Deploying Mobile Apps

Oracle Confidential – Internal/Restricted/Highly Restricted

26Slide27

Testing and DebuggingUse resized standard Desktop browser for basic functional testingUse platform-specific development tools like Xcode or Android Developer Tools to test mobile features: native form controls, orientation change, simulate different devices, screen resolutions, High DPI, etc.

Also include testing on real, physical devices for full access to hardware functionsOracle Confidential – Internal/Restricted/Highly Restricted27Running your APEX Mobile app using a SimulatorSlide28

Testing and DebuggingAccess iOS Simulator from

Xcode menu or directlySimulate different iPhone and iPad models, Retina and non-Retina,different iOS versionsiOS Simulator located at:/Applications/Xcode.app/Contents/Applications/iPhone Simulator.app

Oracle Confidential – Internal/Restricted/Highly Restricted

28

Using XcodeSlide29

Testing and DebuggingUse Safari Web Inspectorwith browser in iOS simulatorAlso works with actual USB connected iOS deviceAccess to resources, debugger,

console, etc.Oracle Confidential – Internal/Restricted/Highly Restricted29Debugging and Web InspectorSlide30

Testing and DebuggingGet the Android SDKIncludes Eclipse + ADT plug-in

Includes Android EmulatorStart Android VirtualDevice ManagerCreate virtual devices usingdifferent screen sizes, DPIand Android OS versionsOracle Confidential – Internal/Restricted/Highly Restricted

30

Android Developer Tools (ADT)Slide31

1

2

3

4

5

Mobile Development Techniques

jQuery Mobile Overview

Building Mobile Apps with Oracle Application Express 5.0

Testing and Debugging your Mobile App

Deploying Mobile Apps

Oracle Confidential – Internal/Restricted/Highly Restricted

31Slide32

Deploying Mobile AppsMobile Apps are accessed through web browser on deviceIn-house applicationsDeploy to APEX instance in the company internal network

Access from outside the network via VPNPublic-facing applications Deploy on APEX instance that is accessible from the InternetDeploy to public-facing site or hosted sites like the Oracle CloudOracle Confidential – Internal/Restricted/Highly Restricted

32Slide33

Deploying Mobile AppsUsers open Mobile Web Apps by openinga URL in the Web browser of their deviceApp specific URLs can be made available throughmobile dashboards, portals, or communicatedthrough emailApps that are frequently used can be bookmarked

For easy and quick access to mobile Apps, useAdd-To-Home-Screen function to place iconon the home screen of your deviceOracle Confidential – Internal/Restricted/Highly Restricted33

Add to Home ScreenSlide34

Deploying Mobile AppsOracle Confidential – Internal/Restricted/Highly Restricted

34Deploying Hybrid Apps using Cordova / PhoneGap

Set

of device APIs that allow

access to native

device functions from JavaScript

Combined

with a UI framework

like jQuery Mobile this

allows a smartphone app to be developed with just HTML, CSS, and

JavaScript

JavaScript APIs

consistent

across multiple device platforms

thus apps are

portable to other device platforms with minimal to no

changes

Apps made

available for installation from each device's app

storeSlide35
Slide36

Oracle Confidential – Internal/Restricted/Highly Restricted36Slide37