Tutorial

Vamos a realizar una pequeña aplicación para la recogida de datos que permitirá introducir unos datos mediante unos formularios para su posterior visualización.

Comenzamos creando un nuevo proyecto

File -> New -> Web Project

En la siguiente pantalla podemos configurar los datos de nuestra base de datos. Nosotros lo dejaremos para más adelante. Finalizaremos dejando los parámetros por defecto.

Obtenemos las vistas del proyecto generado, en la que nos encontramos el modelo de dominio, los sitios, los servicios y las definiciones de módulos. Nos centraremos en el Domain Model y Site Views.

Modelo de dominio

Comenzamos por el modelo de dominio, seleccionado para ello domain model en la barra situada en la parte inferior.

El modelo de dominio describe el modelo conceptual de datos de las aplicaciones Webratio. Se realiza mediante un modelado similar a UML.La diferencia radica en la multiplicidad de las relaciones, que en el modelo aparece invertida.

Cada aplicación web incluye un modelo de dominio para la autentificación del usuario que es creado por defecto. Para lo cual Webratio crea tres clases:

• User
• Group
• Module

Esto lo veremos en detalle más adelante.

A continuación añadimos dos nuevas clases, Profesión y Sexo. Añadimos el atributo titulo a la clase profesión y el atributo sexo a la clase género.

Para ello hacemos click en entity en el menu izquierdo y la situamos donde más nos convenga. Después le cambiamos el nombre y podemos añadirle atributos, haciendo click con el botón derecho y seleccionando 'add atribute'.

Otra opción sería utilizar los cuadros que aparecen en el menú izquierdo. También podemos modificar el tipo del atributo creado seleccionándolo con el ratón y modificando el tipo en el menú situado en la zona inferior izquierda de la pantalla.

A continuación creamos una base de datos para posteriormente sincronizar el modelo de dominio. Para ello pulsamos con el botón derecho en DomainModel y seleccionamos add -> DataBase.

Una vez hecho esto, introducimos el tipo de base de datos que vamos a crear. Podemos utilizar cualquier tipo de base de datos de los que aparecen en la lista. Nosotros utilizaremos Apache Derby, ya que funciona directamente con la plataforma de forma local.

Introducimos el url de la base de datos junto con el puerto, en este caso:

jdbc:derby://localhost:1527/HelloWorld;create=true

Además introducimos el usuario admin y su contraseña.

Una vez hecho esto hacemos click con el botón derecho en la base de datos y seleccionamos 'Synchronize', en la ventana abierta seleccionamos 'App' y siguiente.

A continuación seleccionamos 'Export All' y finalizamos.

Ya tenemos sincronizado el modelo de dominio con la base de datos y la plataforma ha creado las tablas necesarias para el correcto funcionamiento de ésta.

Site Views

A continuación abrimos el menú principal de la aplicación. Hacemos click con el botón derecho en Site Views -> Add Site View (Index), la cual será nuestra vista principal de la aplicación.

A la izquierda encontramos los elementos principales para la realización de los diagramas en IFML:

• Páginas
• Áreas

Las áreas son los elementos donde se agrupa todo para tener mayor control y poder aplicar propiedades a los elementos que contenga.

Creamos un área con el nombre 'Area Index'.

Todos los componentes de Webratio tienen una serie de propiedades. Entre ellos están:

• Home: indica que la página es la pricipal de nuestro siteview, puediendo sólo existir una.

• Protected: indica que el usuario debe estar registrado con un login válido en la base de datos para acceder a ella.

• Secure: indica ecriptación mediante https

• Localizado: Nos permite geolocalizar la aplicación para mostrar diferentes idiomas.

Una vez que tenemos nuestra área creamos nuestra primera página, a la que llamaremos home.

Para ello seleccionamos en el icono situado a la izquierda de área y hacemos click dentro del área que hemos creado previamente.

Una vez hecho ésto seleccionamos view component, los cuales son los elementos principales de visión de una página web. Una página web por si sola no muestra nada, pero con los pe Nosotros vamos a utilizar el form básico y lo llamaremos formulario.

El formulario por si sólo está vacío.

Podemos añadir elementos haciendo click con el botón derecho dentro del formulario y seleccionando add podemos añadir diferentes tipos de componentes:

• Field (textbox)
• Selection Field (menú desplegable)
• Multi Selection Field (menú desplegable de selección múltiple)

Para este caso vamos a crear un Field al que llamaremos nombre, un selection Field (Profesión) y otro selection Field (sexo).

Todos los componentes que hemos creado tienen tres propiedades:

• Preloaded: los datos se encuentran precargados
• Modificable: es posible modificar los datos
• Hidden: se encuentra oculto

Dejaremos seleccionado la opción por defecto 'Modificable'.

A continuación creamos otra página dentro del área creada, a la que llamaremos Perfil. Dentro de la cual añadimos un formulario.

Haciendo click con el botón derecho en el formulario creado dentro de Perfil, añadimos 3 Campos (Field) , Nombre, Profesión y Sexo.

A continuación queremos comunicar el formulario de home con el formulario de Perfil.

De tal forma que lo que se seleccione en el primer formulario se pase al segundo.

Desmarcamos de los tres formularios la opción de modificable para que no podamos modificarlos y seleccionamos Preloaded para que podamos modificarlo desde el otro form.

Ahora creamos un flujo desde el formulario de home al formulario de perfil seleccionando el icono de la flecha.

Le damos un nombre 'Aceptar', que será el nombre del botón que nos aparezca. Y acemos doble click sobre él para vincular los parámetros.

Desmarcamos Default binding y para cada uno de los parámetros escogemos el enlace apropiado.

Una vez que le demos a aceptar, los datos seleccionados, se van a precargar en el formulario de la otra página y no los vamos a poder modificar.

Es necesario añadir algún tipo de restricción como una regla de validación al nombre de home.

nombre -> Botón derecho -> add validation rule -> mandatory que se intenta salir del formulario y está vacío lanza una advertencia.

Podemos añadir otras restricciones como por ejemplo un captcha, validaciones numéricas, etc...

Podemos crear un flujo de movimiento entre ambas páginas. Para ello seleccionamos el icono de la flecha entre el formulario de perfil y el fomulario de home.

Y podemos modificarle el nombre del flujo a 'Atrás'.

A continuación vamos a cargar los campos Sexo y Profesión de la base de datos. Para ello seleccionamos dentro de utility component a selector y lo incluimos dentro de la página Home.

A continuación volvemos a realizar la operación para añadir otro selector. Una vez hecho hecho los configuramos seleccionando el campo de la base de datos que tienen que obtener.

Uno de ellos será el sexo y el otro la profesión, cada uno en un selector diferente. Y realizamos la asociación desde selector hasta el formulario. El enlace aparece con una flecha discontinua debido a que es una asociación de datos, no aparece como un elemento para el usuario.

Editamos la asociación de los dos enlaces, deshabilitando Default Binding y enlazando todas las variables.

A continuación creamos una ventana para editar los valores por defecto de la aplicación añadiendo un formulario profesión y sexo. Enlazamos la ventana con la vista home para poner editar los elementos.

Para finalizar enlazamos los formularios creados con la base de datos para alamacenar las distintas profesiones e inicializar el sexo. Para ello creamos una operación con la base de datos e indicamos las entidades a las que hacen referencia, quedando el diagrama como el representado en la siguiente figura:

Login y Seguridad

Como ya hemos visto, podemos definir unos Módulos y unos Grupos para limitar a ciertos Usuarios el poder acceder a algunas secciones de nuestra web.

Los pasos a seguir son los siguientes:

1.Crear módulos, grupos y usuarios. Esto puede hacerse siguiendo un procedimiento similar al de este tutorial, pero para dar de alta módulos, usuarios y grupos, o bien, creándolos directamente en la base de datos. Podemos ejecutar código SQL directamente sobre la base de datos:

El siguiente código ejemplifica como crear un Usuario que puede acceder al modulo "sv1"

insert into "APP"."MODULE" values (1, 'sv1', 'Users'); insert into "APP"."GROUP" values (1, 'Usuarios', 1); insert into "APP"."USER" values (1, 'user', 'user', '[email protected]', 'Usuario WebRatio', 1);

2.Ahora, tendremos que marcar en el modelo aquellos módulos que queramos proteger. Para hacer esto es tan simple como hacer, como hemos visto, tick en "Protected". También podemos directamente marcar un SiteView como Protected. Es importante que en el ID pongamos el mismo nombre que hemos introducido en la base de datos.

3.Por último, crearemos un nuevo SiteView para introducir el Login de Usuario:

Es importante marcar este SiteView como Home. Gracias a ello, el login aparecerá cuando accedamos a nuestra aplicación web y, si los datos son correctos, nos redigirá al módulo al que el usuario tiene permiso de acceder.

Este es un sistema de Login y Seguridad básico. Podríamos realizar un sistema de registro y edición de perfil de usuario utilizando los conocimientos aprendidos.

Geolocalización

Podemos configurar nuestra aplicación web para que detecte automáticamente la región donde se encuentra el usuario y se adapte a su idioma. Para ello, tenemos que marcar, como hemos visto, la opción Localized en aquellos elementos que queremos traducir.

Una vez marcado, accedemos al panel de Localización:

Por último, tenemos que crear los nuevos idiomas y escribir las traducciones:

Estilos

En cuanto a la plantilla, WebRatio tiene varias plantillas por defecto. Podemos editar alguna, crear las nuestrar propias, o bajar alguna nueva del Market.

Para editar una plantilla, la opción recomendable es Clonar una existente:

Una vez clonado, podremos personalidad el layout y el CSS a nuestro gusto.

Para cada SiteView, seleccionaremos qué plantilla de estilo queremos aplicar, en sus Propiedades->Layout->Style:

Ejecución de la aplicación

Lo primero que tenemos que hacer para probar nuestra aplicación es generar el modelo. Podemos generar tanto la aplicación completa como pequeñas secciones (aquella donde estemos situados).

Necesitamos también tener instalado y correctamente configurado un servidor de Tomcat.

Cuando lo tengamos, generamos el modelo y arrancamos el servidor:

Entonces podremos acceder a nuestra aplicación web desde:

http://localhost:8080/NombreAplicación

El resultado, una vez hemos hecho login, final es el siguiente:

Esta es sólo una pequeña aplicación, pero la herramienta permite hacer funcionalidades más complejas y acáceder a ms detalles que no hemos analizado en este tutorial.