Como Criar um Tema para Celular

App Builder faz um ótimo trabalho de converter automaticamente qualquer aplicativo para ser amigável para 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. Como os Temas padrão funcionam em App Builder, um tema para celular pode ser aplicado em todo o site ou mais especificamente em uma página de um aplicativo. Este artigo fornecerá informações sobre como os temas para celular funcionam em App Builder bem como passo a passo a configuração básica para criar um tema Mobile para um aplicativo.

Como Funcionam os Temas para Dispositivos Móveis App Builder

• Temas para dispositivos móveis são temas que são chamados quando App Builder detecta que você está usando um dispositivo móvel (observe que eles se aplicam somente a dispositivos móveis - não a iPad ou tablets).
• Os temas móveis são configurados da mesma forma que os temas padrão - mais notavelmente, 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 móvel deve ter um tema base para funcionar, e onde quer que esse tema base seja usado (seja como um tema amplo do aplicativo ou apenas um tema específico de nível de página), o tema móvel será chamado adicionalmente.
• Os temas móveis são aplicados "em cima" de outros temas pré-existentes, eles não os substituem, então para que quaisquer estilos de um tema móvel sejam aplicados, eles precisam ser mais específicos do que quaisquer estilos pré-existentes que estejam sendo aplicados de outros temas já na página.
  

Temas para Dispositivos Móveis em Todo o Site

Um aplicativo chamado "Budget Calculator" tem seu tema Base definido como "App Base Theme", o que significa que o tema se aplica a todo o aplicativo. Além disso, há um tema Mobile chamado "Mobile Theme" - e o tema Base para este tema mobile é definido como "App Base Theme". Neste cenário, o tema Mobile estará ativo em todo o aplicativo, pois cada página usa o "App Base Theme".

Temas Móveis Específicos da Página

Um aplicativo chamado "Budget Calculator" tem uma página chamada "Home", que tem um tema de nível de página aplicado chamado "Home Page Theme" - o que significa que esse tema se aplica apenas à página "Home". Além disso, há um tema Mobile chamado "Home Page Mobile Theme" - e o tema Base para esse tema Mobile é definido como o "Home Page Theme". Nesse cenário, o tema Mobile só estará ativo na página "Home" do aplicativo, pois ele só é chamado em páginas que usam o "Home Page Theme", que nesse caso é apenas a página "Home".

Como Criar um Tema para Celular

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 estiver pronto para criar um tema Mobile para um aplicativo, assumiremos que você já tem um tema de aplicativo existente configurado. Este tema de aplicativo deve ser usado como o tema base para seu tema Mobile.

1. Navegue até Look & Feel para seu aplicativo
2. Selecione Mobile em Theme Type
3. Clique no botão +Theme
4. Atribua um Theme Name. Por exemplo: Theme Mobile
5. Defina o valor Base Theme para o tema principal que o aplicativo está usando. Por exemplo: Themes Exercise
6. Confirme ou defina a Collection para uma Collection à qual seu aplicativo tem acesso. Por exemplo: NorthwindsTraining
7. Defina o Type para Mobile
8. Clique em Save

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 como a configuração desejada. Por exemplo: 2em
   • Clique em Salvar

Etapa 2: Associar Tema Móvel ao Aplicativo

Nesta etapa, você associará o tema Mobile ao aplicativo. Para este exemplo, queremos que o tema Mobile apareça em todo o site, então confirmaremos que o tema Base é o tema associado ao nosso aplicativo.

1. Navegue até o App Workbench
2. Em App Settings, verifique se o valor Theme está definido como o tema Base usado pelo seu tema Mobile criado na Etapa 1
3. Retorne à visualização do aplicativo, atualize o navegador da web e teste