#Kscope
Oracle Application Express
&
Christian Rokitta
www.themes4apex.com
About Me
17 years 17 years 2 years
3 months
Agenda
Why
• Why mobile web application (vs native App)?
– HTML  APEX
– Costs: platform independent
• Why jQuery Mobile?
– jQuer...
Running ahead of things?
SQL;
PL/SQL;
APEX Templates
(in 1 min)
<HTML/>
{CSS}
JavaScript(); Action
PAGE
#Substitution#
Render
Definition
Reference
...
jQuery Quick Intro
• JavaScript Library
• Simplify JavaScript programing
• Easy to learn
• Principle: select  action
• Bu...
jQuery Syntax Examples
Basic syntax is: $(selector).action()
• Dollar Sign is jQuery call
• Selector: "query" HTML element...
• Everything related to webdevelopment
– HTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webse
rvices, ...
• Tutorials
• Example...
“A unified user interface system that works
seamlessly across all popular mobile device
platforms, built on the jQuery and...
jQuery Mobile Components
13
http://jquerymobile.com
Basic jQuery Mobile "page" structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content...
15
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scal...
In APEX:
Page Template
<!DOCTYPE html>
<html lang="&BROWSER_LANGUAGE.">
<head>
<title>#TITLE#</title>
<meta name="viewport...
HTML Document
HTML Document: Page != Page
17
APEX Page
Region 1
Region 2
Sub-
Region 1
Sub-
Region 2
HTML Document
jQM Pag...
http://m.fifapex.net
18
jQM Multi-Page in APEX
19
APEX jQM Templates
20
jQM Customization
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete">Cancel</a>
<h1>E...
data- attribute
specialized (spezified in) Templates
vs
spezified as region/element attribute
<a href="#LINK#" data-role="...
jQM Buttons
• Styling links as buttons
<a href="index.html" data-role="button">Link button</a>
• Form Buttons
automaticall...
Links in jQuery Mobile
• Default link behavior: Ajax
– Automagically (normal link code: href=“...”, Hijax )
– handle page ...
jQM Lists
Basic List
<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.ht...
Advaned Listview Features
26
Advanced jQuery Mobile
Listview element possibilities in
Oracle Application Express 4.1
by applying basic SQL
and Analytic...
jQM Form Elements
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
• M...
Questions
33
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
themes4ap...
Apex & jQuery Mobile
Upcoming SlideShare
Loading in …5
×

Apex & jQuery Mobile

3,708 views

Published on

As presented at KScope 2012, San Antonio, Texas

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,708
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
60
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • This is your opening slide.
  • Apex & jQuery Mobile

    1. 1. #Kscope Oracle Application Express & Christian Rokitta www.themes4apex.com
    2. 2. About Me 17 years 17 years 2 years 3 months
    3. 3. Agenda
    4. 4. 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
    5. 5. Running ahead of things?
    6. 6. SQL; PL/SQL; APEX Templates (in 1 min) <HTML/> {CSS} JavaScript(); Action PAGE #Substitution# Render Definition Reference #Position# <HTML/> JavaScript();
    7. 7. jQuery Quick Intro • JavaScript Library • Simplify JavaScript programing • Easy to learn • Principle: select  action • Build-in: event and effect methods, AJAX 8
    8. 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
    9. 9. • Everything related to webdevelopment – HTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webse rvices, ... • Tutorials • Examples • References • "Try it yourself" 10
    10. 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.”
    11. 11. jQuery Mobile Components
    12. 12. 13 http://jquerymobile.com
    13. 13. 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><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> Header Footer Body
    14. 14. 15 <!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 </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
    15. 15. 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.m </head> <body #ONLOAD#> #FORM_OPEN# <div data-role="page"> <div data-role="header"> <h1>#TITLE#</h1> </div><!-- /header --> #GLOBAL_NOTIFICATION##SUCCESS_MESSAGE##NOTIFICATION_MESSAGE# #REGION_POSITION_01# ... #REGION_POSITION_07# #BOX_BODY# <div data-role="footer"> #REGION_POSITION_08# </div><!-- /footer --> </div><!-- /page --> #FORM_CLOSE# </body> </html>
    16. 16. 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
    17. 17. http://m.fifapex.net 18
    18. 18. jQM Multi-Page in APEX 19
    19. 19. APEX jQM Templates 20
    20. 20. 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>
    21. 21. data- attribute specialized (spezified in) Templates vs spezified as region/element attribute <a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a> 22
    22. 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.
    23. 23. 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
    24. 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>
    25. 25. Advaned Listview Features 26
    26. 26. Advanced jQuery Mobile Listview element possibilities in Oracle Application Express 4.1 by applying basic SQL and Analytic Function features
    27. 27. jQM Form Elements
    28. 28. HTML5 Input Item Types 29 www.apex-plugin.com URL EMAIL PHONE NUMBER
    29. 29. Enable a little bit of Mobile Dev in APEX 4.1 30
    30. 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
    31. 31. Questions 33
    32. 32. 1 license Red Gate Deployment Suite for Oracle 34 FifAPEX
    33. 33. 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

    ×