Oracle JET (Javascript Extension Toolkit)
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(); });
No comments yet.