Oracle JET Getting Started

16 March 2016

JavaScript Extension Toolkit

Oracle Jet Framework. This is an introductory post of Oracle JET JavaScript library. Doing this excercise to evaluate the JS framework. I would be doing more focussed posts latter.

Oracle JET Overview:

Oracle JET is a collection of Oracle and open source JavaScript Libraries. A quote by Issac Newton is really apt to describe what Oracle has done. "If I have seen further it is by standing on the shoulders of giants"

What has JET consumed?

Just to illustrate a few keywords on what these libraries used for

Require JS: File and Module loader. Is optimised for in browser use and can be used in Javascript environments like Rhino and Node
JQuery: Lightweight JS Library with support for standard and contemproary UI components, event handling, animation and AJAX.
Knockout: Data Binding, Automatic UI Refresh, Templating
Promise: Build in object in Javacript but avaiable in Ecma Script 6. Useful for deferred and asynchronous computation.
Hammer JS: Support for touch gestures in JS application
CrossRoads: Routing library. A URL Route/Dispatch library. Similar to one present in frameworks like Rails, Django etc.
JS-Signals: custom Event/Messaging System for JavaScript

Thats a really comprehensive collection of js libraries which cater to needs of a modern client side application.

What would you use Oracle JET for?

As indicated in Jet Documentation[1]

Add interactivity to existing pages
Create a new end to end client side web application with HTML5,CSS, and responsive web design
Create a hybrid mobile application that feels like a native Android IOS app

Getting started

Oracle JET has good tooling support to get started. One can use Yeoman or Grunt. However the easiest way to do HelloWorld type project is to install Oracle Jet Support Plugin. Create a JET project selecting the Project Category has HTML5/Javascript. Select Oracle JET QuickStart Basic.

Understanding the Project Structure of Sample application

Site Root/css:

Site Root/js	The JS prerequisites for your application
Site Root/js/main.js	Require.js boostrap javascript
Site Root/js/main-release-path.json	JSON object which points to physical location of JS libraries
Site Root/scss:	Oracle JET uses SCSS files to preprocess the CSS files.
Site Root/scss/alta:	Files belonging the alta Theme
Site Root/scss/common:	Contains common files shared by multiple themes
Site Root/scss/utilties:	Contains SASS Mixins. If you don't know CSS preprocessor read http://sass-lang.com/guide
Site Root/scss/3rdparty:	Oracle's port of third party files such as normalize[2]
Site Root/index.html:

Understanding Require boostrap file

The boostrap file is self explanatory and indicates the modules which should be injected in the web application. You can also add custom modules to be injected by require.js

 

  requirejs.config({
  // Path mappings for the logical module names
  paths: 
 //injector:mainReleasePaths
  {
    'knockout': 'libs/knockout/knockout-3.4.0',
    'jquery': 'libs/jquery/jquery-2.1.3.min',
    'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4.min',
    'promise': 'libs/es6-promise/promise-1.0.0.min',
    'hammerjs': 'libs/hammer/hammer-2.0.4.min',
    'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
    'ojs': 'libs/oj/v2.0.0/debug',
    'ojL10n': 'libs/oj/v2.0.0/ojL10n',
    'ojtranslations': 'libs/oj/v2.0.0/resources',
    'signals': 'libs/js-signals/signals.min',
    'text': 'libs/require/text'
  }
  //endinjector
  );

This is a top level require call executed by the application. oj,ko,$ gives access to oj(Oracle Jet),ko(KnockOut) and $(JQuery selector) namespace

 

 require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/knockout', 'ojs/ojbutton', 'ojs/ojtoolbar', 'ojs/ojmenu'],
  // add additional JET component libraries as needed
  function(oj, ko, $) // this callback gets executed when all required modules are loaded
  {
      // add any startup code that you want here
  }
 );

Refer following documentation in [1]

Understanding the index.html

The index.html has reference to require js script. The require script will take care of injecting libraries as defined in the bootrap script file. Inspecting the HTML one can easily spot the JET CSS classes referenced.

 
    div id="globalBody" class="oj-web-applayout-offcanvas-wrapper oj-offcanvas-outer-wrapper"

Knockout js binding can be spotted here as well

 
    div id="offcanvas" class="oj-contrast-marker oj-web-applayout-offcanvas oj-offcanvas-start"
               data-bind="ojModule: {viewName: 'navDrawer'}