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\'));
        }
    );
  }
);