Manual d’usuari Widget Forms - Generalitat de … i...Via Laietana, 14 08003 Barcelona Tel. 93 567...

Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat

Manual d’usuari

Widget Forms 22 de juny de 2009

Versió 2.0


2

Informació del document

Informació

Nom del document Edició de formularis amb widget Forms – Document tècnic

Grup de documentació OTGeco – Forms

Data de creació 08/01/2009

Estat Revisat (18/08/2010)

Històric de modificacions

Versió Acció Realitzada per Data Modificacions

1.0 Creació Albert Navarro 08/01/2009 Nou document funcional del widget Forms

1.5 Modificació Albert Navarro 22/06/2009 Modificacions al component widget Forms

1.6 Modificació Albert Navarro 10/11/2009 Nou avís sobre validació d’URL d’enviament

2.0 Modificació Albert Navarro 17/08/2010

Modificacions per a la segona fase d’integració GECO – Formularis Gencat


3

Índex de contingut

1 INTRODUCCIÓ ..................................................................................................................... 7

1.1 CONTEXT TECNOLÒGIC...............................................................................................................8

1.1.1 Component de presentació Formularis GECO ..................................................... 8

2 MANUAL D’USUARI DEL WIDGET FORMS....................................................................... 9

2.1 EDICIÓ DEL MANUAL DE FORMULARIS (NO COMPATIBLES AMB FORMULARIS GENCAT) ...........9

2.2 EDICIÓ EN L’ENTORN VISUAL DE FORMULARIS (COMPATIBLES AMB FORMULARIS GENCAT)...15

2.3 ESTRUCTURA DEL WIDGET FORMS...........................................................................................20

2.4 FUNCIONALITATS ......................................................................................................................21

PAGINACIÓ .............................................................................................................................................21

GRUPS ...................................................................................................................................................25

ETIQUETES .............................................................................................................................................30

TIPUS DE CONTROLS..............................................................................................................................34

Casella de selecció........................................................................................................... 40

Selecció múltiple .............................................................................................................. 40

Llista de valors predefinits, semblant al control “Combo”, però amb la possibilitat de

seleccionar més d’un valor alhora. Permet l’enviament de més d’una opció per a un sol

camp.................................................................................................................................... 40

Casella de selecció múltiple........................................................................................... 41

MULTIIDIOMA ..........................................................................................................................................41

ACTUALITZACIÓ AUTOMÀTICA DE LA DEFINICIÓ D’UN FORMULARI .........................................................43

2.5 VALIDACIONS A FORMULARIS GENCAT ....................................................................................45

VALIDACIONS DE CAMPS DEL FORMULARI .............................................................................................45

VALIDACIÓ DE LA URL D’ENVIAMENT ....................................................................................................46

2.6 MIGRACIÓ DE FORMULARIS GECO ENTRE ENTORNS A FORMULARIS GENCAT.......................47

3 CONFIGURACIÓ DEL WIDGET FORMS .......................................................................... 50

3.1 ELEMENTS TÈCNICS QUE COMPONEN EL WIDGET FORMS .......................................................54

3.2 DOCUMENT XML QUE EMMAGATZEMA INTERNAMENT EL WIDGET...........................................56


4

Índex de figures

Figura 1. Manual d’usuari widget Forms: Antiga definició de formularis multiidioma ...10

Figura 2. Manual d’usuari widget Forms: Nou botó d’edició de formularis...................11

Figura 3. Manual d’usuari widget Forms: Edició manual de formularis multiidioma .....12

Figura 4. Manual d’usuari widget Forms: Llista desplegable de selecció d’idioma ......13

Figura 5. Manual d’usuari widget Forms: Botó “Desar” ...............................................14

Figura 6. Manual d’usuari widget Forms: Definició XML de formulari a Formularis Gencat........................................................................................................................16

Figura 7. Manual d’usuari widget Forms: Enganxar la definició XML a l’àrea d’edició manual........................................................................................................................17

Figura 8. Manual d’usuari widget Forms: Botó “Migrar Formulari” ...............................18

Figura 9. Manual d’usuari widget Forms: Edició en entorn visual del formulari............19

Figura 10. Manual d’usuari widget Forms: Propietats d’un element del formulari dins de la grid D ......................................................................................................................22

Figura 11. Manual d’usuari widget Forms: Pestanya de selecció de pas ....................23

Figura 12. Passos multiidioma a la presentació del formulari......................................23

Figura 13. Edició de la informació multiidioma d’un pas..............................................24

Figura 14. Propietat "Etiqueta" d’una pàgina...............................................................24

Figura 15. Manual d’usuari widget Forms: Menú contextual. Afegir grup ....................25

Figura 16. Manual d’usuari widget Forms: Grup sense etiqueta..................................26

Figura 17. Manual d’usuari widget Forms: Esborrar un grup. Avís de confirmació ......27

Figura 18. Manual d’usuari widget Forms: Visualització d’un grup dins de la grid C....28

Figura 19. Manual d’usuari widget Forms: Propietats d’un grup..................................29

Figura 20. Manual d’usuari widget Forms: Creació d’una nova etiqueta .....................30

Figura 21. Manual d’usuari widget Forms: Nova etiqueta............................................31

Figura 22. Manual d’usuari widget Forms: Esborrar etiqueta ......................................32


5

Figura 23. Manual d’usuari widget Forms: Esborrar una etiqueta. Avís de confirmació...................................................................................................................................33

Figura 24 - Manual d’usuari widget Forms: Selecció de tipus de control .....................34

Figura 25. Manual d’usuari widget Forms: Configuració de les dades de control: Botó d’opció ........................................................................................................................36

Figura 26. Manual d’usuari widget Forms: Finestra Multiidioma de dades: Botó d’opció...................................................................................................................................38

Figura 27. Manual d’usuari widget Forms: Presentació d’un tipus de control: Botó d’opció ........................................................................................................................38

Figura 28. Manual d’usuari widget Forms: Configuració de les dades de control: quadre combinat desplegable (Combo) ..................................................................................39

Figura 29. Manual d’usuari widget Forms: Finestra Multiidioma de dades: quadre combinat .....................................................................................................................39

Figura 30. Manual d’usuari widget Forms: Presentació d’un tipus de control: quadre combinat .....................................................................................................................40

Figura 31. Manual d’usuari widget Forms: Presentació d’un tipus de control: casella de selecció.......................................................................................................................40

Figura 32. Manual d’usuari widget Forms: Presentació d’un tipus de control: selecció múltiple .......................................................................................................................41

Figura 33. Manual d’usuari widget Forms: Presentació d’un tipus de control: casella de selecció múltiple .........................................................................................................41

Figura 32. Manual d’usuari widget Forms: Finestra d’edició d’etiquetes multiidioma...42

Figura 33. Manual d’usuari widget Forms: Finestra d’edició de dades multiidioma .....43

Figura 34. Botó "Actualitzar" .......................................................................................44

Figura 35. Barra de progrés........................................................................................44

Figura 36. Avís de canvis al formulari .........................................................................45

Figura 37. Botó d’edició manual habilitat.....................................................................48

Figura 38. Atribut identificador del formulari................................................................49

Figura 39. Manual d’usuari widget Forms: Assignació de la dada de referència .........52

Figura 40. Manual d’usuari widget Forms: Aspecte visual del botó d’edició del widget Forms .........................................................................................................................52


6

Figura 41. Manual d’usuari widget Forms: Edició manual de formularis......................53


7

1 Introducció

Durant la fase 1 de la integració dels formularis del GECO amb Formularis Gencat, s’ha desenvolupat un nou widget que permet migrar i modificar els formularis que prèviament s’han creat a l’aplicació web de Formularis Gencat.

Aquest nou widget es diferencia de la resta de widgets del GECO en el fet que aquest s’ha desenvolupat amb la tecnologia Flex. A partir d’ara, es podran editar els formularis en un entorn gràfic totalment diferent, afegint passos, grups, i tipificant diferents tipus de controls als camps del nostre formulari.

Aquest document vol servir d’ajuda per a tots els qui mai no han fet servir el widget Forms, per a la migració i la modificació de formularis creats a Formularis Gencat.

No obstant això, en aquest document no s’explica com es creen, modifiquen o exploten les dades d’un formulari a Formularis Gencat.


8

1.1 Context tecnològic

El widget Forms ha estat desenvolupat amb la intenció de proporcionar una eina d’edició de formularis totalment nova, que permeti dissenyar la presentació de formularis en un entorn visual dinàmic i intuïtiu.

L’editor és un component de tipus Shockwave Flash Movie (swf), desenvolupat en llenguatge Flex. Aquest component fa ús d’una definició XML específica, emmagatzemada dins del tipus de contingut Formulari.

Aquesta definició no és presentable amb les formes de presentació de formularis existents al GECO. Tampoc es pot presentar amb els components de presentació que fins ara ho feien (llista manual de continguts, llista automàtica de continguts, etc.).

Per representar formularis en el seu nou format compatible amb la definició de Formularis Gencat s’ha de fer ús d’un component de presentació dedicat a representar aquest tipus de formulari (migrats al nou format).

1.1.1 Component de presentació Formularis GECO

Conjuntament amb el widget Forms, s’ha desenvolupat un nou component de presentació que permet mostrar formularis amb paginació.

Aquest nou component de presentació és necessari, ja que antigament, al GECO es feia servir la llista de continguts per presentar formularis. Això no permetia paginació dins d’un mateix formulari, ja que la forma de presentació no estava preparada.

Cal remarcar que, perquè els formularis migrats amb el nou widget Forms es puguin mostrar, cal configurar un component de presentació Formularis GECO.

Si no és així, el formulari no es mostrarà.


9

2 Manual d’usuari del widget Forms

2.1 Edició del Manual de Formularis (no compatibles amb Formularis Gencat)

Anteriorment, al GECO, la definició XML dels formularis s’emmagatzemava dins de les propietats multiidioma.

Per això, per a cada idioma en què es volia mostrar un formulari, s’havia de definir una nova pestanya amb l’idioma corresponent.


10

Figura 1. Manual d’usuari widget Forms: Antiga definició de formularis multiidioma


11

Aquesta funcionalitat s’ha millorat amb el widget Forms, ja que es permet editar la definició XML dels formularis més ràpidament, gràcies a la tecnologia Flex.

Amb l’aparició del nou widget dins del GECO, s’elimina l’àrea de text “XML del formulari”, a les propietats multiidioma.

Per accedir a l’XML, a partir d’ara, apareix un botó amb l’etiqueta “Editar”. Aquest botó es troba situat a la part inferior de les propietats multiidioma.

Figura 2. Manual d’usuari widget Forms: Nou botó d’edició de formularis

Si hi ha una definició multiidioma del formulari, quan s’edita amb el nou widget Forms, l’aspecte hauria de ser semblant a la imatge següent:


12

Figura 3. Manual d’usuari widget Forms: Edició manual de formularis multiidioma

Per seleccionar l’idioma de la definició que es vulgui visualitzar, s’ha de seleccionar l’idioma corresponent a la llista desplegable, situada a la part dreta superior de l’àrea de l’editor, tal com es mostra a la imatge:


13

Figura 4. Manual d’usuari widget Forms: Llista desplegable de selecció d’idioma


14

Per modificar qualsevol definició de formulari, en l’antiga tipologia s’ha de fer directament, dins de l’àrea d’edició manual.

Un cop realitzats els canvis, nomes caldrà confirmar les dades, fent clic al botó “Desar”, a la part inferior dreta de l’àrea del widget.

Figura 5. Manual d’usuari widget Forms: Botó “Desar”

Només si el format de formulari prové del format antic (no compatible amb Formularis Gencat), aquest s’editarà directament dins de l’àrea d’edició manual, semblant a les versions anteriors del GECO (dins del formulari Multiidioma).


15

2.2 Edició en l’entorn visual de formularis (compatibles amb Formularis Gencat)

Aquest document dóna per fet que existeix un formulari amb l’especificació que indica el document anteriorment esmentat.

A continuació, s’expliquen amb detall els passos que cal seguir per migrar un formulari de Formularis Gencat al GECO:

�� Per poder fer la migració, s’ha de copiar l’XML que ens proporciona l’eina Formularis Gencat:


16

Figura 6. Manual d’usuari widget Forms: Definició XML de formulari a Formularis Gencat


17

�� Un cop copiat el text XML de Formularis Gencat, s’haurà d’enganxar dins de l’àrea d’edició manual del widget.

Figura 7. Manual d’usuari widget Forms: Enganxar la definició XML a l’àrea d’edició manual

�� A continuació, s’ha de prémer el botó “Migrar Formulari”, situat a la part dreta inferior del widget.


18

Figura 8. Manual d’usuari widget Forms: Botó “Migrar Formulari”


19

El widget canvia de pestanya automàticament. Ara es podrà accedir a la definició del formulari amb l’entorn visual.

L’aspecte del formulari ha de ser semblant al de la imatge següent:

Figura 9. Manual d’usuari widget Forms: Edició en entorn visual del formulari

Ja s’ha migrat el formulari. Al punt següent es descriu l’estructura del formulari, quines són les seves àrees, i com interactuen les unes amb les altres.

Cal tenir present que l’edició visual del nostre formulari només s’activarà si la definició del nostre formulari prové de Formularis Gencat.


20

2.3 Estructura del widget Forms

El formulari principal del widget es divideix, principalment, en quatre àrees:

Figura 1. Manual d’usuari widget Forms: Distribució en àrees del widget.

A- Pestanyes de mode d’edició, idioma i menú d’ajuda (part superior)

Un cop seleccionat “Migrar Formulari” des de la finestra d’edició manual, s’activa l’editor visual del formulari. El desplegable d’idioma permet definir de quina manera es volen veure els labels dels elements dins del cos principal.

B- Part esquerra: llistat d’elements del formulari

Aquesta àrea mostra un llistat de tots els elements que s’han definit per al formulari. Quan se selecciona un element, s’actualitzen tant l’àrea C com l’àrea D amb les propietats de l’element.

C- Part dreta superior: edició del formulari

Aquesta és l’àrea principal, o la d’interacció amb el formulari. Permet veure l’estructura del formulari. Divideix l’àrea en pestanyes, on cada pestanya es correspon amb una

A

B

C

D


21

pàgina del formulari. Quan se selecciona una pestanya, només es mostren els elements que s’han afegit en aquesta mateixa pàgina.

D- Part dreta inferior: propietats de l’element

Mostra les propietats de l’element seleccionat: etiqueta, tipus de control, nom de l’input, mida definida, etc. També conté els elements de control del widget de formularis.

2.4 Funcionalitats

El widget Forms ha estat dissenyat amb la intenció de donar múltiples funcionalitats a l’edició dels formularis per a la seva presentació.

A continuació s’enumeren les principals funcionalitats que aporta la versió actual del widget Forms:

Paginació

Aquesta nova funcionalitat dels formularis permet dividir el contingut del formulari en pàgines. A diferència dels antics formularis del GECO, la nova forma de presentació està preparada per poder mostrar les parts d’un formulari, pàgina per pàgina.

Afegir pàgines

Per definir una nova pàgina, s’ha de seleccionar un element a la llista d’elements, situada a la part esquerra del widget (B). Un cop seleccionat, apareixen les propietats de l’element a la part inferior dreta (D).


22

Figura 10. Manual d’usuari widget Forms: Propietats d’un element del formulari dins de la grid D

Se selecciona la fila amb nom “Pas”, i s’introdueix el nom de la pàgina on es vol que estigui contingut l’element actual. Si es volen afegir més elements a la pàgina creada, s’ha de seleccionar el nou element a la llista d’elements, i a la grid de propietats de l’element, i introduir el nom de la pàgina a la fila “Pas”.

Per crear una nova pàgina, només cal repetir el pas anterior, i escriure un nom de pàgina diferent de l’anterior.

Un cop creada una pàgina, aquesta apareix en forma de pestanya a la part superior de l’àrea C del widget. Per accedir al contingut de qualsevol pàgina, només s’ha de fer clic a la pestanya de la pàgina creada.

Esborrar una pàgina

Per a poder eliminar una pàgina creada, primer cal moure tots els elements continguts dintre de la pàgina a un altra pàgina existent. Cal modificar la propietat “Pas” de cada element al valor d’un altra pàgina (com per exemple, de pas1 a pas0) per a que aquest camp es mogui cap a una altra pàgina.

Una pàgina s’esborrarà automàticament si tots els elements que conté aquesta pàgina s’eliminen. És possible treure un element d’una pàgina, modificant el nom del grup a la grid de propietats de l’element.


23

Figura 11. Manual d’usuari widget Forms: Pestanya de selecció de pas

Informació multiidioma d’una pàgina

És possible editar l’ etiqueta multiidioma per a cada pas. Això fa possible que es mostri l’etiqueta definida al formulari en la seva presentació, tal i com es mostra a la següent imatge:

Figura 12. Passos multiidioma a la presentació del formulari


24

Per poder editar les dades multiidioma d’un pas en concret del formulari cal clicar a sobre de la pestanya corresponent a l’àrea d’edició del formulari (el nom del pas es mostra entre parèntesis després de l’etiqueta):

Figura 13. Edició de la informació multiidioma d’un pas

A la part inferior dreta del widget (àrea de propietats del camp), ha d’aparèixer la propietat “Etiqueta”:

Figura 14. Propietat "Etiqueta" d’una pàgina

També es pot accedir a la informació multiidioma d’una pàgina del formulari fent doble clic a sobre de la pestanya corresponent al pas.

Cal remarcar que, si el formulari només conté un pas, la llista de passos no es mostrarà a la presentació del formulari. El formulari ha de tenir com a mínim dues pàgines perquè es mostri la llista de passos a la part superior.


25

Grups

Dintre de cada pàgina, o encara que no s’hagués creat cap pàgina, es poden crear grups d’elements.

Els grups serviran per agrupar elements del formulari, que després es podrà representar com un grup d’inputs, a sota d’un títol en negreta, o com un “group box”.

Afegir grups

Per definir un nou grup, també s’haurà d’accedir a la grid de propietats de l’element, tal com s’ha explicat a l’apartat anterior. Se selecciona la fila amb nom “Grup”, i allà mateix s’ha d’introduir el nom que es vol mostrar per a aquest grup.

També es pot crear un nou grup, des de la grid principal. Fent clic amb el botó dret del ratolí, a sobre del pas actual, apareix el menú contextual:

Figura 15. Manual d’usuari widget Forms: Menú contextual. Afegir grup

Un cop creat un grup, aquest es mostrarà amb el nom per defecte “Grup”. Més endavant s’explica com s’edita l’etiqueta d’un grup.


26

Figura 16. Manual d’usuari widget Forms: Grup sense etiqueta

Esborrar grups

Per esborrar un grup, s’ha d’accedir al menú contextual del widget, tal com s’explica a la creació d’un grup. S’ha de fer clic, amb el botó dret del ratolí, just a sobre de la grid C.


27

Figura 17. Manual d’usuari widget Forms: Esborrar un grup. Avís de confirmació

Un grup s’esborrarà automàticament si tots els elements que conté aquest grup s’eliminen. És possible treure un element d’un grup, fent ús de la funcionalitat d’arrossegar i deixar anar, o modificant el nom del grup a la grid de propietats de l’element.

Per afegir nous elements a un grup existent, es pot fer servir el control arrossegar i deixar anar per desplaçar un element de la mateixa pàgina a un grup. Se selecciona l’element a la grid principal, dins de la pàgina, i després es desplaça al grup on volem afegir-lo.


28

Figura 18. Manual d’usuari widget Forms: Visualització d’un grup dins de la grid C

Editar l’etiqueta d’un grup

A diferència de les pàgines (o passos), els grups, tal com es representaven als antics formularis del GECO, són elements visuals.

Es pot editar l’etiqueta per a cada grup, segons l’idioma seleccionat, a la grid de propietats del grup.

Només cal seleccionar el grup que s’ha creat a la grid C. Apareixeran les seves propietats a la grid de sota. Si se selecciona l’opció “Etiqueta”, es podrà editar, segons l’idioma que seleccionem (vegeu la secció Multiidioma).

Els grups també tenen propietats, com un element més. Per editar les propietats d’un grup, a la grid de propietats:


29

Figura 19. Manual d’usuari widget Forms: Propietats d’un grup

És possible editar l’etiqueta amb la qual apareixerà el grup. L’etiqueta té propietat multiidioma, així que es pot definir una etiqueta diferent depenent de l’idioma.

A la fila “Grup”, es podrà definir si el grup actual és dins d’un altre grup.


30

Etiquetes

Les etiquetes són elements multiidioma que només tenen un comportament visual.

Seran d’utilitat si es vol etiquetar un grup, si aquest es mostra com un group box, o si es vol enganxar text dins de la presentació d’un formulari.

Crear una etiqueta

Per crear una etiqueta s’ha d’accedir al menú contextual del widget, fent clic sobre la grid C amb el botó dret del ratolí:

Figura 20. Manual d’usuari widget Forms: Creació d’una nova etiqueta


31

Quan es crea una nova etiqueta, el text per defecte apareix a la grid C:

Figura 21. Manual d’usuari widget Forms: Nova etiqueta

Esborrar una etiqueta

Per esborrar una etiqueta, amb el botó dret del ratolí s’obre el menú contextual i s’ha de seleccionar l’opció “Esborrar etiqueta”.


32

Figura 22. Manual d’usuari widget Forms: Esborrar etiqueta

Quan s’intenta esborrar una etiqueta, apareix un avís de confirmació:


33

Figura 23. Manual d’usuari widget Forms: Esborrar una etiqueta. Avís de confirmació


34

Tipus de controls

És possible definir un tipus de control per a cada element del formulari. Es pot accedir a la selecció de tipus de control, a la grid de propietats de l’element:

Figura 24 - Manual d’usuari widget Forms: Selecció de tipus de control

Fins ara hi ha cinc tipus de control diferents per als formularis del GECO, que són els que s’indiquen a continuació.

InputText

Entrada de text normal. Se’n pot definir la longitud màxima, i també si el camp és únic, o requerit.

�� Aquesta és la presentació d’un control InputText en un formulari:

Figura 2. Manual d’usuari widget Forms: Presentació d’un tipus de control: Input Text.


35

TextArea

Entrada de text per a textos llargs. Permet definir-ne la longitud màxima, i també si és únic, o requerit.

�� A continuació es mostra un exemple de TextArea d’un formulari:

Figura 3. Manual d’usuari widget Forms: Presentació d’un tipus de control: TextArea.

Botó d’opció (radio button)

Entrada de selecció per botó d’opció (radio button). Es poden definir tantes entrades com es vulgui. Si s’accedeix a l’apartat de propietats de l’element, a la propietat “Dades”, s’ha de prémer el botó que apareix a la part dreta:


36

Figura 25. Manual d’usuari widget Forms: Configuració de les dades de control: Botó d’opció


37

Quan s’hi fa clic, apareix un menú com el de la imatge següent:

Figura 4. Manual d’usuari widget Forms: Dades Multiidioma.

En aquest petit formulari s’han d’introduir els diferents valors que es volen emmagatzemar a l’element.

Per al cas del botó d’opció, s’ha de definir el grup, que serà el mateix per a tots els valors introduïts (vegeu la secció Multiidioma).

El valor defineix les dades que s’enviaran a Formularis Gencat quan l’usuari final enviï les dades del formulari.


38

Figura 26. Manual d’usuari widget Forms: Finestra Multiidioma de dades: Botó d’opció

Es pot seleccionar una etiqueta diferent per a cada idioma, i es donarà el comportament multiidioma al formulari.

Aquest formulari d’edició de les dades de l’element permet afegir, modificar o esborrar valors.

� El control de botó d’opció es presenta de la manera següent:

Figura 27. Manual d’usuari widget Forms: Presentació d’un tipus de control: Botó d’opció

Quadre combinat desplegable (Combo)

Entrada desplegable.

L’aspecte final d’aquest tipus de control és el d’una llista desplegable, on l’usuari final pot canviar el valor en tot moment. Aquests valors, però, s’hauran de definir abans.


39

Figura 28. Manual d’usuari widget Forms: Configuració de les dades de control: quadre combinat desplegable (Combo)

Com en el cas del control anterior, accedint a la grid de propietats de l’element es poden especificar les dades.

Si s’accedeix al formulari d’edició de dades, tal com en el cas del botó d’opció, es podran introduir les dades que sortiran al quadre combinat. Aquestes també tindran comportament multiidioma, on poden aparèixer diferents etiquetes, depenent de l’idioma seleccionat. El valor enviat a Formularis Gencat, però, serà sempre el mateix, independentment de l’idioma (vegeu la secció Multiidioma).

Figura 29. Manual d’usuari widget Forms: Finestra Multiidioma de dades: quadre combinat


40

�� Presentació d’un control tipus quadre combinat desplegable:

Figura 30. Manual d’usuari widget Forms: Presentació d’un tipus de control: quadre combinat

Casella de selecció

Selecció binària. Semblant al control de botó d’opció. En aquest cas, però, el valor enviat a Formularis Gencat és un valor binari (on/off), que no pot ser canviat per l’usuari.

�� Un control de tipus casella de selecció es presenta de la manera següent:

Figura 31. Manual d’usuari widget Forms: Presentació d’un tipus de control: casella de selecció

Selecció múltiple

Llista de valors predefinits, semblant al control “Combo”, però amb la possibilitat de seleccionar més d’un valor alhora. Permet l’enviament de més d’una opció per a un sol camp.

�� Un control de tipus selecció múltiple es presenta de la manera següent:


41

Figura 32. Manual d’usuari widget Forms: Presentació d’un tipus de control: selecció múltiple

Casella de selecció múltiple

Llista de controls de tipus “Check Box” amb la possibilitat de seleccionar més d’un valor alhora.

�� Un control de tipus selecció múltiple es presenta de la manera següent:

Figura 33. Manual d’usuari widget Forms: Presentació d’un tipus de control: casella de selecció múltiple

Multiidioma

El widget Forms permet definir etiquetes multiidioma per als elements. Gràcies a això, es poden veure formularis en diferents idiomes, amb labels diferents. Tal com s’ha indicat abans, però, no es poden definir noms de pàgines, en diferents idiomes.

El widget permet definir dos tipus d’elements multiidioma, etiquetes i valors. Les etiquetes multiidioma permeten definir un label diferent per a cada idioma, i es defineixen a la finestra següent:


42

Figura 34. Manual d’usuari widget Forms: Finestra d’edició d’etiquetes multiidioma

Només es podrà afegir una entrada per al mateix idioma.

En canvi, els elements del formulari que tenen un valor diferent en funció de l’idioma s’editen en una finestra semblant a l’anterior, però a més, es demanen altres dades, com “Grup” i “Valor”.


43

Figura 35. Manual d’usuari widget Forms: Finestra d’edició de dades multiidioma

A “Grup” cal indicar a quin element pertanyen les dades. Per exemple, si hi ha un control de tipus quadre combinat desplegable, el grup serà el mateix per a tots els elements del mateix quadre combinat.

Es poden introduir més de dues files per a cada idioma seleccionat. El control tindrà tants possibles valors com files s’hagin afegit en funció de l’idioma.

Cal tenir en compte que la finestra de configuració de dades només es pot editar als tipus de control casella de selecció botó d’opció.

Actualització automàtica de la definició d’un formulari

La definició d’un formulari creat a Formularis Gencat es migra manualment al GECO un sol cop, en el moment de la creació de la instància de contingut Formulari. Això comporta que, si es modifica la definició del formulari a l’aplicació externa al GECO


44

Formularis Gencat, aquests canvis no queden reflectits a la instància de contingut Formulari.

El widget de formularis permet realitzar la sincronització de dades entre el GECO i Formularis Gencat per tal d’actualitzar la definició del formulari a la instància de contingut ja creada al GECO. Aquest procés s’executa automàticament cada cop que s’accedeix al Widget Forms dintre d’una instància de formulari ja creada, però també es pot realitzar la sincronització manualment.

Nota: Qualsevol modificació a la informació multiidioma (etiquetes) realitzada a Formularis Gencat no es detectarà en sincronitzar, ja que les etiquetes multiidioma es poden modificar al formulari GECO independentment del seu valor a Formularis Gencat.

Les propietats del formulari que s’actualitzen al Widget Forms són:

�� Nous elements al formulari

�� Elements eliminats del formulari

�� Validacions dels camps del formulari

A continuació es detalla pas a pas com s’actualitza la definició del formulari:

1. Per comprovar si hi ha canvis a Formularis Gencat, cal clicar el botó “Actualitzar” situat a la part inferior esquerra del widget (àrea D).

Figura 36. Botó "Actualitzar"

2. Ha d’aparèixer una barra de progrés indicant que la sincronització de dades s’està realitzant entre el GECO i el repositori de formularis (àrea D).

Figura 37. Barra de progrés

3. Un cop finalitzada la sincronització de dades, si s’han trobat modificacions al formulari es mostrarà el missatge amb la llista de canvis, com per exemple:


45

Figura 38. Avís de canvis al formulari

4. Si s’accepten les modificacions, el formulari s’actualitzarà automàticament. D’altra manera, cada cop que s’accedeixi al formulari es mostrarà l’avís amb els canvis.

2.5 Validacions a Formularis Gencat

Quan es crea una definició de formulari a Formularis Gencat, es poden configurar les propietats de cada camp.

Aquestes propietats permeten validar al moment de l’enviament de les dades del formulari.

Les validacions es poden modificar en tot moment, però s’ha d’accedir a l’aplicació web de Formularis Gencat, ja que el widget només permet modificar la presentació, però no la lògica del comportament del nostre formulari. Per tant, la validació dels camps no es podrà modificar dintre del widget mateix.

Tipus de validacions a Formularis Gencat :

Validacions de camps del formulari

�� Tamany:

o Defineix la longitud màxima permesa per al valor d’un input.


46

�� Obligatori:

o Quan se selecciona, fa que aquest camp sigui obligatori. Ha de tenir un valor per poder enviar les dades del formulari.

�� Valor únic:

o Permet validar que, quan s’envia el valor d’un camp, aquest sigui únic. L’activació d’aquest tipus de validació el fa també un camp obligatori.

�� Validació:

o Numèrics

�� Natural: Valida que el valor introduït sigui un número natural.

�� Enter: Valida que el valor introduït sigui un número enter.

�� Real: Valida que el valor introduït sigui un número real.

o Internet

�� Correu Electrònic: Aplica una màscara al valor introduït al camp. El format ha de ser el d’una adreça de correu electrònic.

�� URL: Aplica una màscara al valor introduït al camp. El format ha de ser el d’un enllaç a una adreça web.

o Data/Hora

�� Data: Valida que el format sigui dd/MM/yyyy

�� Hora: Valida que el format sigui hh:mm

�� Data + Hora: Valida que el format sigui dd/MM/yyyy hh:mm

o Text

�� NIF/CIF: Aplica una màscara al valor introduït al camp. El format ha de ser el d’un identificador NIF o CIF.

Validació de la URL d’enviament

L’aplicació web de Formularis Gencat permet definir des de quines URL es poden enviar dades per al formulari (URL de referent). Això aporta la funcionalitat de filtratge d’enviament de dades per URL. S’ha detectat la el problema següent amb els formularis amb definició procedent de Formularis Gencat:


47

• L’enviament es realitza per post HTTP al component Java de presentació, per tant, l’aplicació Formularis Gencat no pot obtenir la URL de referent.

Important: No s’ha d’informar cap URL de referent a Formularis Gencat; en cas contrari, les dades no s’enviaran.

2.6 Migració de formularis GECO entre entorns a Formularis gencat

Per a l’enviament correcte de les dades a l’aplicació Formularis gencat, és necessari informar l’identificador de formulari de Formularis gencat.

Aquest identificador es genera en la mateixa aplicació Formularis gencat en el moment de la seva creació.

L’ID es únic per entorn (a Formularis gencat), però es manté el mateix ID entre entorns del GECO.

Això provoca un desalineament entre els formularis del GECO i els formularis de Formularis gencat, i fa que un mateix formulari no funcioni correctament d’un entorn a altre en el GECO.

Per resoldre aquesta discontinuïtat, s’ha donat l’opció als usuaris webmasters o administradors del GECO de modificar aquest identificador al gestor de continguts, mitjançant el widget Forms.

Quan el perfil d’usuari amb sessió al gestor de continguts té rol administrador o webmaster, en accedir al widget Forms podrà accedir a la pestanya de “Definició manual” del formulari, on es pot visualitzar la definició XML del formulari.


48

Figura 39. Botó d’edició manual habilitat

Aquesta definició d’XML conté un atribut a nivell arrel, amb el nom ID, que conté com a valor l’identificador del formulari a Formularis gencat.


49

Figura 40. Atribut identificador del formulari

Aquest valor pot ser modificable. Només es necessita el nou identificador proporcionat per l’eina Formularis gencat en crear el nou formulari.

Cal tenir present que els noms dels camps del nou formulari a Formularis gencat han de ser iguals en tots els entorns. Si no és així, els valors enviats no s’emmagatzemaran.

Un cop realitzat el canvi, els valors introduïts al formulari renderitzat s’enviaran al formulari amb l’ID corresponent.

S’ha de verificar que el formulari amb aquest identificador existeix a l’entorn de Formularis gencat; si no és així, les dades no s’enviaran correctament.


50

3 Configuració del widget Forms

Per configurar el widget Forms dins d’un atribut d’una instància de contingut, s’han de seguir els passos següents:

�� A partir d’un atribut de tipus VARCHAR o CLOB en una instància de contingut, s’ha de configurar un widget tipus CCE (Text Area CCE, o Text Field CCE):

Figura 5. Manual d’usuari widget Forms: Selecció de tipus de widget: Text Area CCE.

�� Per poder mostrar el nostre widget com un botó, s’ha de configurar la presentació “Anul·lar presentació” com a transformació XSLT. A l’input que apareixerà a la dreta, hem d’escriure la XSL de renderització del widget:

/GECO_widget_Forms/common/xslt/XSLT_FormsWidget.xsl


51

Figura 6. Manual d’usuari widget Forms: Assignació de la presentació del widget Forms.

El widget Forms permet rebre paràmetres que permeten modificar la presentació del botó que obre l’editor. Per poder parametritzar l’aspecte del botó, haurem d’accedir a la pestanya “Miscel·lani” del nostre widget CCE i afegir els paràmetres següents:

Figura 7. Manual d’usuari widget Forms: Parametrització del widget Forms.

<configuracion>

<param name="wdwidth" value="50"/>

<param name="wdheight" value="10"/>

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

<param name="wdclass" value="vign-formElementControl"/>

<param name="wdlabel" value="Editar"/>

<param name="viewManualRoles" value="Rol Webmaster;Rol

Administrador"/>

</configuracion>


52

�� Un cop introduïts els paràmetres, s’haurà d’indicar al widget CCE quina serà la classe Java que llegirà els paràmetres. A la pestanya “Gestió de dades”, s’haurà de seleccionar, com a Dada de referència (Java Class), la classe següent:

com.Gencat.gcc.widgets.forms.Forms_widgetReferenceData

Figura 41. Manual d’usuari widget Forms: Assignació de la dada de referència

�� Un cop configurat el widget correctament, apareixerà el botó d’edició a la part dreta de “Definició Formulari”, tal com es mostra a la imatge:

Figura 42. Manual d’usuari widget Forms: Aspecte visual del botó d’edició del widget Forms

�� Quan s’hi accedeix, la finestra actual es transformarà en el nou widget, en forma de formulari interactiu, semblant al de la imatge següent:


53

Figura 43. Manual d’usuari widget Forms: Edició manual de formularis

A continuació, es mostra un quadre descriptiu dels components MXML i AS que construeixen l’editor de formularis.


54

3.1 Elements tècnics que componen el widget Forms

� Dins del projecte (ActionScript3): (http://[REPOSITORI SVN]/svnroot/trunk/Framework/JavaProjects/GECO_Widget_Forms_jar/WForms.as3proj).

Es poden veure tots els components que construeixen l’editor de formularis Flex.

� L’estructura del projecte és:

Nom component

Paquet Tipus Funció

Main.mxml /as MXML Contenidor principal de

la pel·lícula Flash.

Conté la definició de les

àrees (canvas) principals

que componen l’editor, i

les seves funcions

principals.

GForms.mxml /as/mxml/components/cforms MXML Encapsula la lògica de la

grid d’elements (Grid C)

de l’editor.

Les seves funcions

principals són

representar els passos,

els elements de cada pas,

grups i etiquetes.

GFormsLabel.mxml /as/mxml/components/cforms MXML Encapsula la lògica de la

presentació d’etiquetes

(labels) dintre de

l’editor.

GFGroupGrid.mxml /as/mxml/components/cforms MXML Grid que es comporta com

una grid C, dintre d’un

altra grid. S’utilitza

per representar grups.

GFProperties.mxml /as/mxml/components/cforms MXML Grid que encapsula la

lògica d’edició de

propietats d’un element.


55

GFPropRender.mxml /as/mxml/components/cforms MXML Component que renderitza

la grid de propietats

(Grid D) de l’editor.

PopUpIdioma.mxml /as/mxml/components/cforms MXML Presentació de l’element

emergent d’edició de

valors multiidioma d’un

element.

Classifica els elements

en grups, i permet donar

un valor a un ítem.

PopUpIdiomaSimple.mxml /as/mxml/components/cforms MXML Presentació simple de

l’element emergent

d’edició d’etiquetes

multiidioma d’un element.

No permet donar valors a

ítems d’un element.

GECOList.as /as/com/gencat/components AS Fa extensió de la classe

List de la llibreria de

Flex.

Implementa funcions

específiques de Forms.

GECOGrid.as /as/com/gencat/components AS Fa extensió de la classe

DataGrid de la llibreria

de Flex.

Implementa funcions

específiques de Forms.

Formularis.as /as/com/gencat/components AS Defineix el format del

document XML amb el qual

treballa l’editor visual.

xmlutils.as /as/com/gencat/components AS Component auxiliar que

implementa funcions

d’utilitat amb documents

XML.

NOTA: Cal tenir en compte que qualsevol canvi que afecti la definició del document XML amb el qual treballa el widget Forms, també afectarà totes les formes de presentació de Formularis GECO. La definició principal del document XML es troba dins del component Formularis.as.


56

3.2 Document XML que emmagatzema internament el widget

Com s’ha indicat anteriorment, aquest widget treballa internament amb un document XML, que defineix tots els elements (ítems) en estructura jeràrquica.

Aquests ítems poden ser de tipus pàgina, grup, etiqueta o control.

Cadascun dels elements pot tenir propietats. Aquestes propietats defineixen tant el comportament multiidioma d’un element, com regles de validació (entrades obligatòries) o possibles valors predefinits.

A continuació es mostra un exemple de document XML, amb l’estructura jeràrquica amb què treballa el widget Forms:

<?xml version="1.0" encoding="utf-8"?> <formitems> <item label="Pas 0" type="pagina"> <items> <item label="Etiqueta" type="label"> <properties> <property name="Etiqueta" type="Multiidioma"> <data></data> <i18n lang="Català" elem="0"> <label></label> <data>0</data> </i18n> </property> <property name="Tamany" type="String"> <data/> </property> <property name="Obligatori" type="Binary"> <data>si</data> </property> <property name="Unic" type="Binary"> <data>si</data> </property> <property name="Pas" type="String"> <data>Pas 0</data> </property> <property name="Grup" type=""> <data/> </property> </properties> </item> <item label="Nom" type="control"> <properties> <property name="Etiqueta" type="Multiidioma"> <data>Nom</data> <i18n lang="Català" elem="0"> <label>Nom</label>


57

<data/> </i18n> <i18n lang="Castellano" elem="0"> <label>Nombre</label> <data/> </i18n> </property> <property name="Selector" type="Select"> <data></data> <i18n lang="Català" elem="0"> <label></label> <data></data> </i18n> <i18n lang="Castellano" elem="0"> <label></label> <data></data> </i18n> </property> <property name="Control" type="Combo"> <data>InputText</data> </property> <property name="Dades" type="Select"> <data/> </property> <property name="Tamany" type="String"> <data>60</data> </property> <property name="Obligatori" type="Binary"> <data>si</data> </property> <property name="Unic" type="Binary"> <data>si</data> </property> <property name="Pas" type="String"> <data>Pas 0</data> </property> <property name="Grup" type=""> <data/> </property> </properties> </item> <item label="Correu" type="control"> <properties> <property name="Etiqueta" type="Multiidioma"> <data>Correu</data> <i18n lang="Català" elem="0"> <label>Correu</label> <data/> </i18n> <i18n lang="Castellano" elem="0"> <label>Correo</label> <data/> </i18n> </property> <property name="Control" type="Combo"> <data>InputText</data> </property> <property name="Dades" type="Select"> <data/>


58

<i18n lang="Català" elem="0"> <label>[email protected]</label> <data/> </i18n> </property> <property name="Tamany" type="String"> <data/> </property> <property name="Obligatori" type="Binary"> <data>si</data> </property> <property name="Unic" type="Binary"> <data>si</data> </property> <property name="Pas" type="String"> <data>Pas 0</data> </property> <property name="Grup" type=""> <data/> </property> </properties> </item> </items> </item> </formitems>

Manual d’usuari Widget Forms - Generalitat de … i...Via Laietana, 14 08003 Barcelona Tel. 93 567...

Documents

Transcript of Manual d’usuari Widget Forms - Generalitat de … i...Via Laietana, 14 08003 Barcelona Tel. 93 567...