ݺߣ

ݺߣShare a Scribd company logo

Oracle APEX Nitro

?
?
M
Marko Gori?ki

This document discusses using APEX Nitro to improve the APEX development process. APEX Nitro allows developers to write CSS and JavaScript locally and have changes automatically synced to their APEX application. It provides features like error handling, minification, concatenation, and preprocessing to boost performance and maintainability. The document reviews how to install, configure, and use APEX Nitro to enhance the front-end development experience.

1 of 58
Downloaded 30 times
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
Oracle APEX Nitro
Oracle APEX Nitro
? software development company focused on consulting and business solution development ? technology focus Oracle (APEX) ? APEX educations, consulting, plugin development ? our APEX solutions: ? HR management software ? Regulatory reporting for insurance ? Reinsurance ? GDPR
Agenda ? How to use CSS in APEX ? APEX Nitro Magic ? Installation and Con?guration ? 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/
https://apex-theme-styles.com
Rule #2 Dont unsubscribe Universal Theme!
Joel R. Kallman A Great APEX Developer is.....a Full Stack Developer!
How to use CSS in APEX?
Oracle APEX Nitro
Oracle APEX Nitro
CSS location ? Embedded ? External ?les ? Inline
? Not reusable/page speci?c ? inline styles (custom attributes) ? embedded (CSS in static regions, page inline CSS) ? Reusable, but ugly ? embeded (page 0, inline CSS in templates or plugins, CSS in PL/SQL using htp.p)
Oracle APEX Nitro
? Theme Roller ? Static Files
Managing CSS changes before APEX Nitro Inspect Element Change CSS in console Change in CSS ?le Upload ?le to server/APEX ?les Refresh Page (F5)
Google Chrome 65 - Local Overrides
APEX Nitro Magic
How Nitro Works?
Local Files SRCLocal Files DIST http://localhost:port/pls/apex/f?p=100 Workspace Files #WORKSPACE_FILES# Application Files #APP_FILES# Theme Files #THEME_IMAGES# Watching for changes, handles errors in JS and CSS Compile, minify, concatenate, preprocess, Real-time CSS and JS sync Path to local DIST ?les Publish ?les to APEX APEX Application Proxy requests https://apex.oracle.com/pls/apex/f?p=100
APEX Nitro Installation Overview 1. Install Nitro 2. Con?gure Project 3. Con?gure 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
Oracle APEX Nitro
2. Con?gure Project ? apex-nitro con?g <project> ? basic and advanced mode ? before launching you have to create source (SRC) folder with prede?ned structure
Oracle APEX Nitro
Oracle APEX Nitro
Oracle APEX Nitro
Oracle APEX Nitro
Oracle APEX Nitro
3. APEX Con?guration ? Shared Components > Application Process
3. APEX Con?guration ? Add reference to static ?les (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 <project>
Oracle APEX Nitro
5. Publish to APEX
5. Publish to APEX
Top Features
Features Overview ? Browser Synchronization ? JS/CSS Mini?cation ? Source Mapping ? File Concatenation ? Error Handling ? Predprocessing ? CSS: SASS, LESS ? JS: TypeScript, WebPack ? Theme Roller Con?guration
Browser Synchronization
Error Handling ? noti?cations of syntax errors (CSS and JS) upon saving a ?le
Mini?cation ? 634 bytes > 246 bytes (>60%) ? #APP_IMAGES#css/custom#MIN#.css
Concatenation ? can combine multiple ?les into single ?le ? reduces number of HTTP request to the server
Concatenation ? separate con?g option for JS and CSS
Source Mapping ? buttons.css
Source Mapping ? concatenated CSS ?le 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 Pre?xer Example: Compiles to:
Other Cool Features ? Responsive Development (Ghost Mode) ? Automatic Heading ? Theme Roller Customization
Bene?ts 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 @vincentmorneau ODTUGs 2017 Innovation Award Winner
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

More Related Content

Oracle APEX Nitro