Integrando Oracle JET v5.1 en Oracle Apex + Jet TimeLine y PictoChart

En este corto tutorial vamos a ver la forma de integrar Oracle Jet v5.1 o cualquier version de JET dentro de APEX.
Cabe mencionar que puede ser cualquier version de apex, lo he probado en versiones de  Apex v5.1 y Apex 18.

Adionalmente en este tutorial he usado referencia a las librerias online de Oracle, en un siguiente tutorial describire como usar nuestro servidor Apache para usar nuestras propias librerias.

Video demostrativo:

Primero agregamos las referencias a las librerias de knockout y require.js:

https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/knockout/knockout-3.4.2.js
https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/require/require.js

Agregamos la referencia al CSS que utiliza oracle JET, esto lo pegamos en HTML Header

<link rel="stylesheet" id="css" href="https://static.oracle.com/cdn/jet/v5.1.0/default/css/alta/oj-alta-min.css">
<script>
       if (!document.createElement) {
         document.createElement = document.constructor.prototype.createElement;
         document.createElementNS = document.constructor.prototype.createElementNS;
         document.importNode = document.constructor.prototype.importNode;
       }

       // The "oj_whenReady" global variable enables a strategy that the busy context whenReady,
       // will implicitly add a busy state, until the application calls applicationBoostrapComplete
       // on the busy state context.
       window["oj_whenReady"] = true;
</script>

Luego creamos una acción dinamica, cuando carga la pagina para agregar las librerias de JET 5.1.
* Podemos aqui utilizar diferentes versiones de jet, en las referencias dejare los links de oracle donde tome el ejemplo.

define("knockout",[],function(){return ko;});


requirejs.config({
  // Path mappings for the logical module names
  paths: {
    'knockout': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/knockout/knockout-3.4.2',
    'jquery': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/jquery/jquery-3.3.1.min',
    'jqueryui-amd': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/jquery/jqueryui-amd-1.12.1.min',
    'ojs': 'https://static.oracle.com/cdn/jet/v5.1.0/default/js/min',
    'ojL10n': 'https://static.oracle.com/cdn/jet/v5.1.0/default/js/ojL10n',
    'ojtranslations': 'https://static.oracle.com/cdn/jet/v5.1.0/default/js/resources',
    'text': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/require/text',
    'promise': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/es6-promise/es6-promise.min',
    'hammerjs': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/hammer/hammer-2.0.8.min',
    'signals': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/js-signals/signals.min',
    'ojdnd': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min',
    'css': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/require-css/css.min',
    'customElements': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/webcomponents/custom-elements.min',
    'proj4js': 'https://static.oracle.com/cdn/jet/v5.1.0/3rdparty/proj4js/dist/proj4'
  },
  // Shim configurations for modules that do not expose AMD
  shim: {
    'jquery': {
      exports: ['jQuery', '$']
    }
  }
});

Para probar usare el control de TimeLine , el cual saque del CookBook de oracle Jet
Creamos un region de tipo static content y en el text copiamos el codigo HTML del cookbook.

<div id='timeline-container'>
          <oj-timeline id='timeline' aria-label='Timeline Context Menu Demo' 
                     minor-axis='{
                       "scale": "weeks",
                       "zoomOrder": ["months", "weeks", "days"]
                     }'
                     major-axis.scale='quarters'
                     start='[[new Date("Jan 1, 2013").toISOString()]]'
                     end='[[new Date("Dec 31, 2013").toISOString()]]'
                     selection-mode='single'
                     selection='["e4"]'
                     series='[[timelineSeries]]'
                     style='width:100%;height:350px'>
            <oj-menu slot='contextMenu' style='display:none' aria-label='Match Edit' 
                   on-oj-action='[[menuItemAction]]' 
                   on-oj-before-open='[[beforeOpenFunction]]'>
              <oj-option value='action1'>Action 1</oj-option>
              <oj-option value='action2'>Action 2</oj-option>
              <oj-option value='action3'>Action 3</oj-option>
            </oj-menu>
          </oj-timeline>
        
          <p>Last selected menu item:
            <span id='results' class='italic' style='font-weight:bold' data-bind='text: selectedMenuItem'></span>
          </p>
        </div>

Y luego creamos un boton que llame una accion dinamica para crear el ViewModel (JS) del control.

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojmenu', 'ojs/ojtimeline'],
  function (oj, ko, $)
  {
    function ViewModel()
    {
      var self = this;
      
      self.seriesData = [{
          id: 'e1',
          title: 'ATP VTR Open',
          start: new Date('Feb 4, 2013').toISOString(),
          end: new Date('Feb 10, 2013').toISOString(),
          description: 'Finalist: 3-1'
        }, {
          id: 'e2',
          title: 'ATP Brasil Open',
          start: new Date('Feb 11, 2013').toISOString(),
          end: new Date('Feb 17, 2013').toISOString(),
          description: 'Champion: 4-0'
        }, {
          id: 'e3',
          title: 'ATP Abierto Mexicano Telcel',
          start: new Date('Feb 25, 2013').toISOString(),
          end: new Date('Mar 2, 2013').toISOString(),
          description: 'Champion: 5-0'
        }, {
          id: 'e4',
          title: 'ATP BNP Paribas Open',
          start: new Date('Mar 7, 2013').toISOString(),
          end: new Date('Mar 17, 2013').toISOString(),
          description: 'Champion: 6-0'
        }
      ];
      var items = ko.observableArray(self.seriesData)();
      self.timelineSeries = [{id: 's1', emptyText: 'No Data.', label:'Oracle Events', items: items}];

      self.selectedMenuItem = ko.observable('(None selected yet)');
      var itemTitle;
      self.beforeOpenFunction = function (event)
      {
        var target = event.detail.originalEvent.target;
        var context = document.getElementById('timeline').getContextByNode(target);
        if (context != null && context.subId == 'oj-timeline-item')
        {
          var itemIndex = context['itemIndex'];
          itemTitle = self.seriesData[itemIndex]['title'];
        }
      };
      self.menuItemAction = function (event)
      {
        var text = event.target.textContent;
        if (itemTitle)
        {
          self.selectedMenuItem(text + ' from ' + itemTitle);
          itemTitle = null;
        }
        else
          self.selectedMenuItem(text + ' from timeline background');
      };
    };

    $(
        function()
        {
            ko.applyBindings(new ViewModel(), document.getElementById('timeline-container'));
        }
    );
  }
);

Finalmente tenemos nuestro TimeLine en Apex Oracle

Aplicación demo:

• Link

Referencias:

• CookBook Oracle Jet
• Link oracle jet 4.0.0 online
• Link oracle jet 5.0.0 online
• CookBook TimeLine
• CookBook PictoChar
• Extra 1
• Extra 2
• Extra 3