One of the most important features of Oracle Application Express 5 is the Universal Theme. This theme allows every database developer to create great looking applications without knowing any JavaScript, HTML or CSS. But how do you make changes to comply to your company branding in such a way you don't break anything else? And how do you add new templates and template options? In this session you will learn how the Universal Theme works, what the components are and what you should and shouldn't do when you make your changes.

1. Copyright © 2015 APEX Consulting
Mastering the APEX
Universal Theme
Roel Hartman

2. 2

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

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

17. DEMONSTRATION
Copyright © 2015 APEX Consulting
Create Template
Options

19. DEMONSTRATION
Copyright © 2015 APEX Consulting
Use Template Options

21. DEMONSTRATION
Copyright © 2015 APEX Consulting
Running the Page

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

32. Responsive. Fluid. Grid.

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

36. DEMONSTRATION
Copyright © 2015 APEX Consulting
Theme Roller -
Theme Styles

38. DEMONSTRATION
Copyright © 2015 APEX Consulting
Theme Roller -
Copy Theme Styles

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

43. Copyright © 2015 APEX Consulting
Q& Aroel@apexconsulting.nl
http://www.apexconsulting.nl

44. roel@apexconsulting.nl
http://www.apexconsulting.nl
Copyright © 2015 APEX Consulting