Como Criar um Tema Móvel¶

O Vinyl faz um ótimo trabalho ao converter automaticamente qualquer aplicativo para ser compatível com dispositivos móveis. Dito isso, pode haver casos em que você queira um controle mais granular sobre a apresentação móvel de um aplicativo. Assim como os temas padrão funcionam no Vinyl, um tema móvel pode ser aplicado em todo o site ou mais especificamente em uma página de um aplicativo. Este artigo fornecerá informações sobre como temas móveis funcionam no Vinyl, bem como passo a passo a configuração básica para criar um tema móvel para um aplicativo.

Como Funcionam os Temas Móveis em Vinyl¶

• Temas móveis são temas que são acionados quando o Vinyl detecta que você está usando um dispositivo móvel (observe que eles se aplicam apenas a dispositivos móveis - não a dispositivos iPad ou tablets).
• Os temas móveis são configurados da mesma forma que os temas padrão - principalmente eles têm um tema Base, e o tema Base é o que determina quando e onde um tema Móvel é chamado e aplicado. Um tema Mobile deve ter um tema Base para funcionar, e sempre que esse tema Base for usado (seja como um tema para todo o aplicativo ou apenas um tema específico no nível da página), o tema Mobile será chamado adicionalmente.
• Os temas móveis são aplicados "em cima" de outros temas pré-existentes, eles não os substituem, portanto, para que qualquer estilo de um tema móvel seja aplicado, eles precisam ser mais específicos do que quaisquer estilos pré-existentes que estão sendo aplicados a partir de outros temas já na página.
  

Temas Móveis para Todo o Site¶

Um aplicativo chamado "Calculadora de orçamento" tem seu tema base definido como "Tema base do aplicativo", o que significa que esse tema se aplica a todo o aplicativo. Além disso, há um tema móvel chamado "Tema móvel" - e o tema base para esse tema móvel é definido como "Tema base do aplicativo". Neste cenário, o tema Mobile estará ativo em todo o aplicativo, pois todas as páginas utilizam o "Tema Base do Aplicativo".

Temas Móveis Específicos da Página¶

Um aplicativo chamado "Calculadora de orçamento" possui uma página chamada "Home", que possui um tema de nível de página aplicado chamado "Tema da página inicial" - o que significa que esse tema se aplica apenas à página "Home". Além disso, há um tema para celular chamado "Tema da página inicial para celular" - e o tema base para esse tema para celular é definido como "Tema da página inicial". Neste cenário, o tema Mobile só estará ativo na página “Home” da aplicação, pois só é chamado nas páginas que utilizam o “Tema Home Page”, que neste caso é apenas a página “Home”.

Como Criar um Tema Móvel¶

Um exemplo de quando você pode querer usar um tema Mobile é adicionar preenchimento aos contêineres externos no celular para que todas as páginas do aplicativo tenham um pouco mais de espaço para respirar.

Etapa 1: Crie um Tema para Celular¶

Quando você estiver pronto para criar um tema móvel para um aplicativo, presumiremos que você já possui um tema de aplicativo existente configurado. Este tema de aplicativo deve ser usado como tema base para seu tema móvel.

1. Navegue até Aparência do seu aplicativo
2. Selecione Celular no tipo de tema
3. Clique no botão +Tema
4. Atribua um Nome do tema. Por exemplo: Tema Móvel
5. Defina o valor Tema Base para o tema principal que o aplicativo está usando. Por exemplo: Exercício de Temas
6. Confirme ou defina Coleção como uma Coleção à qual seu aplicativo tem acesso. Por exemplo: NorthwindsTraining
7. Defina Tipo como Celular
8. Clique em Salvar

9. Adicione qualquer estilo específico para celular necessário. Por exemplo:

   • Selecione Painel como Componente
   • Clique em + Estilo no painel Estilos
   • Defina Área como Contêiner
   • Defina Tipo de estilo como Espaçamento
   • Em Valores, defina 3-Padding para a configuração desejada. Por exemplo: 2em
   • Clique em Salvar

Etapa 2: Associar o Tema Móvel ao Aplicativo¶

Nesta etapa você associará o tema Mobile ao aplicativo. Neste exemplo, queremos que o tema Mobile apareça em todo o site, por isso confirmaremos se o tema Base é o tema associado ao nosso aplicativo.

1. Navegue até App Workbench
2. Em Configurações do aplicativo, verifique se o valor Tema está definido como o tema base usado pelo seu tema móvel criado na Etapa 1.
3. Retorne à visualização do aplicativo, atualize o navegador da web e teste