Modelli di progettazione software nei progetti di sviluppo mobile
I modelli di progettazione software semplificano lo sviluppo di applicazioni mobili eliminando la necessità di implementare componenti ripetitivi. La creazione di un modello di progettazione semplifica inoltre le revisioni e gli aggiornamenti, poiché una modifica apportata al modello può essere applicata a un intero progetto.
MobileTogether offre modelli di progettazione software per elementi di interfaccia utente in applicazioni mobili multipiattaforma, al fine di facilitare il riutilizzo delle soluzioni di progettazione e semplificare la creazione di opzioni efficienti e flessibili per soddisfare diverse esigenze delle applicazioni.
In MobileTogether, un modello di controllo è un componente di progettazione che consente agli sviluppatori di definire e raggruppare gli elementi di controllo dell'interfaccia utente in modo da renderli facilmente riutilizzabili. I modelli di controllo supportano i parametri, e ogni modello può essere personalizzato in base ai valori dei parametri durante l'esecuzione.
Consideriamo un esempio.
Il software MobileTogether Designer include diversi progetti di esempio che illustrano i modelli di controllo. Descriveremo l'applicazione Cities4-DynamicSelection. Lo screenshot qui sotto mostra una parte dell'applicazione in esecuzione su un telefono Android:
Questa applicazione illustra una sfida comune nella presentazione di dati gerarchici. In definitiva, l'applicazione vuole che l'utente selezioni una città. Per essere più efficiente, l'elenco completo delle città è organizzato per continenti, presentato in una casella a tendina, quindi filtrato per paesi all'interno del continente selezionato, visualizzato in un insieme di pulsanti radio, e infine, le città all'interno del paese selezionato, mostrate in un secondo insieme di pulsanti radio.
In orientamento orizzontale, i pulsanti radio vengono elencati orizzontalmente (come mostrato nell'immagine sopra), mentre in orientamento verticale sono disposti verticalmente
Sarebbe molto complesso creare un'applicazione di questo tipo se dovessimo creare manualmente i controlli a forma di pulsante radio per ogni possibile combinazione di selezioni dell'utente. Inoltre, i nomi di paesi e città sono contenuti in un file sorgente XML, e desideriamo poter aggiornare l'applicazione semplicemente modificando questo file sorgente.
Aprendo l'applicazione in MobileTogether Designer, visualizziamo la struttura della pagina nella finestra di progettazione principale.
Nella parte superiore della pagina, il primo elemento di controllo è la casella combinata per la selezione del continente. Successivamente, sono presenti due tabelle che contengono elementi di controllo "segnaposto". Durante l'esecuzione, la prima tabella e il segnaposto genereranno l'elenco dei paesi, mentre la seconda genererà l'elenco delle città.
Il software MobileTogether Designer include una finestra di supporto che mostra una struttura ad albero di tutte le pagine, le sottopagine e i modelli di controllo presenti in qualsiasi applicazione. In questo esempio, ogni modello accetta due parametri che verranno passati dal segnaposto durante l'esecuzione.
La selezione di uno dei modelli di controllo visualizza i suoi componenti nel pannello di progettazione principale.
Per la versione verticale, il modello utilizza una tabella con righe dinamiche, mentre la versione orizzontale utilizza una tabella con colonne dinamiche. In entrambi i casi, la tabella generata dal modello sarà inserita all'interno di una singola cella della tabella principale definita nella pagina superiore. Questo centra verticalmente la casella di controllo di ordinamento in qualsiasi colonna di pulsanti radio, indipendentemente dal numero di righe.
Un segnaposto definisce la posizione di un modello di controllo all'interno di una pagina. La finestra di supporto "Stili e proprietà" relativa al segnaposto indica quale modello di controllo utilizzare e fornisce i valori dei parametri. Il segnaposto per l'elenco dei paesi definisce entrambe le proprietà come espressioni XQuery:
Anche con una visualizzazione parziale, possiamo notare che il modello di controllo specifico applicato alla pagina sarà determinato dall'orientamento del dispositivo durante l'esecuzione.
Possiamo utilizzare il simulatore MobileTogether per esaminare i modelli di progettazione del software durante l'esecuzione e osservare il funzionamento degli elementi segnaposto e dei modelli di controllo. Nelle seguenti schermate, stiamo utilizzando un iPhone in orizzontale come dispositivo di anteprima. Poiché questa applicazione non presenta funzionalità specifiche per un determinato dispositivo o sistema operativo, il dispositivo di anteprima esatto non è rilevante.
Le opzioni scelte dall'utente per continente, paese e città non sono predefinite nell'applicazione, quindi all'avvio, visualizziamo solo l'intestazione della pagina e una casella combinata vuota per la selezione del continente:
La finestra "Messaggi" elenca le operazioni eseguite mentre selezioniamo un continente, come indicato dalle aree evidenziate in verde qui sotto
La finestra di simulazione mostra ora l'elenco dei paesi appropriato per l'Europa, ma non sono elencati nomi di città
A questo punto, l'applicazione è in attesa che l'utente selezioni un paese. Invece di procedere, possiamo aprire l'editor XQuery all'interno del simulatore e valutare i parametri passati dal primo segnaposto al modello di controllo. Semplicemente, copiamo l'espressione dei parametri del modello dalla finestra "Stili e proprietà" e la incolliamo nella finestra XQuery. L'espressione restituisce un array contenente l'elenco dei paesi europei e lo stato di ordinamento:
Ma perché l'app non mostra alcuna lista di città nella pagina simulata? Possiamo analizzare l'espressione del parametro passata dal secondo segnaposto per le città:
L'espressione ha ricevuto una lista vuota di nomi di città. Poiché i pulsanti radio relativi alle città sono contenuti in una tabella con colonne dinamiche, non è stata visualizzata alcuna colonna!
Il controllo "casella di controllo" per la scelta dell'ordinamento non si trova in una colonna dinamica, ma neanche viene visualizzato. La proprietà di visibilità della casella di controllo è definita come "$PERSISTENT/Root/@Country != ''", il che significa che la casella di controllo e l'etichetta di testo non saranno visibili finché l'utente non seleziona una città.
In sintesi, l'esempio Cities4-DynamicSelection dimostra come diversi controlli possano essere combinati in modelli di progettazione software personalizzati e integrati in un'applicazione mobile per creare una soluzione elegante che fornisce il risultato corretto in base alle scelte dell'utente durante l'esecuzione o in base ad altre condizioni esterne. L'applicazione dimostrativa e il file di dati di esempio sono inclusi con MobileTogether Designer, quindi è possibile seguire i passaggi descritti sopra o approfondire ulteriormente per esplorare autonomamente.
MobileTogether Designer è uno strumento gratuito che consente di creare rapidamente applicazioni mobile multipiattaforma a partire da un'unica progettazione. Guardate le dimostrazioni video per vedere i tipi di applicazioni che gli utenti di MobileTogether creano ogni giorno e scaricate il programma di installazione per iniziare a utilizzare i modelli di progettazione software!