Depois de ter o Beagle instalado em seu projeto, vamos te mostrar como renderizar uma tela e exibir seu primeiro “Hello Beagle!".
Atualmente, existem dois tipos de abordagens para a renderização de telas com o Beagle: remota e declarativa.
Principal abordagem usada no Beagle por ser fundamentada no conceito de server-driven UI. Ela permite que você construa layouts dinamicamente, consumindo as informações fornecidas por um BFF, por meio de uma URL remota.
Apesar de ser uma alternativa não pautada em server-driven UI, é uma forma de renderização que permite você declarar localmente componentes pela linguagem Swift. Com isso, você pode utilizar um componente local diretamente ou passando um JSON que o representa, simulando assim a resposta de um BFF.
Para este exemplo, você irá renderizar uma tela de forma declarativa, ou seja, tudo será feito localmente. Desta forma, você irá conhecer um pouco do Beagle e, em poucos passos, testar se sua instalação funcionou.
Crie uma classe e a nomeie como preferir. Aqui, iremos chamá-la de MyBeagleScreen
.
A classe irá conter apenas um método, responsável por construir uma Screen
.
import Beagle
class MyBeagleScreen {
static func make() -> Screen {
return Screen(
child: Container(
children: [
Text("Hello Beagle!")
]
).applyFlex(
Flex(
justifyContent: .center,
alignItems: .center,
grow: 1
)
)
)
}
}
Screen
está sendo construída utilizando Flex
. Para entender melhor esses componentes e suas propriedades, vá para a seção posicionamento de componentes.Agora, para conseguir visualizar a sua primeira tela construída utilizando o Beagle, tudo que você precisa fazer é:
Instanciar uma BeagleScreenViewController
do tipo declarative
que receberá a**MyBeagleScreen
**.
let beagleViewController = Beagle.screen(
.declarative(
MyBeagleScreen.make()
)
)
remote
, veja como exibir uma tela Server-Driven UI.Feito isso, basta apresentá-la onde preferir.
present(beagleViewController, animated: true, completion: nil)
import Beagle
**.Por fim, execute a sua aplicação e, se tudo estiver certo, você deverá ver uma tela como esta:
Nesta seção, você viu como criar sua primeira tela declarativa utilizando o Beagle, em sua forma mais simples, sem entrar no conceito de server-driven UI.
👉Para entender melhor como configurar o Beagle e utilizá-lo aplicando o conceito de server-driven UI, veja como criar um projeto iOS do zero.
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.