## FAQ: strutturazione della user interface

In questa sezione sono riportate le domande più frequenti emerse durante l' utilizzo di guigen relative alle tecniche di modellazione della struttura della user interface.

Q: devo progettare la interfaccia utente di un progetto realizzato con guigen: dove posso trovare una descrizione dei "mattoncini" utilizzabili?

A: guigen mette a disposizione un insieme di elementi che, opportunamente strutturati e assemblati, permettono di definire strutture di user interface adatte ad implementare le tipiche funzionalità delle applicazioni gestionali.

E' possibile visionare l'elenco di questi "mattoncini" nel catalogo dei pattern u.i: esso descrive ad alto livello gli elementi principali di strutturazione disponibili (pannelli, widget, layout). Utilizzando tali elementi nella progettazione logica della user interface si ha la garanzia che l'interfaccia sia modellabile con guigen, in quanto gli elementi descritti nel catalogo dei pattern u.i. hanno un diretto corrispettivo nel metamodello utilizzato da guigen.

Per approfondire l'utilizzo dei singoli elementi durante la modellazione è possibile visionare il manuale di riferimento del metamodello di guigen.

Q: ho visionato i pattern u.i ma ho una esigenza che non mi pare essere coperta dalle funzionalità attualmente fornite per modellare la user-interface. Non vorrei rinunciare ai vantaggi dell'utilizzo di MDD sul resto dell'applicazione: come devo comportarmi?

A: A fronte di una esigenza che non rientra nel perimetro delle strutture possibili tramite modellazione è possibile agire in uno dei seguenti modi:

1. richiedere la nuova funzionalità al gruppo di sviluppo del tool. Questo è un passaggio che è sempre consigliato perchè:
   - la funzionalità potrebbe non essere ancora presente nella versione correntemente in uso, ma potrebbe già essere pianificata per un rilascio successivo
   - la funzionalità potrebbe essere già stata richiesta da altri utilizzatori e l'opportunità o meno di inserirla nella pianificazione dipende anche dall'utlità percepita dall'insieme degli utilizzatori
   - la funzionalità potrebbe essere già presente ma la documentazione non era sufficiente per renderla evidente: in questo modo è possibile evitare dispersive implementazioni custom inutili
2. provare a definire una modalità alternativa per la realizzazione della funzione utilizzando gli strumenti a disposizione. In molti casi ciò è possibile senza che questo possa comportare problemi per l'utente finale.
3. utilizzare una delle modalità di definizione custom di componenti di presentation:
   - UserDefinedPanel: permette la definizione di un frammento di view direttamente nel linguaggio target (es. jsp nel caso di struts2). Viene innestato nel layout dell'applicazione così come fosse un pannello standard.
   - UserDefinedWidget: permette la definizione di un frammento di view direttamente nel linguaggio target (es. jsp nel caso di struts2). Viene innestato nel layout dell'applicazione come fosse un widget standard (può quindi essere utilizzato in un pannello che può contenenre widget, es. WidgetsPanel).
   - MsgBoxPanel: permette di visualizzare codice html prodotto da business logic (non è tipicamente una pratica consigliata ma in alcune casistiche può essere utile)

Q: E' possibile associare ai pulsanti (Button) un'icona o un colore/stile differenziato?

A: Si, è possibile, entro certi limiti (solo nella cartuccia neutral).

Il rendering grafico con cui i pulsanti (Button, ConfirmButton, ResetButton) sono visualizzati dipende dagli standard grafici del portale di pubblicazione. A livello di modellazione sono previsti due meccanismi per specificare meglio i pulsanti:

- tipologia (style)del CommandPanel in cui i pulsanti sono contenuti: un pannello di comandi può contenere pulsanti di tipo funzionale o di tipo navigazione. Lo standard di molti portali potrebbe differenziare la resa grafica delle due tipologie di pulsanti (es. in rupar i pulsanti funzionali sono grigi, mentre i pulsanti di navigazione sono gialli).
- specificatore di funzione del pulsante: per ciascun pulsante si può, opzionalmente, specificare il tipo di funzione che tale pulsante è destinato ad assolvere. A seconda del tipo di funzione lo standard del portale potrebbe prevedere una resa grafica differente (ad esempio potrebbe prevedere l'icona della lente d'ingrandimento per i pulsanti di ricerca, un 'check' per pulsanti di conferma, etc.). Le possibilità previste sono disponibili nella reference guide del metamodello

E'inoltre possible (ma è una pratica sconsigliata) personalizzare lo stile CSS del singolo pulsante associando una regola di stile custom direttamente all' ID xhtml dell'html relativo al pulsante

Q: Ho la necessità di far comparire nello spazio destinato alla label di un widget del testo formattato (es. apici, pedici, testo in grassetto, evidenziazione di parte del testo in un colore specifico, icone,...): come posso fare?

A: Nell'attributo label di ogni oggetto di tipo Widget è possibile inserire codice html. Occorre però per ottenere l'effetto desiderato occorre tener presente che sull'elemento grafico che renderizza l'etichetta agiscono gli stili dello skin del portale: l'effetto finale va dunque verificato caso per caso.

Q: All'interno di un WidgetsPanel ho la necessità di inserire una sezione di testo descrittivo. In questo caso non mi serve avere una label, inoltre vorrei poter inserire nel testo descrittivo formattazioni particolari (es. apici/pedici, grassetto, italico, colori differenziati, icone, ...). Potrei avere anche la necessità di rnedere dinamico (ovvero impostato da logica applicativa) il testo da visualizzare: come posso fare?

A: E' possibile utilizzare il widget PlainText, che permette di visualizzare testo statico (definito a design time mediante l'attributo staticText) o dinamico (mediante binding con un ApplicationData e valorizzazione da business logic del valore di tale ApplicationData).

Per evitare la visualizzazione dell'etichetta del widget è sufficiente impostare a null l'attributo label del widget stesso: in questo modo apparirà solo il testo e questo si estenderà anche nell'area normalmente prevista per la label.

Nel caso fosse necessario, ad esempio, estendere in larghezza il testo fino a ricoprire più colonne del pannello (layout a griglia) è possibile impostare lo span orizzontale del widget di conseguenza.

Q: E' possibile rendere dinamico il testo delle etichette dei widget?

A: No, attualmente ciò non è possibile in guigen.

Q: E'possibile rendere dinamico l'insieme delle opzioni selezionabili in un RadioButtons?

A: No, attualmente l'elenco delle opzioni selezionabili in un widget RadiButtons deve essere definito a design time.

Nel caso sia necessario permettere all'utente una scelta singola tra più opzioni caricate dinamicamente è possibile utilizzare, ad esempio, una ComboBox a selezione singola

Q: Al di la delle modalità modellabili, è possibile personalizzare fortemente l'aspetto grafico di uno degli elementi standard di interfaccia (widgets/pannelli)?

A: Ogni elemento grafico modellato ha un corrispondente snippet di codice xhtml che ne realizza il rendering. Ciascun elemento è identificato da un ID, che è univoco all'interno della singola pagina: è perciò in linea teorica possibile personalizzare la resa grafica di ogni elemento. Questa operazione deve essere compiuta con molta attenzione in particolar modo se vengono attivate le funzionalità 'ricche' che prevedono modifiche a runtime della schermata non sempre controllabili ad opera delle librerie javascript client.

Ricordando che i vantaggi derivanti dall'uso dell MDD diminuiscono al crescere del numero delle personalizzazioni che si attuano rispetto al rendering standard si sconsiglia l'utilizzo di questa pratica.

Q: Devo visualizzare una tabella di dati. Per una colonna ho la necessità di visualizzare una icona rappresentativa invece che un testo: è possibile?

A: Si, è possibile in maniera programmatica, ovvero inserendo il codice html da business logic nella collezione di dati associata alla tabella. In dettaglio è necessario:

1. definire nel ComplexType relativo agli elementi della collezione associata alla Table un campo fittizio destinato a contenere il codice html ch ereferenzia l'immagine
2. definire nella Table una colonna associata al campo creato in precedenza
3. all'atto della creazione della collezione di dati riempire, oltre ai campi relativi alle altre informazioni da visualizzare, anche il campo fittizio con il codice html di rendering dell'icona appropriata.

Q: Ho modellato un widget Calendar ma non vedo comparire lo strumento per la selezione della data: come mai?

A: Il widget calendar assume la consueta forma grafica di campo testo associato a strumento di selezione data solo se sono attive le funzionalità ricche. In caso contrario appare come un normale campo di testo.

Q: Ho modellato la struttura di menu, ma non li vedo sullo schermo: come mai?

A: La struttura di menu è visualizzata solo se nella schermata è stato modellato un widget MenuView.

Q: E' possibile modellare una ComboBox a selezione multipla?

A: Si, è possibile: una ComboBox a selezione multipla è semplicmente una ComboBox con un AppDataBinding (value-binding) che punta ad un ApplicationData di tipo array di tipo semplice.

Q: Come si fa a far apparire il check/radio di selezione multipla/singola a sinistra di una Table?

A: Per rendere selezionabile le righe di una Table è sufficiente:

- modellare un AppDataBinding (value-binding) sulla tabella:
  - se l'appdata puntato è di tipo semplice la selezione sarà singola
  - se l'appdata puntato è di tipo array di tipo semplice la selezione sarà multipla
- impostare nel ColumnModel della tabella l'attributo valueSelector in modo che punti al nome del Field considerato identificativo della struttura dati contenuta nella tabella.

Q: Ho modellato una tabella con una colonna editabile: è possibile fare in modo che, a runtime, la colonna sia editabile solo per alcune delle righe?

A: Data una colonna dichiarata editabile, è possibile fare in modo che tale editabilità sia effettiva solo per alcune righe (calcolate a runtime) impostando l'attributo editableFlagSelector nella Column in modo che punti al nome di un campo di servizio del record che sta alla base della tabella che fungerà da flag (booleano) di attivazione.

Q: Ho modellato una tabella con una colonna editabile: è possibile fare in modo che il valore sia scelto da una lista di valori invece che inserito manualmente?

A: Si, data una colonna dichiarata editabile, è possibile fare in modo che il widget di editing sia una combo dalla quale l'utente sceglierà il valore.

Vi sono due casistiche:

1. la lista di valori è comune a tutte le righe
2. la lista di valori vaira da riga a riga

#### lista di valori comune

Occorre modellare nell'oggetto Column:

- un AppDataBinding che punti all'ApplicationData che contiene la collezione di chiavi/valori tra cui l'utente dovrà scegliere
- gli attributi multidataKeySelectore multidataValueSelector in modo che puntino al nome dei campi chiave e valore all'interno dei record della collection

#### lista valori specifica per riga

Occorre modellare nell'oggetto Column:

- l'attributo multidataPropertySelector che deve puntare al nome del campo del record di base della tabella che conterrà le scelte (chiave/valore) per ciascuna riga
- gli attributi multidataKeySelectore multidataValueSelector in modo che puntino al nome dei campi chiave e valore all'interno dei record della collection dereferenziata mediante l'attributo multidataPropertySelector