10.1 Understanding Oracle JET Integration with Oracle APEX
Oracle APEX includes the Oracle JET (JavaScript Extension Toolkit) library. This section provides information about JET and how it is integrated with APEX.
Parent topic: Managing Application Components
10.1.1 About Oracle JET
Oracle JET (JavaScript Extension Toolkit) is a collection of open source JavaScript libraries with a set of Oracle contributed JavaScript libraries. Oracle JET is targeted at intermediate and advanced JavaScript developers and provides a rich set of UI components that can be easily integrated into APEX. Oracle JET is a modular toolkit which enables developers to use as much or as little of the features that they desire.
See Also:
Oracle JET Homepage to learn more about Oracle JET.
Parent topic: Understanding Oracle JET Integration with Oracle APEX
10.1.2 How Oracle JET is integrated with Oracle APEX
Currently APEX integrates some parts of Oracle JET, primarily with Chart
region types, and Text field with Autocomplete
item types.
Note:
Although Oracle JET provides two-way data binding (using knockout.js
), currently APEX does not natively utilize this aspect of the toolkit.
Oracle JET uses a module loader (RequireJS
) to only load modules that are required for specific functionality to work. This means that you do not have to load the entire Oracle JET library for certain functionality and also enables each module to define its own dependencies. At runtime, when a module is requested, the module loader looks at the module being requested for any dependencies to other modules. If there are any dependencies, these will also be loaded.
Module loader can however result in a large number of additional resources being individually loaded at runtime, which can have a negative performance impact. For this reason, APEX makes use of the RequireJS Optimization Tool
, which:
- provides a way to determine all the dependencies for modules either at design time or as part of a standard build process
- bundles them up into one combined, minified file
RequireJS Optimization Tool
is loaded at runtime to avoid the need for all the additional requests.
Find the list of the bundles used for Chart
and Text field with Autocomplete
native types.
jetCommonBundle.min.js
inputSearchBundle.min.js
chartBundle.min.js
jetCommonBundle.min.js
Note:
You can utilize the Common bundle jetCommonBundle.min.js
in your plug-ins. This Common Bundle gets included on any APEX page as soon as a file is included with your plug-in, which defines the [require jet]
prefix. This means that any module your plug-in uses that is already included in the common bundle does not need to be refetched by requireJS
.
- Directory:
/images/libraries/apex/minified/
- Included when: When a JavaScript file is requested that defines itself as requiring JET, by using the
[require jet]
prefix in APEX, and the page is not in Debug modeWhen debugging, the bundle is not loaded and
requireJS
loads all the individual resources separately.
inputSearchBundle.min.js
- Directory:
/images/libraries/apex/minified/
-
Included when: A
Text Field with Autocomplete
item is included on a page, and the page is not in debug mode.When debugging, the bundle is not loaded and
requireJS
loads all the individual resources separately.
chartBundle.min.js
- Directory:
/images/libraries/apex/minified/
-
Included when: A JET chart is included on a page (for example, when a
Chart
region, orInteractive Grid
region is added to a page), and the page is not in debug mode.When debugging, the bundle is not loaded and
requireJS
loads all the individual resources separately.
See Also:
- requireJS homepage to learn more about RequireJS
- RequireJS Optimization Tool to learn more about RequireJS Optimization Tool
Parent topic: Understanding Oracle JET Integration with Oracle APEX