Editor di widget

L’editor di widget è uno strumento che consente di creare e modificare widget.

Un widget può essere visto come una piccola applicazione, ad esempio un modulo che consente l’inserimento di dati anagrafici, oppure una check list di controllo per la manutenzione di una attrezzatura.

Un widget è composto da altri widget. In generale chiamiamo componenti i widget di base, quelli messi disposizione per la costruzione, ma a tutti gli effetti sono a loro volta dei widget. Dalla composizione dei componenti di tipo layout, componenti statici, ed input otteniamo il nostro widget. Il risultato sarà un albero di componenti/widget uno dentro l’altro, uno sopra l’altro.

Per creare un nuovo widget partiamo dal file system.

Selezionando la voce Nuovo widget apriamo una finestra che ci consentirà di creare e modificare il widget.

Per prima cosa dobbiamo selezionare il template base da cui partire, attualmente i template disponibili sono 4:

Modello vuoto: un modello che presenta un solo elemento di tipo layout (vediamo dopo di cosa si tratta);
Modulo verticale: un modello predisposto per poter creare facilmente form in cui i campi di input sono uno sotto l’altro;
Modulo in linea: modello pensato per organizzare i contenuti orizzontalmente;
Modulo: un modello di esempio per la realizzazione di una checklist.

In modo simile possiamo modificare un widget esistente, partendo dal file system, selezioniamo il widget (estensione del file hf), quindi premiamo sull’icona della matita della toolbar oppure click destro sul widget, quindi selezioniamo la voce Modifica.

In questo caso verrà aperto direttamente l’editor con il widget selezionato, da dove potremo modificare il widget.

Editor

Sia che stiamo creando un nuovo widget, sia che stiamo modificando uno esistente, ci troveremo a questo punto nell’editor.

Si tratta di una finestra piuttosto ricca di elementi, vediamoli tutti.

Componenti

Il pannello a sinistra mostra un elenco di componenti. Sono tutti i componenti che possiamo aggiungere al nostro widget (in futuro ne aggiungeremo altri). Tra questi troviamo:

Input con etichetta: sono componenti costituiti da un’etichetta e da un campo di input. Sono molto comodi nella composizione di form verticali

Input base: si tratta di campi di input base, utili nella creazione di form lineari

Statici: sono componenti che non consentono interazione con l’utente, come etichette, titoli e simili
Layout: questi componenti servono per l’organizzazione grafica dei contenuti, li vedremo tra poco
Snippets: sono “pezzi” di widget riusabili

Albero

Sempre sul pannello di sinistra, selezionando l’etichetta “ALBERO”, vediamo la struttura del nostro widget.
Questa visualizzazione può essere utile per capire l’effettiva struttura del widget che stiamo editando. Selezionando uno dei nodi dell’albero vedremo selezionato lo stesso nodo anche nella parte centrale dell’editor oltre che nelle proprietà (pannello a destra).
La selezione dei componenti del nostro widget risulta necessaria per la loro modifica, cancellazione, duplicazione. A volte i componenti sono molto “densi” e “appiccicati” gli uni agli altri. In questi casi la selezione dall’albero risulta più semplice.

Visualizzatore - parte centrale

Nella parte centrale dell’editor troviamo il visualizzatore del widget. In questo pannello possiamo vedere una rappresentazione grafica del risultato del nostro widget, come sarà poi in esecuzione. Poiché, come vedremo subito, questa parte dell’editor viene utilizzata anche per altre operazioni, la visualizzazione non è del tutto fedele al risultato finale. Per ottenere un’anteprima corretta dobbiamo usare la funzione di anteprima presente nella toolbar.

Passando con il mouse su un componente, quest’ultimo si evidenzia, mostrandoci il tipo del componente. Se invece clicchiamo su un componente, questo viene selezionato, la stessa selezione viene riportata quindi nell’albero e nel pannello più a destra (vediamo tra poco quest’ultimo).

Una volta selezionato un elemento compaiono due piccole icone, una che consente di duplicare il componente, l’altra lo elimina.

Proprietà

L’ultima parte dell’editor sono le proprietà. Ogni componente ha delle proprietà, ad esempio le dimensioni del testo, i margini, il valore di default di un input. Le proprietà mostrate in questo pannello sono quelle del componente selezionato nell’albero/visualizzatore. Modificando queste proprietà potremo vedere le modifiche direttamente nel visualizzatore (affinché tali modifiche vengano applicate è necessario spostare il focus su un’altra parte di 4hse, ad esempio cliccare sullo spazio bianco del visualizzatore o su un altra proprietà).

Ogni proprietà è modificabile previa l’attivazione di una checkbox posta a fianco della proprietà stessa. Se la checkbox non è attivata, il componente utlizzerà il valore di default per quella proprietà. Tuttavia, se la checkbox è attivata, sarà possibile apportare modifiche al valore della proprietà per il componente selezionato. Questa opzione consente di personalizzare le caratteristiche del componente secondo le proprie preferenze e necessità.

A seconda del componente selezionato appaiono proprietà diverse.

Trascinare componenti (drag&drop)

Possiamo fare diverse operazioni trascinando i componenti.

Possiamo trascinare componenti dal pannello COMPONENTI al visualizzatore. In questo modo possiamo aggiungere componenti al nostro widget, inserendoli esattamente nel punto in cui li vogliamo.

Possiamo trascinare i componenti all’interno del visualizzatore per riposizionarli come riteniamo sia meglio per il nostro widget. Se durante questa operazione premiamo il tasto CTRL della tastiera vedremo che il puntatore del mouse diventa una piccola più. Questo significa che al rilascio il componente non verrà spostato, ma duplicato e la copia posizionata nel punto in cui l’abbiamo rilasciata.

Layout

Ci soffermiamo un attimo su questi particolari componenti, è importante capire il loro funzionamento. Questi componenti sono utilizzati per organizzare graficamente i contenuti. Un corretto utilizzo ci consente di ottenere quello che vogliamo, al contrario un utilizzo scorretto ci farà perdere tantissimo tempo e con risultati molto incerti.

Layout in linea

Questo layout è utile per creare contenuti simili a quelli dei form che facciamo con i comuni word processor. I componenti aggiunti ad un layout in linea vengono posizionati uno a fianco all’altro, ed andranno a capo automaticamente quando termina lo spazio.

È però importante notare che solo alcuni componenti sono predisposti per essere posizionati in questo modo. Alcuni componenti vanno naturalmente “a capo”. Nell’immagine riportata sopra vediamo che il titolo “Anagrafica”, pur essendo all’interno del layout in linea (questo risulta evidente dall’albero), occupa l’intera riga e manda a capo il contenuto successivo. La stessa cosa accadrebbe a tutti gli input con label e ad altri componenti non progettati per un layout in linea.

Layout orizzontale

Questo layout può sembrare simile al layout in linea, i componenti in esso presenti vengono affiancati orizzontalmente. La differenza importante è che tali componenti possono essere disposti in diversi modi, come ad esempio con spaziatura regolare, centrati, posizionati sulla destra etc…

Layout verticale

Il layout verticale dispone i suoi contenuti uno sotto l’altro. Può essere utilizzato per realizzare semplici form, oppure in combinazione con il layout orizzontale per creare elenchi anche complessi. Ne vediamo un esempio in seguito.

Esempio: controllo scaffalature

Supponiamo di voler creare una checklist per il controllo delle scaffalature.

Per realizzare questo form sono stati usati sia layout verticali che layout orizzontali.

Innanzitutto abbiamo impostato nella toolbar: Disposizione del device: A4

Siamo partiti da un layout verticale a cui abbiamo aggiunto un titolo

Abbiamo quindi aggiunto due layout orizzontali ai quali abbiamo aggiunto delle caselle di testo presenti tra i componenti-input con etichetta. Per fare in modo che i due input Data controllo e Nominativo risultassero allineati abbiamo assegnato una larghezza di 120px all’etichetta nelle proprietà, per allineare a destra i due campi Scaffale N./Reparto e Firma, abbiamo assegnato alle proprietà dei due layout orizzontali Disposizione - Ripartizione elementi: Spaziatura tra gli elementi.

Abbiamo quindi aggiunto un nuovo layout orizzontale ed, al suon interno, quattro layout verticali. Ad ogni layout verticale abbiamo quindi aggiunto un titolo, con le relative descrizioni: N°, Elementi di verifica etc…

Abbiamo impostato:

padding del layout orizzontale: 0
larghezze dei layout verticali rispettivamente a: 10%, 50%, 14%, 14%
altezza dei layout verticali disattivata mediante la chechbox (vedremo tra poco il perché)
bordi di tutti i layout verticali: stile Solid, larghezza 1px
dimensione dei titoli: 3
spessore del testo dei titoli: Normal

A questo punto abbiamo duplicato il layout orizzontale

In questa nuova riga abbiamo rimosso i titoli dalle ultime due colonne e modificato la dimensione dei restanti due titoli, portandola da 3 a 4. Grazie alla precedente disattivazione della proprietà “Altezza” dei layout verticali siamo riusciti a creare delle celle vuote che, nonostante l’assenza di contenuto, riempiono tutto lo spazio verticale disponibile. Abbiamo poi duplicato altre 3 volte quest’ultima riga appena modificata.

Abbiamo quindi modificato i contenuti dei titoli e modificato le altezze delle singole righe per ottenere il risultato voluto.