Post on 16-Apr-2017
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?TemplatesTable BasedCSS tuning
Copyright © 2015 APEX Consulting
The answer of the APEX Dev Team:
42
Copyright © 2015 APEX Consulting
Managing TemplatesLess 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?TemplatesTable BasedCSS 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?TemplatesTable BasedCSS 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?TemplatesTable BasedCSS 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 theIn 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 TemplatesThe 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 & A roel@apexconsulting.nl
http://www.apexconsulting.nl
roel@apexconsulting.nlhttp://www.apexconsulting.nl
Copyright © 2015 APEX Consulting