2.- xwfbibing.us.es/proyectos/abreproy/11031/fichero/volumen_1...2.- xwf 2.1.- descripción xwf son...

2.- XWF

2.1.- Descripción

XWF son las siglas de Xpress Web Form, se trata de un producto pensadopara crear aplicaciones web de una manera rápida y sencilla. Permitedesarrollar aplicaciones a tres niveles o multinivel teniendo un peso importantela manipulación y presentación de los datos.

El sistema almacena en una metabase de datos (MDB) toda lainformación referente a la estructura de la aplicación: usuarios, grupos,formularios, informes, menús para los diferentes usuarios de la aplicación,acciones, widgets, etc.

El código de la aplicación a realizar se escribe en XML y mediante laejecución de un script, el sistema pasa todos los datos del código XML a lametabase de datos para posteriormente generar la estructura de la aplicaciónen concreto.

Un motor (servidor de aplicaciones) se ejecuta en el servidor, y generalos distintos documentos de salida en formatos HTML,PHP,PDF... atacando a lasdiferentes fuentes de información configuradas (bases de datos, servidoresLDAP, ficheros de texto, directorios,etc.).

El cliente recibe toda esta información debidamente estructurada bien através de una red local o bien a través de internet. En la siguiente figurapodemos apreciar el funcionamiento.

Figura 1: Funcionamiento

2.- XWF

2.2.- Arquitectura

La mayoría de las aplicaciones generadas por XWF suelen seguir unaarquitectura de 3 niveles (datos/aplicación/presentación).

Figura 2: Arquitectura a 3 niveles

A continuación se muestra una posible configuración para sistemas conun gran número de usuarios que necesiten balanceo de carga o altadisponibilidad (o ambos simultáneamente).

Figura 3: Balanceo de carga

Página 2 Copyleft 2005 XWF - Dbconferences

2.- XWF

Como se comentó en el apartado anterior la aplicación guarda en lametabase de datos toda la información referente a la estructura de laaplicación. En la figura 4 se muestra el diagrama entidad-relación de lametabase de datos.

Figura 4: ERD Metabase de datos

La endoarquitectura del sistema también es muy simple. Se puedenapreciar dos capas de uso común:

● La capa de acceso de datos: que permite acceder tanto a la MDB como a lasdiferentes fuentes de datos empleadas por la aplicación.

● La capa de render: encargada de generar los distintos documentos de salida.

A ambas capas acceden los distintos módulos del sistema, el de menús,el de informes, el de formularios... Todos ellos se ejecutan sobre el módulo deusuarios y seguridad, que garantizan la validación de la identidad del usuario alo largo de toda la aplicación, asi como el control de acceso a los objetos a los


2.- XWF

que éste tiene permiso de acceder.

En la figura 5 se muestra un esquema de la endoarquitectura de XWF.

Figura 5: Endoarquitectura

2.3.- Características y funcionalidades

En este apartado se comentarán las características y funcionalidadesmás importantes del sistema:

2.3.1.- Generales

● Aplicaciones 3 capas / multicapa

● Independencia de la plataforma servidor

● Independencia del navegador

● Independencia del origen de datos

● Independencia de la metabase de datos usada

● Independencia del diseño de interfaces / lógica de aplicación

● Desarrollo rápido de las aplicaciones


2.- XWF

● Fuerte parametrización

● Independencia de la plataforma cliente

● Acceso a múltiples fuentes de datos: bases de datos, ficheros, LDAP,...

● Capa de fuentes de datos definibles por el usuario

● Separación del diseño de interfaces / lógica de la aplicación

● Enlace con otras aplicaciones / páginas

● Ayuda contextual

2.3.2.- Formularios e Informes

● Formularios predefinidos: ficha, tabla, estadísticas, filtros...

● Formularios definidos por el usuario

● Temas para formularios y menús

● Campos calculados

● Calculos acumulados: totales, medias, máximos, mínimos y definidos por el

usuario

● Widgets definidos por el usuario

● Acciones definidas por el usuario

● Impresiones y exportación en formatos PS, PDF, XML, XLS...

● Soporte para workflows / wizards.

2.3.3.- Seguridad

● Autenticación de usuarios a través de base de datos, LDAP, PAM...

● Restricción de acceso por dirección IP

● Menús personalizados para usuarios / grupos

● ACL's sobre formularios y reports

● Auditorías sobre usuarios: accesos, acciones,...


2.- XWF

2.4.- Instalación

La instalación de XWF es muy sencilla basta con descomprimir el archivoxwf-0.6.tgz en /usr/local/lib/ .Una vez descomprimido se creará unsubdirectorio de nombre xwf-0.6 en donde se encuentran todos los archivos deXWF.

A destacar el subdirectorio xwftrans donde se suele colocar el archivoque contendrá las instrucciones en xml a partir del cuál se generará lametabase de datos de la aplicación que queremos desarrollar. Este archivotambién se podría colocar en otra ruta pero tendríamos que indicarlo en elscript actmdb (como se explica en el capítulo 3.3.3).En este subdirectorio se encuentra xmltrans, el cuál a partir de lasinstrucciones en XML generará la estructura de la metabase de datos.

En el apartado 3.3 se indica como instalar la aplicación Dbconferences yque parámetros hay que configurar para que todo funcione correctamente.

2.5.- Desarrollo en XWF

Antes de empezar a escribir el archivo en XML, que contendrá lasinstrucciones necesarias para la creación de la aplicación, se debe analizar afondo el problema.

Por ello antes de nada se tiene que decidir donde guardar todos los datosrelativos a la propia aplicación, esto es, la base de datos. Se hará un diagramaentidad-relación ERD donde se mostrarán las distintas tablas de las queconstará la aplicación así como la relación entre ellas.

Después de pensar todo lo anterior se debe analizar que tipo de usuariosusarán la aplicación, que contendrán cada uno de los distintos menús (paracada grupo de usuarios), los campos que contendrán los distintos formularios,que campos serán ocultos o de solo lectura,...

Una vez analizado a fondo el problema y diseñada como será laaplicación, se comienza a escribir el archivo en XML.

Ya escrito el código XML, se ejecuta un script (actmdb) y los datos delarchivo XML serán almacenados en la metabase de datos y quedará generadala aplicación.

Finalmente se debe cambiar el aspecto de la aplicación a nuestro gusto.Para esto existen una serie de archivos .cfg que contienen una serie devariables con los principales valores de diseño gráfico (colores, tipo de letra,alineación, aspecto del menú, botones,...).


2.- XWF

A continuación se comentan las instrucciones más importantes a la horade desarrollar una aplicación con XWF. Aunque será en el capítulo 3 donde seentrará más en detalle, comentando las instrucciones concretas usadas ennuestra aplicación.

2.5.1.- Instrucciones XML

2.5.1.1.- Grupos y usuarios

Para la creación de los diferentes grupos y usuarios de los que constarála aplicación se usan las siguientes instrucciones.

<group gid="0" name="root">

<user uid="0" name="root" passwd="root" mainid="main1" descr="Admin user"/>

</group>

Con el código anterior se crea un grupo de usuarios con el nombre deroot y con identificador 0. Entre las etiquetas de group se especifican todos losusuarios que se vayan a definir y que pertenezcan a ese grupo.

Los usuarios a su vez irán entre etiquetas user. Se indicará con uid elidentificador de usuario, a continuación se detallan el nombre y el password deese usuario y con mainid se referencia al menú que tiene asociado dichousuario. Finalmente se puede añadir una pequeña descripción.

2.5.1.2.- Menú

En este apartado se verá como crear los diferentes menús y submenúspara los distintos usuarios del sistema.

<main id="main1" caption="Root menu">

<menu caption="Edition" img="usr.jpg">

<option caption="People" call="st_people"/>

<option caption="Conferences" type="form">

<param name="formid" value="frm_conference"/> <param name="form_type" value="form"/> <param name="button_insert" value="1"/> <param name="button_update" value="1"/> <param name="button_delete" value="1"/> <param name="navigator_position" value="W"/>


2.- XWF

<param name="navigator_fields" value="name"/>

</option>

...

</menu>

</main>

Entre las etiquetas main se coloca el menú correspondiente al grupo deusuarios que pertenezcan a ese main. Cada grupo de usuarios tendrá sucorrespondiente main con sus menús y submenús propios.

Una vez definido el main, se indica entre etiquetas menu, los menúsprincipales y a su vez dentro de estas, las etiquetas option definen lossubmenús.

Se puede comprobar como en los distintos menús se indica el nombremediante la instrucción caption. Mientras que el enlace del menú se harámediante la instrucción call en el caso de un struct y mediante lasinstrucciónes param en el caso de un form.

También se observa que las etiquetas param indican otras característicasdel formulario, como por ejemplo: que botones llevará, cuales serán ocultos, desólo lectura,etc. Además de la posición del navegador, así como, los camposque se mostrarán en el mismo.

Finalmente destacar que mediante la orden form_type se especifica si sedesea que el formulario sea una tabla (table), una lista (list) o simplemente unformulario (form).

En la figura 6 se muestra un ejemplo de un menú obtenido medianteXWF.

Figura 6: Ejemplo de menú


2.- XWF

2.5.1.3.- Formularios

Mediante las etiquetas form se indica donde empieza y donde acaba elformulario. Los campos del formulario se colocan entre las etiquetas fields.

<form id="frm_conference" source="conference" caption="Conference">

<orderby>idconference</orderby>

<fields> <key source="idconference"/> <field source="name" caption="Name" type="string" len="40"

maxlen="80" msg="Name empty"/> <string source="place" caption="Place" len="40" maxlen="180"

canbenull="Y"/>

<int source="edition" caption="Edition" len="3" maxlen="3" msg="Invalid edition" canbenull="Y" />

</fields>

</form>

Mediante la etiqueta key se especifica la clave primaria de la tabla a laque hace referencia el formulario. El nombre de la clave se indica mediante lainstrucción source.

El formulario también consta de una serie de campos que pueden sercadenas, enteros, texto, fecha, hora,etc. Cada uno de ellos usa una etiqueta enconcreto como son: string, int, text, date, time,etc.

Algunas de las instrucciones más importantes son:

● source: Indica el nombre del atributo de la tabla al que hace referencia esecampo.

● caption: Sirve para mostrar el nombre del título del formulario.

● type: Se usa para indicar el tipo de campo: int, string...

● len: Con esta orden se controla la anchura del campo del formulario.

● maxlen: Indica el número máximo de caracteres que se pueden introducir enese campo.

● canbenull: Esta orden tomará dos valores Y/N para indicar si el campo puedeser nulo o no.


2.- XWF

● msg: Se usa para indicar el mensaje que se mostrará en caso de error.

A continuación se puede observar el formulario creado a partir del códigocomentado en la página anterior.

Figura 7: Ejemplo de formulario

2.5.1.4.- Struct

Con esta instrucción se consiguen estructuras más complejas. La pantallase puede dividir en varias partes mediante la orden form_split y poner en cadauna de ellas un formulario diferente, o bien, otro struct y volver a dividir esaparte en otras.

En el siguiente trozo de código se muestran los dos tipos de structs quepueden resultar más útiles a la hora de hacer una aplicación que necesite unaestructura de formulario un poco más compleja. Los tipos son:

● Relation: Este es el usado normalmente cuando se quiere establecer unarelación entre los distintos frames en los que se ha estructurado elformulario.

● Tabs: Son unas pestañitas que pinchando sobre alguna de ellas mostrará elformulario que haya sido asociado con dicha pestaña, filtrando mediante elcampo que haya sido indicado.

<struct id="st_paper" type="relation">

<param name="form_split" value="rows=60%,*"/> <param name="formid" value="frm_paper"/> <param name="form_type" value="form"/> <param name="button_insert" value="1"/> <param name="button_update" value="1"/> <param name="button_delete" value="1"/> <param name="navigator_position" value="W"/> <param name="navigator_fields" value="name"


2.- XWF

<param name="form_theme" value="paper.theme"/>

<param ord="2" name="structid" value="stformtabn_paper"/>

</struct>

Este primer struct es del tipo relation. Se establecen 2 frames: unosuperior que hace referencia a un formulario y otro inferior que hace referenciaa otro struct. La división por filas se indica mediante rows=valor1,valor2,..., sise quisiera hacer la división por columnas se tendría que ponercols=valor1,valor2,...

Si se presta atención a este caso en concreto, la pantalla se divide un60% para el formulario paper y el resto del espacio para la estructurastformtabn_paper.

<struct id="stformtabn_paper" type="tab">

<param name="form_split" value="rows=100,*"/>

<param ord="1" name="formid" value="frm_author"/> <param ord="1" name="tab_name" value="Author"/> <param ord="1" name="form_type" value="table"/> <param ord="1" name="source_filter_field" value="idpap"/> <param ord="1" name="button_insert" value="1"/> <param ord="1" name="button_update" value="1"/> <param ord="1" name="button_delete" value="1"/> <param ord="1" name="nofill" value="1"/>

<param ord="2" name="formid" value="frm_reviewer"/> <param ord="2" name="tab_name" value="Reviewer"/> <param ord="2" name="form_type" value="table"/> <param ord="2" name="source_filter_field" value="idpap"/> <param ord="2" name="button_insert" value="1"/> <param ord="2" name="button_update" value="1"/> <param ord="2" name="button_delete" value="1"/> <param ord="2" name="nofill" value="1"/>

</struct>

Esta segunda estructura es del tipo tab y en concreto está compuesta de2 pestañas. La primera de ellas hace referencia al formulario author y lasegunda al formulario reviewer.

Mediante la instrucción source_filter_field que indica por que campo de latabla se realiza el filtrado. En este caso mediante idpap que relaciona la tablapaper con las tablas author y reviewer. Al pinchar sobre la pestaña author semostrarán todos los autores que hayan escrito el artículo, gracias al filtrado detodos los autores cuyo idpap sea igual al idpaper del artículo del frame


2.- XWF

superior.

En la siguiente imagen se muestra lo que se obtendría con los dos structsanteriores:

Figura 8: Ejemplo de struct

2.5.1.5.- Workflow

Un workflow no es más que una sucesión de pantallas enlazadas cadauna de ellas con la pantalla que la precede y con la posterior. Pudiendo enlazarcada pantalla con un formulario, una structura, una página web...

La llamada al workflow se hace mediante las siguientes instrucciones quese añaden en el submenú que queramos enlazar con el workflow.

<option caption="WorkFlow" type="workflow">

<param name="workflowid" value="register-user-1"/>

</option>


2.- XWF

Destacar que se indicará mediante la instrucción type que se trata de unworkflow y después con la etiqueta param se indicará el nombre del workflow allamar.

A continuación se definen las distintas pantallas del workflow.

<workflow id="register-user-1" url="welcome.html"> <msg>Welcome</msg> <next id="register-user-2" msg="Step 2" /> </workflow>

La primera pantalla del workflow es una página web, esto se indicamediante la instrucción url=”nombrepagina”. Mediante la etiqueta msg sedefine el mensaje que se mostrará en la parte inferior de la pantalla.Mientras que con la etiqueta next se define cual es el nombre de la pantalla lesigue.

Figura 9: Primera pantalla del struct


2.- XWF

Para la segunda pantalla además de la etiqueta next, se usa prev paraque enlace con la pantalla anterior y alt para que haga una llamada a lapantalla 2 (aunque podría hacer referencia a cualquier otra pantalla delworkflow).

<workflow id="register-user-2" structid="st_personaldata"> <msg>Personal Data</msg> <prev id="register-user-1" msg="Step 1" /> <alt id="register-user-2" msg="Again" /> <next id="register-user-3" msg="Step 3" /> </workflow>

Figura 10: Segunda pantalla del struct

Finalmente, la última pantalla del workflow se define como las anteriorespero sin especificar la pantalla que le sigue, puesto que es la última.

<workflow id="register-user-3" url="end.html"> <msg>Registered</msg> <prev id="register-user-2" msg="Step 2" /> </workflow>


2.- XWF

Figura 11: Tercera pantalla del struct

2.5.1.6.- Actions

Entre etiquetas buttons se colocan los distintos botones que se vayan adefinir. A su vez dentro de estas, mediante etiquetas action, se especificaránlas distintas acciones.

Existen distintos tipos de acciones:

● System: Ejecuta un comando del sistema.

● Web: Hace una llamada a una página web.

● Execute: Ejecuta un comando de la base de datos.

En la siguiente página se muestra un fragmento de código donde semuestra un ejemplo de como insertar un action para ejecutar un comando delsistema. Es entre las etiquetas code donde se colocan los comandos a ejecutaro la pagina web que se mostrará p.ej: test.php


2.- XWF

<buttons>

<action type="system" caption="System command"> <tooltip>Press here to Execute a system command</tooltip> <code>echo Action exec %username: %date %hour %hostip >>

./login.log</code> <msg>Are you sure make this test ?</msg></action>

</buttons>

En la figura 12 se muestra una imagen de los tres tipos de botones actionque existen.

Figura 12: Actions

2.5.1.7.- Image file

Se trata de un campo de un formulario mediante el cual se muestra unarchivo de imagen. A continuación se muestra un ejemplo del código.

<image-file source="photo" caption="Image" ><width>100</width>

</image-file>

Mediante la etiqueta width se indica la anchura del recuadro quecontendrá la imagen.

Figura 13: Image file


2.- XWF

2.5.1.8.- Blob file

Se trata de un campo de un formulario mediante el cual se almacenaráun fichero. Esto se hace mediante la siguiente instrucción

<blob-file source="url" caption="URL"/>

En la figura 14 podemos ver un ejemplo de Blob.

Figura 14: Blob file


2.- xwfbibing.us.es/proyectos/abreproy/11031/fichero/volumen_1...2.- xwf 2.1.- descripción xwf son...

Documents