Post on 18-Oct-2014
description
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: christian@rokitta.nl