Mastering universal theme

Copyright © 2015 APEX Consulting

Mastering the APEX Universal Theme

Roel Hartman

http://apex-evangelists.com


Themes


What are Themes?


What was wrong with the old Themes?TemplatesTable BasedCSS tuning


The answer of the APEX Dev Team:

42


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


Create a Template Option Group

DEMONSTRATION


Create Template Options

DEMONSTRATION


Use Template Options

DEMONSTRATION


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 !!!

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.

DEMONSTRATION


Theme Roller

DEMONSTRATION


Theme Roller - Theme Styles

DEMONSTRATION


Theme Roller - Copy Theme Styles

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

http://www.kscope16.com


Q & A [email protected]

http://www.apexconsulting.nl

mailto:[email protected]


[email protected]://www.apexconsulting.nl


mailto:[email protected]


Mastering universal theme

Software

Transcript of Mastering universal theme