Definindo os estilos no Beagle ios

Nesta seção, você encontra tutorial para configurar o Design System do Beagle no IOS.

Criando estilos para o Beagle iOS

No exemplo prático da página “Criando um projeto com Beagle para iOS”, você pode conferir como fazer a implementação do Beagle e criar sua primeira tela server-driven.

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.

A ideia aqui é configurar alguns estilos no iOS para que você possa customizar componentes como:

Text.
Button.
Navigation Bar
Tab View
Entre outros.

Além disso, vamos aplicar estilos de texto nos 2 componentes textuais.

Para tal, criaremos uma espécie de Design System, ou seja, um arquivo para reunir um conjunto desses estilos guardando os registros dos componentes de estilo criados no frontend.

É dessa forma que sua aplicação iOS “saberá” qual componente de estilo deverá renderizar ao receber uma tela server-driven. Vale lembrar que, no caso da tela server-driven, estarão relacionados os elementos visuais (views) utilizados na construção da sua tela.

Passo 1: Criar um arquivo Swift

Crie um arquivo Swift. No nosso exemplo, vamos chamar de Styles. Nele, você deve importar o UIKit e o BeagleUI e criar uma Struct com nome Stylesassim como fizemos no exemplo abaixo:

import UIKit
import Beagle

struct Styles {

}

Essa struct irá conter todos os estilos que serão acessados pelo Beagle. Aqui, estará listada a lógica que permite ao Beagle aplicar os estilos definidos no iOS a uma tela server-driven.

Passo 2: Criar um estilo para um texto

Uma vez que você gerou seu arquivo, você deve agora criar função estática para definir e retornar um estilo de texto. Como, no caso deste exemplo, teremos um estilo para título e outro para parágrafo, criaremos duas funções.

O retorno desta função irá utilizar a classe BeagleStyle,que é uma classe interna do Beagle que fica acessível quando você importa a classe beagleUI.

É neste retorno que estará definido o estilo criado para o componente text . Siga o passo abaixo para criar cada função:

O estilo do título irá retornar a fonte Courier com tamanho 20 e com a cor laranja. Implemente-o como no exemplo abaixo.

static func titleTextStyle() -> (UITextView?) -> Void {
    return BeagleStyle.text(
        font: UIFont.init(name: "Courier", size: 20) ?? UIFont.systemFont(ofSize: 20),
        color: .orange
    )
}

Caso a fonte não seja encontrada, o Beagle irá definir como default a fonte do sistema com tamanho 20.

Realize o mesmo processo para criar o estilo do nosso parágrafo. Exemplo abaixo:

static func descriptionTextStyle() -> (UITextView?) -> Void {
    return BeagleStyle.text(
        font: UIFont.init(name: "Courier", size: 15) ?? UIFont.systemFont(ofSize: 15),
        color: .orange
    )
}

Depois de implementar estes dois estilos, o seu arquivo Styles deverá estar assim:

import UIKit
import Beagle

struct Styles {

    static func titleTextStyle() -> (UITextView?) -> Void {
        return BeagleStyle.text(
            font: UIFont.init(name: "Courier", size: 20) ?? UIFont.systemFont(ofSize: 20),
            color: .orange
        )
    }

    static func descriptionTextStyle() -> (UITextView?) -> Void {
        return BeagleStyle.text(
            font: UIFont.init(name: "Courier", size: 15) ?? UIFont.systemFont(ofSize: 15),
            color: .orange
        )
    }
}

Passo 3: Registrar o estilo no Beagle Config

Agora é necessário registrar os estilo no Beagle, é importante para que ele seja capaz de aplicar esses estilos nas telas server-driven.

Abra o arquivo BeagleConfig . Registre uma constante com o nome theme
É na constante theme que será listado todos os estilos.
Essa constante irá receber o AppTheme que é onde os estilos são registrados.
Crie o bloco de informações abaixo dentro da função static func config
Crie o bloco de informações abaixo dentro da função static func config

let theme = AppTheme(styles: [])

Para registrar, liste o nome do estilo, declarado no backend, e indique a qual estilo deve ser aplicado. Cada estilo deverá ser registrado assim:

"Title.Text.Orange": Styles.titleTextStyle

"Title.Text.Organge" é o nome do estilo definido para o componente text na tela server-driven.

Styles.titleTextStyle é a função criada logo no início desse tutorial. Ela retorna o estilo que está definido nela para que o Beagle Config saiba renderizar o estilo correto em cada componente visual, nesse caso o text que será o título.

A constante theme com os dois estilos registrados deve estar assim:

let theme = AppTheme(styles: [
    "Title.Text.Orange": Styles.titleTextStyle,
    "Description.Text.Orange": Styles.descriptionTextStyle
])

Ainda no BeagleConfig devemos referenciar o theme que criamos no BeagleDependencies.

Siga o exemplo abaixo e finalize a configuração do BeagleConfig como mostrado abaixo:

import Beagle
import Foundation

class BeagleConfig {
    static func config() {

        let theme = AppTheme(styles: [
            "Title.Text.Orange": Styles.titleTextStyle,
            "Description.Text.Orange": Styles.descriptionTextStyle
        ])

        let dependencies = BeagleDependencies()
        dependencies.theme = theme
        dependencies.urlBuilder = UrlBuilder(
            baseUrl: URL(string: "http://localhost:8080")
        )
        Beagle.dependencies = dependencies
    }
}

Assim, o front-end está configurado e os estilos definidos.

Passo 4: Definir estilos no backend

No tutorial de configuração do backend, uma pagina server driven foi criada com 2 textos, um título e um parágrafo.

A página era assim quando renderizada no frontend:

Para atribuir um estilo a esses textos siga as instruções:

Abra o projeto de backend (BFF) e localize o arquivo FirstScreenBeagleBuilder.
Esse é o arquivo que contém o código da sua primeira tela server driven.
Ela deve estar configurada como na foto abaixo.
Nela você deve perceber que foi construída uma hierarquia de componentes com uma screen (tela) e dois componentes do tipo text.

class FirstScreenBuilder : ScreenBuilder {
    override fun build() = Screen(
        child = Container(
            children = listOf(
                Text(
                    text = "Hello Beagle!",
                    styleId = "Title.Text.Orange"
                ).setStyle {
                    margin = EdgeValue.only(top = 16)
                }.setFlex {
                    alignSelf = AlignSelf.CENTER
                },
                Text(
                    text = "Beagle is a cross-platform framework which provides usage of the " +
                        "Server-Driven UI concept, natively in iOS, Android and Web applications. " +
                        "By using Beagle, your team could easily change application's layout and" +
                        " data by just changing backend code.",
                    styleId = "Description.Text.Orange"
                ).setStyle {
                    margin = EdgeValue.only(top = 20, left = 16, right = 16)
                }
            )
        )
    )
}

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 backend. Por hora, utilizaremos apenas o Style

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

 2. 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
    }

E pronto, isso é tudo que faremos no backend nesse momento.

Faça o mesmo para o outro componente Text que é um parágrafo, mas nomeie-o como “Description.Text.Orange”

Você pode rodar sua aplicação backend para que o serviço fique disponível.

Caso tenha algum problema, recomendamos que faça o tutorial para implementação desse backend.

O que fazer depois de pronto?

Depois de executar o backend, agora execute o Xcode.

E o resultado será esse:

Agora que está pronto, teste um pouco, mude os tamanhos, mude as cores, e teste os estilos que quiser!

Neste exemplo foi utilizado elementos de estilo simples para explicar o Design system, mas o número de funções nessa classe mostra como ela pode ser ampla. Você pode desenvolver toolBars diferentes, botões e todo o tipo de componentes, inclusive componentes customizados (que abordaremos em outro codeLab) e utilizá-los no Beagle.

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.

Última modificação 27/05/2021: update: example of applyStyle and applyFlex on the get started pages (#580) (e2e96320)