Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
of 30
/30
-
date post
18-Oct-2014 -
Category
Technology
-
view
2.176 -
download
3
Embed Size (px)
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 of Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
PowerPoint-presentatie
Oracle Application Express&
OGh APEX Dag26 Maart 2012
1Christian Rokitta
.nl
2
Over mij17 jaar
17 jaar
2 jaar
1 weekAgenda
WaaromWaarom mobile website (vs native App)?HTML APEXKosten voor mobile we applicatie lager dan platform specifieke AppsWaarom jQuery Mobile?jQuery FrameworkMakkelijk in APEX in/toe te passenMakkelijkMakkelijker in 4.2Te vroeg?
4.2
SQL;PL/SQL;
APEX Templates
{CSS}JavaScript();StruktuurOpmaakActie
PAGE
#Substitution#
RenderDefinitieReferentie#Position#
JavaScript();7jQuery Quick IntroJavaScript LibraryVereenvoudigd JavaScript programmerenMakkelijk te lerenPrincipe: select actieBuild-in: event en effect methods, AJAX8jQuery Syntax VoorbeeldenBasic syntax is:$(selector).action()
Dollar Sign is de jQuery aanroepSelector: "query" HTML elementenaction() 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
9Alles mbt webontwikkelingHTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webservices, ...TutorialsExamplesReferences"Try it yourself"
10
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.
11jQuery Mobile Componenten
13
Basic jQuery Mobile "page" structure Page Title
Page Title
Page content goes here.
Page Footer
HeaderFooterBody
Regel voor regel doorlopen14In APEX:Page Template
#TITLE# #HEAD#
#FORM_OPEN# #TITLE# #GLOBAL_NOTIFICATION##SUCCESS_MESSAGE##NOTIFICATION_MESSAGE# #REGION_POSITION_01# ... #REGION_POSITION_07# #BOX_BODY##REGION_POSITION_08# #FORM_CLOSE#
http://ogh.rokit.nl16
jQM Customization
Cancel Edit Contact Save
data- attributeGespecialiseerde (gespecificeerd in) Templatesvsopgeven als region/element attribute
#LABEL#
18
jQM ButtonsStyling links as buttonsLink button
Form Buttonsautomatically in jQM styled buttons: buttonofinputelementen van type submit, reset, button, ofimage.Geen data-role="button"attribute nodig.
Links in jQuery MobileDefault link behavior: AjaxAutomagically (normal link code: href=..., Hijax )handle page requests in a single-page modelLinking without Ajaxdata-rel="external",data-ajax="false"oftarget attrib.Back Button (data-rel="back")Back in history (ignoring href)data-direction="reverse"end20jQM ListsBasic List
Acura Audi BMW
in APEXNamed Column (row template)
#RANK#. #NAME# #POINTS#
#1#. #2# #3#
jQM Form Elements
HTML5 Input Item Types24
www.apex-plugin.com25
jQM Support in 4.2(may or may not be a feature in ...)HTML5 form input support (email, url, date, ...)als sub-typeMultiple UI Themes per applicatiedata- attributes declaratiefjQM List-View Support26jQM 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
http://m.fifapex.net28
http://www.fifapex.netVragen29
Contact
Blog: http://rokitta.blogspot.comLinkedIn: http://nl.linkedin.com/in/rokitWebsite: http://www.rokit.nlthemes4apex:http://www.themes4apex.nlTwitter: @crokittaEmail:[email protected]
