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.
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.
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
25. Other Customization Options
• Modifying UT (break subscription)
• CSS overwrite UT
• Develop a Theme from
Scratch
• Get and convert a ready-made
HTML Theme
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
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!