--- title: "Progettazione di interfacce utente per applicazioni flessibili, con fogli di stile multilivello" date: "2016-12-06" categories: - "applications" - "development" - "mobile" tags: - "app-design" - "app-development" - "app-ui" - "app-ux" - "mobiletogether" description: Scoprite come i fogli di stile multilivello in MobileTogether migliorano la progettazione dell'interfaccia utente delle applicazioni, consentendo una personalizzazione dinamica su diverse piattaforme, mantenendo al contempo un aspetto nativo. --- Status: #blog Tags: #app-design #app-development #app-ui #app-ux #mobiletogether Categories: [low-code+no-code](/blog/it/category/low-codeno-code.md) | [mobile-development](/blog/it/category/mobile-development.md) # Progettazione di interfacce utente per applicazioni flessibili, con fogli di stile multilivello Utilizzare un framework di sviluppo mobile multipiattaforma come MobileTogether è un'ottima scelta per [creare applicazioni native](https://www.altova.com/it/mobiletogether.html), perché l'ambiente di progettazione si occupa di rendere correttamente l'interfaccia utente dell'applicazione, utilizzando l'aspetto e la sensazione nativi di ciascun sistema operativo. È sufficiente creare un unico progetto. Questo offre agli sviluppatori di app la possibilità di creare applicazioni sofisticate e orientate ai dati per tutti gli utenti in modo molto rapido. Per facilitare questo processo, MobileTogether utilizza un approccio RMAD, insieme a opzioni flessibili per progettare un'interfaccia utente (UX) accattivante. Per supportare specificamente quest'ultimo aspetto, sono disponibili fogli di stile multilivello che consentono di personalizzare e applicare stili, sia in modo statico che dinamico, a diversi livelli della progettazione dell'interfaccia utente, con pochi semplici clic. ![Visualizzare un'applicazione mobile](/blog/images/shutterstock_2341179701.jpg) ## Progettare un'interfaccia utente accattivante Introdotte per la prima volta nella versione 3.0 di [MobileTogether](https://www.altova.com/it/mobiletogether/new-features.asp), le tabelle di stile multilivello consentono agli sviluppatori di applicazioni di definire stili globali che possono essere applicati a livello di progetto, pagina, tabella e controllo. Questo offre un repository centralizzato di stili che possono essere utilizzati su diversi livelli all'interno del progetto di sviluppo dell'applicazione. Perché personalizzare gli stili? Innanzitutto, è importante sottolineare che questa operazione è facoltativa. MobileTogether applica automaticamente gli stili predefiniti, l'aspetto dei pulsanti e così via, per ogni sistema operativo (iOS, Android, Windows, ecc.), consentendovi di creare un'interfaccia utente chiara e funzionale senza apportare modifiche. Tuttavia, a volte è necessario personalizzare gli stili per conformarsi alle linee guida di stile aziendali, per implementare funzionalità specializzate o per esprimere una creatività più originale. I nuovi fogli di stile multilivello di MobileTogether sono progettati per semplificare e velocizzare questo processo. Per iniziare, aprire la finestra di dialogo "Fogli di stile" dal menu "Progetto". Questo permette di creare due tipi di fogli di stile: "Progetto" e "Creati dall'utente". Il foglio di stile del progetto è il luogo in cui si definiscono le personalizzazioni di livello superiore. Gli stili definiti qui verranno applicati automaticamente a tutto il progetto. Questo è ideale se si desidera apportare modifiche generali all'aspetto e alla funzionalità di tutti i pulsanti, definire la dimensione del carattere per tutti gli elementi di testo o controllare i colori di sfondo a livello di progetto.   ![Foglio di stile applicabile a tutto il progetto](/blog/images/app-project-stylesheet.png)   Il secondo tipo sono i fogli di stile creati dagli utenti, che vengono denominati dallo sviluppatore e possono essere applicati, se necessario, a singole pagine, tabelle e controlli. In altre parole, questi stili non vengono applicati a tutto il progetto. Nello screenshot qui sotto, è presente un foglio di stile creato dall'utente, che ho chiamato "MyStyles", che definisce alcuni stili per pulsanti, grafici ed etichette. Quando si definiscono gli stili nel pannello di destra della finestra di dialogo "Fogli di stile", è possibile selezionare o inserire un valore di proprietà statico, oppure è possibile inserire un'espressione [XPath](https://www.altova.com/it/xpath-intro.html) che restituisce un valore di proprietà. Un esempio di assegnazione dinamica potrebbe essere rendere il valore di una proprietà condizionale a un determinato criterio, come la larghezza dello schermo del dispositivo mobile dell'utente finale, oppure in base alle preferenze dell'utente, ad esempio consentendo all'utente di regolare la dimensione del carattere tramite una pagina delle impostazioni nell'applicazione, e applicando quella dimensione del carattere a tutti gli elementi di testo. Nel foglio di stile MyStyles che segue, ho utilizzato XPath per definire dinamicamente l'altezza e la larghezza dei grafici, adattandoli perfettamente al dispositivo utilizzato dall'utente.   ![Foglio di stile dell'applicazione creato dagli utenti](/blog/images/app-stylesheet.png)   È possibile definire un numero qualsiasi di questi fogli di stile creati dagli utenti, per offrire diverse opzioni di formattazione per vari elementi. Durante lo sviluppo di un'applicazione, applicare un foglio di stile creato dall'utente a un componente di progettazione è semplice come selezionare il nome del foglio di stile nella finestra "Stili e proprietà".   ![Seleziona il foglio di stile per dispositivi mobili](/blog/images/select-mobile-stylesheet.png) È possibile specificare dinamicamente la selezione del foglio di stile utilizzando XPath, ad esempio, per rendere la scelta del foglio di stile dipendente dal tipo di dispositivo mobile corrente. Un grande vantaggio nell'utilizzare un'espressione XPath per selezionare un foglio di stile creato dall'utente è che la selezione può essere resa condizionale in base a criteri ambientali dinamici. Ad esempio, se si desidera specificare un foglio di stile per i dispositivi iOS e un altro per tutti gli altri dispositivi, si potrebbe utilizzare la seguente espressione XPath: se ($MT_iOS=true()) allora 'iOSStyleSheet' altrimenti 'GeneralStyleSheet'. Quando si specifica un foglio di stile creato dall'utente per una qualsiasi pagina o elemento, questo sovrascrive i valori corrispondenti presenti nel foglio di stile del progetto, consentendo di apportare modifiche sia generali che specifiche.   I fogli di stile multilivello consentono di risparmiare una notevole quantità di tempo, offrendo una flessibilità senza pari per personalizzare l'aspetto e la funzionalità delle applicazioni su tutte le piattaforme. Ad esempio, come ho menzionato nell'introduzione, se è necessario che tutti i pulsanti di un'applicazione abbiano lo stesso aspetto su iOS, Android e Windows (cioè, invece di utilizzare l'aspetto predefinito dei pulsanti), è ora possibile definirlo una sola volta per progetto (o a qualsiasi altro livello, a seconda delle esigenze). **Potete provare questa funzionalità creando un'applicazione con il gratuito MobileTogether Designer. [Scaricate qui](https://www.altova.com/it/download/mobiletogether.html) il software.**