SlideShare a Scribd company logo
1 of 34
#Kscope
Oracle Application Express
&
Christian Rokitta
www.themes4apex.com
About Me
17 years 17 years 2 years
3 months
Agenda
Why
• Why mobile web application (vs native App)?
– HTML  APEX
– Costs: platform independent
• Why jQuery Mobile?
– jQuery Framework
– Easy integration with APEX
– Easy to learn
– Easier in 4.2
Running ahead of things?
SQL;
PL/SQL;
APEX Templates
(in 1 min)
<HTML/>
{CSS}
JavaScript(); Action
PAGE
#Substitution#
Render
Definition
Reference
#Position#
<HTML/>
JavaScript();
jQuery Quick Intro
• JavaScript Library
• Simplify JavaScript programing
• Easy to learn
• Principle: select  action
• Build-in: event and effect methods, AJAX
8
jQuery Syntax Examples
Basic syntax is: $(selector).action()
• Dollar Sign is jQuery call
• Selector: "query" HTML elements
• action() that is performed on the element
Examples:
• $("p.test").hide() – hide all paragraphs with class="test“
• $("#test").hide() – hide element with id="test"
• $("p").css("background-color","yellow"); - CSS selector
• $("[href!='#']") – all elements with href attribut not equal “#”
• $("div#intro .head") – all elem. with class=“intro” inside DIV elem.
with id = head
9
• Everything related to webdevelopment
– 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 UI
foundation. Focused on a lightweight codebase
built on progressive enhancement with a
flexible, easily themeable design.”
jQuery Mobile Components
13
http://jquerymobile.com
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.0rc
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></scr
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobil
</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
15
<!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
</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>
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.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>
HTML Document
HTML Document: Page != Page
17
APEX Page
Region 1
Region 2
Sub-
Region 1
Sub-
Region 2
HTML Document
jQM Page
Region 1
jQM Page 2
Region 2
http://m.fifapex.net
18
jQM Multi-Page in APEX
19
APEX jQM Templates
20
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
specialized (spezified in) Templates
vs
spezified as region/element attribute
<a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a>
22
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.
No data-role="button" attribute nessesary.
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"
24
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>
Advaned Listview Features
26
Advanced jQuery Mobile
Listview element possibilities in
Oracle Application Express 4.1
by applying basic SQL
and Analytic Function features
jQM Form Elements
HTML5 Input Item Types
29
www.apex-plugin.com
URL
EMAIL
PHONE
NUMBER
Enable a little bit of Mobile Dev in APEX 4.1
30
jQM Support in 4.2
(may or may not be a feature in ...)
• HTML5 form input support (email, url, date, ...)
as sub-type
• Multiple UI Themes per applicatie
• data- attributes “declaratief”
• jQM List-View Support
32
Questions
33
1 license Red Gate Deployment Suite for Oracle
34
FifAPEX
Contact
Blog: http://rokitta.blogspot.com
LinkedIn: http://nl.linkedin.com/in/rokit
Website: http://www.rokit.nl
themes4apex: http://www.themes4apex.nl
FifApex: http://m.fifapex.net
Twitter: @crokitta
Email: christian@rokitta.nl

More Related Content

What's hot

Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopMark Rackley
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideMark Rackley
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with IonicMorris Singer
 
Intro to SharePoint Web Services
Intro to SharePoint Web ServicesIntro to SharePoint Web Services
Intro to SharePoint Web ServicesMark Rackley
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMconnectwebex
 
Dynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEMDynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEMBojana Popovska
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownMark Rackley
 
Integrate CI/CD Pipelines with Jira Software Cloud
Integrate CI/CD Pipelines with Jira Software CloudIntegrate CI/CD Pipelines with Jira Software Cloud
Integrate CI/CD Pipelines with Jira Software CloudAtlassian
 
A Debugging Adventure: Journey through Ember.js Glue
A Debugging Adventure: Journey through Ember.js GlueA Debugging Adventure: Journey through Ember.js Glue
A Debugging Adventure: Journey through Ember.js GlueMike North
 
Oracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimizedOracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimizedChristian Rokitta
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMAdobeMarketingCloud
 
AtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-onsAtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-onsAtlassian
 
Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMrbl002
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015Matt Raible
 
Intro to Rails Give Camp Atlanta
Intro to Rails Give Camp AtlantaIntro to Rails Give Camp Atlanta
Intro to Rails Give Camp AtlantaJason Noble
 
AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using nowAtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using nowAtlassian
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQueryMark Rackley
 
SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 Mark Rackley
 

What's hot (20)

Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
Intro to SharePoint Web Services
Intro to SharePoint Web ServicesIntro to SharePoint Web Services
Intro to SharePoint Web Services
 
jQuery Intro
jQuery IntrojQuery Intro
jQuery Intro
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
 
Dynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEMDynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEM
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
 
Integrate CI/CD Pipelines with Jira Software Cloud
Integrate CI/CD Pipelines with Jira Software CloudIntegrate CI/CD Pipelines with Jira Software Cloud
Integrate CI/CD Pipelines with Jira Software Cloud
 
A Debugging Adventure: Journey through Ember.js Glue
A Debugging Adventure: Journey through Ember.js GlueA Debugging Adventure: Journey through Ember.js Glue
A Debugging Adventure: Journey through Ember.js Glue
 
Ionic by Example
Ionic by ExampleIonic by Example
Ionic by Example
 
Oracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimizedOracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimized
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
 
AtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-onsAtlasCamp 2015: Using add-ons to build add-ons
AtlasCamp 2015: Using add-ons to build add-ons
 
Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEM
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
Intro to Rails Give Camp Atlanta
Intro to Rails Give Camp AtlantaIntro to Rails Give Camp Atlanta
Intro to Rails Give Camp Atlanta
 
AtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using nowAtlasCamp 2015: Web technologies you should be using now
AtlasCamp 2015: Web technologies you should be using now
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
 
SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013
 

Similar to Apex & jQuery Mobile

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bagstuplum
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery EssentialsMark Rackley
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014Mark Rackley
 
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePointSPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePointMark Rackley
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Sho Ito
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Mandakini Kumari
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate PackageSimon Collison
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQueryMark Rackley
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1Robert Nyman
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateInventis Web Architects
 
Toutch Jquery Mobile
Toutch Jquery MobileToutch Jquery Mobile
Toutch Jquery MobileJinlong He
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on labNAVER D2
 

Similar to Apex & jQuery Mobile (20)

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
 
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePointSPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate Package
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuery
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-template
 
Toutch Jquery Mobile
Toutch Jquery MobileToutch Jquery Mobile
Toutch Jquery Mobile
 
Html5
Html5Html5
Html5
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on lab
 

More from Christian Rokitta

Hitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeChristian Rokitta
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersChristian Rokitta
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal ThemeChristian Rokitta
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Christian Rokitta
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGapChristian Rokitta
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11Christian Rokitta
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Christian Rokitta
 
Confessions of an APEX Design Geek
Confessions of an APEX Design GeekConfessions of an APEX Design Geek
Confessions of an APEX Design GeekChristian Rokitta
 

More from Christian Rokitta (10)

Keep me moving goin mobile
Keep me moving   goin mobileKeep me moving   goin mobile
Keep me moving goin mobile
 
Hitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal Theme
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX Developers
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal Theme
 
APEX & Cookie Monster
APEX & Cookie MonsterAPEX & Cookie Monster
APEX & Cookie Monster
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
 
Confessions of an APEX Design Geek
Confessions of an APEX Design GeekConfessions of an APEX Design Geek
Confessions of an APEX Design Geek
 

Recently uploaded

What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxNeo4j
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfUK Journal
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessUXDXConf
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastUXDXConf
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance
 

Recently uploaded (20)

What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 

Apex & jQuery Mobile

  • 2.
  • 3. About Me 17 years 17 years 2 years 3 months
  • 5. Why • Why mobile web application (vs native App)? – HTML  APEX – Costs: platform independent • Why jQuery Mobile? – jQuery Framework – Easy integration with APEX – Easy to learn – Easier in 4.2
  • 7. SQL; PL/SQL; APEX Templates (in 1 min) <HTML/> {CSS} JavaScript(); Action PAGE #Substitution# Render Definition Reference #Position# <HTML/> JavaScript();
  • 8. jQuery Quick Intro • JavaScript Library • Simplify JavaScript programing • Easy to learn • Principle: select  action • Build-in: event and effect methods, AJAX 8
  • 9. jQuery Syntax Examples Basic syntax is: $(selector).action() • Dollar Sign is jQuery call • Selector: "query" HTML elements • action() that is performed on the element Examples: • $("p.test").hide() – hide all paragraphs with class="test“ • $("#test").hide() – hide element with id="test" • $("p").css("background-color","yellow"); - CSS selector • $("[href!='#']") – all elements with href attribut not equal “#” • $("div#intro .head") – all elem. with class=“intro” inside DIV elem. with id = head 9
  • 10. • Everything related to webdevelopment – HTML(5), CSS(3), jQuery, XML, AJAX, JSON, Webse rvices, ... • 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 jQuery and jQuery UI foundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.”
  • 14. 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.0rc <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></scr <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobil </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
  • 15. 15 <!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 </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>
  • 16. 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.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>
  • 17. HTML Document HTML Document: Page != Page 17 APEX Page Region 1 Region 2 Sub- Region 1 Sub- Region 2 HTML Document jQM Page Region 1 jQM Page 2 Region 2
  • 19. jQM Multi-Page in APEX 19
  • 21. 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>
  • 22. data- attribute specialized (spezified in) Templates vs spezified as region/element attribute <a href="#LINK#" data-role="button" #BUTTON_ATTRIBUTES#>#LABEL#</a> 22
  • 23. 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. No data-role="button" attribute nessesary.
  • 24. 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" 24
  • 25. 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>
  • 27. Advanced jQuery Mobile Listview element possibilities in Oracle Application Express 4.1 by applying basic SQL and Analytic Function features
  • 29. HTML5 Input Item Types 29 www.apex-plugin.com URL EMAIL PHONE NUMBER
  • 30. Enable a little bit of Mobile Dev in APEX 4.1 30
  • 31. jQM Support in 4.2 (may or may not be a feature in ...) • HTML5 form input support (email, url, date, ...) as sub-type • Multiple UI Themes per applicatie • data- attributes “declaratief” • jQM List-View Support 32
  • 33. 1 license Red Gate Deployment Suite for Oracle 34 FifAPEX
  • 34. Contact Blog: http://rokitta.blogspot.com LinkedIn: http://nl.linkedin.com/in/rokit Website: http://www.rokit.nl themes4apex: http://www.themes4apex.nl FifApex: http://m.fifapex.net Twitter: @crokitta Email: christian@rokitta.nl

Editor's Notes

  1. This is your opening slide.