Your essential APEX companion
Marko Gorički @mgoricki apexbyg.blogspot.com About Me
• 10 years of experience with APEX • presenter at HROUG, SIOUG, APEX World, KSCOPE, APEX Alpe Adria, APEX Connect
• apex.world Member of the year 2017 • APEX related blog apexbyg.blogspot.com • Twitter: @mgoricki • software development company focused on consulting and business solution development
• technology focus Oracle (APEX)
• APEX educations, consulting, plugin development
• our solutions: • HR management software
• Regulatory reporting for insurance • Reinsurance • GDPR Agenda
• How to use APEX • APEX Nitro Magic • Installation and configuration • Top Features How to use CSS in APEX? Rule #1
Don't use custom CSS if you don't need it! Use Universal Theme + Theme Roller! https://apex.oracle.com/ut/ Rule #2 “A Great APEX Developer is.....a Full Stack Developer!”
Joel R. Kallman
How to use CSS in APEX?
• using inline styles
• CSS in static regions
• page inline CSS
• reusable
• page 0
• inline CSS in templates or plugins
• CSS in PL/SQL (using htp.p or htp.prn)
• Theme Roller • Static Files Developing CSS Before APEX Nitro
Inspect Element Change CSS in console
Refresh Page (F5) Change in CSS file
Upload file to server/APEX files Google Chrome 65 - Local Overrides APEX Nitro Magic How Nitro Works? http://server:port/ords/f?p=100 http://localhost:port/ords/f?p=100
Real-time CSS and JS sync
Publish files to APEX APEX Application
Path to local DIST files
Compile, minify, Watching for changes, concatenate, preprocess, handles errors in JS and … CSS #WORKSPACE_FILES# #APP_FILES# #THEME_IMAGES#
Workspace Files Application Files Theme Files Local Files DIST Local Files SRC APEX Nitro Installation Overview
1. Install Nitro
2. Configure Project
3. Configure APEX
4. Launch Project
5. Publish to APEX 1. Installation
• Prerequisites • Node.js >= 6 • SQLcl >= 17.2 (optional, only for publish feature) • Open CLI (CMD/Terminal): • npm install -g apex-nitro
2. Configure Project
• apex-nitro config
3. APEX Configuration
• Shared Components > Application Process 3. APEX Configuration
• Add reference to static files (CSS/JS)
Level Access Point
Application Shared Components > User Interfaces > User Interface Details > JavaScript / Cascading Style Sheets > File URLs
Theme Shared Components > Themes > Create / Edit Theme > JavaScript and Cascading Style Sheets > File URLs
Theme Style Shared Components > Themes > Create / Edit Theme > Theme Styles > Create / Edit Theme Style > File URLs
Template Shared Components > Templates > Edit Page Template > JavaScript / Cascading Style Sheet > File URLs
Plugin Shared Components > Plug-ins > Create / Edit Plug-in: > File URLs to Load
Page Page Designer > Page > JavaScript / CSS > File URLs 4. Launch project
• apex-nitro launch
5. Publish to APEX 5. Publish to APEX Top Features Features Overview
• Browser Synchronization • JS/CSS Minification
• Source Mapping • File Concatenation
• Error Handling • Predprocessing
• CSS: SASS, LESS
• JS: TypeScript, WebPack
• Theme Roller Configuration Browser Synchronization Error Handling
• notifications of syntax errors (CSS and JS) upon saving a file Minification
• 634 bytes > 246 bytes (>60%)
• #APP_IMAGES#css/custom#MIN#.css Concatenation
• can combine multiple files into single file • reduces number of HTTP request to the server Concatenation
• separate config option for JS and CSS Source Mapping
• buttons.css Source Mapping
• concatenated CSS file custom.min.css loaded
• inspect element CSS Preprocessing
• CSS: LESS and SASS • variables, nesting, partials, imports, mixins, inheritance, operators, function… CSS Preprocessing JS Preprocessing CSS Auto Prefixer Example:
Compiles to: Other Features
• Automatic Heading
• Theme Roller Customization Benefits from Nitro
• boost your front-end APEX development • better application performance
• reduce repeating tasks • increase maintainability
• enhance teamwork • help you write “better” CSS
• make responsive development easier Vincent Morneau
ODTUG’s 2017 Innovation Award Winner
@vincentmorneau APEX Material Theme
https://materialapex.com To learn more…
• https://github.com/OraOpenSource/apex-nitro Questions? Thank you!
Marko Gorički @mgoricki apexbyg.blogspot.com