Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

Oracle Application Express
&

Christian Rokitta
.nl

OGh APEX Dag
26 Maart 2012

1

Over mij

17 jaar 17 jaar 2 jaar

1 week

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

APEX Templates
Definitie

Referentie SQL;
#Position# PL/SQL;

<HTML/>
#Substitution#

Render
{CSS}
PAGE

<HTML/>
JavaScript();

JavaScript(); Actie

jQuery Quick Intro
• JavaScript Library
• Vereenvoudigd JavaScript programmeren
• Makkelijk te leren
• Principe: select  actie
• Build-in: event en effect methods, AJAX

8

jQuery Syntax Voorbeelden
Basic 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

9

• Alles mbt webontwikkeling
– HTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webse
rvices, ...
• Tutorials
• Examples
• References
• "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.”

Basic jQuery Mobile "page" structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

Header <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquer
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc
</head>
<body>

Body <div data-role="page">

<div data-role="header">
<h1>Page Title</h1>
</div>

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

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

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="&BROWSER_LANGUAGE.">
<head>
<title>#TITLE#</title>
In APEX:
<meta name="viewport" content="width=device-width, initial-scale=1"> Page Template
#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.m
</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#
...
#BOX_BODY#
<div data-role="footer">
</div>
</div>
#FORM_CLOSE#
</body>
</html>

http://ogh.rokit.nl

16

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>

data- attribute
Gespecialiseerde (gespecificeerd in) Templates
vs
opgeven als region/element attribute

<a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a>

18

jQM Buttons
• Styling links as buttons
<a href="index.html" data-role="button">Link button</a>

• Form Buttons
automatically in jQM styled buttons:
button of input elementen van type
submit, reset, button, of image.
Geen data-role="button" attribute nodig.

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

20

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 APEX
Named 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>

HTML5 Input Item Types

www.apex-plugin.com 24

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

26

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)

27

http://m.fifapex.net

http://www.fifapex.net 28

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

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

Ähnlich wie Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012