Diseño interactivo de interfaces gráficas de usuario para Progress
Abstract
Este proyecto se centra en la creación de una aplicación de escritorio que, mediante tecnologías web, nos permite crear, de manera visual, interfaces gráficas. El proyecto nace de la necesidad de crear interfaces gráficas con un lenguaje que no está muy preparado para ello: Progress. Progress es un lenguaje de programación utilizado para el mantenimiento y uso de bases de datos. Es por ello que la creación de la capa visual con este lenguaje es una tarea tediosa y el resultado es difícil de mantener. En este proyecto hemos desarrollado un programa que nos permite elegir una serie de características que tendrá la interfaz y las variables mostradas en ella con el objetivo de generar el código Progress correspondiente. Además, se crean los componentes visuales que pueden ser arrastrados y movidos a la zona de la pantalla donde finalmente se verán al ejecutar el código Progress. De esta forma, se simplifica mucho la elaboración y modificación de estas pantallas, viendo en todo momento el resultado visual final que tendrá este código al ser ejecutado. También nos permite ver en tiempo real el código Progress que se genera automáticamente con cada acción y guardar este código en un fichero. Los ficheros que se generan con la aplicación pueden ser cargados de nuevo para realizar modificaciones. Enlace a proyecto GitHub.
Full text
DISEÑO INTERACTIVO DE INTERFACES
GRÁFICAS DE USUARIO PARA
PROGRESS
Rica do Caballe o Sánchez
Ad ián Díaz Jiménez
GRADO EN INGENIERÍA INFORMÁTICA
GRADO EN INGENIERÍA DEL SOFTWARE
FACULTAD DE INFORMÁTICA
UNIVERSIDAD COMPLUTENSE DE MADRID
TRABAJO DE FIN DE GRADO
Di ec o : Manuel Mon eneg o Mon es
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 2/75
A nues os amilia es, amigos y compañe os
de uni e sidad y abajo po su in e és y apoyo cons an e
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 3/75
Con enido
RESUMEN ............................................................................................................................................... 8
PALABRAS CLAVE ....................................................................................................................................... 8
ABSTRACT ............................................................................................................................................. 9
KEYWORDS ................................................................................................................................................ 9
CAPITULO 1.- INTRODUCCIÓN ....................................................................................................... 10
1.1.- ANTECEDENTES Y MOTIVACIÓN ..................................................................................................... 10
1.2.- OBJETIVOS .................................................................................................................................. 10
1.3.- PLAN DE TRABAJO ....................................................................................................................... 11
CAPITULO 2.- INTRODUCTION ........................................................................................................ 13
2.1.- BACKGROUND AND MOTIVATION .................................................................................................... 13
2.2.- GOALS ........................................................................................................................................ 13
2.3.- WORKING PLAN ........................................................................................................................... 14
CAPITULO 3.- TECNOLOGÍAS ......................................................................................................... 16
3.1.- ELECTRON .................................................................................................................................. 16
3.1.1.- Node.js ......................................................................................................................... 16
3.1.2.- Ch omium ..................................................................................................................... 17
3.1.3.- Es uc u a Elec on.JS .................................................................................................. 17
3.2.- PEG.JS ..................................................................................................................................... 17
3.3.- VISUAL STUDIO CODE .................................................................................................................. 18
3.4.- GITHUB ...................................................................................................................................... 18
3.5.- LENGUAJE DE PROGRAMACIÓN JAVASCRIPT .................................................................................. 18
3.6.- FRAMEWORK PARA LA CAPA DE PRESENTACIÓN JQUERY ................................................................. 18
3.7.- CAPA DE PRESENTACIÓN.............................................................................................................. 19
3.7.1.- HTML5 ......................................................................................................................... 19
3.7.2.- CSS .............................................................................................................................. 19
3.7.3.- Boo s ap ...................................................................................................................... 19
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 4/75
3.7.4.- jQue y UI ...................................................................................................................... 19
3.7.5.- In e ac .JS .................................................................................................................... 20
CAPITULO 4.- CREACIÓN DE INTERFACES DE USUARIO ........................................................... 21
4.1.- FORMULARIOS ............................................................................................................................. 21
4.1.1.- F ames ......................................................................................................................... 21
4.1.2.- Va iables ...................................................................................................................... 21
4.1.3.- Fo mula io de F ame .................................................................................................... 22
4.1.4.- Fo mula io de Va iable ................................................................................................. 23
4.2.- FRAME DE ENTRADA .................................................................................................................... 24
4.2.1.- Zonas p incipales ......................................................................................................... 24
4.2.2.- Posicionamien o de Va iables ...................................................................................... 25
4.2.3.- Modi icación de a iables ............................................................................................. 32
4.2.4.- Elemen os del F ame. .................................................................................................. 33
4.2.5.- Código gene ado .......................................................................................................... 34
4.3.- FRAME DE SALIDA ........................................................................................................................ 35
4.4.- VISTA DE CÓDIGO ........................................................................................................................ 37
CAPITULO 5.- GENERACIÓN Y ANÁLISIS SINTÁCTICO DE CÓDIGO PROGRESS .................... 38
5.1.- ESTRUCTURA DE DATOS EN JAVASCRIPT ....................................................................................... 38
5.1.1.- Clase P og ess ............................................................................................................. 38
5.1.2.- Clase F ame ................................................................................................................. 40
5.1.3.- Clase Va iable .............................................................................................................. 43
5.2.- ESTRUCTURA DE DATOS EN PROGRESS ......................................................................................... 46
5.2.1.- Gene ación de código P og ess ................................................................................... 46
5.3.- ANALIZADOR SINTÁCTICO DE PROGRESS ........................................................................................ 48
5.3.1.- G amá ica y Semán ica de PEG.js ............................................................................... 48
5.3.2.- Reglas u ilizadas .......................................................................................................... 50
CAPITULO 6.- OTRAS FUNCIONALIDADES ................................................................................... 52
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 5/75
6.1.- VALIDACIÓN DE DATOS ................................................................................................................. 52
6.1.1.- Validación de da os en la c eación de código. ............................................................. 52
6.1.2.- Validación de da os en la ca ga de a chi o. ................................................................. 56
6.1.3.- Mensajes de Validación de Da os: ............................................................................... 59
CAPITULO 7.- CONCLUSIONES Y TRABAJO FUTURO ................................................................. 61
7.1.- CUMPLIMIENTO DE OBJETIVOS ...................................................................................................... 61
7.2.- DIFICULTADES ENCONTRADAS ....................................................................................................... 62
7.3.- TRABAJO FUTURO. ....................................................................................................................... 63
7.3.1.- Ampliación de ipos. ..................................................................................................... 63
7.3.2.- E ec os isuales. .......................................................................................................... 64
7.3.3.- Alineaciones po de ec o. ............................................................................................. 64
7.3.4.- Añadi ejilla.................................................................................................................. 64
7.3.5.- O dena isualización de ames. ................................................................................. 64
7.3.6.- Amplia ca ac e ís icas del ame. ................................................................................ 64
7.3.7.- Ampliación de lec u a de documen os. ......................................................................... 64
7.3.8.- Vis a simulada del ame de salida. .............................................................................. 64
CAPITULO 8.- CONCLUSIONS AND FUTURE WORK .................................................................... 65
8.1.- ACHIEVEMENT OF GOALS .............................................................................................................. 65
8.2.- DIFFICULTIES ENCOUNTERED ........................................................................................................ 66
8.3.- FUTURE WORK............................................................................................................................. 67
8.3.1.- Type ex ension ............................................................................................................. 67
8.3.2.- Visual e ec s ................................................................................................................ 67
8.3.3.- De aul alignmen s ........................................................................................................ 67
8.3.4.- Add g id ........................................................................................................................ 67
8.3.5.- O de display o ames ................................................................................................ 67
8.3.6.- Expand cha ac e is ics o he ame ............................................................................. 68
8.3.7.- Ex ension o documen eading .................................................................................... 68
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 6/75
8.3.8.- Simula ed iew o he ou pu ame .............................................................................. 68
CAPITULO 9.- CONTRIBUCIONES DE CADA PARTICIPANTE ...................................................... 69
9.1.- CONTRIBUCIÓN RICARDO CABALLERO SÁNCHEZ ............................................................................ 69
9.2.- CONTRIBUCIÓN ADRIÁN DÍAZ JIMÉNEZ ........................................................................................... 72
BIBLIOGRAFÍA ..................................................................................................................................... 75
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 7/75
Tabla de ilus aciones
1.-Es uc u a Elec on.js [11] .................................................................................................................. 17
2.- Fo mula io de F ame ........................................................................................................................ 23
3.- Fo mula io de Va iable ...................................................................................................................... 24
4.-Vis a del ame de en ada ................................................................................................................. 25
5.-F ame de en ada – Paso 1 ............................................................................................................... 26
6.- F ame de en ada – Paso 2 .............................................................................................................. 27
7.- F ame de en ada – Paso 3 .............................................................................................................. 28
8.- Panel isualización de a iable ......................................................................................................... 32
9.- Zona 4 ( Elemen os del F ame) ........................................................................................................ 33
10.- Ven ana Edi a F ame ..................................................................................................................... 33
11.- Vis a Upda e ................................................................................................................................... 34
12.- Vis a Display ................................................................................................................................... 34
13.-QAD ................................................................................................................................................. 35
14.- Ejemplo F ame de Salida ................................................................................................................ 36
15.- Vis a de Código............................................................................................................................... 37
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 8/75
RESUMEN
Es e p oyec o se cen a en la c eación de una aplicación de esc i o io que, median e ecnologías web,
nos pe mi e c ea , de mane a isual, in e aces g á icas.
El p oyec o nace de la necesidad de c ea in e aces g á icas con un lenguaje que no es á muy p epa ado
pa a ello: P og ess. P og ess es un lenguaje de p og amación u ilizado pa a el man enimien o y uso de
bases de da os. Es po ello que la c eación de la capa isual con es e lenguaje es una a ea ediosa y el
esul ado es di ícil de man ene .
En es e p oyec o hemos desa ollado un p og ama que nos pe mi e elegi una se ie de ca ac e ís icas
que end á la in e az y las a iables mos adas en ella con el obje i o de gene a el código P og ess
co espondien e. Además, se c ean los componen es isuales que pueden se a as ados y mo idos a
la zona de la pan alla donde inalmen e se e án al ejecu a el código P og ess. De es a o ma, se
simpli ica mucho la elabo ación y modi icación de es as pan allas, iendo en odo momen o el esul ado
isual inal que end á es e código al se ejecu ado. También nos pe mi e e en iempo eal el código
P og ess que se gene a au omá icamen e con cada acción y gua da es e código en un iche o. Los
iche os que se gene an con la aplicación pueden se ca gados de nue o pa a ealiza modi icaciones.
Enlace a p oyec o Gi Hub.
PALABRAS CLAVE
P og ess, ames, a iable, emp- able, in e az g á ica, Elec on, In e ac .JS, analizado sin ác ico,
PEG.JS.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 9/75
ABSTRACT
This p ojec is ocused on he c ea ion o a desk op applica ion ha , using web echnologies, allows us o
c ea e g aphical in e aces in a isual way. The p ojec is bo n om he need o c ea e g aphical in e aces
wi h a language ha is no p epa ed o i , P og ess. P og ess is a p og amming language used o he
main enance and use o da abases. Tha is why he c ea ion o he isual laye wi h his language is a
edious ask, and he esul ing iews a e di icul o main ain.
In his p ojec we ha e de eloped a p og am ha allows us o choose a se ies o p ope ies in he in e ace
and a se ies o a iables shown in i in o de o gene a e he co esponding P og ess code. Addi ionally,
isual componen s c ea ed can be d agged and mo ed o he a ea o he sc een whe e hey will inally be
displayed when he co esponding P og ess code is un. In his way, his ool g ea ly simpli ies he
elabo a ion o hese sc eens and allows us o modi y hem quickly, and o see a all imes he inal isual
esul his code will ha e when execu ed. I also allows us o see in eal ime he P og ess code ha is
au oma ically gene a ed wi h each ac ion and sa e his code in a ile. The iles ha ha e been gene a ed
wi h he applica ion can be eloaded o make modi ica ions.
Link o Gi Hub p ojec .
KEYWORDS
P og ess, ames, a iable, emp- able, g aphical use in e ace, Elec on, In e ac .JS, pa se , PEG.JS
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 16/75
CAPITULO 3.- TECNOLOGÍAS
Ac ualmen e exis en F amewo ks pa a c ea aplicaciones de esc i o io, en las que se puede usa las
ecnologías web conocidas, ales como HTML5, Ja aSc ip , CSS, JSON en e o os.
Como ejemplo de aplicaciones de esc i o io ealizadas median e ecnologías web, podemos menciona
A as y Nod32.
Al usa es e ipo de desa ollo se nos b inda la acilidad de c ea in e aces g á icas con mucha más
acilidad ya que podemos eu iliza nues os conocimien os de HTML y CSS, cosa que con o os
F amewo ks de aplicaciones de esc i o io pod ía esul a mucho más abajoso y complicado.
Po es a azón, nues o p oyec o se ha desa ollado con muchas de es as he amien as, las cuales
menciona emos a con inuación, odas ellas elacionadas con ecnologías web.
3.1.- ELECTRON
Pa a lle a a cabo nues o p oyec o, nos hemos decidido po el F amewo k Elec on, ya que pa a noso os
nos ha pa ecido más adecuado dado nues os conocimien os ace ca de las ecnologías web que hay
de ás.
Elec on (an e io men e A om Shell) es un F amewo k de código abie o. Pe mi e el desa ollo de
aplicaciones g á icas de esc i o io usando un modelo clien e se ido simila al u ilizado en aplicaciones
web [13],[14].
Del lado del clien e nos encon a íamos con un mo o Ch omium como in e az y de la pa e del se ido
el en o no de ejecución Node.js [10].
Elec on es el F amewo k elegido pa a el desa ollo de algunas aplicaciones conocidas como, po
ejemplo, Mic oso Visual S udio Code o A om de Gi Hub.
3.1.1.- Node.js
Node.js es un en o no en iempo de ejecución mul ipla a o ma de código abie o. Es á diseñado pa a la
capa de se ido de las aplicaciones web, aunque no necesa iamen e se debe limi a a ello. Node.js,
diseñado pa a c ea aplicaciones web escalables, es un en o no de ejecución de Ja aSc ip o ien ado a
e en os asínc onos [16].
Al con a io que la mayo ía de código Ja aSc ip , el código esc i o pa a Node.js no se ejecu a en la pa e
del na egado web, sino en el se ido .
Al es a basado en el lenguaje Ja aSc ip , Node.js se puede combina pa a un desa ollo homogéneo
en e clien e y se ido , y pe mi e la adap ación de pa ones pa a desa ollo del lado del se ido como
MVC, acili ando la eu ilización de código en e el lado del clien e y del se ido .
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 17/75
3.1.2.- Ch omium
Es la e sión de código abie o de Google Ch ome. Es e p oyec o se c eó pa a ob ene la ayuda de la
comunidad con el in de mejo a en e odos el mo o del na egado , o a su ez c ea su p opio na egado .
Ch omium es usado po Elec on como mo o de la in e az, es deci la isión de la aplicación en el lado
del clien e es á gene ada po Ch omium [10].
3.1.3.- Es uc u a Elec on.JS
El uncionamien o de Elec on se di ide en dos ipos de p ocesos, el p oceso p incipal main y el p oceso
ende e . El p oceso p incipal es el p oceso de Node.js el cual se comunica con a ias API de
Elec on.js pa a ayuda nos a comunica nos con el Sis ema Ope a i o, podemos deci que es nues a
aplicación.
El p oceso ende e es un p oceso de Ch omium, pe o es e p oceso iene Node.js inco po ado pa a
pode accede a los módulos y a los posibles módulos que ins alemos con npm [10].
1.-Es uc u a Elec on.js [11]
3.2.- PEG.JS
Es un simple gene ado de analizado es sin ác icos pa a Ja aSc ip . Gene a ápidos analizado es con
un excelen e con ol de e o es [15].
En nues a aplicación usamos PEG.js pa a pode analiza agmen os del lenguaje de P og ess y pode
c ea nues os obje os que se án a ados en nues a aplicación.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 18/75
3.3.- VISUAL STUDIO CODE
Es un edi o de código uen e desa ollado po Mic oso , c eado con Elec on. Lo u ilizamos pa a el
desa ollo del p oyec o.
3.4.- GITHUB
Es una pla a o ma web de ges ión de p oyec os y con ol de e siones de código.
Pe mi e abaja colabo a i amen e con cualquie pe sona del mundo, plani ica p oyec os y hace un
seguimien o de los mismos.
Es á basado en el sis ema de con ol de e siones Gi , desa ollado po Linus To alds. Es e sis ema
ealiza el con ol de e siones median e un egis o de cambios ealizados en el código.
Usamos es a ecnología ya que, como explicamos en el apa ado de Elec on, es la compañía
desa ollado a de es a he amien a, además de po su acilidad de uso y su in eg ación con Visual S udio
Code.
3.5.- LENGUAJE DE PROGRAMACIÓN JAVASCRIPT
Como lenguaje de p og amación hemos elegido Ja aSc ip . Ja aSc ip es un lenguaje o ien ado a
obje os, débilmen e ipado y dinámico [2] ,[7].
Ba ajamos la posibilidad de usa TypeSc ip . TypeSc ip es un supe conjun o de Ja aSc ip que
esencialmen e añade ipos es á icos y obje os basados en clases. Es po eso que nos podía in e esa
pa a de ini una es uc u a de da os más ígida. Finalmen e decidimos no u iliza TypeSc ip y pe de la
capacidad de ene un ue e ipado po que:
• TypeSc ip es á más indicado pa a p oyec os de mayo amaño mien as que Ja aSc ip es ideal
pa a p oyec os de meno en e gadu a.
• TypeSc ip necesi a se compilado.
• Tene que ap ende un lenguaje nue o.
Pa a de ini nues a es uc u a de da os, u ilizamos clases de Ja aSc ip , las cuáles nos o ecen lo que
necesi ábamos pa a es e p oyec o. Comen a emos es as clases pos e io men e, en el capí ulo 5.1.-
Es uc u a de da os en Ja aSc ip .
3.6.- FRAMEWORK PARA LA CAPA DE PRESENTACIÓN JQUERY
Nos decidimos a usa jQue y pa a el manejo de los componen es isuales (HTML).
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 19/75
jQue y es una biblio eca de Ja aSc ip que nos pe mi e p incipalmen e manipula el á bol DOM
(Documen Objec Model) de una página web, simpli icando la mane a de in e ac ua con los documen os
HTML y maneja e en os [4],[5].
3.7.- CAPA DE PRESENTACIÓN
3.7.1.- HTML5
HTML5 es la úl ima e sión de HTML (“Hype Tex Ma kup Language”). Podemos de ini HTML como un
es ánda que si e pa a de ini la es uc u a y el con enido de una página web [8].
3.7.2.- CSS
CSS (“Cascading S yle Shee s”), en español «Hojas de es ilo en cascada», es un lenguaje de diseño
g á ico que nos pe mi e de ini y c ea la p esen ación de un documen o HTML [2]
3.7.3.- Boo s ap
Boo s ap es un F amewo k CSS y Ja aSc ip diseñado pa a la c eación de in e aces más limpias de
una mane a más ápida y cómoda. Incluye plan illas de diseño basadas en HTML y CSS con la que es
posible modi ica ipog a ías, o mula ios, bo ones, ablas, na egaciones, menús desplegables, e c [1],[3].
Una de las mayo es en ajas que apo a es el sis ema de g id o cuad ículas de Boo s ap. Se a a de un
sis ema de cuad ículas que c ea diseños de página median e el uso de a ias ilas y columnas en las que
se inse a el con enido. El amaño de la cuad ícula se adap a a medida que se edimensiona al amaño
de la en ana. También nos o ece la posibilidad de de ini el amaño de las columnas en unción del
amaño de las en anas. Es o nos pe mi e c ea un diseño adap ado a a ios disposi i os.
3.7.4.- jQue y UI
jQue y UI es una biblio eca de componen es pa a jQue y.
Es a lib e ía añade un conjun o de plug-ins, widge s y e ec os isuales que nos pe mi e ene una capa
de p esen ación in e ac i a desa ollada de mane a más ápida y sencilla. Po ejemplo, enemos la
unción so able, que u ilizamos en el p oyec o, la cual nos pe mi e o dena los elemen os de un
componen e isual, como po ejemplo una lis a. Uno de los elemen os que ambién u ilizamos en el
p oyec o es el da epicke , que nos hace apa ece un pequeño calenda io en una a iable y nos pe mi e
selecciona una echa en di e en es o ma os. Apa e de es os ejemplos iene o as muchas
uncionalidades y e ec os que no u ilizamos en el p oyec o como po ejemplo las unciones d aggable,
d oppable, esizable, que nos pe mi en, a as a , sol a y edimensiona espec i amen e [6].
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 20/75
3.7.5.- In e ac .JS
Es una lib e ía de Ja aSc ip la cual es á c eada pa a acili a la cap u a de e en os de a as a y sol a
con el a ón, eescalado y ges os mul i ác iles [12]. Su API es simple y lexible, es á uni icada pa a ges os
de pan allas ác iles y e en os de a ón. Es a ecnología es la que usamos a la ho a de mo e los obje os
de nues a aplicación.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 21/75
CAPITULO 4.- CREACIÓN DE INTERFACES DE
USUARIO
En es e pun o habla emos del desa ollo y uso de la in e az de usua io, que debido a la na u aleza del
p oyec o es una pa e muy impo an e de és e. Reco demos que nues o p oyec o consis e en c ea una
aplicación que nos pe mi a desa olla una in e az g á ica de mane a isual, en lenguaje P og ess pa a
el ERP de QAD.
4.1.- FORMULARIOS
An es de habla de los o mula ios es necesa io e las es uc u as elegidas en P og ess pa a la c eación
de in e aces isuales y sus ca ac e ís icas. Así pod emos en ende mejo los ipos de campos que hay
en los o mula ios y sus casos de uso.
4.1.1.- F ames
Un ame en P og ess se puede de ini como un panel donde se engloban las a iables a mos a . Puede
concebi se como un conjun o de a iables que se mues an en el mismo momen o, an o pa a in oduci
in o mación como pa a mos a in o mación ya gua dada.
Podemos dis ingui dos clases de ames: Un ame de en ada es una ag egación de a ias a iables
que son mos adas pa a añadi in o mación. Un ame de salida si e exclusi amen e pa a mos a la
in o mación.
Un ame puede se usado an o pa a en ada como pa a salida de da os. Sin emba go, en nues o
p oyec o conside amos a los ames de en ada como paneles pa a la in oducción de da os, es deci
pa a pan allas de man enimien o del ERP, y los ames de salida pa a pan allas de epo e de in o mación.
4.1.2.- Va iables
En P og ess enemos p incipalmen e los siguien es ipos de a iables:
• In ege : un en e o que emplea 4 by es de almacenamien o. El ango de alo es que puede
ep esen a a de -231 a 231-1.
• Cha ac e : un ca ác e o cadena de ca ac e es.
• Logical: a iable booleana con alo es ue o alse.
• Decimal: da o numé ico de has a 50 dígi os de longi ud, incluyendo 10 dígi os a la de echa del
pun o decimal.
• Da e: u ilizado pa a ep esen a echas en di e en es o ma os.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 22/75
En nues a aplicación hemos c eado un o mula io pa a la ob ención de da os del ame a c ea (como,
po ejemplo, su í ulo o sus p opiedades) y o o o mula io pa a la in o mación ela i a a las a iables del
ame.
4.1.3.- Fo mula io de F ame
En un ame puede se pueden de ini muchas ca ac e ís icas, como el colo de ondo, elegi si iene o no
bo de que englobe el ame, dónde coloca la e ique a que de ine la a iable, el amaño del ame, e c.
En nues a aplicación, noso os hemos elegido una se ie de ca ac e ís icas ijas y o as modi icables.
Las ca ac e ís icas ijas son las siguien es:
• Tamaño: Un ame puede se de inido po el núme o de columnas que puede habe en su in e io .
Cada columna es del amaño de un ca ác e , po lo que se u iliza un o ma o monoespaciado de
le a pa a man ene la p opo ción. La mayo ía de los ames en QAD son de 80 columnas po que
en sus inicios las pan allas que u ilizaban los o denado es no admi ían un amaño mayo . Hoy
en día se pe mi e ene más amaño, pe o el es ánda sigue siendo 80 columnas de ancho po
lo que dejamos es a ca ac e ís ica ija a es e alo .
• Posición de las e ique as: Las e ique as son un a ibu o de las a iables que pe mi en una
b e e desc ipción de la a iable a la que an asociadas. Es deci , si enemos una a iable
llamada “a”, le podemos pone la e ique a “Núme o de coches” y así pe mi imos al usua io que
u ilice la in e az comp ende qué da o es á modi icando, independien emen e del nomb e que
u ilice esa a iable en el código.
Pa a los ames de en ada hemos elegido que es a e ique a se posicione a la izquie da del alo
que a a mos a ya que cumple con el es ánda . O as opciones son: mos a po encima del
alo , o que no exis a.
Los ames de salida es án pensados como epo es que mues an mucha in o mación en o ma de lis a,
po lo que no hemos seleccionado la posibilidad de ajus a la posición de la e ique a en es os casos.
Cada a ibu o se ep esen a como una columna, debajo de la cual apa ece la in o mación de odas las
a iables mos adas sin epe i se la e ique a. Más adelan e e emos un ejemplo pa a cla i ica es e pun o.
Las ca ac e ís icas modi icables de un ame son:
• Nomb e: Nomb e que amos a da al ame en el código.
• Tipo: Indica si el ame es de en ada o de salida.
• Tí ulo: Al ame se le puede ag ega una desc ipción que indique pa a qué se i á el ame si así
se desea. Dejamos es a ca ac e ís ica a elección del usua io.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 23/75
2.- Fo mula io de F ame
4.1.4.- Fo mula io de Va iable
En una a iable enemos una se ie de ca ac e ís icas que el usua io de ine al c ea la:
• Nomb e: nomb e de la a iable a u iliza en el código.
• Tipo: P og ess o ece muchos más ipos a elegi que los desc i os en la sección 4.1.2.-, pe o
pa a simpli ica la c eación de las a iables nos hemos quedado con los ipos básicos: in ege ,
cha ac e , decimal, logical y da e.
• Label o e ique a: como comen ábamos an e io men e, en P og ess se pe mi e ene asociada
a una a iable un nomb e o desc ipción que se mues a en el ame como sus i u o del nomb e
de la a iable en el código. Si es a ca ac e ís ica se deja acía oma po de ec o el nomb e de la
a iable.
• Valo Inicial: Valo que que emos que enga po de ec o nues a a iable al se c eada.
• Fo ma o: el o ma o es una ca ac e ís ica que nos indica cómo se á mos ada la a iable en el
ame. En unción del ipo de a iable enemos di e en es o ma os. Po ejemplo, si la a iable es
de ipo decimal podemos elegi cuan os decimales debe mos a la a iable; si es de ipo
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 24/75
cha ac e , podemos elegi cuán os ca ac e es se isualizan El ejemplo más cla o se ía el de las
a iables ipo da e, en el que podemos mos a las echas en di e sos o ma os. Habla emos
más en de alle de los di e en es o ma os en el CAPITULO 6.-.
3.- Fo mula io de Va iable
4.2.- FRAME DE ENTRADA
Es e apa ado lo amos a dedica a desc ibi el uncionamien o y la is a del ame de en ada.
Como se ha comen ado en el pun o an e io , usa emos el ame de en ada pa a in oduci los da os con
los que que emos abaja , y con ello c ea emos una is a de man enimien o del ERP.
4.2.1.- Zonas p incipales
Una ez c eado el ame, debemos p ocede a c ea las a iables necesa ias al y como se ha indicado
en la sección 4.1.4.-. En es e apa ado podemos di e encia a g andes asgos cua o zonas den o de la
is a del ame de en ada:
• Zona 1, en la cual se c ean las a iables. Si c eamos a ias a iables se an posicionando una
debajo de la o a.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 25/75
• Zona 2 o ame, es la zona limi ada en la cual se pueden si ua las a iables cuando las
a as amos.
• Zona 3, zona en la cual podemos e un esumen de los da os de la a iable ac ualmen e
seleccionada.
• Zona 4, con oles de selección, edición y c eación de ames.
4.-Vis a del ame de en ada
4.2.2.- Posicionamien o de Va iables
Uno de los pun os cla e de es e p oyec o es la acilidad que damos al posicionamien o de las a iables.
Es as se pueden mo e sob e el ame c eado, bien sea a as ando con el a ón o bien una ez den o
del ame, mo iéndolas con las lechas del eclado. Al mo e las con el a ón es ingimos su mo ilidad
g acias a la uncionalidad de In e ac .js:
in e ac .modi ie s. es ic ({
es ic ion: documen .ge Elemen ById("inne -d opzone"),
endOnly: alse
}
),
Se ap ecian dos es icciones:
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 32/75
}
}
4.2.3.- Modi icación de a iables
Una ez c eadas las a iables podemos edi a las en caso de necesidad. En el panel de la de echa (Zona
3) podemos e los da os de la a iable seleccionada, que se á la úl ima en c ea se o la úl ima en
selecciona se.
En la pa e supe io de es e panel emos el iden i icado de la a iable seleccionada y la posición en la
que se encon a ía en el ame. Si la posición es columna 0 y ila 0, en endemos que es a a iable
únicamen e ha sido c eada y aún no se ha mo ido den o del ame. Es e da o se modi ica una ez se ha
si uado la a iable en una zona álida den o del ame.
En la pa e media de es a zona podemos e los da os de la a iable que hemos c eado: e ique a, ipo
de a iable, alo inicial y o ma o.
En la pa e in e io del panel hay dos bo ones, uno pa a modi ica la a iable y o o pa a elimina la. Si
edi amos la a iable se nos ab i á una en ana idén ica a la de c eación de a iables, en la que podemos
modi ica los da os que deseemos. Una ez gua dados es os da os la a iable se modi ica
au omá icamen e.
8.- Panel isualización de a iable
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 33/75
4.2.4.- Elemen os del F ame.
En la Zona 4 explicada al p incipio de es e capí ulo nos encon amos con odas las opciones
co espondien es al ame, an o a ni el de con igu ación como a ni el isual. Vamos a explica las
di e en es opciones de izquie da a de echa.
9.- Zona 4 ( Elemen os del F ame)
• Lis a desplegable en la cual podemos selecciona el ame en el que que emos abaja . En es a
lis a se nos mos a án odos los ames c eados en el p oyec o ac ual, an o de en ada como de
salida.
• Bo ón “Edi a F ame”. Si seleccionamos es a opción se nos mos a á una en ana con la
con igu ación del ame en el que nos encon amos. Es a in o mación se puede modi ica y los
cambios se aplica án en cuan o los acep emos. La en ana que se ab e es muy pa ecida a la
que se nos ab e al c ea F ame, explicado en pun os an e io es. La di e encia con es e, es que
aho a no podemos modi ica si el ame es de en ada o salida:
10.- Ven ana Edi a F ame
• Bo a F ame. Si seleccionamos es a opción el ame se elimina po comple o, no pudiendo
ecupe a nada de lo que eníamos c eado den o de es e ame.
• Cambia a is a Display o cambia a is a Upda e. Es e bo ón iene la uncionalidad de cambia
la is a del ame. Su ex o cambia en unción de la is a en la que nos encon emos, mos ando
el cambio hacia la is a con a ia. La is a que enemos po de ec o es la is a Upda e, en la que
se nos mues an las a iables con los campos edi ables. Si, po el con a io, deseamos que es os
campos no se puedan edi a , debe emos cambia la is a a “display”, en la que los campos dejan
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 34/75
de se edi ables. A con inuación, dejamos dos imágenes en las que se puede ap ecia la
di e encia en e ambas is as:
11.- Vis a Upda e
12.- Vis a Display
4.2.5.- Código gene ado
A con inuación, podemos e un ejemplo del código c eado en un ame de en ada. Según la igu a 11.-
Vis a Upda e
/* BEGIN VARS Au ogene a ed */
de ine a iable a 1 as in ege ini 156 o ma "->,>>>,>>9" no-undo .
de ine a iable a 2 as da e ini "12/05/2020" o ma "mm/dd/yy" no-undo .
de ine a iable a 3 as logical ini ue no-undo .
/* END VARS Au ogene a ed */
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 35/75
/* BEGIN INPUT F ame Au ogene a ed */
de ine ame 1
a 1 label "Can idad" a ow 3 column 17
a 2 label "Fecha" a ow 3 column 64
a 3 label "S ock" a ow 3 column 40
wi h side-labels i le " ame_p ueba".
/* END INPUT F ame Au ogene a ed */
4.3.- FRAME DE SALIDA
Tal como hemos comen ado, el ame de salida es un ame que se á u ilizado pa a hace lis as de
epo es de in o mación. En é minos de diseño, son mucho más sencillos que los ames de en ada.
Pa a en ende mejo es a in e az es necesa io in oduci un nue o concep o: las ablas empo ales de
P og ess.
En P og ess, exis en unas es uc u as, llamadas emp- ables, que son simila es a un s uc en C++.
Es un ipo de da o compues o que pe mi e almacena un conjun o de da os de di e en e ipo. En lenguaje
na u al lo pod íamos de ini como una súpe - a iable que engloba di e en es campos, que son a su ez
a iables.
Cuando elegimos un ame de salida, u ilizamos es e ipo de es uc u a pa a ag upa las a iables.
Ejemplo: si c eamos un ame de salida pa a los p oduc os que endemos en un almacén, pod íamos
c ea a ias a iables que co esponden a un mismo p oduc o, pe o que de inen di e en es ca ac e ís icas,
como, po ejemplo: iden i icado , can idad, p ecio uni a io y un alo booleano que nos diga si hay o no
s ock disponible en es os momen os.
En QAD nos mos a ía el esul ado de la siguien e o ma:
13.-QAD
Es po ello que, en es a in e az (14.- Ejemplo F ame de Salida), las a iables se c ean como elemen os
de una lis a. Y son in e cambiables en e sí pa a elegi el o den en el que apa ecen en el epo e.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 36/75
Pa a pe mi i al usua io a as a y sol a los elemen os de una lis a con el in de dispone los en un
de e minado o den, hemos u ilizado la unción so able de la lib e ía jQue y UI. Es a lib e ía pe mi e al
usua io o dena de mane a sencilla los elemen os isuales de una lis a de HTML y ans o ma esa
in o mación en un a ay. De es a o ma, cuando el usua io in e cambia isualmen e las posiciones
ela i as de dos a iables, es e cambio se e leja en las posiciones de dichas a iables den o del a ay.
Siguiendo con el ejemplo an e io , la c eación del ame en nues a aplicación queda ía de la siguien e
o ma:
14.- Ejemplo F ame de Salida
El código gene ado pa a es e ame es el siguien e:
/* BEGIN Tempo alTable Au ogene a ed */
de ine emp- able _ ame_ejemplo no-undo
ield a 1 as cha ac e o ma "x(20)"
ield a 2 as in ege ini 0 o ma "->,>>>,>>9"
ield a 3 as decimal ini 0.00 o ma "->,>>>,>>9.99<<<<<<<<"
ield a 4 as logical ini ue
.
/* END Tempo alTable Au ogene a ed */
/* BEGIN OUTPUT F ame Au ogene a ed */
de ine ame ame_ejemplo
a 1 label "Iden i icado "
a 2 label "Can idad (ud)"
a 3 label "P ecio Uni a io"
a 4 label "S ock Disponible"
wi h i le "P oduc os".
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 37/75
/* END OUTPUT F ame Au ogene a ed */
En es a abla empo al se pueden c ea di e en es egis os, pa a luego se mos ados con el ame
ame_ejemplo del código an e io , al como se mues a en la igu a (13.-QAD)
4.4.- VISTA DE CÓDIGO
Como sabemos, nues o obje i o es c ea código P og ess que nos pe mi a hace una in e az isual pa a
QAD, pe o de una o ma menos ediosa y mucho más ápida que si esc ibié amos el código di ec amen e.
En pa e, es o iene de i ado de que P og ess no es aba pensado en un p incipio pa a ene in e aces
isuales amigables pa a el usua io, ya que es un lenguaje concebido pa a el manejo ápido y sencillo de
g andes olúmenes de da os gua dados en el sis ema. Es po ello que hemos c eado una is a de cómo
queda ía el código P og ess gene ado en el momen o en el que lo es amos desa ollando. Así podemos
e ápidamen e cómo queda á nues o código an es de gua da lo ealmen e en un a chi o. Es a u ilidad
ayuda incluso a en ende qué consecuencias en código iene la acción que el usua io es á ealizando
isualmen e.
15.- Vis a de Código
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 38/75
CAPITULO 5.- GENERACIÓN Y ANÁLISIS
SINTÁCTICO DE CÓDIGO PROGRESS
En es e capí ulo habla emos de la con e sión de código P og ess a Ja aSc ip y ice e sa.
Como ya sabemos, nues a aplicación nos pe mi e c ea in e aces isuales de una mane a simple y
ob ene el código P og ess co espondien e. Habla emos p ime o de la es uc u a de da os, en Ja aSc ip ,
que u ilizamos pa a gua da es a in o mación y más a de de cómo se ans o ma es a es uc u a a código
P og ess.
5.1.- ESTRUCTURA DE DATOS EN JAVASCRIPT
Como elemen os p incipales en el modelo de da os de la aplicación enemos los ames y las a iables.
Cabe eco da que un ame en P og ess nos pe mi e da un o ma o isual a las a iables a la ho a de
p esen a las al usua io., es deci , nos dice cómo se e án las a iables.
Nues a es uc u a cons a de es en idades: los ames, las a iables y una clase auxilia que hemos
denominado P og ess.
5.1.1.- Clase P og ess
Es a clase es la que c eamos cuando el usua io elige c ea una nue a plan illa o al ca ga un a chi o. Es
la que gua da oda la in o mación de a iables y ames con los que es amos abajando.
Es a clase iene como a ibu os:
• idF ames: es un con ado que u ilizamos como iden i icado cuando c eamos los di e en es
ames.
• ames: es un Map de obje os F ame.
• ileName: a ibu o en el que gua damos el nomb e del a chi o en el que gua da emos el código
P og ess gene ado o en el que es á gua dado.
En cuan o a las unciones, podemos des aca las siguien es:
• addF ame: es a unción ecibe como pa áme os las ca ac e ís icas del ame, c ea un obje o de
la clase F ame con el iden i icado co espondien e y lo gua da en el Map ames. Finalmen e,
ac ualiza el con ado de ames.
• addVa oF ame: ecibe como pa áme o la in o mación de una a iable y el ame al que debe
añadi se. Busca el ame co espondien e y llama a la unción addVa iable de és e.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 39/75
• addVa oOu pu F ame: es simila a la an e io , pe o además de añadi la a iable al ame de
salida, añade la in o mación de la a iable en el a ay de posiciones. Es o se debe, a que como
hemos hablado an e io men e, un ame de salida y uno de en ada son di e en es. El ame de
salida gua da las posiciones en las que es án las a iables en un a ay, mien as que el ame
de en ada no gua da las posiciones, sino que son las a iables las que gua dan dicha
in o mación.
Aquí podemos e en de alle la clase P og ess:
class P og ess{
cons uc o (){
his.idF ames = 1;
//inicializamos ids a 1
his. ames = new Map();
//inicializamos map de ames
his. ileName = "Sin í ulo.p" //inicializamos el nomb e del a chi o
}
//LLamamos al cons uc o de la clase ame pa a c ea un nue o ame, lo
me emos en nues o a ay y ac ualizamos idF ames
addF ame(name, i le, ype){
le newF ame=new classF ame.F ame( his.idF ames,name, i le, ype);
his. ames.se ( his.idF ames,newF ame);
his.idF ames ++;
e u n his.idF ames -1;
}
addVa oF ame(idF ame, a In o){
le ame = his. ames.ge (pa seIn (idF ame));
e u n ame.addVa iable( a In o['name'], a In o[' ype'],
a In o[' o ma '], a In o['label'], a In o['ini ial'],
a In o[' am']);
}
addVa oF ameRead(idF ame, a In o){
le ame = his. ames.ge (pa seIn (idF ame));
/* console.log(" a iable que me llega: ", a In o); */
e u n ame.addVa iableRead( a In o['name'], a In o[' ype'],
a In o[' o ma '], a In o['label'], a In o['ini ial'],
a In o['col'], a In o[' o w'], a In o['mo ido']);
}
addVa oOu pu F ame(idF ame, a In o){
le ame = his. ames.ge (pa seIn (idF ame));
le id = ame.addVa iable( a In o['name'], a In o[' ype'],
a In o[' o ma '], a In o['label'], a In o['ini ial'],0);
ame.addVa iableOu pu (id);
e u n id;
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 40/75
}
ge F ames(){
e u n his. ames;
}
ge F ame(idF ame){
e u n his. ames.ge (pa seIn (idF ame));
}
ge FileName(){
e u n his. ileName;
}
se FileName( ileName){
his. ileName = ileName;
}
dele eF ame(idF ame){
his. ames.dele e(pa seIn (idF ame));
}
dele eVa iable(idF ame, idVa ){
his. ames.ge (pa seIn (idF ame)).dele eVa iable(idVa );
}
edi F ame(idF ame, newDa a){
le ame = his. ames.ge (pa seIn (idF ame));
ame.edi Da a(newDa a);
}
ge Va iableByKey(idF ame,keyVa ){
le ame= his. ames.ge (pa seIn (idF ame));
e u n ame.ge Va iable(keyVa );
}
}
5.1.2.- Clase F ame
U ilizamos es a clase pa a gua da la in o mación de cada ame, con sus ca ac e ís icas y las a iables
que mos a á.
Sus a ibu os son los siguien es:
• idVa : con ado que u iliza emos de iden i icado pa a las a iables asignadas a es e ame.
• id: el iden i icado con el que localiza a es e ame en la clase P og ess. Viene inicializado po
es a úl ima clase al c ea un obje o de clase F ame.
• name: nomb e del ame con el que se á iden i icado en el código P og ess.
• i le: ca ac e ís ica i le que u iliza emos en el código P og ess.
• ype: a ibu o que nos indica si el ame es de en ada o de salida.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 41/75
• a s: Map que con end á las a iables asignadas a es e ame.
• iew: a la ho a de isualiza el ame en la aplicación, nos indica si se es á isualizando en modo
upda e o en modo display. Es o es á explicado con más de alle en el pun o 4.2.4.-. U ilizamos
es a ca ac e ís ica pa a i cambiando de una is a a o a.
• a sOu F ame: es e a ibu o es sólo u ilizado po los ames de salida. Se a a de un a ay de
iden i icado es de a iables asignadas a es e ame. Es e a ay se o dena en unción de la
posición en la que que amos que se ean las a iables en la salida. Pa a en ende mejo es a
ca ac e ís ica e isa el pun o 4.3.-.
El código de es a clase es el siguien e:
class F ame {
/*Type = 0 en ada
= 1 salida
*/
cons uc o (id,name, i le, ype){
his.idVa =1;
// inicializamos ids a iables
his.id=id;
// mi id me iene dado de la clase P og ess
his.name=name;
his. i le= i le;
i ( ype == "0")
his. ype="inpu ";
i ( ype == "1")
his. ype="ou pu ";
his. a s= new Map();
//inicializamos map de a iables
his. iew = "upda e";
his. a sOu F ame = new A ay(0);
//inicializamos a ay pa a a iables de salida
}
addVa iable(name, ype, o ma , label, ini ial, am){
le newVa = new classVa .Va iable( his.idVa ,name, ype, o ma ,
label, ini ial, am);
his. a s.se ( his.idVa ,newVa );
his.idVa ++;
e u n his.idVa -1;
}
addVa iableRead(name, ype, o ma , label, ini ial,col, ow,mo ido){
le newVa = new classVa .Va iable( his.idVa ,name, ype, o ma ,
label, ini ial);
i (mo ido==1){
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 48/75
• /* BEGIN Tempo alTable Au ogene a ed */ y /* END Tempo alTable
Au ogene a ed */ que son colocadas en cada de inición de abla empo al que es u ilizada
en un ame de salida.
• /* BEGIN INPUT F ame Au ogene a ed */ y /* END INPUT F ame Au ogene a ed
*/ nos ma can los ames de en ada.
• /* BEGIN OUTPUT F ame Au ogene a ed */ y /* END OUTPUT F ame Au ogene a ed
*/ nos señalan cada ame de salida.
Con es as ma cas sabemos qué pa e de código manda a cada uno de los analizado es sin ác icos que
u ilizamos pa a ob ene los da os del código como se comen a en la p óxima sección.
5.3.- ANALIZADOR SINTÁCTICO DE PROGRESS
Una de las uncionalidades de la aplicación es pode lee código P og ess y ca ga los ames y a iables
co espondien es en nues a aplicación pa a se modi icados.
Una ez en endida la ep esen ación de las es uc u as en los di e en es lenguajes podemos me e nos
en p o undidad en el análisis de código P og ess.
Como se menciona en el CAPITULO 3.- u ilizamos el analizado sin ác ico PEG.js.
5.3.1.- G amá ica y Semán ica de PEG.js
Una g amá ica en PEG.js consis e en una se ie de eglas. Cada egla iene un nomb e que iden i ica esa
egla y una exp esión de análisis que de ine el pa ón que debe cumpli la en ada.
También se puede in oduci código en Ja aSc ip pa a de ini acciones cuando la en ada cumple el
pa ón, es deci , al pasa la egla sa is ac o iamen e.
Una egla puede con ene ambién una e ique a que puede se usada pa a la ges ión de e o es. El
análisis comienza en la p ime a egla, que ambién es llamada la egla de inicio. La egla de inicio puede
se p ecedida po un inicializado , es o no es más que código Ja aSc ip en e lla es “{” “}”. Es e código
se ejecu a an es de que el gene ado de análisis comience. Todas las a iables y unciones de inidas en
el inicializado son accesibles en las eglas.
Tipos de exp esiones de análisis:
• "li e al" o 'li e al': Comp ueba que los siguien es ca ac e es de la en ada se ajus an
exac amen e al s ing indicado y lo de uel e. Añadiendo i a la de echa del li e al hacemos el
ajus e insensible a mayúsculas.
• . : Ajus a exac amen e con un ca ác e y lo de uel e como s ing.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 49/75
• [cha ac e s]: Ajus a la en ada con un ca ác e del conjun o dado y lo de uel e como s ing.
La lis a de ca ac e es puede con ene ambién angos (po ejemplo, [a-z] signi ica “ odas las
le as en minúscula”). Pone delan e del ca ác e “^” niega la condición (ej: [^a-z] signi ica “ odos
los ca ac e es que no sean le as minúsculas”). Añadiendo i a la de echa lo hacemos insensible
a mayúsculas.
• egla: Ajus a la en ada con el análisis de una exp esión o una egla ecu si amen e y de uel e
su esul ado.
• ( exp esión ): Ajus a con una subexp esión y de uel e el esul ado.
• exp esión *: Ajus a con ce o o más epe iciones de la exp esión y de uel e sus esul ados en
un a ay.
• exp esión +: Ajus a con una o más epe iciones de la exp esión y de uel e su esul ado en un
a ay.
• exp esión ?: In en a ajus a con la exp esión dada. Si lo hace con éxi o, de uel e el esul ado,
en o o caso, de uel e null.
• & exp esión : In en a ajus a la en ada con la exp esión dada. Si lo hace con éxi o, de uel e
unde ined y no consume ninguna en ada, en o o caso, conside a la e i icación allida.
• ! exp esión : In en a ajus a con la exp esión dada. Si alla de uel e unde ined y no consume
ninguna en ada.
• { p edicado}: El p edicado es una pa e de código Ja aSc ip que se ejecu a den o de una
unción.
• $ exp esión: Ajus a con la exp esión dada y si el ajus e iene éxi o de uel e el ex o pa seado
como esul ado.
• e ique a: exp esión: De uel e el esul ado bajo la e ique a especi icada. La e ique a debe se
un iden i icado de Ja aSc ip .
• exp esión1 exp esión2... exp esiónN: Ajus a con una secuencia de exp esiones y de uel e el
esul ado en un a ay.
• exp esión{ acción}: Ajus a la en ada con la exp esión dada, si el ajus e iene éxi o, ejecu a la
acción.
• exp esión1 / exp esión2 / ... / exp esiónN: In en a ajus a con la p ime a exp esión. Si alla,
sigue con la siguien e y así sucesi amen e.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 50/75
5.3.2.- Reglas u ilizadas
A con inuación, e emos un ejemplo de uno de los analizado es sin ác icos que hemos u ilizado en el
p oyec o. Hemos ealizado es analizado es di e en es. Uno pa a ames, o o pa a emp- ables y o o
pa a las a iables. En es e ejemplo emos como analizamos sin ác icamen e las a iables:
a iables = a iable+
a iable = _ de ineVa __ line:line _ noUndo _ "."_{
e u n { a s: line}
}
de ineVa = "de ine a iable"
noUndo = "no-undo"
line = : a _ opciones:Opcion+ _{
e u n {name: , opciones: opciones}
}
a = !( ese edWo ds __) ("_" / [a-zA-Z0-9] / "-")* {
e u n ex ()
}
ese edWo ds = " ield" / de Type / " emp- able"
/ noUndo / "as " / "ini " / " o ma "
Opcion = _ opcion:( ype/OpcionLabel/OpcionIni /OpcionFo ma ) {
e u n opcion
}
ype = "as" __ :$de Type {
e u n { ype:" ype", alue: }
}
de Type = "in ege " / "cha ac e " / "da e" / "logical" / "decimal"
OpcionLabel = "label" __ cadena:Li e alCadena {
e u n { ype: "label", label: cadena }
}
OpcionIni = "ini " __ esul :(Li e alCadena/In ege ) {
e u n { ype: "ini ", alue: esul }
}
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 51/75
OpcionFo ma = " o ma " __ cadena:Li e alCadena {
e u n { ype: " o ma ", o ma : cadena }
}
Li e alCadena = " "" ex o:([^ "]*) " "" {
e u n ex o.join("")
}
In ege "in ege "
= _ [0-9]+ { e u n pa seIn ( ex (), 10); }
_ "whi espace"
= [ n ]*
__ "whi espace_manda o y"
= [ n ]+
A con inuación, amos a analiza las eglas u ilizadas. Pa a hace lo más cómodo ob iamos las eglas “_”
y “__” que pe mi en los espacios y sal os de línea. Como p ime a egla enemos “ a iables”, que
comp ueba que puede habe una o más apa iciones de la egla “ a iable”. La egla “ a iable” es una
sucesión de eglas, po lo que debe cumpli cada una de ellas. Den o de és a, enemos la egla
de ineVa , la egla noUndo y la exp esión “.”, odas ellas comp ueban un li e al. Después nos
encon amos con la egla line. Es a egla cons a de la egla a que comp ueba que el iden i icado de
una a iable sea cualquie ca ác e . Aquí enemos que ene en cuen a la egla ese edWo ds que
comp ueba que el iden i icado no sea una palab a ese ada. También enemos la egla Opciones, en
es a egla comp obamos si apa ecen cada una de las ca ac e ís icas que espe amos en una a iable y
de uel e el esul ado como ex o con la ca ac e ís ica co espondien e.
Como ejemplo de una de las ca ac e ís icas end íamos label. Con la egla OpcionLabel comp obamos
el li e al label y el li e al que lo acompañe en e comillas. De es a o ma, de ol emos un obje o con dos
campos: el campo ype es igual label y el campo label es igual al ex o en e comillas que lo acompañe.
De es a o ma conseguimos ene una es uc u a de da os que nos de uel e la in o mación en un obje o
Ja aSc ip que pos e io men e u iliza emos a la ho a de ab i el a chi o.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 52/75
CAPITULO 6.- OTRAS FUNCIONALIDADES
Pa a pode consegui un co ec o uncionamien o de oda la aplicación hemos enido que se muy
igu osos con cie os pa áme os, como, po ejemplo, la alidación de da os.
Una g an debilidad de segu idad de una aplicación web es la al a de alidación de da os asociada a la
en ada de da os po pa e del clien e. Nunca debemos con ia en los da os que in oduce el clien e, sino
que enemos que ga an iza que la aplicación sea obus a en e a la ob ención de da os po pa e del
usua io.
La alidación de da os es muy impo an e pa a que no haya p oblemas con la uncionalidad de nues o
p oyec o. En los siguien es pun os amos a comen a como se ha desa ollado el con ol de los da os de
en ada.
6.1.- VALIDACIÓN DE DATOS
Es e pun o lo debemos a a desde dos pun os de is a di e en es. En p ime luga , amos a comen a
la alidación de da os desde la pa e de c eación de código po el usua io, y la segunda pa e nos amos
a cen a en la alidación de da os a la ho a de ca ga un a chi o de P og ess.
Toda alidación de da os se ejecu a en la pa e del se ido . Como comen amos an es, nues a aplicación
es á c eada con Ja aSc ip , pe o si alidamos los da os en la pa e clien e pod íamos segui es ando
expues os a un a aque po pa e del usua io, ya que se puede usa so wa e pa a la desac i ación de
es a alidación.
6.1.1.- Validación de da os en la c eación de código.
Comenzamos comen ando las alidaciones de da os que ealizamos a la ho a de gene a código con la
aplicación.
• Validación de amaño: Tenemos que con ola que el amaño en e el label y los o ma os
in oducidos no supe en las 80 columnas del F ame
• Validación de nomb e de F ame: No pe mi imos que se puedan c ea dos ames con el mismo
nomb e, además de no pode c ea un F ame con nomb e acío. Es o lo conseguimos
eco iendo oda la clase del p oyec o en el que es amos abajando y e isamos que no exis a
una clase F ame que con enga el mismo nomb e. A la ho a de edi a dicho F ame ejecu amos el
código igual que el que se mues a a con inuación, pe o con la di e encia que comp obamos si
el nomb e ha cambiado:
expo s. alida eNewF ame = unc ion alida eNewF ame( ameIn o, callback){
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 53/75
le encon ado = alse;
i ( ameIn o["nomb e"] == ""){
callback("Nomb e de ame acío, debe ellena es e campo");
}
else{
nue aPlan illa.ge F ames(). o Each( unc ion (elemF, indexF, a ay) {
i (elemF.ge Nomb e() == ameIn o["nomb e"]){
encon ado = ue;
}
}
);
i (encon ado){
callback("Nomb e de ame ya exis en e, elija o o");
}
else
callback("Ok");
}
}
Di e encia a la ho a de edi a el F ame.
i ( ameIn oNew["name"] !== ameIn oOld["name"]){
//Si ha cambiado el nomb e, comp uebo que no sea uno exis en e
nue aPlan illa.ge F ames(). o Each( unc ion (elemF, indexF, a ay){
i (elemF.ge Nomb e() == ameIn oNew["name"]){
encon ado = ue;
}
}
);
}
i (encon ado){
callback("Nomb e de ame ya exis en e, elija o o");
}
else
callback("Ok");
• Validación en la c eación de a iables: cuando se c ean a iables no sólo debemos
comp oba el nomb e, sino que debemos comp oba que odos los o ma os y campos
in oducidos coincidan en e sí con el o ma o de inido. Po lo an o, la alidación de da os de
a iables podemos sepa a la en dos apa ados di e en es:
o Validación del nomb e: Como en el paso an e io con el F ame, e isamos que la
a iable no se encuen e c eada en odo el p oyec o, es deci , no puede exis i la a iable
en dos ames di e en es.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 54/75
nue aPlan illa.ge F ame(idF ame).ge Va iables(). o Each( unc ion (elemF, index
F, a ay) {
i (elemF.ge Nomb e() == a In o["name"]){
alidaciones["nomb e"]=" epe ido"
}
}
);
o Validación y consolidación de o ma os: Con los o ma os debemos se más
cau elosos pa a que ealmen e los da os que se in oduzcan co espondan con los
alo es que se pueden pone .
▪ En e os: comp obamos que el alo in oducido es un núme o. Si es co ec o
el amaño del di de la a iable co esponde á con el alo mayo en e 8 y la
longi ud del núme o in oducido.
i ( a In o[" ype"]=="in ege "){
//in ege
alidaciones["ini"]=!isNaN( a In o["ini ial"]);
i ( alidaciones["ini"]){
a In o[" am"]=Ma h.max(8, a In o["ini ial"].leng h);
a In o["ini ial"]=pa seIn ( a In o["ini ial"]). oFixed();
}
}
▪ Fecha: La echa se puede in oduci con a ios o ma os di e en es como:
• dd/mm/yyyy - mm/dd/yyyy - yyyy/mm/dd
Además, se puede in oduci la echa de o ma manual, o seleccionando en un
calenda io. Si la echa es manual pod ía habe p oblemas de consis encia de
da os, como días que no exis en en cie o mes, po ejemplo. Aun así, siemp e
comp obamos que la echa sea co ec a y álida, po lo que hemos c eado una
unción pa a comp oba es os da os:
unc ion isValidDa e(da eS ing, o ma ){
a pa s = da eS ing.spli ("/");
i ( o ma =="dd/mm/yyyy"){
i (!/^ d{1,2} / d{1,2} / d{4}$/. es (da eS ing) )
e u n alse;
a day = pa seIn (pa s[0], 10);
a mon h = pa seIn (pa s[1], 10);
a yea = pa seIn (pa s[2], 10);
}else i ( o ma =="mm/dd/yyyy"){
i (!/^ d{1,2} / d{1,2} / d{4}$/. es (da eS ing) )
e u n alse;
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 55/75
a day = pa seIn (pa s[1], 10);
a mon h = pa seIn (pa s[0], 10);
a yea = pa seIn (pa s[2], 10);
}else i ( o ma =="yyyy/mm/dd"){
i (!/^ d{4} / d{1,2} / d{1,2}$/. es (da eS ing))
e u n alse;
a day = pa seIn (pa s[2], 10);
a mon h = pa seIn (pa s[1], 10);
a yea = pa seIn (pa s[0], 10);
}else
e u n alse;
// C eamos angos pa a años y meses
i (yea < 1000 || yea > 3000 || mon h == 0 || mon h > 12)
e u n alse;
a mon hLeng h = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
// Ajus amos años bisises os
i (yea % 400 == 0 || (yea % 100 != 0 && yea % 4 == 0))
mon hLeng h[1] = 29;
// Comp obamos el día con el mes
e u n day > 0 && day <= mon hLeng h[mon h - 1];
};
▪ Decimales: Cuando c eamos una a iable de ipo decimal debemos comp oba
que la pa e decimal obliga o ia sea un núme o en e o mayo que 0 y el alo
inicial sea un núme o en e o o decimal. Si es e núme o es decimal y se
in oducen más decimales de los que hemos indicado en la “pa e decimal
obliga o ia” el núme o se edondea a los decimales que hemos indicado.
i ( a In o[" ype"]=="decimal"){
//decimal
le ini ial=!isNaN( a In o["ini ial"]);
le decimal=!isNaN( a In o["decimal"]);
i (ini ial && decimal){
i (pa seIn (decimal)<=0){
a In o["decimal"]=1;
}
else{
a In o["decimal"]=pa seIn ( a In o["decimal"]);
}
a In o["ini ial"]=pa seFloa ( a In o["ini ial"]). oFixed(pa seIn (
a In o["decimal"]));
a In o[" o ma "]=ge Fo ma Decimal(pa seIn ( a In o["decimal"]));
a In o[" am"]= a In o["ini ial"]. oS ing().leng h;
}
else i (ini ial== alse && decimal){
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 56/75
alidaciones["ini"]="decimalIni ial";
}
else i (ini ial== alse && decimal== alse){
alidaciones["ini"]="ini&decimal";
}
else{
alidaciones["ini"]="decimal"
}
}
▪ Ca ac e es: En es e caso sólo e i icamos que el o ma o, es deci la longi ud,
sea un o ma o álido, un núme o. Si es á acío o es 0 es e o ma o se c ea con
alo X(8). Una ez que comp obamos que es un o ma o álido, c eamos el
o ma o pa a P ogess de la o ma X( nº ca ac e es ).
i ( a In o[" ype"]=="cha ac e "){
i (!isNaN( a In o[" o ma "])){
i (pa seIn ( a In o[" o ma "])<=0){
a In o[" o ma "]='x(8)';
}
else{
a In o[" am"]=pa seIn ( a In o[" o ma "]);
a In o[" o ma "]='x('+pa seIn ( a In o[" o ma "])+')';
}
}
else alidaciones["ini"]="cha ac e ";
}
6.1.2.- Validación de da os en la ca ga de a chi o.
A la ho a de ca ga un a chi o de P og ess, lo analizamos a a és del analizado sin ác ico como
explicamos en la sección 5.3.-Analizado sin ác ico de P og ess, con lo que ob enemos los da os
es uc u ados en un o ma o JSON, en el que podemos di e encia es ipos de da os:
• Da os de las ‘ emp- ables’: en es os da os ecogemos las a iables que se han inicializado pa a
pode c ea los ames de salida.
• Da os de las a iables: almacenamos las de iniciones de las a iables de los ames de en ada.
• Da os de los ames: se ecoge oda la in o mación de los ames c eados, además de sus
a iables co espondien es.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 57/75
Una ez enemos odos los da os es uc u ados es la ho a de a a los pa a pode con e i ese código a
las is as de nues o p oyec o. Cabe des aca que la alidación de da os es muy pa ecida que la
comen ada an e io men e incluso llegamos a u iliza las mismas unciones:
• Comenzamos eco iendo la es uc u a de da os de los ames. Po cada ame que nos
encon amos comp obamos sus da os básicos: nomb e, ipo y í ulo.
• Con inuamos con el a amien o de las a iables que con iene cada ame. Pa a es o es
necesa io sabe el ipo de ame, ya que si es de en ada o de salida es e a amien o es di e en e.
o F ame de En ada: como hemos comen ado an e io men e, es os da os es án di ididos
en la pa e de de inición de a iables en la cual nos encon amos con el ipo, o ma o y
alo inicial (es os da os se encuen an en la es uc u a de da os de a iables), y po o a
pa e enemos la label y la posición en el ame (es os da os se encuen an en los da os
de los ames).
Reco emos es as es uc u as e inicializamos o co egimos cie os alo es que nos
amos encon ando. Po ejemplo, cuando el alo de la a iable no coincide con el
o ma o de la inicialización. Más adelan e comen amos la lis a de alo es co egidos que
son compa idos con los ames de salida.
o F ame de Salida: es os da os se encuen an di ididos en dos pa es. Una de ellas es la
de inición de las a iables en la es uc u a de las emp- ables y la o a se encuen a
en la es uc u a de los ames.
• Lis a de alo es co egidos en los ames:
o In ege : si el alo de la a iable no es un núme o lo inicializamos a 0. Además, en
cualquie caso, le aplicamos el o ma o indicado en el iche o P og ess.
o Decimal: si al lee el documen o la a iable ipo decimal no con iene o ma o ec i icamos
el alo de la pa e obliga o ia decimal a 1. De no se acío a amos el o ma o pa a
sabe cuán os decimales son necesa ios. Además, al igual que con los In ege , si el alo
inicial no es un núme o lo inicializamos a 0.
o Cha ac e : ecogemos el alo del o ma o pa a sabe el amaño de la a iable.
o Da e: comp obamos que la echa co ec a al igual que en la sección 6.1.1.-
A con inuación, se puede obse a el agmen o de código que ealiza es a co ección de alo es:
unc ion p epa aDa os( a In o){
i ( a In o[" ype"]=="in ege "){
i ( isNaN(pa seIn ( a In o["ini ial"])))
a In o["ini ial"]=0;
else
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 64/75
7.3.2.- E ec os isuales.
Se pod ían gene a di e sos e ec os isuales a la ho a de a as a a iables, como, po ejemplo, ma ca
las a iables seleccionadas, o pode selecciona a ias a iables y mo e las a la ez.
7.3.3.- Alineaciones po de ec o.
O a ampliación in e esan e se ía ag ega di e en es bo ones pa a alinea odas las a iables de un
mismo modo. Po ejemplo, que se coloquen odas a la izquie da, a la de echa o cen adas.
7.3.4.- Añadi ejilla
Se pod ía añadi un e ec o de ejillas pa a e di e enciadas las ilas y columnas en el ame, pa a acili a
su alineación.
7.3.5.- O dena isualización de ames.
Se puede ag ega la uncionalidad de o dena el o den en el que que emos que se ayan mos ando los
ames en el ERP.
7.3.6.- Amplia ca ac e ís icas del ame.
Como hemos comen ado, hemos elegido una se ie de ca ac e ís icas muy conc e as con las que
pe sonaliza el ame, pe o hay muchas más posibilidades, como pe mi i cambia colo de ondo, la
anspa encia del bo de, la colocación de las e ique as de cada a iable, e c. Una ampliación in e esan e
se ía ene en cuen a algunas de es as ca ac e ís icas.
7.3.7.- Ampliación de lec u a de documen os.
Nos hemos cen ado en pode lee un documen o P og ess con las a iables y o ma os que hemos
c eado en el p oyec o. Un pun o muy ue e como ampliación se ía que ué amos capaces de pode lee
un código P og ess bas an e más comple o, además de pode hace una e isión po si hubie a
p oblemas con es a nue a lec u a.
7.3.8.- Vis a simulada del ame de salida.
Como hemos comen ado en el apa ado 4.3.- los ames de salida se isualizan como columnas con
in o mación ya que es án pensados pa a hace epo es. Pa a simpli ica la c eación de es os ames en
la aplicación, noso os c eamos una lis a en la que se mues a el o den en el que apa ece án a la ho a
de se mos adas. Pod íamos añadi una uncionalidad pa a que el usua io pudie a isualiza cómo
queda ía ealmen e la ep esen ación de es e ame en el ERP.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 65/75
CAPITULO 8.- CONCLUSIONS AND FUTURE WORK
Th oughou he de elopmen o ou p ojec we ha e encoun e ed di icul ies, which we ha e add essed
as well as we could, bu inally eaching he expec ed esul . We ha e also achie ed a de elopmen
b oade han he one ini ially planned.
In his sec ion we a e going o ocus on he p oblems encoun e ed and explain o wha ex en he
objec i es o he p ojec ha e been mee . in he las sec ion we shall alk abou he ex ensions ha can
be made in he u u e.
8.1.- ACHIEVEMENT OF GOALS
As we ha e commen ed in sec ion 2.2.- a he beginning o his p ojec , we se some accep able objec i es
o be able o inish i in he scheduled ime. A his poin we will summa ize he main objec i e and he
seconda y ones.
Build an applica ion o c ea e inpu ames o P og ess. This was he main objec i e o he p ojec :
o c ea e an applica ion which would allow us o c ea e a P og ess g aphical use in e ace simply by
d agging he objec s we wan on a ame. This objec i e has been me , as we ha e de eloped an
applica ion wi h which we c ea e a ame and a iable s uc u e.
This is he key poin o he p ojec , in which we could summa ize all he o he objec i es, bu we will di ide
hem in o h ee o he pa s.
• C ea ion o g aphical use in e ace: we can conside his poin he mos impo an o he
p ojec . We a e able o c ea e a iables and we a e able o in e ac wi h hem wi h ges u es and
mo emen s. We ha e c ea ed an applica ion wi h which he end use can eel e y com o able
when mo ing and placing he c ea ed a iables wi hin a panel ha has p e iously been gene a ed
in a ew simple s eps.
The use can in e ac isually wi h he a iables, he use can see in eal ime he P og ess code
ha is being gene a ed wi h each mo emen o c ea ion o ames o a iables.
• Code impo : we wan ed o ensu e ha once he code was c ea ed wi h ou applica ion we we e
able o impo i again. This poin has been achie ed. In addi ion, i he use con inues c ea ing
code wi h he same guidelines ha we use in ou applica ion, he code could be loaded in o he
applica ion success ully.
A he momen i is no possible o load a P og ess ile wi h di e en labels han he ones we deal
wi h in he p ojec . The P og ess language is oo b oad o deal wi h in a i s phase, so we discuss
his poin la e in sec ion.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 66/75
• Da a alida ion: his is one o he mos complex poin s o his p ojec . The da a p ocessing as
we discussed in sec ion 6.1.-was qui e complex. We can p ocess da a ha use en e s h ough
ou o ms and con ol he e o s ha we ind when code is impo ed om an inpu ile.
8.2.- DIFFICULTIES ENCOUNTERED
The goals o he p ojec we e di icul o achie e due o he lack o knowledge o P og ess language by
one o he eam membe s and he lack o knowledge o some o he ools used.
The i s p oblem we encoun e ed was how o de elop a desk op applica ion using web de elopmen ools.
This was one o ou main objec i es, which was esol ed ai ly quickly as soon as we had a mee ing wi h
he p ojec di ec o , Manuel. He p esen ed us se e al op ions o de elop ou applica ion as we wan ed.
Once he echnologies and he p oblem app oach had been decided, we s a ed wi h he de elopmen
i sel . When de eloping we ha e encoun e ed he p oblems ha we discuss below:
• How o enable d ag and d op unc ionali y? This was one o he main p oblems we had. Once
we s a ed o in es iga e on his opic, we ound a ai ly easy o use lib a y, so we decided o use
In e ac .JS and no na i e code.
• Si ua ion o he a iables once mo ed. When we c ea ed he a iables and d agged hem, he
gap ha his a iable occupied s ill was shown in he bo ommos pane because du ing he d ag
he co esponding ‘di ’ objec did no eally mo e. We ound a solu ion by cloning his objec and
mo ing i o a highe sec ion. Also, his way we could di e en ia e he a iables ha we had mo ed
om hose ha we had no . This p ocess is explained in de ail in sec ion 4.2.1.-
• Calcula e dis ances om he o igin o he a iable. In ou ini ial es s wi h In e ac .JS we did
no know how o ge he dis ance ha he a iable had been mo ed wi h espec o i s ini ial
posi ion. Reading he documen a ion, we ind he solu ion o ou p oblems. Once we had hese
dis ances we had o de elop on pape how a a iable mo ed and calcula e i s new coo dina es
o be able o sol e which ow and which column i co esponds o. We ha e de ailed his poin in
he sec ion 4.2.2.-
• Le e i o size. We had a p oblem wi h he le e s o he a iables, since each one occupied a
di e en amoun o pixels. We needed a ype ace in which all o i s cha ac e s ook up exac ly he
same amoun o ho izon al space. We ocus on he use o monospaced le e s, so we decided o
use "Cou ie New Monospace".
• C ea ion o complemen a y windows. A he beginning o he p ojec we encoun e ed he
p oblem o eques ing da a om he use , so we decided o c ea e complemen a y windows o
his p oposal. We an in o a lo o p oblems when wo king wi h web echnologies, as i in ol ed
spending a g ea deal o ime c ea ing se ices ha could communica e wi h he Elec on.JS main
p ocess, whe e he applica ion was unning. So, we decided o use modal windows, which a e
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 67/75
dialog boxes ha appea on he main page, blocking he es o he in e ace in o de o ocus on
his pa icula ac ion.
• Con ol di sizes o i he o ma . Once we gene a ed he di s o he a iables, hey occupied
a whole line, so we had o adjus hem o sol e p oblems when d agging o mo ing he a iables
so ha hey could be placed in he ame co ec ly.
• How o ep esen he ou pu ames so hey a e easily edi able. As we ha e commen ed, he
ou pu ames a e epo s o in o ma ion in columns. To ep esen hem in ou applica ion we
inally choose a lis wi h he a iables o de ed in he o de in which he columns would be
displayed. In his way, he edi ing and iewing is much mo e com o able.
8.3.- FUTURE WORK
In his sec ion we will discuss he possible imp o emen s o ex ensions ha could be made. We will ocus
exclusi ely on wha we belie e could be done in he sho e m.
8.3.1.- Type ex ension
We ha e mainly ocused on a se ies o ypes ha a e he mos common, bu one poin ha could be
ex ended is o inco po a e mo e da a ypes o he c ea ed a iables, such as: da e ime, ecid,
in 64, e c. You can also de ine he ype o a a iable in P og ess h ough a ield in a able in a da abase,
so i would also be an ex ension o conside .
8.3.2.- Visual e ec s
Va ious isual e ec s could be gene a ed when d agging a iables, such as ma king selec ed a iables,
o being able o selec se e al a iables and mo e hem a he same ime.
8.3.3.- De aul alignmen s
Ano he in e es ing ex ension would be o add di e en bu ons o align all he a iables in he same way.
Fo example, hey can be aligned o he le , igh , o cen e ed.
8.3.4.- Add g id
A g id e ec could be added o see he ows and columns in he ame di e en ia ed, o acili a e hei
alignmen .
8.3.5.- O de display o ames
We can add he unc ionali y o speci ying he o de in which we wan he ames o be displayed in he
ERP.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 68/75
8.3.6.- Expand cha ac e is ics o he ame
As we ha e commen ed, we ha e chosen some speci ic p ope ies o cus omize he ame, bu he e a e
many o he s, such as he backg ound colo , he anspa ency o he bo de o he placemen o he labels
o each a iable. An in e es ing ex ension would be o ake in o accoun some o hese p ope ies.
8.3.7.- Ex ension o documen eading
We ha e ocused on being able o ead a P og ess documen wi h he a iables and o ma s ha we ha e
c ea ed in he p ojec . An ex ension could be o be able o ead a much mo e comple e P og ess code, in
addi ion o being able o do a e iew in case he e we e issues wi h his new eading p ocess.
8.3.8.- Simula ed iew o he ou pu ame
As we ha e commen ed in sec ion 4.3.- he ou pu ames a e isualized as columns wi h in o ma ion,
since hey a e in ended o make epo s. To simpli y he c ea ion o hese ames in he applica ion, we
c ea ed a lis showing he o de in which hey will appea when hey a e displayed. We could add a
unc ionali y o isualize he ep esen a ion o how his ame would ac ually look in he ERP.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 69/75
CAPITULO 9.- CONTRIBUCIONES DE CADA
PARTICIPANTE
9.1.- CONTRIBUCIÓN RICARDO CABALLERO SÁNCHEZ
• P opues a de abajo.
Como hemos comen ado en la in oducción, la p opues a de es e p oyec o nace al ene un
p oblema con el lenguaje nue o que es aba u ilizando en el abajo, P og ess.
En un p incipio omé de e e encia Ne beans, p og ama que había u ilizado en cu sos an e io es
en la ca e a, como en la asigna u a Modelado de So wa e en la que implemen amos
aplicaciones de esc i o io con Ja a. Pa iendo de es a base, comencé a in es iga un poco más
sob e las in e aces en P og ess, qué se podía hace y qué no, ya que las in e aces que solíamos
c ea en el abajo e an bas an e simples, pe o que ía sabe has a qué pun o se podía llega .
Después hablé con mi je e, ya que él iene mucha más expe iencia con el lenguaje y sabe de las
en ajas y las ca encias de és e. Hicimos unos boce os de cómo pod ía se la in e az pa a que
uese cómoda de u iliza , a la ez que simple y ambién de las uncionalidades que es ábamos
buscando. La mayo de es as uncionalidades e a u iliza la aplicación pa a c ea pan allas de
man enimien o, lo que llamamos en el abajo ames de en ada. Es as pan allas son bas an e
u ilizadas en un ERP y nos pe mi en accede a cie os da os e i modi icándolos. Po ejemplo:
una pan alla de man enimien o de ó denes de en as es á compues a de muchos campos que
se an ellenando pa a hace la en a. Tenemos da os en la cabece a, como echa e ec i a,
clien e al que a di igida, da os sob e impues os, e c. Después en cada línea enemos el p oduc o,
la can idad, el p ecio, descuen os y o as ca ac e ís icas. Como emos, son muchos da os y se
an p esen ando en dis in os ames pa a que el usua io aya ellenando los da os de o ma
cómoda o que se ellenen po de ec o en base a o os da os in oducidos an e io men e.
P og ama es as pan allas en P og ess es muy edioso. Al e es e p oblema pensé que
pod íamos apo a una solución a pa i de un T abajo de Fin de G ado y así hace un p oyec o
que sea ú il y que no sea simplemen e un p oyec o con el que cumpli con los c édi os, sin
mo i ación y sin un p opósi o eal. Po es a azón, opino que nues o p oyec o iene un g an alo
al es a basado en un p oblema eal y al esol e lo de una mane a e icien e.
• Es udio de he amien as y ecnologías.
Al ene una idea de la in e az que que íamos cons ui nos pusimos a in es iga sob e lib e ías
de Ja aSc ip que nos pe mi ie an a as a y sol a elemen os en la pan alla. Encon é una
lib e ía, jQue y UI, que inalmen e desca amos pa a es e p opósi o pe o que u ilizamos pa a
mos a un calenda io a la ho a de elegi el alo inicial en a iables de ipo echa. De es a misma
lib e ía ambién u ilizamos la unción so able en los ames de salida.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 70/75
También es u e in es igando el uso de o os lenguajes en luga de Ja aSc ip , como TypeSc ip .
La pa e que más iempo de es udio me lle ó ue el uso de PEG.JS como analizado sin ác ico.
En la ca e a no había is o nunca cómo se de inían unas eglas pa a analiza un lenguaje y
cons ui un obje o con los da os que nos in e esan, po lo que al p incipio me cos ó algo más
en ende el uncionamien o, pe o u ilizando el pa seado online con algunos ejemplos que nos
o ecían y la ayuda de Manuel, ha sido más lle ade o.
• Desa ollo de in e aces isuales.
He desa ollado en es e p oyec o las in e aces de los o mula ios de c eación y edición de
a iables y ames, el menú p incipal, la cabece a, la is a de código y los ames de salida.
La pa e isual que no he desa ollado es de la que se ha enca gado mi compañe o, en los
ames de en ada, la isualización de las a iables y el mo imien o de és as.
El cambio en e pan allas y la ocul ación de cie as pa es de las is as en unción de la pan alla
en la que nos encon emos ambién han sido pa e de mi abajo en es e apa ado.
Pa a la pa e isual como hemos comen ado he u ilizado lib e ías con las que ya había abajado
an e io men e, como Boo s ap y o as nue as, como jQue y UI. El uso de es as lib e ías me ha
pe mi ido c ea las in e aces de una mane a bas an e sencilla y cómoda de amplia . En la
pan alla de ames de salida he u ilizado la unción so able de jQue yUI que iene una unción
pa a ans o ma el elemen o o denado en un a ay, lo cual ha hecho bas an e cómodo el abajo
con la in e az y la capa de da os.
• Desa ollo de backend.
En es e pun o podemos des aca el desa ollo de la c eación de las a iables y ames a pa i
de los da os ob enidos en los o mula ios y la edición de los da os ya in oducidos. De la
alidación de es os da os se ha enca gado mi compañe o.
• Analizado sin ác ico de código P og ess.
En es e apa ado he desa ollado las eglas u ilizadas pa a ob ene las a iables y los ames de
salida. Los analizado es sin ác icos se gene an au omá icamen e en base a es as eglas y
u iliza los es muy sencillo. Simplemen e se llama a su mé odo pa se y e de uel e un obje o
con la in o mación ob enida.
• Lec u a del a chi o.
En elación a es e apa ado he desa ollado el lujo comple o: la lec u a del a chi o en sí, el uso
de los pa seado es pa a ob ene los da os y inalmen e la ans o mación del obje o de uel o po
los pa seado es a mis obje os de las clases F ame y Va iable.
De nue o, la alidación de és os da os ha sido desa ollada po Ad ián.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 71/75
• De inición de es uc u a de da os.
Como hemos comen ado en la memo ia, u ilizamos clases de Ja aSc ip pa a de ini nues a
es uc u a de da os, compues a de una clase P og ess, que con end á un Map de clases F ame
y que cada uno de és os iene o o Map de clases Va iable. La de inición de es as clases ha sido
lle ada en g an medida po mí, excep uando algunos a ibu os y unciones que se u ilizan pa a
la isualización de las a iables en los ames de en ada.
• Gene ación de Código P og ess.
La gene ación de código P og ess la he desa ollado yo comple amen e, ya que Ad ián no
conocía el lenguaje p e iamen e.
A la ho a de gene a es e código hay cie as ca ac e ís icas que no son elegidas po el usua io.
Es as ca ac e ís icas ijas se pueden encon a en la sección 4.1.1.-F ames y en la sección 4.1.2.-
Va iables y son usadas pa a simpli ica la c eación de código y ajus a nos a los es ánda es que
de ine el ERP pa a sus pan allas.
• P uebas de código P og ess.
En es e pun o cabe menciona que la emp esa en la que abajo, De el C11, nos cedió un en o no
de desa ollo del ERP, en el que pode hace p uebas con el código P og ess que íbamos
gene ando y e si compilaba y el esul ado de la pan alla en el ERP e a el espe ado. El desa ollo
de es as p uebas ha sido pa e de mi abajo en el p oyec o.
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 72/75
9.2.- CONTRIBUCIÓN ADRIÁN DÍAZ JIMÉNEZ
• Es udio de ecnologías.
En cuan o se plan eó el p oyec o al di ec o y ue ap obado, la p ime a a ea que debíamos hace
e a el es udio de ecnologías pa a lle a lo a cabo.
Es a ue mi p ime a con ibución: pensa cuales iban a se las ecnologías más impo an es que
pod íamos usa pa a es e p oyec o, po lo que puedo enume a las p incipales:
o Elec on.JS: es udio e in es igación sob e cómo desa olla una aplicación con es e
F amewo k, además es a ía pensado pa a usa lo con Ja aSc ip , aunque mi compañe o
es udió la posibilidad de u iliza TypeSc ip .
o Elección del analizado sin ác ico: e isa a ios analizado es sin ác icos, ANTLR y
PEG.js, al inal op é po elegi PEG.js. Po o o lado, es e paso se decidió de ini i amen e
en una pa e más adelan ada del p oyec o, ya que mi compañe o Rica do ue el que
inalmen e es udió es e analizado .
o Elección de lib e ías pa a pode a as a y sol a : enía dudas sob e la con eniencia
de u iliza Ja aSc ip na i o o, en su luga , acili a el abajo usando una lib e ía. Al inal
me decan é po la elección de In e ac .JS ya que una ez consul ada la documen ación
y su u ilización, me esul ó bas an e más sencilla que u iliza di ec amen e el código
na i o en Ja aSc ip .
• Plan eamien o del desa ollo del p oyec o
En es e apa ado cabe des aca la plani icación y plan eamien o del desa ollo del p oyec o. Es e
pun o es consecuencia del pun o an e io .
Una ez enía elegidas las ecnologías que se u iliza ían en es e p oyec o, u e que plan ea
cómo se iba a desa olla , po ejemplo, o ganización median e clases, elegi cómo se iban a
mos a los o mula ios al usua io ( en ana nue a o modal), e c.
Comencé a gene a la aplicación, un p oyec o desde ce o, y c eé las en anas básicas pa a
pode e el uncionamien o de Elec on.JS, la impo ación de Boo s ap, y expe imen a con
jQue y, median e p uebas muy sencillas.
• Desa ollo de la is a de F ames a as a -sol a con el a ón / mo e con el eclado.
Es e es el apa ado en el cual in e í mayo pa e del iempo, an o en el es udio de la lib e ía
In e ac .JS como en la co ec a implan ación y uncionamien o de la misma. Lo puedo di idi en
a ias ases ya que como he comen ado ha sido la pa e más amplia:
o Comienzo de mo ilidad de a iables: Es uc u a el código HTML, además de
comp ende las unciones pa a a as a las a iables. Desa ollo de las unciones de
Diseño in e ac i o de in e aces g á icas de usua io pa a P og ess 73/75
cálculo de aslación de las a iables. En es e pun o las a iables se podían mo e a lo
la go de oda la en ana.
o Mo imien o y eposicionamien o de a ias a iables: ol e a es uc u a el código
HTML y ol e a calcula las dis ancias de aslación espec o al o igen, ya que aho a
eníamos la ila y la columna en la que se encon aba, pe o al clona los di s y
eubica los cambiaban las dis ancias de aslación. Es o se explica en la sección 4.2.1.-
Zonas p incipales.
o Res ingi el mo imien o de las a iables: en es e apa ado puedo comen a que
quise es ingi el mo imien o a cie as coo denadas, pe o no e a capaz, po lo que
después de muchos in en os op é po es ingi el mo imien o al ‘di ’ del ame:
‘ es ic ion: documen .ge Elemen ById("inne -d opzone")’
Una ez enía una pequeña es icción u e que c ea cie as eglas pa a que aun así
la a iable no se salie a de su zona.
o Mo imien o con eclado: cuando e miné con el mo imien o con el a ón, comencé a
c ea el código pa a que podamos mo e las a iables con el eclado. Después de
in en a cen a el oco en la a iable sin éxi o conseguí c ea el código cen ándome en
los da os de la a iable que enemos seleccionada en la is a del F ame.
Una ez conseguimos mo e las a iables con el eclado u e que c ea unas nue as
es icciones pa a es os mo imien os.
• C eación de analizado es sin ác icos de emp- ables y ames de en ada: he desa ollado
el código pa a pode analiza sin ác icamen e el código P og ess an o de las ‘ emp- ables’ como
de los ames de en ada. A aíz de la explicación de Rica do sob e el uncionamien o de PEG.JS
me esul ó más sencillo es e desa ollo, gene ando unas eglas muy sencillas siguiendo una
se ie de pasos.
• Validación de da os de en ada: una ez c eada oda la uncionalidad del p oyec o, e a ho a
de consegui adap a nos a las eglas necesa ias pa a que no hubie a p oblemas a la ho a de
c ea código P og ess, po lo que u e que c ea una alidación de los da os de en ada del
usua io, de modo que se cumplie an cie as es icciones, po ejemplo:
o Comp oba que hay consis encia en e los da os in oducidos y el ipo seleccionado pa a
cada a iable.
o A isa al usua io de p oblemas con los da os in oducidos.
o No pe mi i cie os alo es acíos como el nomb e de la a iable o ame, además de
in en a co egi au omá icamen e los alo es omi idos po el usua io como, po ejemplo,
los alo es iniciales.