Índice

• Objetivo
• Integração
• Personalizações
  • Tema
  • Fundo das telas
  • Logo da empresa
  • Conteúdo do pager
  • Cores dos principais botões

Objetivo

O fluxo de login integrado no SDK serve para facilitar a construção de aplicativos na plataforma fluig, provendo um meio de efetuar login sem explicitamente programar todas as etapas necessárias.

Integração

Para integrar o login no seu aplicativo, siga os seguintes passos:

1. Certifique-se que o módulo bllCore do SDK foi adicionado como dependência no seu build.gradle.
2. Crie um classe Application que seja subclasse de FluigSdkApplication.
   1. Implemente o método onCreate() e chame super.onCreate().

3. Adicione no AndroidManifest do seu aplicativo, as seguintes activities.

   AndroidManifest.xml Expandir origem

   <?xml version="1.0" encoding="utf-8"?>
   <manifest
   	xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.myapp.package">
   
       <application
           android:name=".Application"
   	    ... >
   		...
           <activity
               android:name="sdk.fluig.com.bll.core.login.email.view.EmailRequestActivity"
               android:theme="@style/FluigLoginTheme.Light"
               android:screenOrientation="portrait" />
           <activity
               android:name="sdk.fluig.com.bll.core.login.server.view.ServerRequestActivity"
               android:theme="@style/FluigLoginTheme.Light"
               android:screenOrientation="portrait" />
           <activity
               android:name="sdk.fluig.com.bll.core.login.password.view.PasswordRequestActivity"
               android:theme="@style/FluigLoginTheme.Light"
               android:screenOrientation="portrait" />
           <activity
               android:name="sdk.fluig.com.bll.core.login.forgot.view.ForgotPasswordActivity"
               android:theme="@style/FluigLoginTheme.Light"
               android:screenOrientation="portrait" />
           <activity
               android:name="sdk.fluig.com.bll.core.login.manual.view.ManualLoginActivity"
               android:theme="@style/FluigLoginTheme.Light"
               android:screenOrientation="portrait"
               android:windowSoftInputMode="adjustPan" />
           <activity
               android:name="sdk.fluig.com.bll.core.login.account.view.AccountSelectActivity"
               android:theme="@style/FluigLoginTheme.Light"
               android:screenOrientation="portrait" />
       </application>
   </manifest>

4. Altere o fluxo do aplicativo para o login, seguindo os passos abaixo.
   
   1. Crie uma Activity que servirá como launch screen. Launch screens são a primeira tela que o usuário visualiza ao abrir um aplicativo.

   2. No código desta Activity, chame o método startLogin da classe LoginUtils, passando um Context e a classe da Activity que deseja que o login redirecione após sua conclusão.

      LaunchActivity.java Expandir origem

      import sdk.fluig.com.bll.core.utils.LoginUtils;
      
      public class LaunchActivity extends Activity {
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              ...
      		//Classe da primeira tela após o login
              LoginUtils.startFlow(getBaseContext(), MainActivity.class);
              
              //Caso possua uma Intent
              Intent myIntent = ...;
              LoginUtils.startFlow(getBaseContext(), myIntent);
              
              finish();
          }
      }

5. Crie e altere o arquivo de configuração do ViewPager presente em algumas telas do fluxo de login, seguindo as instruções descritas aqui.

Personalizações

Existem elementos no layout do login que podem ser personalizados. Esta seção expõe que elementos são esses e como alterá-los para aderir às suas preferências.

• Tema
• Fundo das telas
• Logo da empresa
• Conteúdo do pager
• Cores dos principais botões

Tema

Na seção Integração, é possível notar que todas as activities do login compartilham do mesmo tema FluigLoginTheme. Este tema possui duas variações: Light e Dark. A diferença entre essas variações é a cor usada nos textos.

• Light deve ser usado nas telas com fundo claro e, portanto, utiliza textos escuros.
• Dark deve ser usado nas telas com fundo escuro e, portanto, utiliza textos claros. 

Fundo das telas

O fundo das telas do login foi feito com o componente FluigSdkMediaView. Este componente permite utilizar: vídeo, imagem, uma cor sólida ou um gradiente horizontal de duas cores.

Siga as instruções abaixo para utilizar o fundo desejado.

Vídeo

Adicione um arquivo de vídeo, no diretório raw do seu aplicativo, com o nome login_background_video.

Imagem

Adicione uma imagem, no diretório drawable do seu aplicativo, com o nome login_background_image. 

Cor de fundo

Adicione no arquivo values/colors.xml um atributo com o nome login_backgroundColor e login_backgroundColor_end. Caso o atributo login_backgroundColor_end seja definido, será produzido um gradiente horizontal de duas cores.

Logo da empresa

No topo de cada tela do fluxo há o logo da empresa. Por padrão, o logo mostrado é do fluig. Para alterar o logo, adicione uma imagem, no diretório drawable do seu aplicativo, com o nome login_logo.

Conteúdo do pager

Em algumas telas do fluxo, existe um FluigSdkPager cujo conteúdo pode ser alterado. Para alterar o conteúdo desse elemento, siga os seguintes passos:

1. Crie um arquivo JSON no diretório raw chamado login_pager_content.

2. Altere o arquivo criado seguindo o modelo abaixo, onde title será o título da página e content será o texto no corpo da página. Note que a raiz do arquivo é uma lista.

   login_pager_content.json Expandir origem

   {
     "title": "Título da tela",
     [
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor laoreet velit ut condimentum. Fusce posuere mi id justo efficitur.",
       "Lorem ipsum dolor sit.",
       ...
     ]
   }

Cores dos principais botões

A maioria das telas do fluxo de login possuem um FluigSdkButton, cuja cor pode ser alterada para se adequar às cores temáticas de seu aplicativo. Antes de começar a personalização dos botões, recomenda-se a leitura da documentação do FluigSdkButton para saber quais são suas cores padrões.

Siga os passos abaixo para alterar os botões:

1. Abra o arquivo colors.xml que se encontra no diretório values.
2. Adicione novos atributos conforme o que deseja alterar nos botões.
   1. Caso deseje alterar a cor principal do botão, adicione um atributo com nome login_buttons_backgroundColor.
   2. Caso deseje adicionar um gradiente ao botão e alterar a cor direita deste gradiente, adicione um atributo com nome login_buttons_backgroundColor_end.