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

Apex & jQuery Mobile

  • View
    20

  • Download
    0

Embed Size (px)

DESCRIPTION

As presented at KScope 2012, San Antonio, Texas

Citation preview

Page 1: Apex & jQuery Mobile

#Kscope

Oracle Application Express&

Christian Rokittawww.themes4apex.com

Page 2: Apex & jQuery Mobile
Page 3: Apex & jQuery Mobile

About Me

17 years 17 years 2 years

3 months

Page 4: Apex & jQuery Mobile

Agenda

Page 5: Apex & jQuery Mobile

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

Running ahead of things?

4.2

Page 7: Apex & jQuery Mobile

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

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

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

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

“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

jQuery Mobile Components

Page 13: Apex & jQuery Mobile

13

http://jquerymobile.com

Page 14: Apex & jQuery Mobile

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

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

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

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

18

http://m.fifapex.net

Page 19: Apex & jQuery Mobile

19

jQM Multi-Page in APEX

Page 20: Apex & jQuery Mobile

20

APEX jQM Templates

Page 21: Apex & jQuery Mobile

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

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

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

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

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

26

Advaned Listview Features

Page 27: Apex & jQuery Mobile

Advanced jQuery MobileListview element possibilities inOracle Application Express 4.1

by applying basic SQL and Analytic Function features

Demo!

Page 28: Apex & jQuery Mobile

jQM Form Elements

Page 29: Apex & jQuery Mobile

29

HTML5 Input Item Types

www.apex-plugin.com

URLEMAILPHONENUMBER

Page 30: Apex & jQuery Mobile

30

Enable a little bit of Mobile Dev in APEX 4.1

Page 31: Apex & jQuery Mobile

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

33

Questions

Page 33: Apex & jQuery Mobile

34

1 license Red Gate Deployment Suite for Oracle

FifAPEX

Page 34: Apex & jQuery Mobile

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]