Mastering universal theme

1,332 views

Published on

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.

Published in: Software

Mastering universal theme

  1. 1. Copyright © 2015 APEX Consulting Mastering the APEX Universal Theme Roel Hartman
  2. 2. 2
  3. 3. Copyright © 2015 APEX Consulting Themes
  4. 4. Copyright © 2015 APEX Consulting What are Themes?
  5. 5. Copyright © 2015 APEX Consulting What was wrong with the old Themes? Templates Table Based CSS tuning
  6. 6. Copyright © 2015 APEX Consulting The answer of the APEX Dev Team: 42
  7. 7. Copyright © 2015 APEX Consulting Managing Templates Less is more …
  8. 8. Managing Templates • Just a few templates per type • Fine tune using Template Options
  9. 9. Managing Templates Options • Declarative • One click magic • No additional template • No CSS
  10. 10. Managing Templates Options • And you can create your own! • Example: Set an item to uppercase / lowercase
  11. 11. DEMONSTRATION Copyright © 2015 APEX Consulting Create a Template Option Group
  12. 12. DEMONSTRATION Copyright © 2015 APEX Consulting Create Template Options
  13. 13. DEMONSTRATION Copyright © 2015 APEX Consulting Use Template Options
  14. 14. DEMONSTRATION Copyright © 2015 APEX Consulting Running the Page
  15. 15. 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 !!!
  16. 16. Copyright © 2015 APEX Consulting What was wrong with the old Themes? Templates Table Based CSS tuning
  17. 17. Grids • Fluid • Nested • Regions, Items and Labels
  18. 18. Fluid? • adaptive • pixel based • use different pixel sizes for different screen sizes • fluid • maximum size fixed • columns based on percentages
  19. 19. Fluid? <div class="container"> <div class="row"> <div class="col col-7”> #CONTENT# </div> <div class="col col-5”> #CONTENT# </div> </div> </div>
  20. 20. Grid != Responsive • reducing screen size > reduce columns widths • so you need more …
  21. 21. 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%; } }
  22. 22. Regions, Items And Labels • Column 8 = start on 8th • Column Span 3 = “.col-3”
  23. 23. Regions, Items And Labels • Label Column Span
  24. 24. Responsive. Fluid. Grid.
  25. 25. Copyright © 2015 APEX Consulting What was wrong with the old Themes? Templates Table Based CSS tuning
  26. 26. DEMONSTRATION Copyright © 2015 APEX Consulting Theme Roller
  27. 27. DEMONSTRATION Copyright © 2015 APEX Consulting Theme Roller - Theme Styles
  28. 28. DEMONSTRATION Copyright © 2015 APEX Consulting Theme Roller - Copy Theme Styles
  29. 29. Copyright © 2015 APEX Consulting What was wrong with the old Themes? Templates Table Based CSS tuning
  30. 30. 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
  31. 31. Copyright © 2015 APEX Consulting Q& Aroel@apexconsulting.nl http://www.apexconsulting.nl
  32. 32. roel@apexconsulting.nl http://www.apexconsulting.nl Copyright © 2015 APEX Consulting

×