oracle application express & jquery mobile - ogh apex dag 2012
Post on 18-Oct-2014
2.176 views
DESCRIPTION
APEX& jQuery MobileBinnenkort 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.TRANSCRIPT
1
Oracle Application Express&
OGh APEX Dag26 Maart 2012
Christian Rokitta.nl
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– Makkelijker in 4.2
Te vroeg?
4.2
SQL;PL/SQL;
APEX Templates
<HTML/>
{CSS}
JavaScript();
Struktuur
Opmaak
Actie
PAGE
#Substitution#
Render
Definitie
Referentie#Position#
<HTML/>JavaScript();
8
jQuery Quick Intro
• JavaScript Library• Vereenvoudigd JavaScript programmeren• Makkelijk te leren• Principe: select actie• Build-in: event en effect methods, AJAX
9
jQuery Syntax VoorbeeldenBasic syntax is: $(selector).action()
• Dollar Sign is de jQuery aanroep• Selector: "query" HTML elementen• action() die op het element uitgevoerd 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 elemente met href attribuut die != “#” zijn• $("div#intro .head") – alle elem. met class = intro binnen het DIV elem. met id =
head
10
• Alles mbt webontwikkeling– HTML(5), CSS(3), jQuery, XML, AJAX, JSON,
Webservices, ...• Tutorials• Examples• References• "Try it yourself"
“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.”
jQuery Mobile Componenten
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.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"></script></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
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.min.js"></script></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
http://ogh.rokit.nl
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- attributeGespecialiseerde (gespecificeerd in) Templates
vsopgeven als region/element attribute
<a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a>
jQM Buttons
• Styling links as buttons<a href="index.html" data-role="button">Link button</a>
• Form Buttonsautomatically 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
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>
in APEXNamed 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>
jQM Form Elements
24
HTML5 Input Item Types
www.apex-plugin.com
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
27
jQM support in 4.1
apex_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)
28
http://m.fifapex.net
http://www.fifapex.net
29
Vragen
Contact
Blog: http://rokitta.blogspot.com
LinkedIn: http://nl.linkedin.com/in/rokit
Website: http://www.rokit.nl
themes4apex: http://www.themes4apex.nl
Twitter: @crokitta
Email: [email protected]