Integrando Oracle JET 5.1 + Apache Tomcat y Oracle Apex 5.1 / 18.1 + Ords + Local Machine

Como ya vimos en un tutorial anterior integramos Oracle Jet 5.1 en Apex 5.1 usando librerias online de Oracle, Ahora haremos un proceso similar, pero usando librerias de nuestro servidor local, para esta demo usare Apache Tomcat para subir las librerias.

Link Integrando Jet 5.1 con Apex
Link Instalando Apache Tomcat + Apex + Ords.

Primero descargamos las librerias de JET de la pagina oficial de Oracle.
Link

Extraemos el contenido en un directorio que nos sea de facil acceso, en mi caso lo puse junto a la instacion de Apex que tengo. C:\\Install_Apex\\Jet_5.1

Vamos donde esta instalado Apache Tomcat y editamos el archivo SERVER.XML dentro del directorio de conf.  C:\\Program Files\\Apache Software Foundation\\Tomcat 9.0\\conf

Agregamos la referencia a donde estan nuestras librerias de Oracle Jet y el path; En mi caso le puse \”Jet_5.1\” , puedes colocar el que gustes.

Guardamos los cambios y reiniciamos apache tomcat.
Podemos verificar si esta correctamente accediendo a un link como este, en tu caso puede variar por el puerto o nombre que le colocaste.

http://127.0.0.1:8080/Jet_5.1/js/libs/knockout/knockout-3.4.2.js

Cambiamos las referencias que teniamos en nuestra aplicacion apex, algo similar a esto (dependiendo de que puerto tengas configurado y directorio, cambiara. En mi caso http://127.0.0.1:8080/Jet_5.1

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\',
\'knockout\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/knockout/knockout-3.4.2\',
\'jquery\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/jquery/jquery-3.3.1.min\',
\'jqueryui-amd\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/jquery/jqueryui-amd-1.12.1.min\',
\'ojs\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/oj/v5.1.0/min\',
//\'ojs\': \'https://static.oracle.com/cdn/jet/v5.1.0/default/js/min\',
\'ojL10n\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/oj/v5.1.0/ojL10n\',
\'ojtranslations\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/oj/v5.1.0/resources\',
\'text\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/require/text\',
\'promise\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/es6-promise/es6-promise.min\',
\'hammerjs\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/hammer/hammer-2.0.8.min\',
\'signals\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/js-signals/signals.min\',
\'ojdnd\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min\',
\'css\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/require-css/css.min\',
\'customElements\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/webcomponents/custom-elements.min\',
\'proj4js\': \'http://127.0.0.1:8080/Jet_5.1/js/libs/proj4js/dist/proj4\'
},
// Shim configurations for modules that do not expose AMD
shim: {
\'jquery\': {
exports: [\'jQuery\', \'$\']
}
}
});

Agregamos las referencias a knockout y require.js

http://127.0.0.1:8080/Jet_5.1/js/libs/knockout/knockout-3.4.2.js
http://127.0.0.1:8080/Jet_5.1/js/libs/require/require.js

Agremos la referencia a las librerias de CSS

Quiero comentar que cuando agregamos las librerias de CSS de JET en mi post anterior,  estas estaban sobreescribiendo las de Apex, asi que junto a Jorge Rimblas, me comento que el mejor camino es referenciar librerias Css de Apex.

Para Apex 18.1  podemos usar :

#JET_CSS_DIRECTORY#/alta/oj-alta-notag-min.css?v=18.1.0.00.45

y para Apex 5.1:

#JET_CSS_DIRECTORY#/alta/oj-alta-notag-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>

Deberia quedar de esta forma:

Por ultimo para comprobar agregamos un PictoChart … similar a lo que hicimos aqui.

Y vemos como se cargaron las librerias de nuestro servidor local.

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 )

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: