Your SlideShare is downloading. ×
  • Like
Apex & jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Apex & jQuery Mobile

  • 2,325 views
Published

As presented at KScope 2012, San Antonio, Texas

As presented at KScope 2012, San Antonio, Texas

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,325
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
42
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • This is your opening slide.

Transcript

  • 1. #Kscope Oracle Application Express & Christian Rokitta www.themes4apex.com
  • 2. About Me 17 years 17 years 2 years 3 months
  • 3. Agenda
  • 4. Why • Why mobile web application (vs native App)? – HTML  APEX – Costs: platform independent • Why jQuery Mobile? – jQuery Framework – Easy integration with APEX – Easy to learn – Easier in 4.2
  • 5. Running ahead of things?
  • 6. SQL; PL/SQL; APEX Templates (in 1 min) <HTML/> {CSS} JavaScript(); Action PAGE #Substitution# Render Definition Reference #Position# <HTML/> JavaScript();
  • 7. jQuery Quick Intro • JavaScript Library • Simplify JavaScript programing • Easy to learn • Principle: select  action • Build-in: event and effect methods, AJAX 8
  • 8. jQuery Syntax Examples Basic syntax is: $(selector).action() • Dollar Sign is jQuery call • Selector: "query" HTML elements • action() that is performed on the element Examples: • $("p.test").hide() – hide all paragraphs with class="test“ • $("#test").hide() – hide element with id="test" • $("p").css("background-color","yellow"); - CSS selector • $("[href!='#']") – all elements with href attribut not equal “#” • $("div#intro .head") – all elem. with class=“intro” inside DIV elem. with id = head 9
  • 9. • Everything related to webdevelopment – HTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webse rvices, ... • Tutorials • Examples • References • "Try it yourself" 10
  • 10. “A unified user interface system that works seamlessly across all popular mobile device platforms, built on the jQuery and jQuery UI foundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.”
  • 11. jQuery Mobile Components
  • 12. 13 http://jquerymobile.com
  • 13. Basic jQuery Mobile "page" structure <!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/1.0rc2/jquery.mobile-1.0rc <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></scr <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobil </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> Header Footer Body
  • 14. 15 <!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/1.0rc2/jquery.mobile-1.0rc2.min.css" / <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
  • 15. In APEX: Page Template <!DOCTYPE html> <html lang="&BROWSER_LANGUAGE."> <head> <title>#TITLE#</title> <meta name="viewport" content="width=device-width, initial-scale=1"> #HEAD# <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.m </head> <body #ONLOAD#> #FORM_OPEN# <div data-role="page"> <div data-role="header"> <h1>#TITLE#</h1> </div><!-- /header --> #GLOBAL_NOTIFICATION##SUCCESS_MESSAGE##NOTIFICATION_MESSAGE# #REGION_POSITION_01# ... #REGION_POSITION_07# #BOX_BODY# <div data-role="footer"> #REGION_POSITION_08# </div><!-- /footer --> </div><!-- /page --> #FORM_CLOSE# </body> </html>
  • 16. HTML Document HTML Document: Page != Page 17 APEX Page Region 1 Region 2 Sub- Region 1 Sub- Region 2 HTML Document jQM Page Region 1 jQM Page 2 Region 2
  • 17. http://m.fifapex.net 18
  • 18. jQM Multi-Page in APEX 19
  • 19. APEX jQM Templates 20
  • 20. jQM Customization <div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check" data-theme="b">Save</a> </div>
  • 21. data- attribute specialized (spezified in) Templates vs spezified as region/element attribute <a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a> 22
  • 22. jQM Buttons • Styling links as buttons <a href="index.html" data-role="button">Link button</a> • Form Buttons automatically in jQM styled buttons: button of input elementen van type submit, reset, button, of image. No data-role="button" attribute nessesary.
  • 23. Links in jQuery Mobile • Default link behavior: Ajax – Automagically (normal link code: href=“...”, Hijax ) – handle page requests in a single-page model • Linking without Ajax – data-rel="external", data-ajax="false" of target attrib. • “Back” Button (data-rel="back") – Back in history (ignoring href) – data-direction="reverse" 24
  • 24. jQM Lists Basic List <ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul>
  • 25. Advaned Listview Features 26
  • 26. Advanced jQuery Mobile Listview element possibilities in Oracle Application Express 4.1 by applying basic SQL and Analytic Function features
  • 27. jQM Form Elements
  • 28. HTML5 Input Item Types 29 www.apex-plugin.com URL EMAIL PHONE NUMBER
  • 29. Enable a little bit of Mobile Dev in APEX 4.1 30
  • 30. jQM Support in 4.2 (may or may not be a feature in ...) • HTML5 form input support (email, url, date, ...) as sub-type • Multiple UI Themes per applicatie • data- attributes “declaratief” • jQM List-View Support 32
  • 31. Questions 33
  • 32. 1 license Red Gate Deployment Suite for Oracle 34 FifAPEX
  • 33. Contact Blog: http://rokitta.blogspot.com LinkedIn: http://nl.linkedin.com/in/rokit Website: http://www.rokit.nl themes4apex: http://www.themes4apex.nl FifApex: http://m.fifapex.net Twitter: @crokitta Email: christian@rokitta.nl