1 | # APEX Nitro Patterns
|
2 |
|
3 | ### 1. Concatenation Hybrid
|
4 | This pattern consists of concatenating CSS but not JavaScript. It's logical for many projects to merge the stylesheets into a single file, but keeping the functional JavaScript into separate files.
|
5 |
|
6 | Here is the configuration:
|
7 |
|
8 | Group | Option | Value
|
9 | --- | --- | ---
|
10 | N/A | Mode | advanced
|
11 | JavaScript | Processor | default
|
12 | CSS | Language | sass
|
13 |
|
14 | #### Sass
|
15 | Because we are using Sass as a CSS Preprocessor, we are able to import files into other files. [See this example](../examples/demo-sass/src/scss) to understand how the `import` works. This mechanism is our concatenation.
|
16 |
|
17 | In the APEX application, there will be a single point of reference for `#APP_IMAGES#css/app.css`.
|
18 |
|
19 | #### JavaScript
|
20 | We are going to create two types of files: public files and private files. The public files are going to be shared across the whole application. The private files are going to be used on a single page only.
|
21 |
|
22 | **Example:**
|
23 | ```
|
24 | |-/src/
|
25 | |-js
|
26 | |-ajax.js
|
27 | |-global.js
|
28 | |-functions.js
|
29 | |-p1.js
|
30 | |-p2.js
|
31 | |-p3.js
|
32 | |-p99.js
|
33 | ```
|
34 |
|
35 | The only CSS file and the first three JavaScript files can be referenced in the Shared Components - User Interface Attributes:
|
36 | ![](img/pattern-hybrid-1.png)
|
37 |
|
38 | The page-specific JavaScript files can be references in the appropriate page properties:
|
39 | ![](img/pattern-hybrid-2.png)
|
40 |
|
41 | ---
|
42 |
|
43 | ### Examples
|
44 | [Head here](../examples) to look at our examples.
|
45 |
|
46 | ---
|
47 |
|
48 | ### APEX Nitro and you
|
49 | Are **YOU** using APEX Nitro differently?
|
50 |
|
51 | Please feel free to open a pull request and describe your pattern here, or contact [Vincent Morneau](https://github.com/vincentmorneau) with a brief explanation.
|