Over mij. 17 jaar 17 jaar 2 jaar. 1 week

Size: px

Start display at page:

Download "Over mij. 17 jaar 17 jaar 2 jaar. 1 week"

Crystal Shelton
10 years ago
Views:

1 Oracle Application Express & Christian Rokitta.nl OGh APEX Dag 26 Maart

2 2

3 Over mij 17 jaar 17 jaar 2 jaar 1 week

4 Agenda

5 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

dan platform specifieke apps Waarom jquery Mobile?

6 Te vroeg?

7 APEX Templates Definitie Referentie #Position# SQL; PL/SQL; <HTML/> {CSS} JavaScript(); Actie PAGE #Substitution# Render <HTML/> JavaScript();

8 jquery Quick Intro JavaScript Library Vereenvoudigd JavaScript programmeren Makkelijk te leren Princiepe: select actie Build-in: event en effect methods, AJAX 8

9 jquery Syntax Voorbeelden Basic syntax is: $(selector).action() Dollar sign is de jquery aanroep Selector: "query" HTML elementen action() die op het element uitgevoert 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 elementemet hrefattribuut die!= # zijn $("div#intro.head") alle elem. met class = intro binnen het DIV elem. met id = head 9

Voorbeelden: $("p.test").hide() - alle paragraphs met class="test verbergen $("#test").

10 Alles mbt webontwikkeling HTML(5), CSS(3), jquery, XML, AJAX, JSON, Webservices,... Tutorials Examples References "Try it yourself" 10

11 A unified user interface system that works seamlessly across all popular mobile device platforms, built on the jqueryand jqueryui foundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.

12 jquery Mobile Componenten

13 13

14 Basic jquerymobile "page" structure Header <!DOCTYPE html> <html> <head> <title>page Title</title> <meta name="viewport viewport" content="width width=device =device-width width, initial-scale scale=1"> <link rel="stylesheet" href=" <script type="text/javascript" src=" <script type="text/javascript" src=" </head> <body> Body <div data-role="page"> <div data-role role="header"> <h1>page Title</h1> </div> Footer <div data-role role="content"> <p>page content goes here.</p> </div> <div data-role role=" ="footer footer"> <h4>page Footer</h4> </div> </div> </body> </html>

href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">< <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.m </head> <body> Body <div data-role="page"> <div data-role role="header"> <h1>page Title</h1> </div><!

15 <!DOCTYPE html> <html lang="&browser_language."> <head> <title>#title#</title> <meta name="viewport" content="width=device-width, initial-scale=1"> In APEX: Page Template #HEAD# <link rel="stylesheet" href=" /> <script type="text/javascript" src=" <script type="text/javascript" src=" </head> <body #ONLOAD#> #FORM_OPEN# <div data-role="page"> <div data-role="header"> <h1>#title# #TITLE#</h1> </div> #GLOBAL_NOTIFICATION##SUCCESS_MESSAGE##NOTIFICATION_MESSAGE# #REGION_POSITION_01#... #REGION_POSITION_07# #BOX_BODY# <div data-role="footer"> #REGION_POSITION_08# </div> </div> #FORM_CLOSE# </body> </html>

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.

16 Demo 16

17 jqm(header) 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>

18 data-attribute Gespecialiseerde (gespecificeerd in) Templates vs opgeven als region/element attribute <a href="#link#" data-role="button"#button_attributes#>#label#</a> 18

19 jqmbuttons Styling links as buttons <a href="index.html" data-role="button">link button</a> Form Buttons automatically in jqmstyled buttons: buttonofinputelementenvan type submit, reset, button, of image. Geen data-role="button" attribute nodig.

automatically in jqmstyled buttons: buttonofinputelementenvan

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 20

.., Hijax) handle page requests in a single-page model Linking without Ajax

21 jqmlists 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>

22 in APEX NamedColumn (rowtemplate) <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>

23 jqmform Elements

24 jqmsupport in 4.1 apex_ wwv_flow_platform.set_preference ('MOBILE_DEVELOPMENT_ENABLED','Y'); (uitvoeren als SYS, BlogpostMarc Sewtz: 24

25 25

26 26

27 Vragen 27

28 Contact Blog: LinkedIn: Website: themes4apex: Twitter:

<Insert Picture Here>

<Insert Picture Here> Oracle Application Express: Mobile User Interfaces Marc Sewtz Senior Software Development Manager Oracle Application Express Oracle USA Inc. 520 Madison Avenue,