Programmare da zero con Xojo: Mastering Container Control Container

Due capitoli fa abbiamo iniziato a creare il componente che ci ha permesso di visualizzare un grafico a barre. Tuttavia, necessitava di miglioramenti, poiché l’utente dell’applicazione poteva vedere solo un numero limitato di barre: quella indicata dalla larghezza della finestra che la conteneva. In questo capitolo ci occuperemo di risolvere questa limitazione.

E per questo utilizzeremo un altro dei controlli disponibili nel pannello Libreria dell’IDE Xojo. Questo è il ContainerControl.

ContainerControl è un controllo molto speciale, poiché è a metà strada tra quella che sarebbe una finestra e un semplice controllo. In effetti, il suo utilizzo è il più conveniente quando nella progettazione della nostra applicazione è necessario utilizzare controlli dell’interfaccia utente composti.

E che cos’è un controllo dell’interfaccia utente composita? Bene, possiamo nominare come tali quelli in cui è richiesto l’uso combinato di diversi semplici controlli dell’interfaccia utente per fornire una caratteristica o funzionalità comune.

Ad esempio, il Canvas che abbiamo utilizzato per il nostro grafico a barre è un semplice controllo; ma se vogliamo aggiungere la funzionalità di scrolling (o scorrimento orizzontale e/o verticale), allora dovremo aggiungere alla composizione anche l’utilizzo di un altro controllo disponibile in Library: la ScrollBar. Pertanto, l’uso combinato di un Canvas e della ScrollBar, in cui ognuno deve interagire sull’altro, forma un controllo dell’interfaccia utente composita.

Ora, sia Canvas che ScrollBar avranno bisogno di una superficie comune che ci permetta di definire come sarà il loro design nella finestra in cui verranno utilizzati, e questa superficie è ciò che ContainerControl ci fornisce.

Infatti, la progettazione di controlli composti utilizzando il ContainerControl è simile a quello che siamo abituati a fare quando progettiamo l’interfaccia utente delle finestre delle nostre applicazioni: dobbiamo solo trascinare il ContainerControl dalla Libreria alla barra di navigazione dell’IDE (posizionato più a sinistra, e che è quello che contiene tutti gli elementi utilizzati nel progetto), per creare una nuova istanza (di default avrà il nome “ContainerControl1”).

Quindi, quando selezioniamo l’istanza del ContainerControl nel Navigatore, accederemo al Design Editor che ci ricorderà molto lo stesso che abbiamo utilizzato nella progettazione delle finestre dell’applicazione.

Pertanto, una volta che accediamo al Design Editor per l’istanza ContainerControl selezionata, si tratta di trascinare su di essa gli elementi dell’interfaccia utente che vogliamo utilizzare, sia dalla Libreria che dal Navigatore stesso, per indicare la posizione e la dimensione avere.

Una volta completata la progettazione del ContainerControl, saremo in grado di dotarlo di funzionalità utilizzando gli elementi di programmazione che conosciamo per ora: proprietà, metodi ed eventi sul ContainerControl stesso, oltre a quelli che sono già stati implementati in quei controlli utilizzato nel suo design. ; come potrebbe essere il caso della nostra classe per la visualizzazione di grafici a barre basati su Canvas.

Non preoccuparti, nel video che accompagna questo articolo vedrai passo dopo passo l’intero processo corrispondente al design di ContainerControl, nonché il modo in cui puoi incorporarli successivamente nel design delle finestre in cui verranno utilizzati e anche nel modo in cui tutti gli elementi sono correlati tramite codice.

Una volta completato, il nostro ContainerControl avrà già una barra di scorrimento per eseguire lo scorrimento laterale, così da permetterci di vedere anche quelle barre che inizialmente sono nascoste a causa della larghezza della finestra.

Nel codice vedrai anche come i dati vengono aggiornati dinamicamente mentre l’utente interagisce sull’interfaccia utente. Così, ad esempio, la barra di scorrimento modificherà il suo valore massimo ogni volta che l’utente modifica la larghezza della finestra che contiene l’istanza del ContainerControl.

In questo capitolo continueremo anche ad utilizzare il gestore di eventi KeyDown, permettendo all’utente di spostarsi anche a sinistra oa destra utilizzando i normali tasti cursore.
– 
Javier Rodriguez

Ingegnere Xojo

Twitter: @xojoes

Facebook:  http://facebook.com/xojoes/

Scarica l’ultima versione da  www.xojo.com

Risorse Xojo in spagnolo:  https://docs.xojo.com/spanish