Hitchhiker's guide to the Universal Theme
•
3 j'aime•898 vues
When APEX 5.0 was released, it came with an entirely new theme: The Universal Theme. This theme impressively showcased a number of new features that where build into this new Application Express release: Themestyles, Template Options, Themeroller. These features, and how these are leveraged by the Universal Theme, made building a modern UI much easier and enhanced the User Experience of APEX applications. All an APEX developer has to know is, how to use these declarative features. So let’s have a look at these in detail. But with declarativity comes limitation, and for someone familiar with CSS, Themeroller is “Mostly Harmless”. Using the Universal Theme as a standard, the “Answer to Life, Universe and Everything …”: 42, eventually all APEX applications will somewhat look similar. So what about customizing Universal Theme to really fit your design needs? Well, it’s not that easy, but possible. I’ll show(case) some options.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Hitchhiker's guide to the Universal Theme
Similaire à Hitchhiker's guide to the Universal Theme (20)
Plus de Christian Rokitta
Plus de Christian Rokitta (12)
Dernier
Dernier (20)
Hitchhiker's guide to the Universal Theme
- 2. Hitchhiker's guide to the Universal Theme Christian Rokitta
- 3. 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
- 4. The Hitchhiker's Guide to the Galaxy a trilogy in five parts In The Hitchhiker's Guide to the Galaxy (published in 1979), the characters visit the legendary planet Magrathea, home to the now-collapsed planet-building industry, and meet Slartibartfast, a planetary coastline designer who was responsible for the fjords of Norway. Through archival recordings, he relates the story of a race of hyper-intelligent pan-dimensional beings who built a computer named Deep Thought to calculate the Answer to the Ultimate Question of Life, the Universe, and Everything. When the answer was revealed to be 42, Deep Thought explained that the answer was incomprehensible because the beings didn't know what they were asking. It went on to predict that another computer, more powerful than itself would be made and designed by it to calculate the question for the answer. (Later on, referencing this, Adams would create the 42 Puzzle, a puzzle which could be approached in multiple ways, all yielding the answer 42.) The computer, often mistaken for a planet (because of its size and use of biological components), was the Earth, and was destroyed by Vogons to make way for a hyper spatial express route five minutes before the conclusion of its 10-million-year program. Two members of the race of hyper-intelligent pan-dimensional beings who commissioned the Earth in the first place disguise themselves as Trillian's mice, and want to dissect Arthur's brain to help reconstruct the question, since he was part of the Earth's matrix moments before it was destroyed, and so he is likely to have part of the question buried in his brain. Trillian is also human but had left Earth six months previously with Zaphod Beeblebrox, President of the Galaxy. The protagonists escape, setting course for "The Restaurant at the End of the Universe". The mice, in Arthur's absence, create a phony question since it is too troublesome for them to wait 10 million years again just to cash in on a lucrative deal.
- 6. A Brief History of APEX Themes
- 7. Brief History of APEX Themes
- 8. Brief History of APEX Themes Theme 25
- 9. Legacy 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!
- 10. “There’s no point in acting surprised about it. All the planning charts and demolition orders have been on display at your local planning department in Alpha Centauri for 50 of your Earth years, so you’ve had plenty of time to lodge any formal complaint and it’s far too late to start making a fuss about it now. … What do you mean you’ve never been to Alpha Centauri? Oh, for heaven’s sake, mankind, it’s only four light years away, you know. I’m sorry, but if you can’t be bothered to take an interest in local affairs, that’s your own lookout. Energize the demolition beams.”
- 11. “The Answer to the Great Question... Of Life, the Universe and Everything... Is... Forty-two” said Deep Thought, with infinite majesty and calm. Shakeeb Rahman
- 12. 42: 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
- 16. Components
- 17. APEX 5 Feature Quiz APEX 5 UT Template Options Themeroller Theme Styles Inline Dialog Modal Page Cards Font APEX
- 18. 42? “Exactly!" said Deep Thought. "So once you do know what the question actually is, you'll know what the answer means.”
- 20. UT Customization • Themeroller – Colors – Border Radius Region, Button, Form Item – Side Column Width – Custom CSS
- 22. impact of Universal Theme on APEX application UI’s …
- 24. Why Customization? • Different User Experience • Audience • Purpose • Branding • Increase Customer Conversions • …
- 25. Other Customization Options • Modifying UT (break subscription) • CSS overwrite UT • Develop a Theme from Scratch • Get and convert a ready-made HTML Theme
- 26. Oracle APEX Developers are (usually) not Web Designers remember:
- 27. 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?
- 28. SB Admin 2 for OrclApex http://bootstrap-apex.com
- 30. BYO Custom APEX UI • High Costs • High maintenance • Losing UT Upgrades
- 31. 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!
- 32. 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
- 34. 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
- 35. UT vs BT CSS Grid
- 36. Integratability 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!
- 38. 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
- 39. 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
- 40. DEMO
- 46. Bootstrapify UT: Steps 1. Page Template 2. Navigation Template 3. Breadcrumbs Template 4. Region Template 5. Buttons 6. Form Elements 7. Some (CSS) Fixes
- 47. 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
- 48. Bootstrapification/Navigation Template 1. copy current navigation list template 2. change HTML definition 3. switch application default property to new template
- 49. Bootstrapification/Breadcrumb Template 1. copy/add breadcrumb templates 2. switch application default property to new template
- 50. Bootstrapification/Region Template 1. CSS overwrite UT Region Template CSS
- 51. Bootstrapification/Button Templates 1. copy all 3 UT button template variants 2. change HTML definition 3. add btn-type template options
- 52. Bootstrapification/Form Elements 1. apply CSS – add classes to UT elements – overwrite UT CSS
- 54. Bootstrapified
- 55. Some minor problems • Template Option & Template Option Groups (cannot add custom groups) • Conflicting JS libraries • CSS can be complex
- 56. Conclusion • UT is the standard • Customization is possible • Extending UT is cost effective • Some CSS/HTML/JS skills needed