SlideShare a Scribd company logo
Copyright © 2015 APEX Consulting
Mastering the APEX
Universal Theme
Roel Hartman
2
Copyright © 2015 APEX Consulting
Themes
Copyright © 2015 APEX Consulting
What are Themes?
Copyright © 2015 APEX Consulting
What was wrong with the old Themes?
Templates
Table Based
CSS tuning
Copyright © 2015 APEX Consulting
The answer of the APEX Dev Team:
42
Copyright © 2015 APEX Consulting
Managing Templates
Less is more …
Managing Templates
• Just a few templates per type
• Fine tune using Template Options
Managing Templates Options
• Declarative
• One click magic
• No additional template
• No CSS
Managing Templates Options
• And you can create your own!
• Example: Set an item to uppercase / lowercase
DEMONSTRATION
Copyright © 2015 APEX Consulting
Create a Template
Option Group
DEMONSTRATION
Copyright © 2015 APEX Consulting
Create Template
Options
DEMONSTRATION
Copyright © 2015 APEX Consulting
Use Template Options
DEMONSTRATION
Copyright © 2015 APEX Consulting
Running the Page
Make It Work
.Ukoug--Uppercase input { text-transform: uppercase }
• Now it can be used by all other developers without knowing any CSS
Note: This CSS won’t change the actual value !!!
Copyright © 2015 APEX Consulting
What was wrong with the old Themes?
Templates
Table Based
CSS tuning
Grids
• Fluid
• Nested
• Regions, Items and Labels
Fluid?
• adaptive
• pixel based
• use different pixel sizes for different screen sizes
• fluid
• maximum size fixed
• columns based on percentages
Fluid?
<div class="container">
<div class="row">
<div class="col col-7”>
#CONTENT#
</div>
<div class="col col-5”>
#CONTENT#
</div>
</div>
</div>
Grid != Responsive
• reducing screen size > reduce columns widths
• so you need more …
Responsive Grid
• media queries - just one major breakpoint defined
@media (max-width:640px){
.col-1,.col-10,.col-11,.col-12,
.col-2,.col-3,.col-4,.col-5,
.col-6,.col-7,.col-8,.col-9
{
width:100%;
}
}
Regions, Items And Labels
• Column 8 = start on 8th
• Column Span 3 = “.col-3”
Regions, Items And Labels
• Label Column Span
Responsive. Fluid. Grid.
Copyright © 2015 APEX Consulting
What was wrong with the old Themes?
Templates
Table Based
CSS tuning
DEMONSTRATION
Copyright © 2015 APEX Consulting
Theme Roller
DEMONSTRATION
Copyright © 2015 APEX Consulting
Theme Roller -
Theme Styles
DEMONSTRATION
Copyright © 2015 APEX Consulting
Theme Roller -
Copy Theme Styles
Copyright © 2015 APEX Consulting
What was wrong with the old Themes?
Templates
Table Based
CSS tuning
downside is, you need a lot of templates for each and every
building block: one for a region with a border and one for a
region without a border; one for a report with a header and
one for a report without one. So you end up with an impressive
number of templates, and making general changes, e.g. a
change that applies to all region templates, is a lot of work. So
that should be made simpler.
Mastering the
In the spring of this year the long awaited version 5.0 of Oracle Application
Express (APEX) was released. This version was not just another update, but
a major overhaul with two goals: increase developer productivity and create
better-looking applications on every device.
Roel Hartman, Director & Senior APEX Developer, APEX Consulting
APEX Universal Theme
Although APEX was already well known
for its speed of development, the
developer still needed to click around
quite a lot when making changes to his
application. That’s totally changed with
the appearance of the “Page Designer”.
In one view you can see all the details
of your page, a graphical representation
of what your page looks like and the
properties of the current selected item
(see figure 1). Just like in good old Oracle
Forms you can select multiple items at
once and make changes to common
attributes with just one click.
Next to Page Designer there are dozens
of other new features that makes APEX
one of the most productive, if not the
most productive, Oracle development
environments.
The Issues With The Old Templates
The second goal of APEX 5.0 was to make it easier to create
good-looking applications on every device. In APEX, templates
define the look of an application. There are templates for every
type of building block, like pages, regions, buttons etc and a set
of templates is grouped into a theme. So you’ll get a uniform
look across your application when you’ve picked a theme. The
www.ukoug.org 17
APEX & Database Development
FIGURE 1: PAGE DESIGNER
See the latest issue of
Oracle Scene
Sign up for our training
(tomorrow !!).

Special price: GBP xxx
Copyright © 2015 APEX Consulting
Q& Aroel@apexconsulting.nl
http://www.apexconsulting.nl
roel@apexconsulting.nl
http://www.apexconsulting.nl
Copyright © 2015 APEX Consulting

More Related Content

What's hot

Electronic patients records system based on oracle apex
Electronic patients records system based on oracle apexElectronic patients records system based on oracle apex
Electronic patients records system based on oracle apex
Jan Karremans
 
APEX 5 Demo and Best Practices
APEX 5 Demo and Best PracticesAPEX 5 Demo and Best Practices
APEX 5 Demo and Best Practices
Dimitri Gielis
 
Oracle Forms to APEX conversion tool
Oracle Forms to APEX conversion toolOracle Forms to APEX conversion tool
Oracle Forms to APEX conversion tool
Scott Wesley
 
SMART4apex company presentation APEX world convention March 25 2014
SMART4apex company presentation APEX world convention March 25 2014SMART4apex company presentation APEX world convention March 25 2014
SMART4apex company presentation APEX world convention March 25 2014
Sergei Martens
 
Oracle Forms to Apex - OGh - 29 September 2009 - Part 1
Oracle Forms to Apex - OGh - 29 September 2009 - Part 1Oracle Forms to Apex - OGh - 29 September 2009 - Part 1
Oracle Forms to Apex - OGh - 29 September 2009 - Part 1
Douwe Pieter van den Bos
 
Getting Started with Oracle APEX
Getting Started with Oracle APEXGetting Started with Oracle APEX
Getting Started with Oracle APEX
DataNext Solutions
 
Oracle APEX for Beginners
Oracle APEX for BeginnersOracle APEX for Beginners
Oracle APEX for Beginners
Dimitri Gielis
 
APEX Themes and Templates
APEX Themes and TemplatesAPEX Themes and Templates
APEX Themes and Templates
InSync Conference
 
Oracle apex training | Oracle Application Application Express Training | Ora...
Oracle apex training | Oracle Application Application Express Training |  Ora...Oracle apex training | Oracle Application Application Express Training |  Ora...
Oracle apex training | Oracle Application Application Express Training | Ora...
Nancy Thomas
 
Intro on Oracle Application express - APEX
Intro on Oracle Application express - APEXIntro on Oracle Application express - APEX
Intro on Oracle Application express - APEX
Lino Schildenfeld
 
Apex RnD APEX 5 - Printing
Apex RnD APEX 5 - PrintingApex RnD APEX 5 - Printing
Apex RnD APEX 5 - Printing
Lino Schildenfeld
 
APEX 5.1 features - AUSOUG Connect 2016
APEX 5.1 features - AUSOUG Connect 2016APEX 5.1 features - AUSOUG Connect 2016
APEX 5.1 features - AUSOUG Connect 2016
Lino Schildenfeld
 
Apex 5.1 migration and templates - APAC webinar tour
Apex 5.1 migration and templates - APAC webinar tourApex 5.1 migration and templates - APAC webinar tour
Apex 5.1 migration and templates - APAC webinar tour
Lino Schildenfeld
 
Oracle APEX plugins - AUSOUG Connect 2016
Oracle APEX plugins - AUSOUG Connect 2016Oracle APEX plugins - AUSOUG Connect 2016
Oracle APEX plugins - AUSOUG Connect 2016
Lino Schildenfeld
 
Oracle Application Express as add-on for Google Apps
Oracle Application Express as add-on for Google AppsOracle Application Express as add-on for Google Apps
Oracle Application Express as add-on for Google Apps
Sergei Martens
 
Apex World 2015
Apex World 2015Apex World 2015
Apex World 2015
Sergei Martens
 
Printing with APEX: PL/PDF
Printing with APEX: PL/PDFPrinting with APEX: PL/PDF
Printing with APEX: PL/PDF
Enkitec
 
Create fancy applications with the new Twitter Bootstrap theme for Apex.
Create fancy applications with the new Twitter Bootstrap theme for Apex.Create fancy applications with the new Twitter Bootstrap theme for Apex.
Create fancy applications with the new Twitter Bootstrap theme for Apex.
Sergei Martens
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
Christian Rokitta
 
Browser Developer Tools
Browser Developer ToolsBrowser Developer Tools
Browser Developer Tools
Christian Rokitta
 

What's hot (20)

Electronic patients records system based on oracle apex
Electronic patients records system based on oracle apexElectronic patients records system based on oracle apex
Electronic patients records system based on oracle apex
 
APEX 5 Demo and Best Practices
APEX 5 Demo and Best PracticesAPEX 5 Demo and Best Practices
APEX 5 Demo and Best Practices
 
Oracle Forms to APEX conversion tool
Oracle Forms to APEX conversion toolOracle Forms to APEX conversion tool
Oracle Forms to APEX conversion tool
 
SMART4apex company presentation APEX world convention March 25 2014
SMART4apex company presentation APEX world convention March 25 2014SMART4apex company presentation APEX world convention March 25 2014
SMART4apex company presentation APEX world convention March 25 2014
 
Oracle Forms to Apex - OGh - 29 September 2009 - Part 1
Oracle Forms to Apex - OGh - 29 September 2009 - Part 1Oracle Forms to Apex - OGh - 29 September 2009 - Part 1
Oracle Forms to Apex - OGh - 29 September 2009 - Part 1
 
Getting Started with Oracle APEX
Getting Started with Oracle APEXGetting Started with Oracle APEX
Getting Started with Oracle APEX
 
Oracle APEX for Beginners
Oracle APEX for BeginnersOracle APEX for Beginners
Oracle APEX for Beginners
 
APEX Themes and Templates
APEX Themes and TemplatesAPEX Themes and Templates
APEX Themes and Templates
 
Oracle apex training | Oracle Application Application Express Training | Ora...
Oracle apex training | Oracle Application Application Express Training |  Ora...Oracle apex training | Oracle Application Application Express Training |  Ora...
Oracle apex training | Oracle Application Application Express Training | Ora...
 
Intro on Oracle Application express - APEX
Intro on Oracle Application express - APEXIntro on Oracle Application express - APEX
Intro on Oracle Application express - APEX
 
Apex RnD APEX 5 - Printing
Apex RnD APEX 5 - PrintingApex RnD APEX 5 - Printing
Apex RnD APEX 5 - Printing
 
APEX 5.1 features - AUSOUG Connect 2016
APEX 5.1 features - AUSOUG Connect 2016APEX 5.1 features - AUSOUG Connect 2016
APEX 5.1 features - AUSOUG Connect 2016
 
Apex 5.1 migration and templates - APAC webinar tour
Apex 5.1 migration and templates - APAC webinar tourApex 5.1 migration and templates - APAC webinar tour
Apex 5.1 migration and templates - APAC webinar tour
 
Oracle APEX plugins - AUSOUG Connect 2016
Oracle APEX plugins - AUSOUG Connect 2016Oracle APEX plugins - AUSOUG Connect 2016
Oracle APEX plugins - AUSOUG Connect 2016
 
Oracle Application Express as add-on for Google Apps
Oracle Application Express as add-on for Google AppsOracle Application Express as add-on for Google Apps
Oracle Application Express as add-on for Google Apps
 
Apex World 2015
Apex World 2015Apex World 2015
Apex World 2015
 
Printing with APEX: PL/PDF
Printing with APEX: PL/PDFPrinting with APEX: PL/PDF
Printing with APEX: PL/PDF
 
Create fancy applications with the new Twitter Bootstrap theme for Apex.
Create fancy applications with the new Twitter Bootstrap theme for Apex.Create fancy applications with the new Twitter Bootstrap theme for Apex.
Create fancy applications with the new Twitter Bootstrap theme for Apex.
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
 
Browser Developer Tools
Browser Developer ToolsBrowser Developer Tools
Browser Developer Tools
 

Similar to Mastering universal theme

Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal Theme
Christian Rokitta
 
A forest of designs without subthemes
A forest of designs without subthemesA forest of designs without subthemes
A forest of designs without subthemes
Heather Brooke Drummond
 
Oracle Application Express Introduction
Oracle Application Express  IntroductionOracle Application Express  Introduction
Oracle Application Express Introduction
ssusera8d54f
 
You Can Take Your HAT Off
You Can Take Your HAT OffYou Can Take Your HAT Off
You Can Take Your HAT Off
Jeff Haas
 
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
Christian Rokitta
 
Broaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding optionsBroaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding options
Eric Overfield
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Stack Learner
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
Marc D Anderson
 
SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...
SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...
SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...
Anindita Bhattacharya
 
Unlocking the power of the APEX Plugin Architecture
Unlocking the power of the APEX Plugin ArchitectureUnlocking the power of the APEX Plugin Architecture
Unlocking the power of the APEX Plugin Architecture
Matt Nolan
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
D'arce Hess
 
SXA in action
SXA in actionSXA in action
SXA in action
pratik satikunvar
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
Jeffrey Barke
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
Mediacurrent
 
Alt tab - better apex tabs
Alt tab - better apex tabsAlt tab - better apex tabs
Alt tab - better apex tabs
Enkitec
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
Nadya Rodionenko
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
Melvin John
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
nathanacurtis
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Appdeveloper10
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
Neil Perlin
 

Similar to Mastering universal theme (20)

Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal Theme
 
A forest of designs without subthemes
A forest of designs without subthemesA forest of designs without subthemes
A forest of designs without subthemes
 
Oracle Application Express Introduction
Oracle Application Express  IntroductionOracle Application Express  Introduction
Oracle Application Express Introduction
 
You Can Take Your HAT Off
You Can Take Your HAT OffYou Can Take Your HAT Off
You Can Take Your HAT Off
 
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
 
Broaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding optionsBroaden your dev skillset with SharePoint branding options
Broaden your dev skillset with SharePoint branding options
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
 
SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...
SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...
SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...
 
Unlocking the power of the APEX Plugin Architecture
Unlocking the power of the APEX Plugin ArchitectureUnlocking the power of the APEX Plugin Architecture
Unlocking the power of the APEX Plugin Architecture
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
 
SXA in action
SXA in actionSXA in action
SXA in action
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
Alt tab - better apex tabs
Alt tab - better apex tabsAlt tab - better apex tabs
Alt tab - better apex tabs
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
 

More from Roel Hartman

Wizard of ORDS
Wizard of ORDSWizard of ORDS
Wizard of ORDS
Roel Hartman
 
APEX Bad Practices
APEX Bad PracticesAPEX Bad Practices
APEX Bad Practices
Roel Hartman
 
Tweaking the interactive grid
Tweaking the interactive gridTweaking the interactive grid
Tweaking the interactive grid
Roel Hartman
 
Docker for Dummies
Docker for DummiesDocker for Dummies
Docker for Dummies
Roel Hartman
 
A deep dive into APEX JET charts
A deep dive into APEX JET chartsA deep dive into APEX JET charts
A deep dive into APEX JET charts
Roel Hartman
 
My Top 5 APEX JavaScript API's
My Top 5 APEX JavaScript API'sMy Top 5 APEX JavaScript API's
My Top 5 APEX JavaScript API's
Roel Hartman
 
APEX Developers : Do More With LESS !
APEX Developers : Do More With LESS !APEX Developers : Do More With LESS !
APEX Developers : Do More With LESS !
Roel Hartman
 
Ten Tiny Things To Try Today - Hidden APEX5 Gems Revealed
Ten Tiny Things To Try Today - Hidden APEX5 Gems RevealedTen Tiny Things To Try Today - Hidden APEX5 Gems Revealed
Ten Tiny Things To Try Today - Hidden APEX5 Gems Revealed
Roel Hartman
 
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Roel Hartman
 
APEX printing with BI Publisher
APEX printing with BI PublisherAPEX printing with BI Publisher
APEX printing with BI Publisher
Roel Hartman
 
Troubleshooting APEX Performance Issues
Troubleshooting APEX Performance IssuesTroubleshooting APEX Performance Issues
Troubleshooting APEX Performance Issues
Roel Hartman
 
5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX
Roel Hartman
 
Striving for Perfection: The Ultimate APEX Application Architecture
Striving for Perfection: The Ultimate APEX Application ArchitectureStriving for Perfection: The Ultimate APEX Application Architecture
Striving for Perfection: The Ultimate APEX Application Architecture
Roel Hartman
 
XFILES, the APEX 4 version - The truth is in there
XFILES, the APEX 4 version - The truth is in thereXFILES, the APEX 4 version - The truth is in there
XFILES, the APEX 4 version - The truth is in there
Roel Hartman
 
Done in 60 seconds - Creating Web 2.0 applications made easy
Done in 60 seconds - Creating Web 2.0 applications made easyDone in 60 seconds - Creating Web 2.0 applications made easy
Done in 60 seconds - Creating Web 2.0 applications made easy
Roel Hartman
 
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Roel Hartman
 
Creating sub zero dashboard plugin for apex with google
Creating sub zero dashboard plugin for apex with googleCreating sub zero dashboard plugin for apex with google
Creating sub zero dashboard plugin for apex with google
Roel Hartman
 
Integration of APEX and Oracle Forms
Integration of APEX and Oracle FormsIntegration of APEX and Oracle Forms
Integration of APEX and Oracle Forms
Roel Hartman
 
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Roel Hartman
 

More from Roel Hartman (19)

Wizard of ORDS
Wizard of ORDSWizard of ORDS
Wizard of ORDS
 
APEX Bad Practices
APEX Bad PracticesAPEX Bad Practices
APEX Bad Practices
 
Tweaking the interactive grid
Tweaking the interactive gridTweaking the interactive grid
Tweaking the interactive grid
 
Docker for Dummies
Docker for DummiesDocker for Dummies
Docker for Dummies
 
A deep dive into APEX JET charts
A deep dive into APEX JET chartsA deep dive into APEX JET charts
A deep dive into APEX JET charts
 
My Top 5 APEX JavaScript API's
My Top 5 APEX JavaScript API'sMy Top 5 APEX JavaScript API's
My Top 5 APEX JavaScript API's
 
APEX Developers : Do More With LESS !
APEX Developers : Do More With LESS !APEX Developers : Do More With LESS !
APEX Developers : Do More With LESS !
 
Ten Tiny Things To Try Today - Hidden APEX5 Gems Revealed
Ten Tiny Things To Try Today - Hidden APEX5 Gems RevealedTen Tiny Things To Try Today - Hidden APEX5 Gems Revealed
Ten Tiny Things To Try Today - Hidden APEX5 Gems Revealed
 
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
 
APEX printing with BI Publisher
APEX printing with BI PublisherAPEX printing with BI Publisher
APEX printing with BI Publisher
 
Troubleshooting APEX Performance Issues
Troubleshooting APEX Performance IssuesTroubleshooting APEX Performance Issues
Troubleshooting APEX Performance Issues
 
5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX
 
Striving for Perfection: The Ultimate APEX Application Architecture
Striving for Perfection: The Ultimate APEX Application ArchitectureStriving for Perfection: The Ultimate APEX Application Architecture
Striving for Perfection: The Ultimate APEX Application Architecture
 
XFILES, the APEX 4 version - The truth is in there
XFILES, the APEX 4 version - The truth is in thereXFILES, the APEX 4 version - The truth is in there
XFILES, the APEX 4 version - The truth is in there
 
Done in 60 seconds - Creating Web 2.0 applications made easy
Done in 60 seconds - Creating Web 2.0 applications made easyDone in 60 seconds - Creating Web 2.0 applications made easy
Done in 60 seconds - Creating Web 2.0 applications made easy
 
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
Tales from a Parallel Universe: Using Oracle 11gR2's Edition Based Redefiniti...
 
Creating sub zero dashboard plugin for apex with google
Creating sub zero dashboard plugin for apex with googleCreating sub zero dashboard plugin for apex with google
Creating sub zero dashboard plugin for apex with google
 
Integration of APEX and Oracle Forms
Integration of APEX and Oracle FormsIntegration of APEX and Oracle Forms
Integration of APEX and Oracle Forms
 
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
 

Recently uploaded

Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
Remote DBA Services
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
Marcin Chrost
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
Green Software Development
 
What’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete RoadmapWhat’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete Roadmap
Envertis Software Solutions
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
Karya Keeper
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
Green Software Development
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
ervikas4
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
ShulagnaSarkar2
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
gapen1
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
kalichargn70th171
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
The Third Creative Media
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
Tier1 app
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
Green Software Development
 
Unveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdfUnveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdf
brainerhub1
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
Peter Muessig
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
Maitrey Patel
 
All you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVMAll you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVM
Alina Yurenko
 
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
kalichargn70th171
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
ISH Technologies
 

Recently uploaded (20)

Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
 
What’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete RoadmapWhat’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete Roadmap
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
 
Unveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdfUnveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdf
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
 
All you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVMAll you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVM
 
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
 

Mastering universal theme

  • 1. Copyright © 2015 APEX Consulting Mastering the APEX Universal Theme Roel Hartman
  • 2. 2
  • 3.
  • 4.
  • 5.
  • 6. Copyright © 2015 APEX Consulting Themes
  • 7. Copyright © 2015 APEX Consulting What are Themes?
  • 8. Copyright © 2015 APEX Consulting What was wrong with the old Themes? Templates Table Based CSS tuning
  • 9. Copyright © 2015 APEX Consulting The answer of the APEX Dev Team: 42
  • 10.
  • 11. Copyright © 2015 APEX Consulting Managing Templates Less is more …
  • 12. Managing Templates • Just a few templates per type • Fine tune using Template Options
  • 13. Managing Templates Options • Declarative • One click magic • No additional template • No CSS
  • 14. Managing Templates Options • And you can create your own! • Example: Set an item to uppercase / lowercase
  • 15. DEMONSTRATION Copyright © 2015 APEX Consulting Create a Template Option Group
  • 16.
  • 17. DEMONSTRATION Copyright © 2015 APEX Consulting Create Template Options
  • 18.
  • 19. DEMONSTRATION Copyright © 2015 APEX Consulting Use Template Options
  • 20.
  • 21. DEMONSTRATION Copyright © 2015 APEX Consulting Running the Page
  • 22.
  • 23. Make It Work .Ukoug--Uppercase input { text-transform: uppercase } • Now it can be used by all other developers without knowing any CSS Note: This CSS won’t change the actual value !!!
  • 24. Copyright © 2015 APEX Consulting What was wrong with the old Themes? Templates Table Based CSS tuning
  • 25. Grids • Fluid • Nested • Regions, Items and Labels
  • 26. Fluid? • adaptive • pixel based • use different pixel sizes for different screen sizes • fluid • maximum size fixed • columns based on percentages
  • 27. Fluid? <div class="container"> <div class="row"> <div class="col col-7”> #CONTENT# </div> <div class="col col-5”> #CONTENT# </div> </div> </div>
  • 28. Grid != Responsive • reducing screen size > reduce columns widths • so you need more …
  • 29. Responsive Grid • media queries - just one major breakpoint defined @media (max-width:640px){ .col-1,.col-10,.col-11,.col-12, .col-2,.col-3,.col-4,.col-5, .col-6,.col-7,.col-8,.col-9 { width:100%; } }
  • 30. Regions, Items And Labels • Column 8 = start on 8th • Column Span 3 = “.col-3”
  • 31. Regions, Items And Labels • Label Column Span
  • 33. Copyright © 2015 APEX Consulting What was wrong with the old Themes? Templates Table Based CSS tuning
  • 34. DEMONSTRATION Copyright © 2015 APEX Consulting Theme Roller
  • 35.
  • 36. DEMONSTRATION Copyright © 2015 APEX Consulting Theme Roller - Theme Styles
  • 37.
  • 38. DEMONSTRATION Copyright © 2015 APEX Consulting Theme Roller - Copy Theme Styles
  • 39.
  • 40. Copyright © 2015 APEX Consulting What was wrong with the old Themes? Templates Table Based CSS tuning
  • 41. downside is, you need a lot of templates for each and every building block: one for a region with a border and one for a region without a border; one for a report with a header and one for a report without one. So you end up with an impressive number of templates, and making general changes, e.g. a change that applies to all region templates, is a lot of work. So that should be made simpler. Mastering the In the spring of this year the long awaited version 5.0 of Oracle Application Express (APEX) was released. This version was not just another update, but a major overhaul with two goals: increase developer productivity and create better-looking applications on every device. Roel Hartman, Director & Senior APEX Developer, APEX Consulting APEX Universal Theme Although APEX was already well known for its speed of development, the developer still needed to click around quite a lot when making changes to his application. That’s totally changed with the appearance of the “Page Designer”. In one view you can see all the details of your page, a graphical representation of what your page looks like and the properties of the current selected item (see figure 1). Just like in good old Oracle Forms you can select multiple items at once and make changes to common attributes with just one click. Next to Page Designer there are dozens of other new features that makes APEX one of the most productive, if not the most productive, Oracle development environments. The Issues With The Old Templates The second goal of APEX 5.0 was to make it easier to create good-looking applications on every device. In APEX, templates define the look of an application. There are templates for every type of building block, like pages, regions, buttons etc and a set of templates is grouped into a theme. So you’ll get a uniform look across your application when you’ve picked a theme. The www.ukoug.org 17 APEX & Database Development FIGURE 1: PAGE DESIGNER See the latest issue of Oracle Scene Sign up for our training (tomorrow !!).
 Special price: GBP xxx
  • 42.
  • 43. Copyright © 2015 APEX Consulting Q& Aroel@apexconsulting.nl http://www.apexconsulting.nl