Oracle Application Express            &         Christian Rokitta                         .nl               OGh APEX Dag  ...
2
Over mij17 jaar     17 jaar   2 jaar            1 week
Agenda
Waarom• Waarom mobile website (vs native App)?  – HTML  APEX  – Kosten voor mobile we applicatie lager dan    platform sp...
Te vroeg?
APEX Templates                                               Definitie                           Referentie               ...
jQuery Quick Intro•   JavaScript Library•   Vereenvoudigd JavaScript programmeren•   Makkelijk te leren•   Principe: selec...
jQuery Syntax VoorbeeldenBasic syntax is: $(selector).action()• Dollar Sign is de jQuery aanroep• Selector: "query" HTML e...
• Alles mbt webontwikkeling    – HTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webse      rvices, ...•   Tutorials•   Examples...
“A unified user interface system that works  seamlessly across all popular mobile device  platforms, built on the jQuery a...
jQuery Mobile Componenten
13
Basic jQuery Mobile "page" structure             <!DOCTYPE html>             <html>               <head>               <ti...
<!DOCTYPE html><html lang="&BROWSER_LANGUAGE."><head>   <title>#TITLE#</title>                                            ...
http://ogh.rokit.nl                      16
jQM Customization<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Ed...
data- attribute Gespecialiseerde (gespecificeerd in) Templates                       vs     opgeven als region/element att...
jQM Buttons• Styling links as buttons  <a href="index.html" data-role="button">Link button</a>• Form Buttons  automaticall...
Links in jQuery Mobile• Default link behavior: Ajax  – Automagically (normal link code: href=“...”, Hijax )  – handle page...
jQM ListsBasic List<ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html...
in APEX        Named Column (row template)<ul data-role="listview"><li>   <strong>#RANK#. #NAME#</strong>   <span class="u...
jQM Form Elements
HTML5 Input Item Types   www.apex-plugin.com   24
25
jQM Support in 4.2                 (may or may not be a feature in ...)• HTML5 form input support (email, url, date, ...) ...
jQM support in 4.1apex_040100.wwv_flow_platform.set_preference   (MOBILE_DEVELOPMENT_ENABLED,Y);                    (uitvo...
http://m.fifapex.nethttp://www.fifapex.net                      28
Vragen         29
ContactBlog:          http://rokitta.blogspot.comLinkedIn:      http://nl.linkedin.com/in/rokitWebsite:       http://www.r...
Upcoming SlideShare
Loading in...5
×

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

1,891

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,891
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

  1. 1. Oracle Application Express & Christian Rokitta .nl OGh APEX Dag 26 Maart 2012 1
  2. 2. 2
  3. 3. Over mij17 jaar 17 jaar 2 jaar 1 week
  4. 4. Agenda
  5. 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. 6. Te vroeg?
  7. 7. APEX Templates Definitie Referentie SQL; #Position# PL/SQL;<HTML/> #Substitution# Render {CSS} PAGE <HTML/> JavaScript();JavaScript(); Actie
  8. 8. jQuery Quick Intro• JavaScript Library• Vereenvoudigd JavaScript programmeren• Makkelijk te leren• Principe: select  actie• Build-in: event en effect methods, AJAX 8
  9. 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. 10. • Alles mbt webontwikkeling – HTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webse rvices, ...• Tutorials• Examples• References• "Try it yourself" 10
  11. 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. 12. jQuery Mobile Componenten
  13. 13. 13
  14. 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="http://code.jquery.com/mobile/1.0rc2/jquer <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc </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. 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="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. 16. http://ogh.rokit.nl 16
  17. 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. 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. 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. 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. 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. 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. 23. jQM Form Elements
  24. 24. HTML5 Input Item Types www.apex-plugin.com 24
  25. 25. 25
  26. 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. 27. jQM support in 4.1apex_040100.wwv_flow_platform.set_preference (MOBILE_DEVELOPMENT_ENABLED,Y); (uitvoeren als SYS, Blogpost Marc Sewtz:http://marcsewtz.blogspot.com/2011/11/getting-started-with-mobile-in-apex.html) 27
  28. 28. http://m.fifapex.nethttp://www.fifapex.net 28
  29. 29. Vragen 29
  30. 30. ContactBlog: http://rokitta.blogspot.comLinkedIn: http://nl.linkedin.com/in/rokitWebsite: http://www.rokit.nlthemes4apex: http://www.themes4apex.nlTwitter: @crokittaEmail: christian@rokitta.nl
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×