Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

Uploaded on

APEX& jQuery Mobile …

APEX& jQuery Mobile

Binnenkort zal Oracle versie de lang aangekondigde upgrade naar release 4.2 van Oracle Application Express beschikbaar maken. Een van de meest besproken nieuwe features die voor dit nieuwe release zijn aangekondigd is de integratie van het jQuery Mobile framework. Met de integratie van dit framework zal het mogelijk worden om met APEX applicaties te ontwikkelen, die geschikt zijn voor mobiele toestellen.
Wat is en hoe werkt jQuery Mobile en wat betekend dit voor het ontwikkelen in APEX. Dat zijn de onderwerpen die de presentatie aan bod komen. En waarom wachten tot het release van 4.2. Het is namelijk nu al mogelijk om jQuery Mobile in APEX te integreren en gebruiken. Hoe, wordt in een demo getoond. Deze sessie is waarschijnlijk de enige waarin u gevraagd zal worden om uw mobile telefoon aan te laten staan.

More 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


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Oracle Application Express & Christian Rokitta .nl OGh APEX Dag 26 Maart 2012 1
  • 2. 2
  • 3. Over mij17 jaar 17 jaar 2 jaar 1 week
  • 4. Agenda
  • 5. Waarom• Waarom mobile website (vs native App)? – HTML  APEX – Kosten voor mobile we applicatie lager dan platform specifieke Apps• Waarom jQuery Mobile? – jQuery Framework – Makkelijk in APEX in/toe te passen – Makkelijk – Makkelijker in 4.2
  • 6. Te vroeg?
  • 7. APEX Templates Definitie Referentie SQL; #Position# PL/SQL;<HTML/> #Substitution# Render {CSS} PAGE <HTML/> JavaScript();JavaScript(); Actie
  • 8. jQuery Quick Intro• JavaScript Library• Vereenvoudigd JavaScript programmeren• Makkelijk te leren• Principe: select  actie• Build-in: event en effect methods, AJAX 8
  • 9. jQuery Syntax VoorbeeldenBasic syntax is: $(selector).action()• Dollar Sign is de jQuery aanroep• Selector: "query" HTML elementen• action() die op het element uitgevoerd wordtVoorbeelden:• $("p.test").hide() - alle paragraphs met class="test“ verbergen• $("#test").hide() - element met id="test" verbergen• $("p").css("background-color","yellow"); - CSS selector• $("[href!=#]") – alle elemente met href attribuut die != “#” zijn• $("div#intro .head") – alle elem. met class = intro binnen het DIV elem. met id = head 9
  • 10. • Alles mbt webontwikkeling – HTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webse rvices, ...• Tutorials• Examples• References• "Try it yourself" 10
  • 11. “A unified user interface system that works seamlessly across all popular mobile device platforms, built on the jQuery and jQuery UIfoundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.”
  • 12. jQuery Mobile Componenten
  • 13. 13
  • 14. Basic jQuery Mobile "page" structure <!DOCTYPE html> <html> <head> <title>Page Title</title> Header <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <script type="text/javascript" src=" <script type="text/javascript" src=" </head> <body> 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> Footer </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
  • 15. <!DOCTYPE html><html lang="&BROWSER_LANGUAGE."><head> <title>#TITLE#</title> In APEX: <meta name="viewport" content="width=device-width, initial-scale=1"> Page Template #HEAD# <link rel="stylesheet" href="" <script type="text/javascript" src=""></script> <script type="text/javascript" src="</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. 16
  • 17. 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>
  • 18. data- attribute Gespecialiseerde (gespecificeerd in) Templates vs opgeven als region/element attribute<a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a> 18
  • 19. 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. Geen data-role="button" attribute nodig.
  • 20. 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"• end 20
  • 21. jQM ListsBasic 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>
  • 22. in APEX Named Column (row template)<ul data-role="listview"><li> <strong>#RANK#. #NAME#</strong> <span class="ui-li-count">#POINTS#</span></li></ul> <li> <strong>#1#. #2#</strong> <span class="ui-li-count">#3#</span> </li>
  • 23. jQM Form Elements
  • 24. HTML5 Input Item Types 24
  • 25. 25
  • 26. jQM Support in 4.2 (may or may not be a feature in ...)• HTML5 form input support (email, url, date, ...) als sub-type• Multiple UI Themes per applicatie• data- attributes “declaratief”• jQM List-View Support 26
  • 27. jQM support in 4.1apex_040100.wwv_flow_platform.set_preference (MOBILE_DEVELOPMENT_ENABLED,Y); (uitvoeren als SYS, Blogpost Marc Sewtz: 27
  • 28. http://m.fifapex.net 28
  • 29. Vragen 29
  • 30. ContactBlog: http://rokitta.blogspot.comLinkedIn: http://www.rokit.nlthemes4apex: http://www.themes4apex.nlTwitter: @crokittaEmail: