Monday, August 6, 2018

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.

<Context docBase="C:\Install_Apex\Jet_5.1" path="/Jet_5.1" />


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.











Share:

Acerca de mi:

img

Angel O. Flores Torres, soy Ingeniero de Sistemas CIP: 193925 e Ingeniero de Aplicaciones Apex, he trabajado con Oracle Apex 5 y 5.1 desde el 2017, En los ultimos aƱos he desarrollado habilidades en CSS, JavaScript, Jquery y PlSql , I specialize in Oracle APEX (Oracle Application Express )

Followers

Popular Posts