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 .
No Beagle, é possível criar uma ação customizada a partir de uma CustomAction
.
Cada plataforma possui sua forma especificia de fazer essa implementação no frontend. Você pode ver exemplos abaixo de como fazer em cada uma delas:
@RegisterAction
que implementa uma interface Action
. Essa interface irá requisitar a implementação do método execute
e você irá declarar o resultado da action
.msg
listado, é o único exemplo de parâmetro que deve ser declarado na classe construtora.O exemplo abaixo mostra um ação com Toast:
@RegisterAction
data class CustomAction(
val msg: String? = null
) : Action {
override fun execute(rootView: RootView, origin: View) {
Toast.makeText(
rootView.getContext(),
msg,
Toast.LENGTH_LONG).show()
}
}
Action
. Essa mesma classe irá fazer a requisição da implementação do método execute
e irá ditar as ações na action
.msg
é o único parâmetro que deve ser declarado na classe construtora.O exemplo abaixo mostra um ação com Alert
:
class CustomAction: Action {
let msg: String?
init(msg: String? = nil) {
self.msg = msg
}
func execute(controller: BeagleController, origin: UIView) {
let alert = UIAlertController(
title: nil,
message: msg,
preferredStyle: .alert
)
controller.present(alert, animated: true)
}
}
Para registrar a ação, apenas crie o método com todo seu custom action e chame o método do Beagle registerCustomAction
para fazer o registro;
Chame o método criado no BeagleConfig, ele pode ser visto nesse exemplo:
private func registerCustomAction() {
Beagle.registerCustomAction("CustomAction", actionType: CustomAction.self)
}
_beagleAction_
como uma propriedade obrigatória e com os parâmetros necessários para a sua ação. Para esse exemplo, será criado o atributo msg
do tipo string
.\_beagleAction_
, coloque o nome da ação customizada no padrão: ‘custom:nomeDaAção’:interface CustomAction {
_beagleAction_: "custom:CustomAction";
msg: string;
}
ActionHandler
com a interface que você criou:import { ActionHandler } from "@zup-it/beagle-web";
export const customHandler: ActionHandler<CustomAction> = ({ action }) => {
/*
Podemos acessar nosso parâmetro definido na interface, por exemplo
action.msg nos traz o valor de msg.
*/
alert(action.msg);
};
Angular: adicione no beagle.module.ts
@BeagleModule({
...
customActions:{
"custom:CustomAction": customHandler //nome do action handler
}
})
export class Beagle {}
React: adicione nos arquivos de configuração do Beagle:
export default createBeagleUIService<any>({
...
customActions:{
"custom:CustomAction": customHandler //nome do action handler
}
})
Para criar essa ação, o seu código deve estar assim:
@RegisterAction
data class CustomAction(
val msg: String? = null
) : Action
Veja abaixo um exemplo de uma Ação em um componente do tipo Button:
{
"_beagleComponent_": "beagle:button",
"text": "Beagle Button",
"onPress": [
{
"_beagleAction_": "custom:customAction",
"msg": "Eu sou um Toast."
}
]
}
Button(
text = "Beagle Button",
onPress = listOf(CustomAction("Eu sou um Toast"))
)
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.