Oracle se sube al carro de los frameworks javascript y viene pisando fuerte

A principios del 2015, veiamos como lanzaba su centro de soporte para Node y poco despues daba soporte para bases de datos oracle con  oracle-db

Hace unos meses, Oracle liberaba Oracle JET (Javascript Extension Toolkit), un framework dirigido a desarrolladores Javascript que facilita la construcción de aplicaciones web del lado de cliente.

Analizando Oracle JET

La arquitectura que sigue  es MVVM (Model-View, ViewModel) un sucesor del conocido patrón MVC.

No me detengo en detalle explicando el patrón ya que mi objetivo es hablaros de Oracle JET.

Vista

De la vista se encargan un paquete de widgets y componentes hechos con JQueryUI

Podeis verlos funcionando con OracleAlta UI

Vista-Modelo

De la parte vista-modelo se encarga knockout.js comunicando las capas de la vista y el modelo y creando un binding o comunicación bidireccional entre ambas capas.

Modelo

La capa de modelo está desarrollada por Oracle y nos proporcionan un API formada por lo siguiente

• oj.Model : servicio REST para acciones CRUD
• oj.Collection: servicio REST para acciones CRUD
• oj.Events: gestión de eventos
• oj.KnockoutUtils: mapeos de oj.model y oj.collection sobre la vista

Primeros pasos con Oracle JET

Oracle JET nos ofrece plantillas para visualizarse en el  navegador o en el movil.

Vamos a hacer un ejemplo sencillo para el navegador.

Siguiendo los pasos de la documentación, podemos instalarlo  usando yeoman (un generador de plantillas) o descargando el .zip.

Lo voy a hacer con yeoman.

npm -g install yo
npm -g install generator-oraclejet

Oracle JET utiliza grunt como gestor de tareas y bower como gestor de librerias del frontend. Asi que si no lo tienes instalado, deberás hacerlo.

npm -g install grunt
npm -g install bower

Como ya tenemos todo listo, vamos a ejecutar el generador de yeoman para oraclejet que nos acabamos de instalar con un template básico

yo oraclejet miWebOracleJet --template=basic

Arrancamos el servidor con grunt

grunt build
grunt serve

Si os ha ido todo bien, esto es lo que vereis en vuestro navegador

Vamos a ver las carpetas del proyecto que hemos creado y añadir funcionalidad

En el fichero main.js podemos modificar el routing del menu. He añadido un nuevo menu llamado «Menu Prueba»

function (oj, ko, $) { 
    var router = oj.Router.rootInstance;
    router.configure({
      'home': {label: 'Home', isDefault: true},
      'menuPrueba':{label: 'Menu Prueba'},
      'people': {label: 'People'},
      'library': {label: 'Library'},
      'graphics': {label: 'Graphics'},
      'performance': {label: 'Performance'}
    });

Dentro de la carpeta Views he creado un fichero nuevo llamado menuPrueba.html con un datePicker

<div id="div1">
  <label for="dateTime">Default</label>
  <input id="dateTime" data-bind="ojComponent: {component: 'ojInputDateTime', value: value}"/> 
</div>

Tenemos que crear un fichero menuPrueba.js en la carpeta ViewModels con los datos a pasar al datePicker

define(['ojs/ojcore', 'knockout', 'ojs/ojdatetimepicker'],
  function(oj, ko) {
   function mainContentViewModel() {
    var self = this;
    self.value = ko.observable(oj.IntlConverterUtils.dateToLocalIso(new Date(2013, 0, 1)));
  }
  return new mainContentViewModel();
});

Este seria el resultado

Post By Rocio Muñoz (37 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect