Design dei componenti

Sarebbe possibile inserire gli elementi nello spazio vuoto della tela in modo semplice, ma è meglio cercare di rendere tutto pulito e ordinato immediatamente. Pertanto, per cominciare, disegneremo l'area di lavoro. Aggiungiamo un componente (Container) alla tela, dove collocheremo tutti gli altri elementi. Dopo averlo aggiunto, si deve fare clic sull'icona dell'ingranaggio e procedere alla configurazione di questo contenitore.

Impostazioni del contenitore

Esaminiamo le impostazioni disponibili.

• Name - il nome con cui possiamo fare riferimento a questo contenitore nei processi aziendali dell'applicazione. Ad esempio, se vogliamo creare un processo aziendale per modificare alcune impostazioni di questo contenitore.
• Direction - la direzione in cui saranno disposti gli elementi all'interno del contenitore dato. Orizzontalmente, se si desidera disporli in fila, uno dopo l'altro, o viceversa, verticalmente, quando gli elementi vanno uno sotto l'altro.
• Wrap - impostare l'uscita degli elementi. Devono essere sulla stessa riga (nowrap) o possono essere avvolti (wrap).
• Alignment - come devono essere allineati gli elementi nel contenitore (impostazione separata per l'allineamento orizzontale e verticale).
• Size - dimensione del contenitore. Può essere impostata come percentuale dello spazio disponibile o avere una dimensione fissa in pixel.
• Max Width -la larghezza massima consentita (nel caso in cui non sia impostata in modo rigido e vari a seconda del contenuto).
• Margin/Padding - rientro dai bordi del contenitore. Esterno o interno, rispettivamente.
• Image, Gradient or Overlay (Background color) - la possibilità di impostare lo sfondo desiderato. È possibile scegliere un colore specifico (o una combinazione di colori diversi con una sfumatura) o selezionare un'immagine di sfondo.
• Border - selezione della cornice e del suo aspetto (colore, spessore, raggio di arrotondamento).
• Visible - visibilità dell'elemento (e di tutti gli elementi annidati).

Le impostazioni selezionate sono visibili nella schermata. Naturalmente, è possibile sperimentare e modificare tali impostazioni, scegliendo un design unico.

Aggiungiamo un altro al contenitore creato. Vi aggiungeremo i campi di input necessari. Impostiamolo in verticale, allineato al centro, con larghezza del 40% e padding a sinistra (padding a sinistra 20px).

Componenti dell'applicazione

Successivamente, aggiungiamo i componenti stessi al contenitore. Il nostro processo aziendale accetta due numeri del tipo float. Per inserirli, è necessario aggiungere due componenti Input componenti (float), a Buttonche avvierà il processo di calcolo, e fare un piccolo aggiustamento visivo per firmare il loro Label.

Aggiungiamo un altro blocco in cui indicheremo ciò che intendiamo calcolare in generale (somma, sottrazione, ecc.). Impostiamo la larghezza al 30% con gli elementi disposti verticalmente, centrati e allineati a destra (end/center). Aggiungiamo 5 componenti di Label al contenitore stesso e cambiamo immediatamente il loro testo con quello desiderato.

L'ultimo passo del progetto visivo è l'aggiunta di un altro contenitore per visualizzare il risultato del calcolo. Lo aggiungiamo per analogia con il contenitore precedente, ma impostiamo l'allineamento a destra con un piccolo padding a sinistra. La caratteristica di questo contenitore è che inizialmente sarà invisibile (l'interruttore Visible è spento). Lo attiviamo nel momento in cui abbiamo il risultato dei calcoli. Aggiungiamo ad esso 5 componenti Label e non abbiamo nemmeno bisogno di modificare il loro testo, perché il blocco è ancora invisibile (l'importante è impostare il loro Name in modo da poter identificare l'elemento necessario durante la creazione dei processi aziendali).

Se tutto è stato fatto correttamente, nel web designer vedremo il seguente risultato:

E questo nell'applicazione pubblicata: