Challenges going mobile
Download as PPTX, PDFโข2 likesโข1,218 views
The document discusses the challenges and methods of developing mobile web applications using jQuery Mobile and Oracle APEX. It highlights jQuery Mobile's touch-friendly UI framework, explains its multi-page structure, and elaborates on AJAX navigation for smooth transitions. The author emphasizes the uniqueness of IDs in APEX applications and compares implicit and explicit AJAX usage in development.
![Basic page template
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css
<script src="http://code.jquery.com/jquery-[version].min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>](https://image.slidesharecdn.com/challengesgoingmobile-150629150612-lva1-app6892/85/Challenges-going-mobile-9-320.jpg)
Challenges going mobile
- 1. Challenges When Going Mobile using APEX & jQuery Mobile Christian Rokitta
- 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
- 9. Basic page template <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css <script src="http://code.jquery.com/jquery-[version].min.js"></script> <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div role="main" class="ui-content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
- 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.
- 11. Multi-page template structure <body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <div role="main" class="ui-content"> โฆ </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div role="main" class="ui-content"> โฆ </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body>
- 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
- 13. How does this effect developing in APEX?
- 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
- 18. Basic AJAX Call Syntax apex.server.process("P7_AJAX_CALL", { x01 : "test", pageItems : "#P7_FIELD1,#P7_FIELD2" }, { dataType : "text", success : function (pData) { $s("P7_FIELD2", pData); } });
- 19. Adding Options to AJAX Call apex.server.process("P7_AJAX_CALL", { x01 : "test", pageItems : "#P7_FIELD1,#P7_FIELD2" }, { dataType : "text", success : function (pData) { $s("P7_FIELD2", pData); }, beforeSend : function () { $.mobile.loading("show"); }, complete : function () { $.mobile.loading("hide"); } });
- 21. Browser Toolkit: Emulation Emulate (Chrome): โข Device โข Network Throttle โข Touch Events Demowhen time allows and connection works โฆ
- 22. Remote Debugging on Android with Chrome