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:
- 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
ing_alicia@hotmail.com
ReplyDeleteMe podrías escribir? Me gustaría tener una platica contigo
ReplyDeleteSi claro!
Delete