際際滷

際際滷Share a Scribd company logo
Ausoug Connect 2018 - Modern APEX application
November 2018
Modern apps -
Universal Theme
AUSOUG 2018 Connect Perth and Melbourne
lschilde.blogspot.com
@LinoSchilde
lschilde@apexRnD.co.nz
Who am I?
13+ years Oracle development experience
APEX Blogger and enthusiast
NZ APEX meetup organizer
Conference speaker
AUSOUG APEX webinar series organizer
ODTUG 2018 Leadership academy graduate
Agenda
Build an app
CSS
Universal theme and 18.2 components
Q&A Extras
Our app
Ausoug Connect 2018 - Modern APEX application
Universal theme classes
Built in classes
Built in classes
c看鉛看姻壊
https://apex.oracle.com/pls/apex/f?p=42:6303:::NO:::
layout and content modifiers
width
heightmargin
text
APEX 18.*
New components
Floating labels
Small and large font APEX
Now an open source project too - https://github.com/oracle/font-apex
Reflow report
Full screen
Small screen
Column toggle report
List view
Summary
Building an app has never been easier
CSS skills are still in high demand
Universal theme and 18.2 components continue to rock
Q&A
www.apexRnD.co.nz
lschilde.blogspot.com
@LinoSchilde
lschilde@apexRnD.co.nz
Thank you for attending
Enjoy the rest of the conference!
www.apexofficeprint.com

More Related Content

Ausoug Connect 2018 - Modern APEX application

Editor's Notes

  • #6: Inspired by https://apex.oracle.com/en/ look and feel and trying to build something that is not typically a backend app only. Mention application preparation app Vita dark upload static files Change navigation to bar menu Home -> fa-home About us -> fa-info-circle -> no parent Sign out -> no parent User interface --navigation menu Display NO Logo select Logo type: image Logo: #APP_IMAGES#ausoug-logo-trans.png Copy list from Page 0 footer list create new report card template as a copy <li class="t-Cards-item #CARD_MODIFIERS#"> <div class="t-Card"> <div class="t-Card-wrap"> <div class="#CARD_IMAGE_CLASS#"><img src="#CARD_ICON#" class="sb-450x150" /></div> <div class="t-Card-titleWrap"><h3 class="t-Card-title u-textUpper">#CARD_TITLE#</h3></div> <div class="t-Card-body"> <div class="t-Card-desc u-textUpper">#CARD_TEXT#</div> <div class="t-Card-info u-textUpper">#CARD_SUBTEXT#</div> </div> <span class="t-Card-colorFill u-color #CARD_COLOR#"></span> </div> </div> </li> Explain page 0 steps prepared 3 regions containing footer info and CSS Explore it See what happened when you run with not CSS ---PAGE 1 start building blocks following your notes
  • #7: -- APEX modern apps -- history -- with Jquery mobile -- many universal themes -- 4.2 and responsive start with grid layouts -- Universal theme apex.oracle.com/ut -- introduction -- changes -- font APEX normal and large style specifically designed for business apps by DEV team -- open source to be used whenever you want free of charge -- mobile touch events -- building for mobile -- navigation top as menu or side tree navigation -- navigation for all screen now allows bottom screen anchoring-> navigation top nabigation tabs how to behave in desktop or mobile -- sticking fixed header and stick bottom buttons container template option -- floating labels lot closer looking in application builder -- template options cards -> getting better all time radio button and check boxes display as pill button -- region icons -- classic reports hide when all option shown -- anything that is in breadcrumb region can be sticked for mobile screens apps using UT ORACLE Aria people apex.oracle.com/pls/apex/f?p=144
  • #8: https://apex.oracle.com/pls/apex/f?p=42:1603:::NO:::
  • #9: https://apex.oracle.com/pls/apex/f?p=42:6301:::NO:::
  • #10: https://apex.oracle.com/pls/apex/f?p=42:6301:::NO:::
  • #11: https://apex.oracle.com/pls/apex/f?p=42:6302:::NO:::
  • #12: https://apex.oracle.com/pls/apex/f?p=42:6303:::NO::: https://apex.oracle.com/pls/apex/f?p=42:6304:::NO:::
  • #13: https://apex.oracle.com/pls/apex/f?p=42:1603:::NO:::
  • #14: https://apex.oracle.com/pls/apex/f?p=42:1603:::NO:::
  • #15: What is Font APEX? Font APEX is the icon library for Oracle APEX and Universal Theme. It was originally designed as a replacement for Font Awesome 4.*, the web's leading icon library, and therefore contains almost all of the Font Awesome icons, re-drawn originally on a 16x16 grid as line-icons. We wanted to make it a seamless switch to go from Font Awesome to Font APEX, and therefore use the same "fa" prefix for the icons, making it easier than ever to move to entirely new icon library. What's new in Font APEX 2? Font APEX 2 expands upon the original Font APEX by providing the complete set of Font APEX icons at a larger size. There are now two families of icons in Font APEX: small and large. Small icons are based on a 16x16 grid and ideally suited for buttons and menus. Large icons are based on a 32x32 grid and well suited for places where you need to provide a larger graphic, such as cards, media lists, and hero regions. Many APEX components will automatically use the large or small icons based on the context (such as Template Options), so all you need to do is focus on the icon you want. For example, when using Cards, the Block and Featured template option will automatically show the larger versions of icons where the Basic and Compact template options will use icons from the smaller set. There are over 1150 icons in Font APEX, and there are 25 modifiers you can place on top of any existing icons so you can customize any icon to fit your needs.
  • #16: https://apex.oracle.com/pls/apex/f?p=42:1710:::NO:::
  • #17: https://apex.oracle.com/pls/apex/f?p=42:1720:::NO::: Missing sort columns!!!!
  • #18: https://apex.oracle.com/pls/apex/f?p=42:1700:::NO::: https://apex.oracle.com/pls/apex/f?p=31698:2:106279717187050:::::