Design System com Beagle Android

Criando um Design System

No exemplo prático da página “Criando um projeto com Beagle para Android”, você pode conferir como fazer a implementação do Beagle para criar uma tela server-driven simples, com apenas 2 textos: 1 título e 1 parágrafo.

Neste tutorial, a ideia é avançar a partir do projeto anterior para criar um Design System na sua biblioteca do Beagle. Os exemplos que ilustrarão o passo a passo estão nestes sample codes que você encontra no nosso repositório.

O Design System que iremos configurar vai permitir que você customize alguns componentes do Beagle, como por exemplo:

• Text
• Button
• Toolbar
• TabBar
• Entre outros.

Além disso, será possível customizar os 2 componentes de textos que criamos na primeira tela feita no tutorial anterior.

Contexto

Com o Design System deste tutorial, você poderá registrar estilos (styles) como fontes, cores, tamanhos de fonte e componentes customizados.

De modo geral, define-se o design system de uma aplicação ao criar uma classe que implemente a sua interface. A partir dela, implementa-se todos os métodos que sobrescrevem as funções responsável por aplicar “estilos” aos componentes. É possível declarar, dentro de uma função, N estilos ou mesmo nenhum (salvo algumas exceções).

No caso do Beagle, cada estilo deve ser referenciado de forma que cada um tenha um nome para ser facilmente identificado.

Exemplo

No exemplo abaixo, temos o método image que está registrando várias imagens que estão sendo utilizadas para construir uma página a partir do backend.

Perceba que nela utilizamos um operador when para designar os estilos, ou seja, o primeiro valor é listado como uma string que identifica o componente de estilo no Beagle (semelhante a uma relação de chave/valor) e com umaArrow Function -> listamos o estilo do componente (id do estilo no Android). A lógica aqui se assemelha a um par “chave/valor”.

Com a função estabelecida desta forma, o operador else conterá um estilo “default”, como demonstrado no código abaixo.

O trecho em amarelo mostra o “nome do estilo” declarado no backend e recuperado no front end (Android). Já o trecho em laranja mostra o estilo criado no Android que será executado quando “Nome do estilo” for lido no JSON informado pelo backend

Começando

Vamos à parte prática! Primeiro, você deve localizar a pasta de estilos “Style” em sua IDE Android . Para fazer isso no Android Studio, clique em res > values > styles.

Feito essa parte, abra o arquivo de estilos (styles) e você verá uma tela semelhante a abaixo. É neste arquivo que listaremos os estilos que serão aplicados nos componentes Android.

Sugerimos manter este arquivo aberto, pois vamos utilizá-lo mais à frente.

Dividimos a criação do design system em 3 passos que serão vistos a seguir:

Passo 1: Configurar o Design System no Android

O primeiro passo na criação de um design system é criar uma classe para representá-lo.

Com o projeto aberto, clique na pasta beagle com o botão direito do mouse e clique em new > kotlin file/class. Feito isso, siga as instruções abaixo:

• Dê o nome de AppDesignSystem ao arquivo (ou outro nome que você preferir).
• Indique que esta classe deve estender de uma open class do Beagle chamada DesignSystem.
• Use a anotação @BeagleComponent acima do nome da classe AppDesignSystem.

Ao fazer estes passos, já podemos chamar métodos em que vamos registrar componentes que são criados no BFF. Cada método é responsável por aplicar “estilos” aos componentes.

Neste exemplo, vamos chamar o método textStyle.

@BeagleComponent
class AppDesignSystem: DesignSystem()  {

    override fun textStyle(id: String): Int? {
        return super.textStyle(id)
    }

}

Desta forma, o open classeDesignSystem tem ao menos seis métodos, onde cada um deles representa um tipo de componente. Cada método deverá então aplicar estilos aos componentes visuais que serão ali registrados.

Demonstraremos mais adiante como esses componentes e seus estilos são listados e organizados dentro desses métodos. Por ora, vamos entender o que cada método faz:

1. O método buttonStyle é responsável por aplicar estilo a componentes do tipo Botão (Button).
2. O método image é responsável registrar uma imagem para que ela possa ser referenciada em um tela server-driven.
3. O método tabBarStyle é responsável por aplicar estilos nos componentes do tipo TabBar.
4. O método textStyle aplica estilos nos componentes do tipo Text… (perceba que usamos o plural ao falar de componentes… logo logo você saberá o porquê).
5. E o método toolbarStyle responsável por aplicar estilo no componenteToolbar.
6. O método inputTextStyle responsavel por aplicar estilo no componente InputText.

Passo 2: Customizar o componente

Este momento é o ponto em que o ocorre o BFF, quando frontend se conecta ao backend.

Para isso, você terá de configurar o frontend do Android e o backend do Intellij. Caso não o tenha pronto, é só baixar o exemplo de configuração do backend e rodá-lo.

Para o nosso backend aqui, criamos uma pagina server-driven com 2 textos, sendo um título e um parágrafo. Ela deve ficar assim quando for renderizada no frontend:

Perceba que nossa tela é praticamente a estrutura e conteúdo somente. O tamanho do texto é padrão e a forma carece de um estilo.

Para atribuir um estilo a esses textos vamos recorrer a nossa tela configurada lá no BFF:

1. Abra o projeto de BFF e localize o arquivo FirstScreenBeagleBuilder.

Esse é o arquivo que contém o código da sua primeira tela server driven, que deve estar configurada como na imagem logo abaixo.

Nela você deve perceber que construímos uma hierarquia de componentes com uma SCREEN e dois componentes do tipo TEXT.

Para adicionar um estilo a um elemento de texto, você deve listar o nome do estilo dentro do componente texto, conforme mostrado baixo. Não se esqueça de separar os componentes por uma vírgula.

Segure o botão Ctrl e coloque o mouse sobre o componente Text e você verá a lista de atributos que esse componente pode receber aqui no back-end. Por ora, utilizaremos apenas o Style

 2. Coloque uma virgula após o atributo text = "Hello Beagle", e escreva o outro atributo que quer definir, que é o `styleId`

3. Digite a string `“Title.Text.Orange”` e pronto! O estilo está definido para esse componente de texto.

Text(
        text = "Hello Beagle!",
        styleId = "Title.Text.Orange"
    ).setStyle {
         margin = EdgeValue.only(top = 16)
    }.setFlex {
            alignSelf = AlignSelf.CENTER
    }

Por enquanto, não se preocupe com os outros elementos, como .applyStyle e demais configurações. Apenas garanta que nada mais seja modificado no exemplo e procure mantê-lo como mostramos agora.

Isto é tudo que faremos no back-end nesse momento. Você pode rodar sua aplicação backend para que o serviço fique disponível e, em breve, você verá sua tela com estilo no Android.

 4. Primeiro, vamos registrar três cores no arquivo color no android.

• Acesse o pacote res > values > colors
• Adicione as 3 cores dentro da Tag <resources></resources> da seguinte forma.
• Digite o código abaixo, assim criando as cores branca, preta e laranja na sua paleta de cores.

<color name="colorWhite">#FFFFFF</color>
<color name="colorBlack">#000000</color>
<color name="colorOrange">#FFA500</color>

Para encerrar esta etapa, crie no Android os estilos com os nomes que acabamos de atribuir aos textos lá na tela server-driven. acesse arquivo de estilos no pacote res > values > styles

Você pode fazer isso adicionando a configuração de estilo dentro da tag <resources></resources> como listado abaixo. Perceba que você já tem alguns elementos de estilo definidos e deve adicionar mais esse. Copie e cole o código abaixo para o texto que queremos que seja o Título.

<style name="Title.Text.Orange" parent="TextAppearance.AppCompat">
        <item name="android:textColor">@color/colorOrange</item>
        <item name="android:textSize">20sp</item>
        <item name="textAllCaps">true</item>
        <item name="android:textStyle">bold</item>
    </style>

Repare que você pode definir muito mais aspectos dentro do estilo. Isso porque todas as opções que o Android permite podem ser configuradas nele.

• A primeira linha, define o nome do estilo como “Title.Text.Orange”
• A segunda define a cor laranja para o texto, como listado acima
• A terceira define o tamanho do texto como: 20 sp
• A quarta define que o texto deve ser exibe todo em letras maiúsculas
• A quinta linha define que o texto será em negrito

Devemos fazer o mesmo processo com o texto do parágrafo. Para ele, criaremos o seguinte estilo: Description.Text.Orange

 <style name="Description.Text.Orange" parent="TextAppearance.AppCompat">
        <item name="android:textColor">@color/colorOrange</item>
        <item name="android:textSize">16sp</item>
        <item name="textAllCaps">true</item>
    </style>

<style name="Design.System.Text.Default" parent="TextAppearance.AppCompat">
        <item name="android:textColor">@color/colorBlack</item>
        <item name="android:textSize">12sp</item>
    </style>

E pronto! Nossos componentes estão customizados! Agora vamos à etapa final.

Passo 3: Registrar o componente no Design System

Uma vez que você já tem todos os estilos criados, é o momento de registrá-los na nossa classe AppDesignSystem, pois é lá onde Beagle aplica os estilos definidos no Android Studio nas telas server-driven que você receber do backend.

Para isso, siga estes passos:

1. Abra a classe AppDesignSystem e vá ao método textStyle.
2. Dentro deste método, crie um operador when. Dentro dele, vamos listar todos os estilos de texto que queremos utilizar agora e depois.

3. Informe os nomes dos "styles" que referenciamos no backend (BFF) e o estilo criado no Android, ligando-os programaticamente.

4. No else , devemos listar o estilo o default que criamos. Siga o exemplo do codigo abaixo:

override fun textStyle(id: String): Int? {
        return when (id) {
            "Title.Text.Orange" -> R.style.Title_Text_Orange
            "Description.Text.Orange" -> R.style.Description_Text_Orange
            else -> R.style.Design_System_Text_Default
        }
    }

Perceba que o método textAppearance recebe uma string como parâmetro name, que vem da nossa tela server-driven.

No primeiro registro, listamos o nome criado para o estilo do título que foi:

• “Title.Text.Orange”
• Com uma arrow function -> listamos o endereço do estilo no Android, ou seja, a ID do estilo criado como normalmente fazemos no Android Studio, que é : R.style.Title_Text_Orange.

Faça o mesmo processo no segundo registro, pois agora estamos registrando o estilo que queremos usar para parágrafos com a descrição que criamos na nossa página server-driven. O segundo registro deve ser:

• “Description.Text.Orange” -> R.style.Description_Text_Orange.

E, por fim, no parâmetro else de nosso operador when, devemos informar o valor default que criamos para o texto. Isso significa que qualquer requisição de estilo por uma página server-driven que não tenha um estilo definido aqui, terá o estilo default aplicado sobre si.

• Nestes casos, o parâmetro else deve retornar -> R.style.Design_System_Text_Default.

Com os elementos listados desta forma, você pode preparar um Design System com diversas opções de tamanhos de textos, cores, margens. Lembrando que estes estilos podem ser criados para usar agora ou em outro momento.

O que fazer depois de pronto?

Agora que você já criou o seu Design System, é possível alterar o tamanho, cor ou testar os estilos que preferir.

Uma das grandes vantagens em utilizar uma página server-driven é poder trabalhar com um design system maduro. Ou seja, se você altera o modo como os componentes estão posicionados no backend, é possível “mudar sua tela” da maneira que quiser, tudo por meio do backend.

Neste exemplo, utilizamos elementos simples de estilo para explicar o Design system, mas perceba o número de funções nesta classe e, a partir daí, veja o quão amplo um design system pode ser.

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.