Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

download Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

of 30

  • date post

    18-Oct-2014
  • Category

    Technology

  • view

    2.175
  • 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:christian@rokitta.nl