SlideShare a Scribd company logo
1 of 34
Download to read offline
#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
 
E3 appspresso hands on lab
E3 appspresso hands on labE3 appspresso hands on lab
E3 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
 
E3 appspresso hands on lab
E3 appspresso hands on labE3 appspresso hands on lab
E3 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

UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceOpsTree solutions
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 

Recently uploaded (20)

UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Deliver Latency Free Customer Experience
Deliver Latency Free Customer ExperienceDeliver Latency Free Customer Experience
Deliver Latency Free Customer Experience
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 

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.