blog

Como hemos visto en estos últimos años, y especialmente en estos últimos meses, el mundo está en constante cambio. Si observamos el mundo JavaScript vemos que cada mes sale un nuevo framework y cada 2 semanas una nueva librería “que salvará el mundo”.

 

En nuestro caso no tenemos ese objetivo tan “elevado”, sino que lo que queremos es desarrollar software empresarial, algo que nos suele llevar desde unos pocos meses hasta incluso 1 o 2 años. Por lo tanto, no podemos ir persiguiendo “lo último que sale” (porque “es lo mejor”). Tampoco es que tengamos que quedarnos con viejas librerías para siempre, pero sí hay que tener muy presente que necesitaremos librerías estables, que hayan sido probadas y que tengan un mínimo de recorrido. Con esta visión es la que debemos trabajar. Entre los frameworks y kits de librerías que actualmente se encuentran en el mercado, Oracle JET es el que mejor se orienta en esta filosofía.

 

En este post vamos a ver cómo crear un componente reutilizable para crear formularios dinámicos en Oracle JET ^8.0.0. Ya existen multitud de librerías en la red que realizan estas funciones; alpacaJS, json-forms, react-dynamic-forms… Pero no existe ninguna estándar que esté específicamente orientada a componentes de Oracle JET. Así que vamos a ver cómo desarrollar este componente específico que podremos utilizar en diferentes proyectos.

 

Para el componente nos basaremos esencialmente en 3 componentes de JET:

 

• <oj-bind-for-each> Como su propio nombre indica, lo utilizaremos para iterar el esquema del formulario e identificar cada elemento del mismo.
• <oj-bind-if> Utilizaremos el condicional para mostrar un componente u otro según el tipo de campo que debemos renderizar en el DOM.
• <oj-validation-group> Cada componente contiene su propio validador, capaz de validar multitud de validaciones por parte del desarrollador, tamaños mínimos, expresiones regulares… El valor de esta validación es almacenado dentro del componente en formato “sólo lectura” y puede ser utilizado para su revisión en cualquier momento; además si el usuario modifica el valor del componente, esta validación vuelve a actualizarse. El componente oj-validation-group se utiliza para agrupar las validaciones de varios componentes y que funcione como sólo una única validación; es muy común usarlo en formularios para comprobar si el formulario es totalmente válido.

 

En resumen: utilizaremos el componente for-each para iterar la estructura del formulario; por cada campo usaremos el componente if para mostrar un componente de tipo texto, selector, numérico, etc; y, por último, nos aseguraremos de que todos los componentes pintados dentro del formulario tengan una validación correcta con el componente oj-validation-group. Para poder utilizar en diferentes proyectos todo lo que estamos desarrollando usaremos “jet composite component”.

Oracle JET Composite Component

 

El objetivo de los composite components es generar componentes aislados y reutilizables, los cuales podamos utilizar a lo largo de las páginas y proyectos que realicemos.

En este caso crearemos un componente para el control y renderización de los formularios que se monten en nuestros proyectos.

Principalmente un componente se compone de los siguientes archivos:

• json
• js
• js
• html

 

Component.json

Define la descripción de la interfaz del componente, también conocida como metadatos del componente; generalmente el archivo component.json define las 3 formas principales que su componente puede interactuar con el resto de la página.

 

• Propiedades: los atributos que acepta su componente cuando se declara en html.
• Métodos: puede exponer métodos / funciones JS a través del elemento DOM html del componente que puede invocar a través de JS.
• Eventos: su componente puede enviar eventos para informar a la página sobre un evento.

 

View Model

El modelo de vista o simplemente la capa del modelo que se encarga de la capa JS donde residiría la lógica de su componente.

 

View

La capa de vista contendría el html o la lógica de representación.

 

Loader

Es responsable de cargar todos los archivos y arrancarlos para que el componente se registre como componente web (generalmente el archivo loader.js).

 

Creación

Para la creación del componente nos basamos en el cliente de línea de comandos de oracle jet, utilizando la sentencia “ojet create component <componentName>”

 

 

Con esta sentencia el sistema nos genera los ficheros base en los que apoyarnos para el desarrollo de nuestro componente.

Component.json

Como hemos comentado antes, dentro del component.json podemos añadir las propiedades que necesitamos para crear nuestro formulario dinámico, entre ellas podemos encontrar “schema”o “value”, que utilizaremos para el pintado y recogida de valores del formulario; pero también podemos rellenarlo con otras propiedades como pueden ser “labelWidth”, “direction” o “maxColumns”, que podemos utilizar dentro del componente oj-form-layout de JET, para renderizar a nuestro gusto el formulario, pudiéndole indicar un tamaño definido de label, o la posición del mismo.

 

 

View

Como hemos comentado nos apoyaremos en los componentes for-each, if, y validation group para la implementación de la vista. Dentro de cada if iremos incluyendo los diferentes tipos de componentes que el formulario dinámico podría tener:

• oj-select-one
• oj-input-text
• oj-input-number
• oj-switch
• oj-input-date

 

Esta lista podría ser infinita, ya que a lo largo del tiempo necesitaremos ir sumando componentes a nuestro formulario en los cuales podrían ser composite components nuevamente.

 

Controller

La view-model contiene la lógica de creación del formulario, principalmente es responsable de las siguientes funciones:

 

• generateFields: resuelve las dependencias de requireJS si fuera necesario, añade un nuevo item dentro del array del forEach y aplica las propiedades necesarias indicadas de cada componente.
• bindingsApplied: es un método de ciclo de vida que se invoca después de que el modelo JS se vincula con el html. Recorre los campos del formulario e inserta un campo tras otro. Una vez que se insertan los campos, se suscribe a la propiedad de valor para actualizar los cambios de valor y establece las propiedades de visualización para oj-form-layout.
• validate: verifica con oj-validation-group para validar el estado del formulario.

 

 

Puesta en marcha

 

 

Tras terminar el desarrollo del componente simplemente queda probarlo, añadiendo el componente dentro de la página que queramos que se ejecute:

 

 

 

 

Y rellenando correctamente el esquema del componente:

 

 

En resumen: gracias a componentes de este tipo somos capaces de realizar código más intuitivo, robusto y mucho más rápido, ya que la mayoría de aplicativos desarrollados tienen multitud de formularios y de esta forma nos ahorramos mucho tiempo en tener que desarrollar toda la lógica de cada uno de ellos.