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:

Referencias:

Published by Angel O. Flores Torres

System engineer, Applications engineer, working with C# and Oracle Apex 5, 5.1 since 2017. I specialize in Oracle APEX (Oracle Application Express )

3 thoughts on “Integrando Oracle JET v5.1 en Oracle Apex + Jet TimeLine y PictoChart

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: