Exibindo uma tela

Nesta seção, você encontra um exemplo prático de como exibir uma tela Server-Driven

Exibindo uma tela a partir de uma URL

Cada plataforma tem sua forma própria para exibir uma tela server-driven no frontend usando o Beagle. Abaixo, listamos exemplos para cada uma delas.

Para exibir uma tela full server-driven, você deve usar o método this.newServerDrivenIntent<BeagleActivity>() onde o this é a o contexto da sua tela atual.

Este método requer apenas o parâmetro ScreenRequest

Você deve seguir tal como o comando abaixo:

val intent = this.newServerDrivenIntent<BeagleActivity>(ScreenRequest("/screen"))
startActivity(intent)

A classe Screen Request.

AScreenRequest é uma classe interna do Beagle utilizada para solicitar qual tela você deseja exibir. Você listará apenas o atributo URL referente a página que deseja carregar vinda do BFF.

No entanto, esse elemento possui outros atributos, que podem ser utilizados na transição e entre telas. Para saber mais sobre essa classe, veja em Screen Request

Para renderizar uma tela server-driven, basta criar uma instância BeagleScreenViewController do tipo remote e fazer a inicialização com a URL do seu BFF, como no exemplo abaixo:

let beagleViewController = Beagle.screen(
    .remote(
        .init(url: "// URL AQUI")
    )
)

Feito isso, basta apresentá-la onde preferir. Neste caso, você deve seguir como no comando de exemplo.

present(beagleViewController, animated: true, completion: nil)

A resposta do seu BFF deve ser um JSON que representa um componente visual definido localmente na aplicação.

Por fim, execute a aplicação e veja uma tela definida em uma URL remota renderizada na sua aplicação local.

Para projetos no Angular

Para definir onde você quer mostrar uma tela server-driven no Angular, você deve usar o componente fornecido pela biblioteca <beagle-remote-view>

No arquivo html do seu componente, adicione o remote view.

<beagle-remote-view [loadParams]="loadParams"></beagle-remote-view>

Feito isso, acesse o controller do componente em que você adicionou o remote view e crie o loadParams que é esperado pelo remote view.

loadParams: LoadParams;

  constructor() {
    this.loadParams = {
      path: '/pathToScreen'
    };
  }

Para projetos no React

Para definir uma tela server-driven no React, você precisa criar um serviço com uma configuração mínima, como no exemplo:

import { createBeagleUIService } from "@zup-it/beagle-react";

export default createBeagleUIService({
  baseUrl: "",
  components: {},
});

Feito isso, usamos dois componentes fornecidos pela biblioteca Beagle para definir onde a tela server-driven será renderizada:

  1. O BeagleProvider
  2. O BeagleRemoteView
...
import { BeagleProvider, BeagleRemoteView } from '@zup-it/beagle-react';
import BeagleService from './beagle/beagle-service';

function App() {
  return (
    <BeagleProvider value={BeagleService}>
      <BeagleRemoteView path={'/pathToScreen'} />
    </BeagleProvider>
  );
}

export default App;

Exibindo uma tela a partir de um JSON

Para renderizar uma tela a partir de um JSON, é necessário ter uma Activity ou Fragment com um FrameLayout como no exemplo a baixo:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frame_layout_android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"/>

Agora basta chamar o método renderScreen() a partir do frame layout criado no xml passando como parâmetro a sua activity e o JSON.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        frame_layout_android.renderScreen(
            activity = this,
            screenJson = "// JSON here"
        )
    }
}

Para renderizar uma tela de um JSON, basta criar uma instância BeagleScreenViewController do tipo declarativeText e fazer a inicialização com o JSON, como no exemplo abaixo:

let beagleViewController = Beagle.screen(
    .declarativeText(
        .init(text: "// JSON HERE")
    )
)

Feito isso, basta apresentá-la onde preferir. Neste caso, você deve seguir como no comando de exemplo.

present(beagleViewController, animated: true, completion: nil)

Última modificação 11/02/2021: create content (#298) (43225e15)