Como criar um tema móvel no Jitterbit App Builder

O App Builder faz um ótimo trabalho convertendo 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. Assim como os Temas padrão funcionam no App Builder, um Tema Móvel pode ser aplicado em todo o site ou mais especificamente a uma página em um aplicativo. Este artigo fornecerá informações sobre como os Temas Móveis funcionam no App Builder, bem como percorrerá a configuração básica para criar um tema Móvel para um aplicativo.

Como os temas móveis funcionam no App Builder

• Temas para dispositivos móveis são temas que são chamados quando o App Builder detecta que você está usando um dispositivo móvel (observe que eles se aplicam somente a dispositivos móveis, não a iPads ou tablets).
• Os temas para dispositivos 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 para dispositivos móveis é chamado e aplicado. Um tema para dispositivos móveis deve ter um tema base para funcionar, e onde quer que esse tema base seja usado (seja como um tema amplo de aplicativo ou apenas um tema específico de nível de página), o tema para dispositivos móveis será chamado adicionalmente.
• Os temas para dispositivos móveis são aplicados "sobre" outros temas pré-existentes, eles não os substituem, então, para que quaisquer estilos de um tema para dispositivos móveis 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.
  

Nota

Veja o artigo W3 Schools sobre Especificidade CSS para mais informações sobre a ordem em que o CSS é aplicado.

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

Nota

Configurações móveis adicionais estão disponíveis para configuração em App Workbench > Mais > Edge Case.