Our fourth episode in the Insum Insider series finds Senior APEX developer Hayden Hudson and Oracle ACE Vincent Morneau addressing how to leverage 3rd party design libraries – specifically Google’s Material – to improve the aesthetic of your APEX application. Host Monty Latiolais introduces Hayden and Vincent at 5:16 in the video.
Episode Show Notes:
This was an excellent session by all accounts. Based on the questions our experts fielded, the subject of front-end design is becoming increasingly important to APEX developers.
00:16 – Hosts Monty Latiolais and Michelle Skamene opened the session by discussing some of their experiences with APEX design and how in its earlier days, APEX was always visually recognizable.
6:03 – Hayden and Vincent introduced their subject: Integrating Google’s Material with Oracle APEX.
Hayden explained that this session is a follow up to his blog post on the front-end design options offered to those developing APEX applications, entitled “APEX Should be Beautiful”.
Vincent explained how he started out working different external themes into APEX, in order to make it look different, which lead to his “Material APEX” theme, and on to a lot of work on integrating Google’s Material with APEX. He cited the website “For All a Beautiful Earth” as an example of a brand-new theme used in APEX, based on Material Design.
9:30 – Hayden and Vincent discuss the topic of the misunderstanding of APEX’s design capabilities, and whether or not to use frameworks and libraries other than APEX’s Universal Theme.
Google Material Theme discussion
14:10 – Hayden and Vincent discuss the use of Google’s Material theme and what it has to offer.
18:05 – Hayden presents a sample data application in APEX. He compares its graphic environment with what can be obtained in Google’s Material. This demonstrates, in Hayden’s words, how “The Material universe is more deliberate” in comparison to APEX.
26:40 – Hayden demonstrates a Material design in a mobile application on his phone.
Google Material Theme Integration with APEX
29:56 – Hayden and Vincent discuss the integration of a Material design within APEX. The contents of this demonstration and a detailed tutorial can also be found here: Adding 3rd party design libraries to APEX – Google’s Material Design.
This discussion covers the three main elements needed for integration: CSS, JavaScript, and HTML. For HTML, (at 34:10) Hayden recommended the following repository On Github: https://material-components.github.io/material-components-web-catalog/#/.
35:40 – Hayden demonstrates remaining subscribed to APEX’s Universal Theme (his recommendation) and using it as a base, pulling in 3rd party templates as necessary by copy-pasting and changing the substitution strings within APEX. Demo with code starts at 39:49.
48:19 – Hayden and Vincent describe how the creators of “For All a Beautiful Earth” unsubscribed from APEX’s Universal Theme to obtain more ambitious designs.
Participant Questions and Conclusion
50:10 – Hayden and Vincent answer participant questions.
1:02:30 – Host Monty Latiolais closes out this session.
