Beagle v1.6 não é mais mantida ativamente. A versão documentada que você está visualizando pode conter funcionalidades depreciadas. Para obter as funcionalidades mais recentes, consulte a nossa última versão .
Atualmente, existem dois tipos de abordagens para a renderização de telas com o Beagle: remota e local.
Neste tutorial abaixo, vamos fazer a configuração e construir uma tela local. Para aprender como configurar e construir uma tela remota, siga no tutorial criando um projeto do zero
Depois que você terminar a instalação, é preciso configurar o Beagle para o uso. Para facilitar a nossa explicação, vamos usar um exemplo de como renderizar uma tela com um título “Hello Beagle!” e uma pequena descrição.
Feita a atualização, você precisa criar uma classe BeagleConfig
e configurar seus todos os atributos, como mostra o exemplo abaixo:
@BeagleComponent
class AppBeagleConfig : BeagleConfig {
override val environment: Environment get() = Environment.DEBUG
override val baseUrl: String get() = "https://myapp.server.com"
override val isLoggingEnabled: Boolean = true
override val cache: Cache = Cache(
enabled = false,
maxAge = 300,
size = 15
)
}
Atributos | Tipo | Definição |
---|---|---|
environment | Environment | Atributo responsável por informar ao Beagle qual o estado de build atual da aplicação. |
baseUrl | String | Informa a url base usada no Beagle na aplicação. Se estiver usando emulador, consulte essa página para definir esse atributo. |
isLoggingEnabled | Boolean | Atributo que habilita ou desabilita todos os logs que o Beagle gera. |
cache | Cache | Objeto responsável por gerenciar o cache das requisições do Beagle. |
BeagleComponent
, o Beagle espera que elas tenham construtores vazios.Agora é o momento de iniciar o Beagle na classe da sua aplicação. Porém, antes confira se a versão mínima da sua aplicação em SKD está 19 ou superior, como indicado abaixo:
defaultConfig {
minSdkVersion 19 //or higher
}
Agora você deve inicializar sua Application
para que o Beagle gere os outros arquivos de configuração que necessita. Ao ser iniciado pela primeira vez o Beagle irá criar automaticamente uma classe de BeagleSetup
class, como mostra a figura abaixo:
Neste momento, você deve criar uma classe Kotlin
que estenda a classe Application
que, para este exemplo, nomeamos como AppApplication
.
Esta classe deve chamar o BeagleSetup().init(this)
no método onCreate
, conforme listado abaixo:
class AppApplication: Application() {
override fun onCreate() {
super.onCreate()
BeagleSetup().init(this)
}
}
Por fim, você deve atualizar novamente o seu AndroidManifest.xml
e definir a AppApplication
que foi criada como o arquivo de inicialização da aplicação, como no exemplo abaixo:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.beagleexamples">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".AppApplication"
..
Agora você está pronto para começar a usar o Beagle! E para verificar se a configuração está correta simule uma tela Server-Driven fazendo o teste a seguir.
Para você testar nossa aplicação, vamos simular uma tela server-driven criando um JSON que represente uma tela na sua aplicação Android.
Siga os passos abaixo para fazer a exibição:
MainActivity.kt
;onCreate
;test_content.addView(testScreen().toView(this))
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
test_content.addView(testScreen().toView(this))
}
Para acessar a view test_content
como no exemplo acima, é necessário a instalar o plugin:
plugins {
id 'kotlin-android-extensions'
}
.xml
da Main Activity e crie um frame layout.Por padrão, o Android costuma criar os arquivos .xml
com o constraint layout
. Você não precisa removê-lo, apenas adicione o frame layout dentro dele e confira se as configurações estão como no exemplo abaixo:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/test_content" />
private fun testScreen() = Screen(
child = Container(
children = listOf(
Text(
text = "Hello Beagle!"
).applyStyle(
Style(margin = EdgeValue(top = 16.unitReal()),
flex = Flex(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."
).applyStyle(
Style(margin = EdgeValue(
left = 16.unitReal(),
right = 16.unitReal(),
top = 20.unitReal()
)
)
)
)
)
)
A função acima cria a estrutura JSON abaixo, que vai ser interpretada pelo Beagle:
{
"_beagleComponent_" : "beagle:screenComponent",
"child" : {
"_beagleComponent_" : "beagle:container",
"children" : [ {
"_beagleComponent_" : "beagle:text",
"text" : "Hello Beagle!",
"style" : {
"margin" : {
"top" : {
"value" : 16.0,
"type" : "REAL"
}
},
"flex" : {
"alignSelf" : "CENTER"
}
}
}, {
"_beagleComponent_" : "beagle: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.",
"style" : {
"margin" : {
"left" : {
"value" : 16.0,
"type" : "REAL"
},
"top" : {
"value" : 20.0,
"type" : "REAL"
},
"right" : {
"value" : 16.0,
"type" : "REAL"
}
}
}
} ]
}
}
Run app
e cheque a tela do emulador!Neste tutorial, focamos em uma configuração de tela simples para você entender o processo, na prática, sem se preocupar com uma hierarquia de telas complexas. Mas, claro, você pode fazer bem mais no seu projeto com o Beagle!
Antes de usar o Beagle, fique atento a configuração da build de release e o ProGuard.
Mesmo não sendo necessário neste momento, é bom ter em mente que você precisará configurar o ProGuard para ativar o ofuscamento do seu código quando estiver publicando releases.
BeagleComponent
e RegisterValidator
não podem implementar parâmetros nos seus construtores, pois no caso do Beagle esses construtores precisam estar vazios.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.