Crea applicazioni mobile che supportino automaticamente la modalità scura

I dispositivi mobili Android e Apple supportano un'opzione di visualizzazione chiamata "Tema scuro", che può essere considerata come una sorta di immagine invertita rispetto alla visualizzazione standard dello schermo. Nel "Tema scuro", il bianco diventa nero, il nero diventa bianco e, in generale, l'intensità dei colori viene regolata. Il "Tema scuro" riduce il consumo di energia, il che può prolungare la durata della batteria, ed è più facile da visualizzare in condizioni di scarsa illuminazione.

Altova MobileTogether include funzionalità che consentono agli sviluppatori di creare applicazioni mobile che supportano automaticamente la modalità scura, rilevando le impostazioni dell'utente al momento dell'avvio dell'applicazione.

Consideriamo un esempio:

Di seguito sono presentate due schermate di un'applicazione mobile in esecuzione sullo stesso dispositivo, una con il tema chiaro e l'altra con il tema scuro.

Questa applicazione consente agli utenti di registrare la produzione di energia dei pannelli solari e il consumo di elettricità, utilizzando le letture del contatore, e genera grafici per visualizzare i dati e monitorare l'eventuale surplus nel tempo.

Molti sistemi di produzione di energia solare residenziali sono collegati alla rete elettrica nazionale con un sistema di fatturazione a bilancio zero. I pannelli solari installati sul tetto forniscono energia all'abitazione solo quando c'è luce solare. L'elettricità proviene dalla rete durante la notte o quando la domanda supera la produzione. Quando il sistema produce più elettricità di quella consumata dall'abitazione, l'eccesso viene reimmesso nella rete, contribuendo ad aumentare la capacità di produzione della compagnia elettrica.

Altova MobileTogether semplifica il lavoro degli sviluppatori di applicazioni mobili, permettendo loro di creare applicazioni mobili multipiattaforma Nel software MobileTogether Designer, che combina strumenti di progettazione dell'interfaccia utente basati sul sistema "trascina e rilascia", il potente linguaggio di programmazione visuale Action Tree per la gestione degli eventi e la programmazione funzionale standardizzata per la selezione e l'elaborazione dei dati.

Ogni componente dell'applicazione è altamente personalizzabile, ma, per impostazione predefinita, elementi come i colori del testo, i pulsanti, le regole, i bordi e persino gli sfondi delle finestre utilizzano le impostazioni predefinite del sistema per ogni dispositivo. Il designer MobileTogether include una finestra di supporto "Stili" in cui gli sviluppatori possono specificare le impostazioni generali del progetto, inclusa la possibilità di scegliere un tema chiaro o scuro.

Le opzioni per la configurazione del tema sono: "Utilizza le impostazioni di sistema", "Applica tema chiaro" o "Applica tema scuro". L'impostazione predefinita è "Utilizza le impostazioni di sistema", quindi gli sviluppatori possono supportare automaticamente il tema scuro senza dover implementare modifiche specifiche.

Supporto automatico della modalità scura nei grafici, anche quando si utilizzano colori personalizzati

Alcuni elementi potrebbero richiedere impostazioni di colore personalizzate, e gli sviluppatori possono specificare alternative per la modalità chiara e la modalità scura. Il primo passo è rilevare quale impostazione utente è attualmente attiva.

MobileTogether include variabili globali che consentono agli sviluppatori di rilevare le impostazioni del dispositivo dell'utente durante l'esecuzione e di programmare azioni appropriate in base alle funzionalità del dispositivo. La finestra di dialogo "Variabili globali" di MobileTogether Designer elenca tutte le variabili globali e i loro valori per il dispositivo di simulazione selezionato.

Il colore di sfondo predefinito per una specifica versione di Android è evidenziato sopra. Questo valore cambia se il dispositivo è impostato con la modalità "tema scuro". Un valore esadecimale più basso indica una tonalità più scura, mentre un valore più alto indica una tonalità più chiara.

Il valore esadecimale #808080 corrisponde alla tonalità di grigio al 50%. Possiamo creare un'espressione XPath per verificare il valore a runtime e presumere che qualsiasi colore di sfondo più scuro del 50% di grigio indichi che il dispositivo è in modalità scura. L'evaluatore XPath nella finestra di simulazione del designer è uno strumento utile per definire la sintassi precisa dell'espressione

Questa espressione converte la stringa esadecimale in un numero intero, lo confronta con il valore corrispondente al 50% di grigio e, in base al risultato, seleziona il valore della stringa per il nero o il bianco. Questa è un'espressione utile per selezionare automaticamente il colore del testo in base al tema utilizzato (chiaro o scuro), quindi applichiamola in una funzione utente:

MobileTogether include funzionalità che consentono di creare facilmente grafici e diagrammi complessi che presentano lo stesso aspetto su tutte le piattaforme. L'applicazione di esempio "Solar Tool" mostrata in alto utilizza un grafico a barre per illustrare la produzione di energia solare giornaliera, sovrapposta a un grafico ad area che mostra il consumo di elettricità. Gli sviluppatori scelgono le impostazioni per questi grafici tramite una serie di finestre di dialogo per la creazione di grafici, come la finestra di dialogo "Modifica aspetto" mostrata qui:

Molti di questi elementi di configurazione definiscono colori, come il colore di sfondo e il colore del bordo, come nell'esempio. Tuttavia, abbiamo il controllo completo per sovrascrivere queste impostazioni predefinite, basandoci su impostazioni XPath dinamiche, che vengono valutate sul dispositivo client durante l'esecuzione.

Cliccando su questo pulsante, si apre una finestra di dialogo che offre diverse opzioni per impostare un valore XPath o un'espressione per ciascuna funzionalità del grafico. Nell'immagine sottostante, abbiamo impostato i valori per tutti gli elementi che sono definiti come neri o bianchi nelle finestre di dialogo delle impostazioni del grafico. Abbiamo impostato gli elementi bianchi originali come colore di sfondo predefinito e abbiamo configurato gli elementi neri, come il testo e i bordi, per utilizzare la nostra funzione AutoTextColor().

Abbiamo impostato altri elementi, come le linee di griglia per ciascun asse, nei dialoghi delle impostazioni di creazione, scegliendo una tonalità di grigio chiaro che si adatti a entrambi i temi. Esiste un dialogo separato per le impostazioni XPath dinamiche per ogni livello di ogni grafico, ma una volta che tutte le impostazioni sono state modificate, non è necessario fare altro. I grafici verranno creati automaticamente correttamente sia per il tema chiaro che per quello scuro.

Ecco un telefono Android che mostra i grafici relativi all'avanzo cumulativo, sia con il tema scuro che con il tema chiaro:

Se siete pronti a creare applicazioni mobile intuitive che supportino automaticamente la modalità scura in base alle preferenze dell'utente, scaricate gratuitamente il software MobileTogether Designer. E non dimenticate di visitare la pagina MobileTogether Demos, che contiene link a video, tutorial e altre applicazioni dimostrative.