Como criar um tema móvel no Jitterbit App Builder

O App Builder pode converter automaticamente qualquer app para ser amigável a dispositivos móveis. No entanto, você pode querer um controle mais granular sobre a apresentação móvel de um app. Assim como os temas padrão funcionam no App Builder, um tema móvel pode ser aplicado em todo o site ou mais especificamente em uma página de um app. Esta página fornece informações sobre como os temas móveis funcionam no App Builder e apresenta as etapas básicas para criar um tema móvel para um app.

Como os temas móveis funcionam no App Builder

• Temas móveis são temas que são acionados quando o App Builder detecta que você está usando um dispositivo móvel (observe que se aplicam apenas a dispositivos móveis, não a iPad ou tablets).
• Temas móveis são configurados da mesma forma que temas padrão, principalmente porque possuem um tema base, e o tema base é o que determina quando e onde um tema móvel é acionado e aplicado. Um tema móvel deve ter um tema base para funcionar, e onde quer que esse tema base seja usado (como um tema em toda a aplicação ou apenas um tema em nível de página específica), o tema móvel será acionado também.
• Temas móveis são aplicados "sobre" outros temas pré-existentes; eles não os substituem, portanto, para que qualquer estilo de um tema móvel seja aplicado, ele precisa ser mais específico do que qualquer estilo pré-existente que já esteja sendo aplicado de outros temas na página.
  

Temas móveis em todo o site

Um app chamado Budget Calculator tem seu tema base definido como App Base Theme, o que significa que esse tema se aplica em toda a aplicação. Além disso, há um tema móvel chamado Mobile Theme, e o tema base para este tema móvel é definido como App Base Theme. Neste cenário, o tema móvel estará ativo em toda a aplicação, pois cada página usa App Base Theme.

Temas móveis específicos de página

Um app chamado Budget Calculator tem uma página chamada Home, que tem um tema em nível de página aplicado chamado Home Page Theme, o que significa que este tema se aplica apenas na página Home. Além disso, há um tema móvel chamado Home Page Mobile Theme, e o tema base para este tema móvel é definido como Home Page Theme. Neste cenário, o tema móvel estará ativo apenas na página Home da aplicação, pois ele é acionado apenas em páginas que usam Home Page Theme, que neste caso é apenas a página Home.

Como criar um tema móvel

Um exemplo de quando você pode querer usar um tema móvel é adicionar preenchimento a contêineres externos em dispositivos móveis para que todas as páginas do app tenham um pouco mais de espaço.

Etapa 1: Criar um tema móvel

Quando estiver pronto para criar um tema móvel para um app, assumiremos que você já tem um tema de app existente configurado. Este tema de app deve ser usado como o tema base para seu tema móvel.

1. Navegue até Look & Feel do seu app.
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 como o tema principal que o app está usando. Por exemplo: Themes Exercise.
6. Confirme ou defina a Collection para uma coleção à qual seu app tem acesso. Por exemplo: NorthwindsTraining.
7. Defina o Type como Mobile.
8. Clique em Save.

9. Adicione qualquer estilo específico para dispositivos móveis necessário. Por exemplo:

10. Selecione Panel como Component.

11. Clique em + Style no painel Styles.
12. Defina Area como Container.
13. Defina Value Type como Spacing.
14. Em Values, defina 3-Padding para a configuração desejada. Por exemplo: 2em.
15. Clique em Save.

Etapa 2: Associar tema móvel ao app

Nesta etapa você associará o tema móvel ao app. Para este exemplo, queremos que o tema móvel apareça em todo o site, então confirmaremos que o tema base é o tema associado ao nosso app.

1. Navegue até o App Workbench.
2. Em App Settings, confirme que o valor de Theme 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.

Usar um tema móvel predefinido com um tema base personalizado

Temas móveis predefinidos se aplicam automaticamente apenas a apps que usam um dos temas do sistema padrão diretamente. Se seu app usa um tema personalizado baseado em um tema do sistema, siga estas etapas para usar o tema móvel predefinido desse tema do sistema em vez de criar um do zero:

1. Navegue até Look & Feel do seu app.
2. Localize o tema móvel predefinido para o tema do sistema no qual seu tema personalizado se baseia.
3. Clique em Copy para adicionar o tema móvel à sua coleção.
4. Defina o Base Theme da cópia como seu tema personalizado.

O tema móvel copiado agora se aplica em qualquer lugar onde seu tema personalizado é usado, da mesma forma que qualquer outro tema móvel.