Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Upcoming SlideShare
Loading in...5
×
 

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

on

  • 2,173 views

APEX& jQuery Mobile...

APEX& jQuery Mobile

Binnenkort zal Oracle versie de lang aangekondigde upgrade naar release 4.2 van Oracle Application Express beschikbaar maken. Een van de meest besproken nieuwe features die voor dit nieuwe release zijn aangekondigd is de integratie van het jQuery Mobile framework. Met de integratie van dit framework zal het mogelijk worden om met APEX applicaties te ontwikkelen, die geschikt zijn voor mobiele toestellen.
Wat is en hoe werkt jQuery Mobile en wat betekend dit voor het ontwikkelen in APEX. Dat zijn de onderwerpen die de presentatie aan bod komen. En waarom wachten tot het release van 4.2. Het is namelijk nu al mogelijk om jQuery Mobile in APEX te integreren en gebruiken. Hoe, wordt in een demo getoond. Deze sessie is waarschijnlijk de enige waarin u gevraagd zal worden om uw mobile telefoon aan te laten staan.

Statistics

Views

Total Views
2,173
Views on SlideShare
2,168
Embed Views
5

Actions

Likes
0
Downloads
47
Comments
0

1 Embed 5

http://www.linkedin.com 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012 Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012 Presentation Transcript

  • Oracle Application Express & Christian Rokitta .nl OGh APEX Dag 26 Maart 2012 1
  • 2
  • Over mij17 jaar 17 jaar 2 jaar 1 week
  • Agenda
  • 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
  • Te vroeg?
  • APEX Templates Definitie Referentie SQL; #Position# PL/SQL;<HTML/> #Substitution# Render {CSS} PAGE <HTML/> JavaScript();JavaScript(); Actie
  • jQuery Quick Intro• JavaScript Library• Vereenvoudigd JavaScript programmeren• Makkelijk te leren• Principe: select  actie• Build-in: event en effect methods, AJAX 8
  • jQuery Syntax VoorbeeldenBasic syntax is: $(selector).action()• Dollar Sign is de jQuery aanroep• Selector: "query" HTML elementen• action() die op het element uitgevoerd wordtVoorbeelden:• $("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 9
  • • Alles mbt webontwikkeling – 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 UIfoundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.”
  • jQuery Mobile Componenten
  • 13
  • Basic jQuery Mobile "page" structure <!DOCTYPE html> <html> <head> <title>Page Title</title> Header <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquer <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc </head> <body> 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> Footer </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
  • <!DOCTYPE html><html lang="&BROWSER_LANGUAGE."><head> <title>#TITLE#</title> In APEX: <meta name="viewport" content="width=device-width, initial-scale=1"> Page Template #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>
  • http://ogh.rokit.nl 16
  • 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 Gespecialiseerde (gespecificeerd in) Templates vs opgeven als region/element attribute<a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a> 18
  • 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. Geen data-role="button" attribute nodig.
  • 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 20
  • jQM ListsBasic 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>
  • in APEX Named 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>
  • jQM Form Elements
  • HTML5 Input Item Types www.apex-plugin.com 24
  • 25
  • 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 26
  • jQM support in 4.1apex_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) 27
  • http://m.fifapex.nethttp://www.fifapex.net 28
  • Vragen 29
  • ContactBlog: http://rokitta.blogspot.comLinkedIn: http://nl.linkedin.com/in/rokitWebsite: http://www.rokit.nlthemes4apex: http://www.themes4apex.nlTwitter: @crokittaEmail: christian@rokitta.nl