oracle application express ·...
Post on 24-Jan-2019
224 Views
Preview:
TRANSCRIPT
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
• 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>
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>
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>
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
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 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>
Einsatz fortgeschrittener Möglichkeiten von jQuery Mobile
Listview Elementen in Oracle Application Express 4.1
mit Hilfe von Basis SQL Kenntnis und Analytic Functions
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 christian@rokitta.nl
top related