Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

1

Oracle Application Express&

OGh APEX Dag26 Maart 2012

Christian Rokitta.nl

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

13

http://jquerymobile.com/demos/1.1.0-rc.1/

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>

<div data-role="content"> <p>Page content goes here.</p> </div>

<div data-role="footer"> <h4>Page Footer</h4> </div>

</div>

</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> #GLOBAL_NOTIFICATION##SUCCESS_MESSAGE##NOTIFICATION_MESSAGE# #REGION_POSITION_01# ... #REGION_POSITION_07# #BOX_BODY#

<div data-role="footer">#REGION_POSITION_08#

</div> </div> #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

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)

http://marcsewtz.blogspot.com/2011/11/getting-started-with-mobile-in-apex.html

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]

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

Technology

Transcript of Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012