Embed Size (px)
Citation preview
Oracle Application Express
&
Christian Rokitta
APEX DB
D
1993
1996
NL
HTML
CSS
JavaScript
1999
Hoechst Scamander Solutions
2010
Freelance
Des/Dev
mod_plsql/Oracle Web Toolkit
jQuery
Christian Rokitta
Agenda
• Touch-Optimiertes Web Framework für Smartphones & Tablets
• Unterstützt alle gängigen Betriebssysteme
• Basiert auf jQuery und jQuery UI
• Fokus auf „lightweight codebase“
Basis jQuery Mobile “Page" Struktur <!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
<!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.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.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>
SQL;
PL/SQL;
APEX Templates (1 min)
<HTML/>
{CSS}
JavaScript(); Action
PAGE
#Substitution#
Render
Definition
Reference #Position#
<HTML/> JavaScript();
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.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.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>
Struktur
Styling
Funktionalität
jQM Attribute und Eigenschaften
<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>
jQuery Mobile Komponenten
jQM Buttons
• Links werden als Buttons wiedergegeben <a href="index.html" data-role="button">Link button</a>
• Form Buttons werden automagisch in jQM gestylte Buttons umgesetzt: BUTTON und INPUT Elemente vom Typ submit, reset, button, oder image. data-role="button" Attribut nicht nötig!
data- Attribute spezialisierte (spezifiziert im) Templates
vs
spezifiziert als Region/Element Attribut
<a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a>
http://jquerymobile.com
Links in jQuery Mobile
• Standard Link Verhalten: Ajax
– Automagisch (normaler Link: href=“...”, Hijax )
– Abhandlung von Anfragen im Single-Page Model
• Linken ohne Ajax
– data-rel="external", data-ajax="false"
• “Back” Button (data-rel="back")
– Back in History (ignoriert href Attribut)
– data-direction="reverse"
Mobile in APEX 4.1 apex_040100.wwv_flow_platform.set_preference('MOBILE_DEVELOPMENT_ENABLED','Y');
“… all this is doing is that it makes APEX render form elements on your mobile pages without a table grid …”
http://marcsewtz.blogspot.com/2011/11/getting-started-with-mobile-in-apex.html
Enables a little bit of Mobile Dev in APEX 4.1
http://m.fifapex.net
APEX jQM Templates FifApex WebApp
HTML Dokument
HTML Dokument: 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
jQM Multi-Page in APEX
jQM Listviews
Basis Liste
<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>
Listview Features
Einsatz fortgeschrittener Möglichkeiten von jQuery Mobile
Listview Elementen in Oracle Application Express 4.1
mit Hilfe von Basis SQL Kenntnis und Analytic Functions
Listview in APEX 4.2
jQM Formulier Elemente
HTML5 INPUT Typen in 4.1
http://www.apex-plugin.com
URL EMAIL PHONE NUMBER
Blog http://rokitta.blogspot.com
LinkedIn http://www.linkedin.com/in/rokit
XING www.xing.com/profile/Christian_Rokitta
Website http://www.rokit.nl
themes4apex http://www.themes4apex.nl
FifApex http://www.fifapex.net (2014!)
Twitter @crokitta
Email [email protected]
Fragen
