While the JET QuickStart is our recommended download for starting with JET, there are cases where a more basic starting point is desired. For example, you may be adding JET to an existing application or simply learning how the various parts of JET interact. In this post, we'll summarize how to download the JET libraries and create a brand new page.

 

Step 1: Download the JET Libraries and Unzip

We'll start by downloading and unzipping the Oracle JavaScript Extension Toolkit: Base Distribution from the Oracle JavaScript Extension Toolkit Download site. After unzipping, the folder structure should look like the image below. If you are integrating JET into an existing application, copy the contents into the site root of your application.

folderStructure.png

Tip: The CSS files and the JS libraries generally come in both debug and minified versions. If you run into bugs, check the files to see if there is a debug version to use instead.

 

Step 2: Create main.js for RequireJS Configuration

JET uses RequireJS for modular javascript loading and this step will make sure all of the JET libraries can be loaded. Start by copying js/libs/oj/v1.1.2/main-template.js into a new js/main.js file. This file will contain two primary sections:

  • requirejs.config: Defines path mappings for the modules used in JET. Version numbers appear in folder and file names, so it's important to copy from the main-template.js of the same version as your JET libraries.
  • require(modules, callback): Defines the specific modules that will be loaded and takes a callback function that is commonly used to create a view model and apply knockout bindings.

 

Here is what your main.js file should look like. In lines 53-73, I've added some code to request the ojinputtext module, create a simple view model, and apply knockout bindings with an instance of that view model. We'll use these changes in the HTML page in the next step.

/**
* Example of Require.js bootstrap javascript
*/
requirejs.config({
  // Path mappings for the logical module names
  paths: {
    'knockout': 'libs/knockout/knockout-3.3.0',
    'jquery': 'libs/jquery/jquery-2.1.3.min',
    'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4.min',
    'ojs': 'libs/oj/v1.1.2/min',
    'ojL10n': 'libs/oj/v1.1.2/ojL10n',
    'ojtranslations': 'libs/oj/v1.1.2/resources',
    'signals': 'libs/js-signals/signals.min',
    'crossroads': 'libs/crossroads/crossroads.min',
    'text': 'libs/require/text',
    'promise': 'libs/es6-promise/promise-1.0.0.min',
    'hammerjs': 'libs/hammer/hammer-2.0.4.min'
  },
  // Shim configurations for modules that do not expose AMD
  shim: {
    'jquery': {
      exports: ['jQuery', '$']
    },
    'crossroads': {
      deps: ['signals'],
      exports: 'crossroads'
    }
  },

  // This section configures the i18n plugin. It is merging the Oracle JET built-in translation
  // resources with a custom translation file.
  // Any resource file added, must be placed under a directory named "nls". You can use a path mapping or you can define
  // a path that is relative to the location of this main.js file.
  config: {
    ojL10n: {
      merge: {
        //'ojtranslations/nls/ojtranslations': 'resources/nls/myTranslations'
      }
    }
  }
});

/**
* A top-level require call executed by the Application.
* Although 'ojcore' and 'knockout' would be loaded in any case (they are specified as dependencies
* by the modules themselves), we are listing them explicitly to get the references to the 'oj' and 'ko'
* objects in the callback.
*
* For a listing of which JET component modules are required for each component, see the specific component
* demo pages in the JET cookbook.
*/
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout',
         'ojs/ojinputtext'], // add additional JET components to the end of this list as needed
  function(oj, ko, $) // this callback gets executed when all required modules are loaded
  {
    function ViewModel() {
      var self = this;

      // Observable for user's name that will be specified via the ojInputText
      self.name = ko.observable();

      // Observable for welcome message, updated on any name change.
      self.welcomeText = ko.pureComputed(function() {
        var name = self.name();
        return name ? "Hello " + name + ". Welcome to JET!" : "Enter Name Above";
      });
    }

    // Create a view model and apply it to the document body. This causes any
    // ojComponents specified in the HTML data-bind to be initialized and their
    // attributes evaluated using the view model.
    ko.applyBindings(new ViewModel(), document.body);
  }
);


 

Step 3: Create HTML Page

For the final step, we'll create the HTML page that uses the main.js file:

<!DOCTYPE html>
<html>
<head>
  <title>Simple JET Page</title>
  <meta charset="UTF-8">

  <!-- This is the main css file for the default Alta theme -->
  <link id="jetCss" rel="stylesheet" href="css/libs/oj/v1.1.2/alta/oj-alta-min.css" type="text/css"/>

  <!-- RequireJS configuration file -->
  <script data-main="js/main" src="js/libs/require/require.js"></script>
</head>
<body>
  <div id="container" style="padding: 10px;">
    <!-- The welcome text will display when this ojInputText is updated. -->
    <input id="text-input" type="text"
      data-bind="ojComponent: {component: 'ojInputText', value: name}"/>

    <div data-bind="text: welcomeText"/>
  </div>
</body>
</html>


 

A few things that are important to point out:

  • <!DOCTYPE html> (Line 1): This is necessary for the JET CSS to work correctly.
  • CSS Theme (Line 8): This specifies the theme that will be loaded. This is useful for debugging (use oj-alta.css instead of oj-alta-min.css) or for specifying a custom theme. For more details see Chapter 12 of the JET Dev Guide.
  • Require Script (Line 11): This loads RequireJS and asks for the js/main.js file to be loaded.
  • Lines 14-19: Sample code for demonstrating JET component with two-way data binding. For more details on how this works, please see Two-Way Data Binding JET Components with Knockout.

 

Result

The resulting page contains an input text and a text field. When the user enters their name into the input, a welcome message is displayed.

jetSimple.gif

 

I'm hoping this makes it easier to understand how the pieces of JET are interacting. For more details, including information on creating projects in JDeveloper and Netbeans, please see the JET Dev Guide, Chapter 2: Getting Started with Oracle JET.