APEX 5.0: Declarative Definition of CSS and JavaScript Files to Load for a Plug-in

A best practice for performant HTML pages is to load CSS files in the HTML head to reduce redrawing of the page when a CSS file gets loaded. But because the PL/SQL code of a Plug-in isn’t executed util a region or item has to be rendered, included CSS files will always be loaded at the end of the page. Oracle APEX 5.0 supports Plug-in developers to optimize loading of CSS and JavaScript files required by a Plug-in.

In the new File URLs to Load region of the Plug-in definition, you can now declaratively specify which CSS and JavaScript File URLs should be loaded when a Plug-in gets rendered. This information is used by the APEX Runtime Engine to automatically include any CSS file needed by a Plug-in when the #APEX_CSS# placeholder is substituted in the head tag of the Page Template.

As you can see from the screenshot it’s really straight forward to load a file.

Declarative Definition of CSS and JavaScript Files

#PLUGIN_FILES# is used to point to a Plug-in File. If the File Prefix attribute of the Plug-in definition is empty, it will load the file from the built-in Plug-in File Storage. If it’s set, it will just use that value. As with any other CSS/JavaScript File URL attribute, we do support #MIN# and #MIN_DIRECTORY# substitution too. I think those substitutions are especially important for optimizing the size of files loaded by a Plug-in. Please see online help for details.

Note: The documentation isn’t 100% accurate. It says that #MIN# and #MIN_DIRECTORY# will only be empty if running the page in debug mode. To make CSS and JavaScript development easier and not having to minimize the files all the time when making a change during development, the minimized versions will never be used when an application is executed from within the Builder.

As a summary, in 95% of your Plug-ins you shouldn’t have to use

apex_css.add_file (
    p_name      => 'jquery.rating',
    p_directory => p_plugin.file_prefix );

or

apex_javascript.add_library (
    p_name      => 'jquery.rating',
    p_directory => p_plugin.file_prefix );

in you PL/SQL code anymore.

BTW, what’s also not yet documented in the online help is that you can also use #JQUERYUI_DIRECTORY# to reference the latest jQueryUI version used by APEX. For example if you want to include the Slider widget which is not automatically loaded by APEX you can use

#JQUERYUI_DIRECTORY#themes/base/#MIN_DIRECTORY#jquery.ui.slider#MIN#.css

and

#JQUERYUI_DIRECTORY#ui/#MIN_DIRECTORY#jquery.ui.slider#MIN#.js

to always pick up the most current jQueryUI version.