Oracle Application Express & Christian Rokitta.nl OGh APEX Dag 26 Maart 2012 1
2
Over mij 17 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 specifieke apps Waarom jquery Mobile? jquery Framework Makkelijk in APEX in/toe te passen Makkelijk
Te vroeg?
APEX Templates Definitie Referentie #Position# SQL; PL/SQL; <HTML/> {CSS} JavaScript(); Actie PAGE #Substitution# Render <HTML/> JavaScript();
jquery Quick Intro JavaScript Library Vereenvoudigd JavaScript programmeren Makkelijk te leren Princiepe: select actie Build-in: event en effect methods, AJAX 8
jquery Syntax Voorbeelden Basic syntax is: $(selector).action() Dollar sign is de jquery aanroep Selector: "query" HTML elementen action() die op het element uitgevoert wordt Voorbeelden: $("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 elementemet hrefattribuut die!= # zijn $("div#intro.head") alle elem. met class = intro binnen het DIV elem. met id = head 9
Alles mbt webontwikkeling HTML(5), CSS(3), jquery, XML, AJAX, JSON, Webservices,... Tutorials Examples References "Try it yourself" 10
A unified user interface system that works seamlessly across all popular mobile device platforms, built on the jqueryand jqueryui foundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.
jquery Mobile Componenten
13
Basic jquerymobile "page" structure Header <!DOCTYPE html> <html> <head> <title>page Title</title> <meta name="viewport viewport" content="width width=device =device-width width, initial-scale scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">< <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.m </head> <body> Body <div data-role="page"> <div data-role role="header"> <h1>page Title</h1> </div><!-- /header --> Footer <div data-role role="content"> <p>page content goes here.</p> </div><!-- /content --> <div data-role role=" ="footer footer"> <h4>page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
<!DOCTYPE html> <html lang="&browser_language."> <head> <title>#title#</title> <meta name="viewport" content="width=device-width, initial-scale=1"> In APEX: 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.min.js"></ </head> <body #ONLOAD#> #FORM_OPEN# <div data-role="page"> <div data-role="header"> <h1>#title# #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>
Demo http://ogh.rokit.nl 16
jqm(header) 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>
data-attribute Gespecialiseerde (gespecificeerd in) Templates vs opgeven als region/element attribute <a href="#link#" data-role="button"#button_attributes#>#label#</a> 18
jqmbuttons Styling links as buttons <a href="index.html" data-role="button">link button</a> Form Buttons automatically in jqmstyled buttons: buttonofinputelementenvan type submit, reset, button, of image. Geen data-role="button" attribute nodig.
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
jqmlists 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>
in APEX NamedColumn (rowtemplate) <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>
jqmform Elements
jqmsupport in 4.1 apex_040100.wwv_flow_platform.set_preference ('MOBILE_DEVELOPMENT_ENABLED','Y'); (uitvoeren als SYS, BlogpostMarc Sewtz: http://marcsewtz.blogspot.com/2011/11/getting-started-with-mobile-in-apex.html) 24
http://ogh.rokit.nl 25
http://m.fifapex.net http://www.fifapex.net 26
Vragen 27
Contact Blog: LinkedIn: Website: http://rokitta.blogspot.com http://nl.linkedin.com/in/rokit http://www.rokit.nl themes4apex: http://www.themes4apex.nl Twitter: Email: @crokitta christian@rokitta.nl