Modelli di progettazione per applicazioni mobile

In un post precedente, abbiamo parlato dell'utilizzo di modelli di progettazione software per applicazioni mobile, al fine di facilitare il riutilizzo del design e semplificare la creazione di soluzioni efficienti e flessibili per diverse esigenze delle applicazioni. Abbiamo descritto un esempio di modello di controllo progettato per visualizzare diversi livelli di dati gerarchici, in base alla selezione effettuata dall'utente durante l'esecuzione del programma.

Il nostro esempio è stato realizzato utilizzando MobileTogether, lo strumento RMAD (Rapid Mobile App Development) di Altova, progettato per aiutare gli sviluppatori sviluppare applicazioni multipiattaforma che offrono prestazioni avanzate e sofisticate per le applicazioni, garantendo un'esperienza utente eccellente.

È inoltre possibile creare modelli di controllo per applicazioni mobile multipiattaforma, combinando più controlli in un'unità più ampia, come un complesso sottoinsieme costruito da componenti individuali. Questo crea modelli di progettazione per applicazioni mobile che possono essere facilmente integrati in qualsiasi punto, accelerando lo sviluppo e garantendo la coerenza.

MobileTogether Designer, lo strumento di Altova per lo sviluppo di applicazioni mobile multipiattaforma che combina strumenti di progettazione visiva basati su funzionalità di trascinamento e rilascio con tecniche di programmazione funzionale, include applicazioni di esempio per illustrare diverse funzionalità. L'applicazione CompanySales interroga un database di ordini per generare un report di vendita in tempo reale, destinato ai dirigenti, per una società fittizia, con report sulle vendite complessive e sulle vendite per prodotto, regione o singolo rappresentante di vendita, consentendo all'utente di selezionare le date dei report e di effettuare confronti con periodi precedenti.

Di seguito sono riportate immagini della pagina principale che mostra le vendite in tempo reale del 15 febbraio, e della pagina "Vendite per prodotto", che fornisce una ripartizione delle vendite per singolo prodotto per quella giornata.

Ogni pagina dell'applicazione include funzionalità per selezionare una data, in modo che gli utenti possano accedere a qualsiasi data passata per visualizzare i dati di vendita storici.

Nella finestra principale di progettazione, possiamo notare che le funzionalità di selezione della data sono realizzate combinando tre pulsanti e un componente di selezione della data

Il controllo del calendario visualizza la data del report e permette all'utente di selezionare qualsiasi data passata. I pulsanti freccia sinistra e destra permettono di navigare indietro o avanti di un giorno, mentre l'azione assegnata al pulsante "Oggi" seleziona la data corrente.

Quando la data di riferimento del rapporto è impostata sulla data corrente, sia il pulsante "Oggi" che il pulsante con la freccia rivolta a destra vengono disabilitati.

Modelli di progettazione per l'interfaccia utente di applicazioni mobile

Prima di creare i controlli mostrati sopra, è necessario aggiungere un modello di controllo nella finestra di supporto "Pagine". Per aggiungere nuove pagine e modelli di controllo, è sufficiente cliccare sul pulsante verde con il simbolo "+" situato nell'angolo in alto a sinistra

In alternativa, è possibile creare un modello di controllo selezionando elementi di controllo esistenti in qualsiasi pagina e scegliendo le opzioni dal menu contestuale che si apre con il tasto destro del mouse

All'interno del selettore di date avanzato, le azioni eseguite dal pulsante "Oggi", dai pulsanti freccia e dal controllo del selettore di date sono anch'esse definite nel modello di controllo. Di seguito sono riportate le azioni per il pulsante "Oggi" e il pulsante freccia sinistra:

Non vogliamo che il pulsante "Oggi" sia attivo quando la data selezionata corrisponde alla data corrente, e non vogliamo inoltre che l'utente possa avanzare nel futuro. Possiamo definire quando questi pulsanti sono abilitati nella finestra di supporto "Stili e proprietà". Ecco una visualizzazione parziale delle impostazioni per il pulsante "Oggi":

Il pulsante "Oggi" è disabilitato quando la data selezionata per il report corrisponde alla data odierna. Abbiamo inoltre definito diversi colori per indicare se il pulsante è cliccabile o meno.

Le definizioni dei colori sono facoltative. Un requisito dell'applicazione CompanySales era quello di visualizzare gli stessi colori su tutti i dispositivi, al fine di simulare una coerenza con l'identità aziendale. Se si lasciano i campi relativi alle definizioni dei colori vuoti, MobileTogether utilizza automaticamente i colori predefiniti per ciascuna piattaforma: Android, iOS, Windows 10, ecc.

Aggiungere un modello di controllo a una pagina

Il modello avanzato per il selettore di date viene utilizzato nella pagina del rapporto sulle vendite executive dell'app e in tre delle quattro sottopagine. Abbiamo semplicemente trascinato il selettore di date avanzato dalla finestra di supporto "Pagine" su ciascuna pagina in cui era necessario. Questo consente di risparmiare diversi passaggi, in quanto il modello viene automaticamente creato all'interno di un controllo segnaposto, come si può vedere qui:

Modificare le azioni dei modelli di progettazione per applicazioni mobile

Abbiamo un'altra questione da considerare. Quando l'utente seleziona una nuova data per il report, vogliamo che l'applicazione interroghi automaticamente il database delle vendite per visualizzare report e grafici specifici per ogni pagina. Finora, le azioni definite all'interno del selettore di date avanzato servono solo a selezionare una data.

Abbiamo tre opzioni per elaborare ulteriormente qualsiasi modello di controllo: applicare solo le azioni definite nel modello di controllo stesso, sovrascrivere le azioni del modello di controllo con tutte le nuove azioni definite nel segnaposto, oppure combinare le azioni del modello di controllo con azioni aggiuntive definite nel segnaposto.

La nostra app per le vendite utilizza la terza opzione. Il selettore di date avanzato consente all'utente di selezionare la data. Il campo di testo segnaposto presente in ogni pagina aggiunge azioni specifiche per eseguire query sul database e aggiornare i grafici, in base al contenuto della pagina.

Abbiamo aggiunto delle impostazioni specifiche per gli eventi al controllo del modello presente su ogni pagina, tramite il menu contestuale che si apre cliccando con il tasto destro

Questo apre la finestra di dialogo "Azioni". Di seguito è riportato l'elenco delle azioni disponibili per la pagina "Vendite per prodotto".

La prima azione è un gruppo di azioni speciale, integrato, chiamato "Callback evento del modello". Includere "Callback evento del modello" significa che tutte le azioni definite nel modello del controllo "Enhanced Date Picker" vengono eseguite per prime, seguite dalle azioni aggiuntive definite nell'elemento segnaposto.

L'ultimo gruppo di azioni nell'immagine sopra è espanso per mostrare le azioni di "Aggiorna" che aggiornano il rapporto "Vendite per prodotto". Le prime due azioni di "Aggiorna" eseguono query sul database, mentre le ultime due azioni di "Aggiorna" ridisegnano i grafici in base ai risultati delle query.

Provatelo di persona

È possibile scaricare gratuitamente MobileTogether Designer e aprire l'applicazione di esempio CompanySales per approfondire l'utilizzo dei modelli di progettazione per applicazioni mobile in questo strumento dimostrativo per la reportistica di vendita. In alternativa, scaricare l'applicazione mobile ed eseguire l'applicazione CompanySales sul proprio dispositivo mobile. Il supporto per i modelli di progettazione nelle applicazioni mobile è solo una delle molte funzionalità di MobileTogether che consentono agli sviluppatori di creare applicazioni native avanzate con un approccio a basso codice, che è rapido e semplice.