Understanding Oracle JET Integration with Oracle Application Express

10.1 Understanding Oracle JET Integration with Oracle Application Express

Oracle Application Express includes the Oracle JET (JavaScript Extension Toolkit) library. This section provides information about JET and how it is integrated with Oracle Application Express.

Parent topic: Managing Database 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 Oracle Application Express. Oracle JET is a modular toolkit which enables developers to use as much or as little of the features that they desire.

10.1.2 How Oracle JET is integrated with Oracle Application Express

Currently Oracle Application Express 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 Oracle Application Express 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 it’s 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, Oracle Application Express 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 Oracle Application Express 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 Oracle Application Express, and the page is not in Debug mode

When 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, or Interactive 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.