Download - Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

Transcript
Page 1: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

1

Oracle Application Express&

OGh APEX Dag26 Maart 2012

Christian Rokitta.nl

Page 2: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

2

Page 3: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

Over mij

17 jaar 17 jaar 2 jaar

1 week

Page 4: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

Agenda

Page 5: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

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

Page 6: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

Te vroeg?

4.2

Page 7: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

SQL;PL/SQL;

APEX Templates

<HTML/>

{CSS}

JavaScript();

Struktuur

Opmaak

Actie

PAGE

#Substitution#

Render

Definitie

Referentie#Position#

<HTML/>JavaScript();

Page 8: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

8

jQuery Quick Intro

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

Page 9: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

9

jQuery Syntax VoorbeeldenBasic 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

Page 10: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

10

• Alles mbt webontwikkeling– HTML(5), CSS(3), jQuery, XML, AJAX, JSON,

Webservices, ...• Tutorials• Examples• References• "Try it yourself"

Page 11: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

“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: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

jQuery Mobile Componenten

Page 14: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

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: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

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 16: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

16

http://ogh.rokit.nl

Page 17: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

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 18: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

18

data- attributeGespecialiseerde (gespecificeerd in) Templates

vsopgeven als region/element attribute

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

Page 19: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

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.Geen data-role="button" attribute nodig.

Page 20: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

20

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

Page 21: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

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 22: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

in APEXNamed 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>

Page 23: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

jQM Form Elements

Page 24: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

24

HTML5 Input Item Types

www.apex-plugin.com

Page 25: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

25

Page 26: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

26

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

Page 27: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

27

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)

Page 28: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

28

http://m.fifapex.net

http://www.fifapex.net

Page 29: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

29

Vragen

Page 30: Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

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: [email protected]