Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Hitchhiker's guide to the Universal Theme

690 vues

Publié le

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.

Publié dans : Logiciels
  • You can ask here for a help. They helped me a lot an i`m highly satisfied with quality of work done. I can promise you 100% un-plagiarized text and good experts there. Use with pleasure! ⇒ www.HelpWriting.net ⇐
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download Full EPUB Ebook here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download Full doc Ebook here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download PDF EBOOK here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download EPUB Ebook here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download doc Ebook here { https://redirect.is/fyxsb0u } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Very nice tips on this. In case you need help on any kind of academic writing visit website ⇒ www.WritePaper.info ⇐ and place your order
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Hitchhiker's guide to the Universal Theme

  1. 1. Hitchhiker's guide to the Universal Theme Christian Rokitta
  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. 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.
  4. 4. A Brief History of APEX Themes
  5. 5. Brief History of APEX Themes
  6. 6. Brief History of APEX Themes Theme 25
  7. 7. 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!
  8. 8. “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.”
  9. 9. “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
  10. 10. 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
  11. 11. http://apex.oracle.com/ut
  12. 12. Components
  13. 13. APEX 5 Feature Quiz APEX 5 UT Template Options Themeroller Theme Styles Inline Dialog Modal Page Cards Font APEX
  14. 14. 42? “Exactly!" said Deep Thought. "So once you do know what the question actually is, you'll know what the answer means.”
  15. 15. Choices for Universal Theme Customization
  16. 16. UT Customization • Themeroller – Colors – Border Radius Region, Button, Form Item – Side Column Width – Custom CSS
  17. 17. Themeroller? Mostly Harmless!
  18. 18. impact of Universal Theme on APEX application UI’s …
  19. 19. UT/Customization?
  20. 20. Why Customization? • Different User Experience • Audience • Purpose • Branding • Increase Customer Conversions • …
  21. 21. Other Customization Options • Modifying UT (break subscription) • CSS overwrite UT • Develop a Theme from Scratch • Get and convert a ready-made HTML Theme
  22. 22. Oracle APEX Developers are (usually) not Web Designers remember:
  23. 23. 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?
  24. 24. SB Admin 2 for OrclApex http://bootstrap-apex.com
  25. 25. Material APEX https://github.com/vincentmorneau/material-apex
  26. 26. BYO Custom APEX UI • High Costs • High maintenance • Losing UT Upgrades
  27. 27. 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!
  28. 28. 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
  29. 29. Available Frameworks
  30. 30. 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
  31. 31. UT vs BT CSS Grid
  32. 32. 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!
  33. 33. Determing Visual Elements Title Breadcrumbs/Breadcrumbs
  34. 34. 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
  35. 35. 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
  36. 36. DEMO
  37. 37. Bootstrapify UT: Steps 1. Page Template 2. Navigation Template 3. Breadcrumbs Template 4. Region Template 5. Buttons 6. Form Elements 7. Some (CSS) Fixes
  38. 38. 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
  39. 39. Bootstrapification/Navigation Template 1. copy current navigation list template 2. change HTML definition 3. switch application default property to new template
  40. 40. Bootstrapification/Breadcrumb Template 1. copy/add breadcrumb templates 2. switch application default property to new template
  41. 41. Bootstrapification/Region Template 1. CSS overwrite UT Region Template CSS
  42. 42. Bootstrapification/Button Templates 1. copy all 3 UT button template variants 2. change HTML definition 3. add btn-type template options
  43. 43. Bootstrapification/Form Elements 1. apply CSS – add classes to UT elements – overwrite UT CSS
  44. 44. Bootstrapification/Finetuning
  45. 45. Bootstrapified
  46. 46. Some minor problems • Template Option & Template Option Groups (cannot add custom groups) • Conflicting JS libraries • CSS can be complex
  47. 47. Conclusion • UT is the standard • Customization is possible • Extending UT is cost effective • Some CSS/HTML/JS skills needed
  48. 48. Q&A www.rokit.nl www.themes4apex.com www.apexsmartpivot.com blog.rokit.nl @crokitta @themes4apex @apexsmartpivot www.linkedin.com/in/rokit

×