1. Help
  2. Quick start
  3. Aggiungere pagine di navigazione

Aggiungere pagine di navigazione

Scopo di questo modulo

In questo modulo aggiungiamo le pagine di navigazione. In particolare, aggiungeremo quattro pagine, in UNIQO rappresentate da pannelli, con le stesse dimensioni: questi saranno le schede del pannello di navigazione. Per convenienza di sviluppo imposteremo un modello (detto tipo in UNIQO) di pannello da cui derivare i tre pannelli.

Questo il risultato finale:

../_images/8f2c863bdf06f4c0230f12525c79882146fff0fb.gif

  1. Organizzare gli oggetti

    Per una migliore organizzazione del progetto creiamo una cartella dedicata ai pannelli e la rinominiamo.

    1. Fare clic pulsante destro sulla cartella UI, poi scegliere Nuovo > Folder: la cartella NewFolder1 compare in UI.

    2. Per rinominare la cartella, con la cartella selezionata premere F2 e rinominarla MyPages.

  2. Creare e impostare il modello di pannello

    1. Fare clic pulsante destro su MyPages, poi scegliere Nuovo > Contenitori > Pannello: Pannello1 (type) compare in MyPages.

    2. Rinominare Pannello1 (type) in Page.

      ../_images/2133eb4565df1ce8529b7d3d0c3ad6aca3ef037e.png

    3. Fare doppio clic sul nuovo pannello per visualizzarlo graficamente nell’editor.

    4. In Proprietà, impostare Allineamento orizzontale e Allineamento verticale su Adatta: il pannello così impostato si adatta orizzontalmente e verticalmente alle dimensioni del suo contenitore, nel nostro esempio il pannello di navigazione.

    5. Per avere maggior spazio per la progettazione si consiglia di ingrandire il pannello, per esempio impostare Larghezza a 500 pixel e Altezza a 400 pixel.

    I pannelli derivati da questo pannello avranno le sue stesse proprietà.

    Nota

    tutti gli oggetti con suffisso (type) sono utilizzabili per derivare altri oggetti con le stesse caratteristiche.

    Nota

    le dimensioni impostate al passo 5 servono soltanto a dare maggior spazio in fase di progettazione. A runtime il pannello si adatta al suo contenitore.

  3. Derivare i pannelli

    Nella cartella MyPages deriviamo quattro pannelli uguali al modello appena impostato:

    1. Fare clic pulsante destro su MyPages, poi scegliere Nuovo > MyPages > Page (type): Page1 (type) compare in MyPages.

    2. Ripetere tre volte il passo precedente per derivare altri tre pannelli.

    I quattro pannelli derivati hanno le stesse proprietà di Page (type). L’oggetto da cui derivano è visualizzabile nel pannello Proprietà:

    ../_images/4b1f5b9cb32ec551267099911792f9cc628344bb.png

    Scopri di più sui tipi: Tipi di oggetti e istanze.

  4. Organizzare la navigazione

    Per impostare i pannelli appena creati come schede del pannello di navigazione, trascinare Page1 (type), Page2 (type), Page3 (type) e Page4 (type) su PannelloDiNavigazione1.

    Fare doppio clic su PannelloDiNavigazionel1 per visualizzarlo aggiornato.

    ../_images/3cfe317b91e07435685a77db968863c079e31a3d.png

  5. Verificare la navigazione a runtime

    I pannelli sono al momento vuoti, perciò per verificare la navigazione a runtime creiamo dei contenuti di prova nei diversi pannelli:

    1. In Progetto, fare clic pulsante destro su Page1 (type), poi scegliere Nuovo > Controlli base > Etichetta: Etichetta1 compare in Page1 (type).

    2. Fare doppio clic su Page1 (type) per visualizzare l’oggetto nell’editor, quindi trascinare l’etichetta nella posizione desiderata.

    3. Ripetere i due passi precedenti per Page2 (type), Page3 (type) e Page4 (type).

    4. Fare clic su image1 Emulator e attendere la comparsa della finestra di runtime.

    5. Fare clic sui diversi pannelli per verificare il funzionamento a runtime, poi chiudere la finestra.

    6. Eliminare le quattro etichette appena create. Per farlo, in Progetto o nell’editor grafico selezionare la prima etichetta e premere CANC. Ripetere la stessa operazione per le altre tre etichette.

Da ricordare

Pagine e pannelli

Tipicamente, nel contesto delle applicazioni HMI, le diverse sezioni di un’interfaccia sono chiamate pagine. In UNIQO si parla invece genericamente di pannelli. Un pannello è un contenitore che può svolgere la funzione tradizionale di pagina o di sezione all’interno di una pagina.

Gestire oggetti simili

Quando si devono creare diversi oggetti simili, per esempio oggetti che condividono le stesse proprietà, è buona prassi creare un modello, detto tipo, da cui derivare i diversi oggetti necessari (istanze del tipo). Questo facilita la leggibilità e la manutenzione del progetto, infatti se si modifica un tipo la stessa modifica si propaga a tutte le sue istanze.

Cartelle

È buona prassi, per facilitare la leggibilità del progetto, organizzare gli oggetti in cartelle, per esempio organizzare i tipi di oggetti grafici in una cartella MyTypes.

Vedi anche

Concetti correlati

Concetti di layout

Organizzazione degli oggetti grafici

Oggetti

Riferimenti

Elemento pannello di navigazione

Pannello

image2 Impostare la finestra principale

Aggiungere oggetti grafici dinamici image3