vai al contenuto principale

Personalizzare il Client web

L'Application Schema consente di personalizzare alcuni aspetti dell'interfaccia utente del Client web, tra cui il layout di form e tabelle e le voci del menu della vista applicativa.

Personalizzare il gestore d’istanza #

Il Form layout editor consente di personalizzare sia la form per la gestione degli oggetti di una classe, sia la schermata di riepilogo con le informazioni di un oggetto della stessa classe. Per aprire l’editor per una classe, fai click destro su di essa per aprire il suo Class menu e seleziona l’opzione Set form layout.... In alternativa, lo stesso editor è raggiungibile cliccando direttamente sulla corrispondente icona del footer.

Designer employee application form layout editor

Esempio di Form layout editor

Il pannello appare come in figura, con il layout della form sulla destra (dove ogni campo rappresenta un attributo o un ruolo abilitato nella classe) e le schede Widgets e Rules sulla sinistra.

È possibile riordinare i campi indipendentemente dall’ordine con cui compaiono nella classe; per farlo è sufficiente trascinarli e rilasciarli sul layout.

La scheda Widgets consente di introdurre nella form elementi aggiuntivi:

  • Derived attributes contiene gli attributi derivati della classe, che di default sono attivi ma non sono mostrati dal gestore d’istanza; è possibile trascinarli nel layout per renderli visibili, anche se si tratta comunque di campi non modificabili. Se non sono stati dichiarati attributi derivati sulla classe, questa scheda non è presente;
  • Buttons contiene pulsanti che possono aprire un link (Open URL) oppure eseguire un Plugin di tipo FormActionHandler (Open Plugin);
  • Other widgets consente di arricchire la form con link, pulsanti per scripts, etichette, separatori e codice HTML.

La scheda Widgets

Dalla scheda Rules possono essere definite regole attraverso codice Javascript per abilitare o disabilitare dinamicamente alcuni widget della form, in base a diverse condizioni.

Il pulsante Create apre il Condition editor, dal quale è possibile definire una condizione booleana che, a seconda del suo valore di verità, può alterare o meno il comportamento dei widget. Il pulsante Params... offre un accesso veloce ad alcuni parametri definibili nella condizione.

Il condition editor del pannello Rules

Sotto al layout della form troviamo il pulsante New section, che consente di suddividere per schede il contenuto della form; può essere premuto tante volte quante sono le schede che si vogliono aggiungere. Facendo click destro su una di esse è possibile definire delle sotto-sezioni annidate (New sub-section), modificare l’ordine delle schede (Move to) e rimuoverle dalla form (Remove).

Il comando Move to Per inserire un qualsiasi elemento della form in una nuova sotto-sezione o in una già esistente, è possibile cliccarci sopra con il tasto destro e scegliere l’opzione Move to dal menu contestuale.

Il pulsante Reset to default riporta il layout alla configurazione di default, eliminando tutte le personalizzazioni.

Una classe con il Form layout modificato Una volta confermate le modifiche del layout della form cliccando su OK, la corrispondente icona ( ) appare evidenziata sulla classe.

Personalizzare il CSS degli elementi della form #

Cliccando su qualsiasi elemento del Form layout vengono mostrate le sue proprietà CSS nella colonna Property della tabella che appare in basso a sinistra. È possibile modificare queste proprietà cliccando direttamente su una delle celle della colonna Value (personalizzando ad esempio il font, il colore e la spaziatura del testo, oppure la dimensione dei campi della form).

È inoltre possibile modificare ulteriori proprietà generali cliccando su Edit CSS properties in alto.

Modificare un singolo elemento del Form layout

Widget #

Un widget è un componente dell’interfaccia utente che consente di gestire una classe, un attributo o un ruolo; esempi di widget sono la Livetable per una classe, un campo di una form per un attributo e una select per un ruolo di associazione a uno. Nel Client web, questi elementi del modello possono essere rappresentati con widget diversi a seconda della vista applicativa o della form in cui compaiono.

Per tutti gli attributi è disponibile un Attribute manager, un widget che consiste in un campo della form, il cui layout dipende dal tipo di dato dell’attributo rappresentato. Per gli attributi booleani sono disponibili diverse rappresentazioni dell’attributo rappresentato.

La rappresentazione dei ruoli avviene solitamente mediante un widget che offre una vista tabellare. In alcuni casi (ad esempio per i ruoli di associazione), l’insieme degli Association managers include ulteriori widget, come menu a tendina (dropdown menu) e checkbox.

Facendo click destro su un ruolo e selezionando Gui icons edit Edit properties è possibile aprire il pannello delle proprietà del suo widget. Da questo pannello è possibile scegliere quale widget usare e personalizzarlo ulteriormente.

Modificare il layout per un singolo ruolo

Esempio di proprietà del widget per un ruolo di associazione.

Livetable #

La vista tabellare è l’Association manager più comune e il widget di default per qualunque ruolo. Cliccando su Set (o Add, a seconda della molteplicità) è possibile accedere alla Livetable degli oggetti associabili della classe riferita da quel ruolo e selezionare uno o più record da associare. Questi record compariranno poi nel widget e potranno essere ispezionati con Open o rimossi dall’associazione con Unset/Remove. Con molteplicità a molti, il widget supporta inoltre tutte le funzionalità della Livetable.

Una Editable multi-row table, rispetto a una comune Multi-row table, consente di modificare gli oggetti in-line, cioè direttamente sulla tabella.

Representation relation role table single

Single-row table

Representation relation role table multiple

Multi-row table

Personalizzare la Livetable #

Il List layout editor

Esempio di List layout editor per una single-row table o multi-row table

La personalizzazione delle viste tabellari avviene attraverso il List layout editor; questo pannello è accessibile in due modi:

  1. Dal GUI widgets configurator, clicca sul tasto Config accanto alle scelte per i widget tabellari (single-row table, multi-row table ed editable multi-row table). Per le schede Association to one e Association to many è possibile definire due layout diversi, uno per per la visualizzazione tabellare degli oggetti associati (Associated) e uno per gli associabili (Associable);

  2. Dal Form layout editor, fai click destro sulla tabella e seleziona l’opzione Edit properties.

Edit properties sulla Livetable

Una volta aperto il pannello delle proprietà della tabella, spunta l’opzione Use custom layout e clicca sul pulsante Open.

Modificare le proprietà della Livetable

Nota che la Editable multi-row table non consente di nascondere le colonne o raggruppare per esse, né può essere collassata.

Vediamo un esempio di layout personalizzato per la classe Employee.

Esempio personalizzazione dal List layout editor

Gli impiegati sono stati raggruppati per team (Group by columns > team_name); all’interno di questo raggruppamento appaiono poi secondo l’ordine alfabetico dei cognomi (Set sorting... > last_name).

Inoltre, alcune informazioni (come i contatti, il numero di incarichi attivi, ecc.) sono state nascoste dalla vista tabellare iniziale. È comunque possibile ripristinare la visibilità di queste colonne nella Livetable.

Ulteriori widget per ruoli di associazione #

Benché la scelta per la rappresentazione dei ruoli e delle composizioni sia limitato alle Livetable (single-row, multi-row ed Editable multi-row), Livebase offre una scelta più ampia per quanto riguarda i widget che è possibile utilizzare per effettuare un’associazione. Oltre alla vista tabellare è infatti possibile scegliere tra le seguenti opzioni:

Consiste in un menu a tendina le cui opzioni sono, di default, gli object title degli oggetti associabili per quel ruolo. È il widget di default quando il ruolo fa riferimento a una classe con un solo attributo. Questo menu a tendina può essere personalizzato ordinando gli oggetti o cambiando la label usata per rappresentare le opzioni (scegliendo un qualsiasi altro attributo al posto dell’object title). Con molteplicità a molti, il widget diventa un set of dropdown menu.

Representation relation role dropdown

Dropdown menu

Representation relation role set of dropdowns

Set of dropdowns

Set of radiobuttons #

Consente di scegliere un oggetto da associare da un insieme di oggetti disponibili di quella classe in base alla sua label. Anche questa lista può essere personalizzata come il menu a tendina; l’unica differenza è che questo selettore è esclusivo per i ruoli con molteplicità a uno.

Representation relation role set of radio button

Listbox #

È simile al classico menu a tendina, con due differenze: il menu è unico anche per molteplicità a molti, ma è possibile selezionare più oggetti dalla lista tenendo premuto CTRL; inoltre se si riapre il menu, gli oggetti già selezionati vengono evidenziati.

Representation relation role list single

Single-selection listbox

Representation relation role list multiple

Multi-selection listbox

Checkbox #

È simile alla Listbox, ma ogni etichetta ha una spunta cliccabile. Entrambi i widget sono esclusivi per ruoli con molteplicità a molti. Nel caso in cui il ruolo faccia riferimento a una classe con due o più attributi, è possibile usare il Tree of checkboxes per raggruppare gli oggetti secondo uno degli attributi, come in figura.

Representation relation role set of checkbox

Set of checkboxes

Representation relation role tree of checkbox

Tree of checkboxes

Widget per ruoli di composizione #

Gli unici widget disponibili per le composizioni a molti sono le viste tabellari che ne consentono la gestione completa (Livetable e Editable). Lo stesso accade quando la composizione è a uno ma non è stringente, cioè ha molteplicità Zero or one (01): ciascun oggetto whole incorpora direttamente il gestore d’istanza del proprio oggetto part.

Widget per gli attributi booleani #

Normalmente, per gli attributi con un campo d’inserimento esiste un unico widget. Gli attributi booleani costituiscono un’eccezione a questa regola, e sono l’unico tipo di attributo che è possibile rappresentare con diversi widget. La scelta avviene cliccando su Gui icons edit Edit properties e selezionando una delle seguenti rappresentazioni:

CheckboxDropdownButtons
CheckboxDropdown menuSet of radiobuttons

Impostare il widget per uno specifico ruolo #

Dall’Application Schema , fai click destro su un ruolo per aprire il suo Role menu e seleziona l’opzione Edit widget properties...; dal menu a tendina, seleziona il widget desiderato.

Modificare il widget di un ruolo

Personalizzare il gestore di classe #

Il GUI widgets configurator consente di scegliere widget e layout di default per tutti i ruoli che puntano una determinata classe (ovvero i ruoli in entrata); per aprirlo, fai click destro sulla classe per aprire il suo Class menu e seleziona l’opzione View GUI widgets. In alternativa, clicca sull’icona Open GUI widgets configurator presente nel footer della classe.

L’editor è suddiviso in tre schede:

  • Management: seleziona la rappresentazione del gestore di classe, scegliendo tra Livetable classica (Single-row o Multi-row table) e Livetable con supporto alla modifica in-line (Editable multi-row table).
  • Association to one: configura il widget usato di default per associare un oggetto della classe selezionata quando essa è coinvolta in un’associazione a uno.
  • Association to many: configura il widget usato di default per associare più oggetti della classe selezionata quando essa è coinvolta in un’associazione a molti.

Il pulsante Config apre il List layout editor, che consente ulteriori personalizzazioni del layout (annullabili cliccando sul pulsante Reset).

Designer employee gui widget configurator association to one

I widget selezionati in questo pannello compaiono in tutte le form che non sono state modificate manualmente. Dai Form layout editor è comunque possibile sovrascrivere la configurazione di default, definendo definendo quali widget utilizzare nelle specifiche form.

Nelle schede Association to one e Association to many viene anche riportato il numero di ruoli entranti che utilizzano ciascun widget.

Personalizzare il menu della vista applicativa #

Dal tab Schemas, un Application Schema può essere espanso cliccando su , accedendo così al al pannello di configurazione del suo Application menu.

Accounting menu

Qui è possibile personalizzare il layout del menu relativo a quella specifica vista applicativa, riordinando le voci cliccandoci sopra e trascinandole con il mouse.

I pulsanti + e - in cima al Layout consentono di espandere o collassare tutte le voci del menu.

Dal pannello laterale Palette è possibile aggiungere al menu widget e comandi (in modo simile a quanto avviene nel Form layout editor):

  • Widgets

    • Submenu aggiunge un sotto-menu (per aggiungere voci al suo interno, trascinaci dentro le voci del menu già presenti);
    • Separator aggiunge un separatore;
    • Spacer inserisce uno spazio;
    • HTML Snippet integra nel menu un frammento di codice HTML (ad esempio un immagine);
  • Commands

    • Open URL consente di inserire un link esterno;
    • Manage objects apre la form per la gestione degli oggetti;
    • Create objects apre la form per la creazione di un oggetto.

Esempio #

Vediamo un esempio di personalizzazione dell’Application menu:

L'Application menu

Esempio di personalizzazione del menu della vista Administration

Esempio nel Client GWTNell’immagine a destra possiamo vedere il risultato delle personalizzazioni: il menu della vista Administration è stato diviso in sotto-sezioni (“Configuration”, “Ingredients”, “Products” e “Shippings”).

Sotto la form per la gestione degli utenti del sistema, è stato inoltre aggiunto un link a una pagina web esterna: in questo caso, l’etichetta “Help” indirizza l’utente a una pagina di aiuto con la documentazione tecnica). Inoltre, gli ultimi due elementi del menu sono stati scorporati dalle altre voci con dei separatori.