Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrapify Universal Theme

1,826 views

Published on

How to extend APEX Universal Theme save and cost effective with of-the-shelf Bootstrap Admin Themes

Published in: Software
  • Login to see the comments

Bootstrapify Universal Theme

  1. 1. Bootstrapify Universal Theme Christian Rokitta Rotterdam 2017 APEX World
  2. 2. 1993 today 1996 1999 2009 20152010 2011 2014 Oracle Database Version 6 Hoechst AG Clinical Research Frankfurt, Germany Custom Development Utrecht, Netherlands <HTML> Oracle Consultant/Product Development Manager Utrecht, Netherlands mod_plsql Oracle Web Toolkit JavaScript(); HTML DB APEX Speaker Oracle Database & Application Express Consultant Utrecht, Netherlands {CSS} proud member of APEX UI Customization Reporting Plug-in Christian Rokitta
  3. 3. Bootstrapify Universal Theme Agenda Universal Theme BBootstrapCustomization
  4. 4. Brief History of APEX Themes
  5. 5. Brief History of APEX Themes Theme 25
  6. 6. Universal Theme • introduced with APEX version 5 • responsive, versatile, and customizable • 42 Answer to the Ultimate Question of Life, the Universe, and Everything • lots of (new) available components • Themeroller, Themestyles, Template Options • designed uniquely for Application Express 5 • makes it easy for developers to build beautiful, modern applications for any purpose
  7. 7. http://apex.oracle.com/ut
  8. 8. APEX 5 Feature Quiz APEX 5 UT Template Options Themeroller Theme Styles Inline Dialog Modal Page Cards Font APEX
  9. 9. UT Customization • Themeroller – Colors – Border Radius Region, Button, Form Item – Side Column Width – Custom CSS
  10. 10. UT/Customization?
  11. 11. impact of Universal Theme on APEX application UI’s …
  12. 12. Other Customization Options • Modifying UT (break subscription) • CSS overwrite UT • Develop a Theme from Scratch • Get and convert a ready-made HTML Theme
  13. 13. Oracle APEX Developers are (usually) not Web Designers remember:
  14. 14. Custom APEX Theme Examples done from scratch • SB Admin 2 for OrclApex, Sergei & Richard Martens The Bootstrap Brothers! • Material APEX, Vincent Morneau The Material Man?
  15. 15. SB Admin 2 for OrclApex
  16. 16. Material APEX
  17. 17. Custom APEX UI • High Costs • High maintenance • Losing UT Upgrades
  18. 18. Custom Themes “1.6.4 Themes 1–26 and Theme 50 Deprecated The Universal Theme (Theme 42) and the Mobile Theme (Theme 51) are the standard themes in Oracle Application Express release 5.1. Older themes are considered legacy and are deprecated. Applications using these themes should be migrated to the Universal Theme.” Universal Theme will be upgraded with future versions of APEX when Subscription to Master Theme is kept!
  19. 19. Why? • Different User Experience • Audience • Purpose • Branding • Increase Customer Conversions • …
  20. 20. Form Follows Function?
  21. 21. Form and Function should be One!
  22. 22. Aesthetics Though subjective and somewhat arbitrary, play an important role in overall satisfaction. Users respond positively to pleasing user interfaces, sometimes even overlooking missing functionality. But you’re not creating a work of art! In the end, users will be spending a lot of time in front of a business application, and no matter how usable, consistent or forgiving the interface is, satisfaction will be critical in determining how good the user interface is.
  23. 23. Ideal Custom Theme • Supporting Function of Application • Cost Effective • Offers same or similar declarative components/features as UT • Doesn’t Change, but Extend Universal Theme
  24. 24. Available Frameworks
  25. 25. Bootstrap B o most used front end web development framework in the world o includes CSS, HTML and JavaScript components o responsive web design support o extensive documentation o developed by Twitter ‐ out-of-the-box file size of 276kB due to excessive number of rarely used styles ‐ excessive number of HTML classes and DOM elements can be messy and confusing
  26. 26. UT vs BT CSS Grid
  27. 27. Integratibility UT & BT • CSS is applied to isolated components • only a handful of converted/custom templates • minor CSS overwrite for visual consistency • keep all functional complex UT components that make developing in APEX rapid!
  28. 28. Determing Visual Elements Title Breadcrumbs/Breadcrumbs
  29. 29. Components to adapt • Structure (Templates)  Header, Navigation Footer -> Page Template  Region, Dialogs, Buttons -> Region Templates • Font -> CSS • Buttons -> Templates/CSS • Form Elements -> CSS • Individual extra Components -> Templates, Plugins
  30. 30. Bootstrap Themes • off-the-shelf Bootstrap (Admin) Themes • consistent UI design -> UX • complete (components, page examples, …) • customizable/adaptable • free vs licensed • where to find – themeforest.net – wrapbootstrap.com – websites & newsletters: speckyboy, smashing magazine, webdesigner magazine, … B
  31. 31. DEMO
  32. 32. DEMO
  33. 33. Bootstrapify UT: Steps 1. Page Template 2. Navigation Template 3. Breadcrumbs Template 4. Region Template 5. Buttons 6. Form Elements 7. Some (CSS) Fixes
  34. 34. Bootstrapification/Page Template 1. copy UT Standard page template 2. add JS and CSS file references check JS for library overload 3. change page HTML definition 4. adapt Layout (Grid) definition container DIV
  35. 35. Bootstrapification/Navigation Template 1. copy current navigation list template 2. change HTML definition 3. switch application default property to new template
  36. 36. Bootstrapification/Breadcrumb Template 1. copy/add breadcrumb templates 2. switch application default property to new template
  37. 37. Bootstrapification/Region Template 1. CSS overwrite UT Region Template CSS
  38. 38. Bootstrapification/Button Templates 1. copy all 3 UT button template variants 2. change HTML definition 3. add btn-type template options
  39. 39. Bootstrapification/Form Elements 1. apply CSS – add classes to UT elements – overwrite UT CSS
  40. 40. Bootstrapification/Finetuning
  41. 41. Bootstrapified
  42. 42. Conclusion • UT is the standard • Customization is possible • Extending UT is cost effective • Some CSS/HTML/JS skills needed
  43. 43. Q&A www.rokit.nl www.themes4apex.com www.apexsmartpivot.com blog.rokit.nl @crokitta @themes4apex @apexsmartpivot www.linkedin.com/in/rokit

×