apex & jquery mobile
Post on 20-Sep-2014
18 views
DESCRIPTION
As presented at KScope 2012, San Antonio, TexasTRANSCRIPT
![Page 1: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/1.jpg)
#Kscope
Oracle Application Express&
Christian Rokittawww.themes4apex.com
![Page 2: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/2.jpg)
![Page 3: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/3.jpg)
About Me
17 years 17 years 2 years
3 months
![Page 4: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/4.jpg)
Agenda
![Page 5: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/5.jpg)
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
![Page 6: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/6.jpg)
Running ahead of things?
4.2
![Page 7: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/7.jpg)
SQL;PL/SQL;
APEX Templates(in 1 min)
<HTML/>
{CSS}JavaScript();
Structure
Style
Action
PAGE
#Substitution#
Render
Definition
Reference#Position#
<HTML/>JavaScript();
![Page 8: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/8.jpg)
8
jQuery Quick Intro
• JavaScript Library• Simplify JavaScript programing• Easy to learn• Principle: select action• Build-in: event and effect methods, AJAX
![Page 9: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/9.jpg)
9
jQuery Syntax ExamplesBasic 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
![Page 10: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/10.jpg)
10
• Everything related to webdevelopment– HTML(5), CSS(3), jQuery, XML, AJAX, JSON,
Webservices, ...• Tutorials• Examples• References• "Try it yourself"
![Page 11: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/11.jpg)
“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.”
![Page 12: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/12.jpg)
jQuery Mobile Components
![Page 14: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/14.jpg)
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><!-- /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
![Page 15: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/15.jpg)
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.js"></script></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>
![Page 16: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/16.jpg)
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><!-- /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>
![Page 17: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/17.jpg)
17
HTML Document
HTML Document: Page != Page
APEX Page
Region 1
Region 2
Sub- Region 1
Sub- Region 2
HTML Document
jQM Page
Region 1
jQM Page 2
Region 2
![Page 18: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/18.jpg)
18
http://m.fifapex.net
![Page 19: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/19.jpg)
19
jQM Multi-Page in APEX
![Page 20: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/20.jpg)
20
APEX jQM Templates
![Page 21: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/21.jpg)
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>
![Page 22: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/22.jpg)
22
data- attributespecialized (spezified in) Templates
vsspezified as region/element attribute
<a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a>
![Page 23: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/23.jpg)
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.No data-role="button" attribute nessesary.
![Page 24: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/24.jpg)
24
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"
![Page 25: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/25.jpg)
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>
![Page 26: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/26.jpg)
26
Advaned Listview Features
![Page 27: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/27.jpg)
Advanced jQuery MobileListview element possibilities inOracle Application Express 4.1
by applying basic SQL and Analytic Function features
Demo!
![Page 28: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/28.jpg)
jQM Form Elements
![Page 29: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/29.jpg)
29
HTML5 Input Item Types
www.apex-plugin.com
URLEMAILPHONENUMBER
![Page 30: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/30.jpg)
30
Enable a little bit of Mobile Dev in APEX 4.1
![Page 31: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/31.jpg)
32
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
![Page 32: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/32.jpg)
33
Questions
![Page 33: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/33.jpg)
34
1 license Red Gate Deployment Suite for Oracle
FifAPEX
![Page 34: Apex & jQuery Mobile](https://reader035.vdocuments.us/reader035/viewer/2022081412/541c96747bef0a16088b5f40/html5/thumbnails/34.jpg)
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: [email protected]