jQuery Mobile has been integrated in APEX since version 4.2 and building a mobile web application with APEX seems magically easy ever since. Once you start a mobile project you will be confronted with a number of challenges related to the jQuery Mobile frameworks mechanisms. This session tends to explain the fundamentals that are important to know for APEX developers and how to deal with these in APEX development.
When creating a mobile web application with APEX, knowledge of how jQuery Mobile works and how it is different from what we are used to as APEX developers is essential, I learned this during projects. This session will explain the important jQuery Mobile framework mechanisms and how to deal with these in APEX: Page loading and submitting data; customizing the user interface elements; debugging, testing and inspecting on actual mobile devices.
2. About me
• Oracle Developer since 1993
• Oracle Employee 1996-1999
• Developed web applications with
mod_plsql since 1999
• Developing with APEX since 2008
• Independent developer since 2010
• Speaker (5th Kscope)
• Author (Oracle APEX for mobile Web applications)
• Oracle ACE (2013)
• Trainer (APEX, CSS/HTML/JS)
• Product Development
7. Agenda
• What makes jQuery Mobile different?
• How does this effect developing in APEX?
• What are effective tools to develop
mobile web applications?
8. What is jQuery Mobile
• jQuery Mobile is a touch-friendly UI
framework built on jQuery Core that works
across all popular mobile, tablet and desktop
platforms.
• Very simple (HTML) structure
• Look and Feel is applied after “page” is loaded
10. Multi-page template structure
A single HTML document can contain multiple
"pages" that are loaded together by stacking
multiple divs with a data-role of "page".
Each "page" block needs a unique id (id="foo") that
will be used to link internally between "pages"
(href="#foo").
When a link is clicked, the framework will look for
an internal "page" with the id and transition it into
view.
12. Ajax Navigation
• jQuery Mobile includes an Ajax navigation system to support a rich set of
animated page transitions by automatically 'hijacking' standard links and
form submissions and turning them into an Ajax request.
• Whenever a link is clicked or a form is submitted, that event is
automatically intercepted by the Ajax nav system and is used to issue an
Ajax request based on the href or form action instead of reloading the
page.
• When the requested page loads, jQuery Mobile parses the document for
an element with the data-role="page" attribute, inserts that code into the
DOM of the original page and applies all the styles and behavior.
• Now that the requested page is in the DOM and enhanced, it is animated
into view with a transition.
• Whenever jQuery Mobile loads a page via Ajax, it flags the page to be
removed from the DOM when you navigate away from it later
14. Remember!
The id attribute of all your elements must
be not only unique on a given page, but
also unique across the pages in a site.
This is because jQuery Mobile's single-page
navigation model allows many different
"pages" to be present in the DOM at the
same time.
15. Note to myself:
Don’t forget to show the
strange behaviour after
F5-ing and submitting a
page!
16. Page Processing vs AJAX
• Speed/Bandwidth
• Page loading, as seen before
• User Experience
17. Implicit vs Explicit AJAX in APEX
• Implicit: using PL/SQL Dynamic Action
– less control except when using it “SJAX”
• Explicit: using APEX Javascript API
– apex.server.process
– more coding
– more flexibility