Blog

Before You Begin

This blog post assumes you already have experience creating modules in Oracle JET. If not, be sure to work through this Getting Started tutorial: http://www.oracle.com/webfolder/technetwork/jet/globalExamples-HOL.html

Overview

Oracle JET modules usually consist of two files that reside on the file system: the HTML view and the Javascript viewModel. These can be a bit cumbersome to maintain, especially once you start creating lots of modules and/or if you're working on a clustered environment, and sometimes you may not even have easy access to the file system.

A solution is to make the .html and .js files as assets in WebCenter Sites instead of static files on the file system.

Since Oracle JET by default looks for modules in a specific folder on the file system, the way to achieve this is to override the default paths in the Oracle JET configuration.

The Normal Implementation on the File System

For example, let's say we create a module called "MyList". Normally, you will have two files on the file system:

1. js/viewModels/MyList.js (the viewModel)
2. js/views/MyListView.html (the view)

You would include this module in your template with code similar to this:

<div data-bind="ojModule: {name: 'MyList'}"></div>

Instead, Create Your Modules as Assets

Instead of putting the .js and .html files on the file system, create two CS Element and SiteEntry pairs with the names:

1. oj/modules/MyList
2. oj/modules/MyListView

The content of these two CS Elements is exactly what you normally would put in the static files. 

Next, override the default location for Oracle JET viewModels and views. The best place to do this is at the same time you include the require.js file. Do it like this, paying special attention to the last few lines of code:

<script data-main="js/oj/main" src="js/oj/libs/require/require.js"></script>
<script language="Javascript"><!--

requirejs.config({
  paths: { 
    'ojs': 'libs/oj/v2.0.2/debug',
    'knockout': 'libs/knockout/knockout-3.4.0',
    'jquery': 'libs/jquery/jquery-2.1.3.min'
  }
}); 

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojmodule'],
   function (oj, ko, $) {
     oj.ModuleBinding.defaults['modelPath'] = "ContentServer?pagename=oj/modules/";
     oj.ModuleBinding.defaults['viewPath'] = "text!ContentServer?pagename=oj/modules/";
     oj.ModuleBinding.defaults['viewSuffix'] = "View"; 
   }
);
//--></script>
<div data-bind="ojModule: {name: 'MyList'}"></div>

Notice the last few lines reset the default prefixes/file locations. 

That's all! Now when you include a module using, JET will prefix them with the appropriate ContentServer?pagename... value. 

You can create more modules the same way, just make sure every time you create a new one, you create a CS Element and SiteEntry pair starting with "oj/modules/".