Crie aplicações móveis que suportem automaticamente o modo escuro

Os dispositivos móveis Android e Apple suportam uma opção de visualização chamada "Tema Escuro", que pode ser considerada como uma imagem quase invertida do ecrã normal. No "Tema Escuro", o branco é preto, o preto é branco, e a intensidade das cores é, em geral, ajustada. O "Tema Escuro" reduz o consumo de energia, o que pode prolongar a duração da bateria, e pode ser mais fácil de visualizar em ambientes com pouca luz.

O Altova MobileTogether inclui funcionalidades que permitem aos desenvolvedores criar aplicações móveis que suportam automaticamente o modo escuro, detetando a configuração do utilizador no momento em que a aplicação é iniciada.

Vamos analisar um exemplo:

Abaixo, são apresentadas duas versões de uma aplicação móvel a funcionar no mesmo dispositivo, uma com o tema claro e outra com o tema escuro.

Este aplicativo permite aos utilizadores registar a produção de energia dos painéis solares e o consumo de eletricidade, com base nas leituras do medidor, e gera gráficos para ilustrar os dados e acompanhar o excedente ao longo do tempo.

Muitos sistemas de geração solar residenciais estão conectados à rede elétrica pública, utilizando um sistema de compensação de energia. Os painéis solares instalados no telhado fornecem energia à casa apenas enquanto o sol está a brilhar. A eletricidade é fornecida pela rede durante a noite ou sempre que a procura excede a produção. Quando o sistema produz mais eletricidade do que a casa consome, o excesso é devolvido à rede, complementando a capacidade de geração da empresa fornecedora de eletricidade.

O Altova MobileTogether facilita o desenvolvimento de aplicações móveis para desenvolvedores, permitindo-lhes criar aplicações móveis compatíveis com diferentes plataformas no ambiente MobileTogether Designer. Este ambiente combina ferramentas de design de interface gráfica com arrastar e soltar, a poderosa linguagem de programação visual Action Tree para o tratamento de eventos, e uma programação funcional padronizada para a seleção e processamento de dados.

Cada componente da aplicação é altamente personalizável, mas, por defeito, elementos como as cores do texto, botões, regras, bordas e até mesmo os fundos das janelas são definidos com as configurações padrão do sistema para cada dispositivo. O MobileTogether Designer inclui uma janela de ajuda "Estilos" onde os desenvolvedores podem especificar as configurações gerais do projeto, incluindo a opção de um tema claro ou escuro.

As opções para a definição do tema são: "Utilizar as configurações do sistema", "Forçar o tema claro" ou "Forçar o tema escuro". A opção padrão é "Utilizar as configurações do sistema", o que significa que os desenvolvedores podem suportar automaticamente o tema escuro sem ter de fazer nada de especial.

Suporte automático para o tema escuro em gráficos, com cores personalizadas

Alguns elementos podem necessitar de configurações de cor personalizadas, e os desenvolvedores podem especificar opções alternativas para o tema claro e o tema escuro. O primeiro passo é detetar qual configuração do utilizador está ativa.

O MobileTogether inclui variáveis globais que permitem aos desenvolvedores detetar as configurações do dispositivo do utilizador em tempo real e programar ações adequadas com base nas funcionalidades do dispositivo. O diálogo "Variáveis Globais" do MobileTogether Designer lista todas as variáveis globais e os seus valores para o dispositivo de simulação selecionado.

A cor de fundo padrão para a página, específica para um determinado telemóvel Android, está destacada acima. Este valor altera-se caso o dispositivo esteja configurado no modo "Tema Escuro". Um valor hexadecimal mais baixo indica uma tonalidade mais escura, enquanto um valor mais alto corresponde a uma tonalidade mais clara.

O valor hexadecimal #808080 corresponde ao tom de cinza de 50%. Podemos criar uma expressão XPath para testar o valor em tempo de execução e assumir que qualquer cor de fundo padrão mais escura que o cinza de 50% indica que o dispositivo está no modo escuro. O avaliador XPath na janela de simulação do designer é uma ferramenta útil para experimentar e determinar a sintaxe exata da expressão

Esta expressão converte a cadeia de caracteres hexadecimal para um número inteiro, compara-o com o valor correspondente a 50% de cinza e seleciona o valor da cadeia de caracteres para preto ou branco, dependendo do resultado. Esta é uma expressão útil para selecionar automaticamente a cor do texto para um tema claro ou um tema escuro. Vamos aplicá-la numa função de utilizador:

MobileTogether inclui funcionalidades que facilitam.. Criar gráficos e tabelas detalhados e informativos que apresentam a mesma aparência em todas as plataformas. A aplicação de exemplo "Solar Tool", mostrada no topo, utiliza um gráfico de barras para ilustrar a produção diária de energia solar, sobreposto a um gráfico de áreas que mostra o consumo de eletricidade. Os programadores escolhem as configurações para estes gráficos através de uma série de janelas de diálogo de criação de gráficos, como a janela de diálogo "Alterar Aparência", mostrada aqui:

Muitas destas configurações definem cores, como a cor de fundo e a cor da borda, neste exemplo. No entanto, temos controlo total para substituir estas definições padrão, com base em configurações XPath dinâmicas, que são avaliadas no dispositivo do cliente em tempo real.

Clicar neste botão abre uma janela de diálogo com opções para definir um valor ou expressão XPath para cada elemento do gráfico. Na imagem abaixo, definimos os valores para todos os elementos que são especificados como pretos ou brancos nas janelas de diálogo de configurações do gráfico. Definimos que os elementos originalmente brancos sejam a cor de fundo padrão e configuramos os elementos pretos, como texto e bordas, para utilizarem a nossa função AutoTextColor().

Definimos outros elementos, como as linhas de grade para cada eixo, nas janelas de configurações de criação, para que sejam de um tom cinzento claro que funcione tanto para o tema claro como para o tema escuro. Existe uma janela de configurações XPath dinâmicas separada para cada camada de cada gráfico, mas, uma vez que todas sejam editadas, o processo termina. Os gráficos serão criados automaticamente corretamente, tanto para o tema claro como para o tema escuro.

Aqui está um telemóvel Android que exibe os gráficos do saldo acumulado, tanto no tema escuro como no tema claro:

Se estiver pronto para criar aplicações móveis intuitivas que suportem automaticamente o modo escuro, com base nas preferências do utilizador, basta descarregar o MobileTogether Designer, que é gratuito. E não se esqueça de visitar a página MobileTogether Demos, onde encontrará links para vídeos, tutoriais e mais aplicações de demonstração.