Mastering the APEX Universal Theme

Transcription

1 Mastering the APEX Universal Theme Roel Hartman Copyright 2015 APEX Consulting 2

2 Themes APEX GURU What are Themes? What was wrong with the old Themes? Table Based CSS tuning Templates

3 The answer of the APEX Dev Team: 42 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

4 Fluid? <div class="container"> <div class="row"> <div class="col col-7 > Grid!= Responsive reducing screen size > reduce columns widths so you need more #CONTENT# </div> <div class="col col-5 > #CONTENT# </div> </div> </div> Responsive Grid media queries - just one major breakpoint (max-width:640px){.col-1,.col-10,.col-11,.col-12, Regions, Items And Labels Column 8 = start on 8th Column Span 3 =.col-3.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9 { width:100%; } }

5 Regions, Items And Labels Responsive. Fluid. Grid. Label Column Span What was wrong with the old Themes? Table Based CSS tuning Templates Theme Roller

6 Theme Roller - Theme Styles Theme Roller - Copy Theme Styles

7 What was wrong with the old Themes? Table Based CSS tuning Templates Managing Templates Managing Templates Less is more Just a few templates per type Fine tune using Template Options

8 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 Create a Template Option Group

9 Create Template Options Use Template Options

10 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!!! What was wrong with the old Themes? Templates Table Based CSS tuning

11 downside is, you need a lot of templates for each and every APEX & Database Development Mastering the APEX Universal Theme See the latest issue of Oracle Scene 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 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. FIGURE 1: PAGE DESIGNER 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 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. Q & A roel@apexconsulting.nl roel@apexconsulting.nl