Apex & jQuery Mobile

#Kscope
Oracle Application Express
&
Christian Rokitta
www.themes4apex.com

About Me
17 years 17 years 2 years
3 months

Why
• Why mobile web application (vs native App)?
– HTML  APEX
– Costs: platform independent
• Why jQuery Mobile?
– jQuery Framework
– Easy integration with APEX
– Easy to learn
– Easier in 4.2

SQL;
PL/SQL;
APEX Templates
(in 1 min)
<HTML/>
{CSS}
JavaScript(); Action
PAGE
#Substitution#
Render
Definition
Reference
#Position#
<HTML/>
JavaScript();

jQuery Quick Intro
• JavaScript Library
• Simplify JavaScript programing
• Easy to learn
• Principle: select  action
• Build-in: event and effect methods, AJAX
8

jQuery Syntax Examples
Basic syntax is: $(selector).action()
• Dollar Sign is jQuery call
• Selector: "query" HTML elements
• action() that is performed on the element
Examples:
• $("p.test").hide() – hide all paragraphs with class="test“
• $("#test").hide() – hide element with id="test"
• $("p").css("background-color","yellow"); - CSS selector
• $("[href!='#']") – all elements with href attribut not equal “#”
• $("div#intro .head") – all elem. with class=“intro” inside DIV elem.
with id = head
9

• Everything related to webdevelopment
– 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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></scr
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobil
</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

15
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<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
</head>
<body>
<h1>Page Title</h1>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<h4>Page Footer</h4>
</div>
</body>
</html>

In APEX:
Page Template
<!DOCTYPE html>
<html lang="&BROWSER_LANGUAGE.">
<head>
<title>#TITLE#</title>
#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#
<h1>#TITLE#</h1>
#GLOBAL_NOTIFICATION##SUCCESS_MESSAGE##NOTIFICATION_MESSAGE#
#REGION_POSITION_01#
...
#BOX_BODY#
</div>
#FORM_CLOSE#
</body>
</html>

HTML Document
HTML Document: Page != Page
17
APEX Page
Region 1
Region 2
Sub-
Region 1
Sub-
Region 2
HTML Document
jQM Page
Region 1
jQM Page 2
Region 2

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
specialized (spezified in) Templates
vs
spezified as region/element attribute
<a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a>
22

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.
No data-role="button" attribute nessesary.

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"
24

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>

Advanced jQuery Mobile
Listview element possibilities in
Oracle Application Express 4.1
by applying basic SQL
and Analytic Function features

HTML5 Input Item Types
29
www.apex-plugin.com
URL
EMAIL
PHONE
NUMBER

Enable a little bit of Mobile Dev in APEX 4.1
30

jQM Support in 4.2
(may or may not be a feature in ...)
• HTML5 form input support (email, url, date, ...)
as sub-type
• Multiple UI Themes per applicatie
• data- attributes “declaratief”
• jQM List-View Support
32

1 license Red Gate Deployment Suite for Oracle
34
FifAPEX

Contact
Blog: http://rokitta.blogspot.com
LinkedIn: http://nl.linkedin.com/in/rokit
Website: http://www.rokit.nl
themes4apex: http://www.themes4apex.nl
FifApex: http://m.fifapex.net
Twitter: @crokitta
Email: christian@rokitta.nl

Apex & jQuery Mobile

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Apex & jQuery Mobile

Similar to Apex & jQuery Mobile (20)

More from Christian Rokitta

More from Christian Rokitta (10)

Recently uploaded

Recently uploaded (20)

Apex & jQuery Mobile

Editor's Notes