Skip to content

Commit

Permalink
feat: updates custom action android release v1.10 (#806)
Browse files Browse the repository at this point in the history 
* updates the platform sorting funcionality information and location on docs

Signed-off-by: carlossteinzup <carlos.stein@zup.com.br>

* adjusts custom action example for android

Signed-off-by: carlossteinzup <carlos.stein@zup.com.br>

* Update content/en/android/customization/action/simple-action.md

* adjust PR review

Signed-off-by: carlossteinzup <carlos.stein@zup.com.br>
  • Loading branch information
@carlossteinzup
carlossteinzup committed Nov 17, 2021
1 parent 4a84aca commit 8ad5d93
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 53 deletions.
86 changes: 56 additions & 30 deletions content/en/android/customization/action/simple-action.md
View file
@@ -1,34 +1,38 @@
---
title: Simple Custom Action
title: Simple Action
weight: 104
description: Creating and executing a custom action
description: Creating and trigerring a custom action
---

**Topics Covered:**
- What is an Action
- How to create an Action
- How to register an Action
- How to use an Action
**Topics covered:**

- What is a custom action
- How to create a custom action
- How to Register a Custom Action
- How to use a custom action

**Requirements:**
- A project with Beagle configured

## What is?
- A project with Beagle Configured (FRONT and BACKEND)

## What is a custom action?

A custom action is an action with a specific behavior created by the developer. Beagle has a number of default actions, however, there may be a situation that requires A new functionality, such as opening a camera interface on a cell phone.

On Beagle, an action deals with behaviors \(functions\), that are performed in your application when an event is triggered. These actions can be a Beagle's default or customized by you.
If you want to know more about Default Beagle actions you can check the session with the [**action-types.**]({{<ref path="/api/actions/overview#action-types" lang="en">}}).

## How to create an action
## How to create a custom action

To create your custom action, follow the next steps:
To create a custom action you need to:

Step 1. Create an annotated class with `@RegisterAction` that implements an `Action` interface;
Step 2. Put the action name by annotation parameter to avoid problems with Proguard;
Step 3. After that, the interface will request to implement the `execute` method;
Step 4. Now, declare the `action` result.
Step 1. Create a class annotated with `@RegisterAction`, and implement the `Action` interface, in your application FRONTEND and BACKEND enviroments;
Step 2. Set the action name by annotation parameter to avoid possible problems with Proguard and make sure that the action has the same name in the BACKEND and FRONTEND;
Step 3. After that, the interface will ask for the `execute` method to be implemented (only in FRONTEND);

The `value` attribute is a parameter example that can be declared in this class constructor.
The following example shows an action with **Toast** receiving a text with a parameter:
The `value` attribute is an example of a parameter that can be declared in the Action class constructor, you can set as many as you need.
The following example shows a custom action that will execute a **Toast** receiving a text as the `value` parameter:

### Class that represents an action in FRONTEND (Android)

```kotlin
@RegisterAction("customActionAndroid")
Expand All @@ -37,31 +41,53 @@ data class CustomActionAndroid(
) : Action {
override fun execute(rootView: RootView) {
Toast.makeText(
rootView.getContext(),
value,
Toast.LENGTH_LONG).show()
rootView.getContext(),
value,
Toast.LENGTH_SHORT
).show()
}
}
}
```

## How to register your action
### Class representing the action in the BACKEND

There are two ways to register your action, check them below:
```kotlin
@RegisterAction("customActionAndroid")
data class CustomActionAndroid(
val value: String
) : Action
```

1. Using Annotation Processor:
{{% alert color="warning" %}}
Note that here the class only needs to register the parameter you want to declare in the BACKEND and use it in the FRONTEND. In this action we declare only a `value` that will store the message to be used in TOAST.
{{% /alert %}}

For this, annotate your action class with `@RegisterAction("className")` where className is your class name.
Below we have the JSON that represents this action being called from the click of a button:

2. Without the Annotation Processor.
```json
{
"_beagleComponent_": "beagle:button",
"text": "Beagle Button",
"onPress": [
{
"_beagleAction_": "custom:myCustomAction",
"value": "ParameterForAction."
}
]
}
```

## How to use your action
## How to use a custom action

See below, an action example in a button type component:
As with default actions, to use a custom action, just declare it in a component that performs actions, such as a `Button`.
In the example below, the action is declared in the button's `onPress` attribute:

```kotlin
Button(
text = text,
styleId = styleId,
onPress = listOf(CustomActionAndroid("I'm a customized action"))
onPress = listOf(
CustomActionAndroid("I am a custom action")
)
)
```
70 changes: 48 additions & 22 deletions content/pt/android/customization/action/simple-action.md
View file
Expand Up @@ -6,31 +6,34 @@ description: Criando e executando uma ação customizada
---

**Tópicos abordados:**
- O que é uma ação
- Como criar uma ação
- Como Registrar uma ação
- Como usar uma ação

- O que é uma ação customizada
- Como criar uma ação customizada
- Como Registrar uma ação customizada
- Como usar uma ação customizada

**Requisitos:**
- Ter um projeto com o Beagle Configurado

- Ter um projeto com o Beagle Configurado (FRONT e BACKEND)

## O que é uma ação customizada?

## O que é?
Uma ação customizada é uma ação com um comportamento especifico criada pelo desenvolvedor. O Beagle possui uma serie de ações padrão, no entanto, pode haver algum uso que necessite de uma funcionalidade que não é padrão, como por exemplo, abrir uma interface de camera em um celular.

No Beagle, uma ação lida com os comportamentos \(funções\), que serão executadas em sua aplicação assim que um determinado evento for disparado. Essas ações podem ser padrão do próprio Beagle ou customizadas.
Caso queira saber mais sobre ações padronizadas do Beagle você pode verificar a sessão com os [**tipos de ações.**]({{< ref path="/api/actions/overview#tipos-de-ações" lang="pt">}}).

Veja as ações padrões do Beagle na seção [**tipos de ações.**]({{< ref path="/api/actions/overview#tipos-de-ações" lang="pt">}}).
## Como criar uma ação customizada

## Como criar uma ação
Para criar uma ação personalizada é necessario:

Para criar sua ação personalizada siga os seguintes os passos:
Passo 1. Criar uma classe anotada com `@RegisterAction`, e implementar a interface `Action`, no FRONTEND e no BACKEND da sua aplicação;
Passo 2. Colocar o nome da ação por parâmetro da annotation para evitar possíveis problemas com o Proguard e certificar-se de que a ação tem o mesmo nome no BACKEND e no FRONTEND;
Passo 3. Depois disso, a interface solicitará que o método `execute` seja implementado (somente no FRONTEND);

Passo 1. Criar uma classe anotada com `@RegisterAction`, e implementar a interface `Action`;
Passo 2. Colocar o nome da ação por parâmetro da annotation para evitar possíveis problemas com o Proguard;
Passo 3. Depois disso, a interface solicitará que o método `execute` seja implementado;
Passo 4. Agora, declare o resultado da `action`.
O atributo `value` é um exemplo de parâmetro que pode ser declarado no construtor dessa classe, você pode usar quantos precisar.
O exemplo a seguir mostra uma ação customizada para executar um **Toast** recebendo um texto no parâmetro `value`:

O atributo `value` é um exemplo de parâmetro que pode ser declarado no construtor dessa classe, você pode usar quantos precisar. O exemplo a seguir mostra uma ação com **Toast** recebendo um texto como parâmetro:
### Classe que representa uma ação no FRONTEND (Android)

```kotlin
@RegisterAction("customActionAndroid")
Expand All @@ -47,19 +50,42 @@ data class CustomActionAndroid(
}
```

## Como registrar sua ação
### Classe que representa a ação no BACKEND

```kotlin
@RegisterAction("customActionAndroid")
data class CustomActionAndroid(
val value: String
) : Action
```

Existem duas formas de registrar seu componente.
{{% alert color="warning" %}}
Perceba que aqui a classe só precisa registrar o parametro que se deseja declarar no BACKEND e utilizar no FRONTEND. Nessa ação declaramos apenas um `value` que guardará a mensagem a ser utilizada no TOAST.
{{% /alert %}}

1. Utilizando o Annotation Processor:
Abaixo temos o JSON que representa essa ação sendo chamada a partir do click de um botão:

Para isso, anote a classe da sua action com `@RegisterAction("className")` onde className é o nome da sua classe
```json
{
"_beagleComponent_": "beagle:button",
"text": "Beagle Button",
"onPress": [
{
"_beagleAction_": "custom:myCustomAction",
"value": "ParameterForAction."
}
]
}
```

## Como registrar sua ação

2. Sem utilizar o Annotation Processor.
- Para isso, anote a classe da sua ação com o `@RegisterAction("className")` onde `className` é o nome da sua classe

## Como usar sua ação
## Como usar uma ação customizada

Veja abaixo um exemplo de Action em um componente do tipo `Botão`:
Para utilizar uma ação customizada, declare-a em um componente que execute ações, como por exemplo, um `Botão`.
No exemplo abaixo, a ação é declarada no atributo **`onPress`** do botão:

```kotlin
Button(
Expand Down
2 changes: 1 addition & 1 deletion themes/devrel
Submodule devrel updated 3 files
+0 −10 assets/js/base.js
+0 −9 assets/scss/_styles_project.scss
+2 −2 layouts/partials/sidebar-tree.html

0 comments on commit 8ad5d93

Please sign in to comment.