Your essential APEX companion. Marko apexbyg.blogspot.com

Transcription

1 Your essential APEX companion Marko apexbyg.blogspot.com

2 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

3 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

4 Agenda How to use APEX APEX Nitro Magic Installation and configuration Top Features

5 How to use CSS in APEX?

6 Rule #1 Don't use custom CSS if you don't need it! Use Universal Theme + Theme Roller!

7 Rule #2

8 A Great APEX Developer is...a Full Stack Developer! Joel R. Kallman

9

10 How to use CSS in APEX?

11

12 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)

13

14 Theme Roller Static Files

15 Developing CSS Before APEX Nitro Inspect Element Change CSS in console Refresh Page (F5) Change in CSS file Upload file to server/apex files

16 Google Chrome 65 - Local Overrides

17 APEX Nitro Magic

18 How Nitro Works?

19 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

20 APEX Nitro Installation Overview 1. Install Nitro 2. Configure Project 3. Configure APEX 4. Launch Project 5. Publish to APEX

21 1. Installation Prerequisites Node.js >= 6 SQLcl >= 17.2 (optional, only for publish feature) Open CLI (CMD/Terminal): npm install -g apex-nitro

22

23 2. Configure Project apex-nitro config <project> basic and advanced mode before launching you have to create source (SRC) folder with predefined structure

24

25

26

27

28

29 3. APEX Configuration Shared Components > Application Process

30 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

31 4. Launch project apex-nitro launch <project>

32

33 5. Publish to APEX

34 5. Publish to APEX

35 Top Features

36 Features Overview Browser Synchronization JS/CSS Minification Source Mapping File Concatenation Error Handling Predprocessing CSS: SASS, LESS JS: TypeScript, WebPack Theme Roller Configuration

37 Browser Synchronization

38 Error Handling notifications of syntax errors (CSS and JS) upon saving a file

39 Minification 634 bytes > 246 bytes (>60%) #APP_IMAGES#css/custom#MIN#.css

40 Concatenation can combine multiple files into single file reduces number of HTTP request to the server

41 Concatenation separate config option for JS and CSS

42 Source Mapping buttons.css

43 Source Mapping concatenated CSS file custom.min.css loaded inspect element

44 CSS Preprocessing CSS: LESS and SASS variables, nesting, partials, imports, mixins, inheritance, operators, function

45 CSS Preprocessing

46 JS Preprocessing

47 CSS Auto Prefixer Example: Compiles to:

48 Other Features Automatic Heading Theme Roller Customization

49 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

50 Vincent Morneau ODTUG s 2017 Innovation Award

51 APEX Material Theme

52 To learn more

53 Questions?

54 Thank you! Marko apexbyg.blogspot.com