Your Essential APEX Companion
Total Page:16
File Type:pdf, Size:1020Kb
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 <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 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> 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.