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 #WORKSPACE_FILES# #APP_FILES# #THEME_IMAGES# Compile, minify, concatenate, preprocess, Watching for changes, handles errors in JS and CSS 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 <project> basic and advanced mode before launching you have to create source (SRC) folder with predefined structure
3. APEX Configuration Shared Components > Application Process
3. APEX Configuration Add reference to static files (CSS/JS) Level Application Access Point 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>
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