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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
6
Figura 41. Manual d’usuari widget Forms: Edició manual de formularis......................53
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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à.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
10
Figura 1. Manual d’usuari widget Forms: Antiga definició de formularis multiidioma
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
13
Figura 4. Manual d’usuari widget Forms: Llista desplegable de selecció d’idioma
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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).
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
16
Figura 6. Manual d’usuari widget Forms: Definició XML de formulari a Formularis Gencat
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
18
Figura 8. Manual d’usuari widget Forms: Botó “Migrar Formulari”
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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).
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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”.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
32
Figura 22. Manual d’usuari widget Forms: Esborrar etiqueta
Quan s’intenta esborrar una etiqueta, apareix un avís de confirmació:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
33
Figura 23. Manual d’usuari widget Forms: Esborrar una etiqueta. Avís de confirmació
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
36
Figura 25. Manual d’usuari widget Forms: Configuració de les dades de control: Botó d’opció
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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”.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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>
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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:
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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.
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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>
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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/>
Via Laietana, 14 08003 Barcelona Tel. 93 567 63 30 Fax 93 567 63 31 www.gencat.cat
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>