Skip to content

Commit

Permalink
Flutter - Adds Portuguese translation for root and extension folder (#…
Browse files Browse the repository at this point in the history
…866)

* Translates flutter root folder docs

Signed-off-by: Hector Custódio <hector.custodio@zup.com.br>

* Translates extensions folder

Signed-off-by: Hector Custódio <hector.custodio@zup.com.br>

* Update content/pt/flutter/extensions/components.md

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

Co-authored-by: carlossteinzup <carlos.stein@zup.com.br>
  • Loading branch information
hectorcustodiozup and carlossteinzup committed Mar 9, 2022
1 parent 999690a commit 2998324
Show file tree
Hide file tree
Showing 7 changed files with 92 additions and 88 deletions.
2 changes: 1 addition & 1 deletion content/pt/flutter/_index.md
@@ -1,5 +1,5 @@
---
title: Flutter
weight: 7
description: Here you will see more about the Beagle for Flutter
description: Aqui você aprende mais sobre o Beagle Flutter
---
4 changes: 2 additions & 2 deletions content/pt/flutter/extensions/_index.md
@@ -1,5 +1,5 @@
---
title: Extensions
title: Extensões
weight: 1
description: In this section, you will learn how to extend the default components, actions and operations
description: Nesta seção, você aprende como adicionar componentes, ações e operações customizadas.
---
33 changes: 17 additions & 16 deletions content/pt/flutter/extensions/actions.md
@@ -1,30 +1,31 @@
---
title: Custom Actions
title: Ações customizadas
weight: 3
description: >-
In this section, you will find information on how to create and use your own actions in Beagle Flutter.
Aqui você encontra detalhes de como criar e usar ações customizadas no Beagle Flutter.
---

---

## How to create custom actions?
1. Declare a map of type `Map<String, ActionHandler>`;
2. Pass this map to your BeagleService instance.
## Como criar uma ação customizada?

This map tells Beagle which action to trigger when a given identifier comes from a JSON.
1. Declare um mapa do tipo `Map<String, ActionHandler>`;
2. Adicione o mapa criado na criação da intância do BeagleService

### The keys on a map of actions
The key in a map of actions is a string and it must be equivalent to the `_beagleAction_` property of the JSON. These keys have a single restriction: they must have the prefix "custom:".
Esta estrutura serve para dizer ao Beagle qual ação correta iniciar a partir de um identificador.

### The values on a map of actions (Action handlers)
An action handler is a function that receives the following named parameters:
### As chaves em um mapa de ações
A chave representa o nome da ação e deve ser equivalente a propriedade `_beagleAction_` do JSON. A única restrição para criação do nome é utilizar o prefixo "custom"

- action (BeagleAction): the action itself, it allows access to all properties that came from the JSON.
- view (BeagleView): the BeagleView that spawned this action. The reference to the BeagleView is useful for altering the Beagle UI tree and triggering re-renders, but it's rarely needed when implementing simple actions.
- element (BeagleUIElement): the node of the BeagleTree that owns the action.
- context (BuildContext): the BuildContext of the parent BeagleWidget.
### Os valores do mapa de ações (Action handlers)
Um Action handler é a funcção que recebe os seguintes parâmetros:

The most important parameter is the action and most action handlers will need only this to be implemented. See an example below of an action that logs a message to the console:
- action (BeagleAction): A ação que permite acesso as propriedades vindas do JSON
- view (BeagleView): A BeagleView é quem iniciou a ação, pode ser útil no caso de necessidade de iniciar novas renderizações mas é raramente usada em ações mais simples.
- element (BeagleUIElement): O nó da árvore ao qual a ação pertence
- context (BuildContext): O BuildContext do BeagleWidget pai.

O parâmetro mais importante é a ação e a maioria dos action handlers vão precisar apenas dela para funcionar. Veja um exemplo de uma ação que mostra uma mensagem no console de logs.

```dart
final Map<String, ActionHandler> myActions = {
Expand All @@ -40,4 +41,4 @@ final beagleService = BeagleService(
);
```

That's it! Now you can use your custom action with Beagle Flutter!
É isso! Agora vocÊ já sabe como usar ações customizadas com o Beagle Flutter.
36 changes: 18 additions & 18 deletions content/pt/flutter/extensions/components.md
@@ -1,28 +1,28 @@
---
title: Custom Components
title: Componentes customizados
weight: 3
description: >-
In this section, you will find information on how to create and use your own components in Beagle Flutter.
Nesta seção, você aprende como criar e usar seus próprios componentes customizados no Beagle Flutter.
---

---

## How to create custom components?
1. Declare a map of type `Map<String, ComponentBuilder Function()>`;
2. Pass this map to your BeagleService instance.
## Como criar componentes customizados?
1. Declare um mapa do tipo `Map<String, ComponentBuilder Function()>`;
2. Adicione este mapa na inicialização do BeagleService.

This map tells Beagle which component to render when a given identifier comes from a JSON.
Este mapa mostra ao Beagle quais componentes renderizar a partir de um identificador no JSON

### The keys on a map of components
The key in a map of components is a string and it must be equivalent to the `_beagleComponent_` property of the JSON. These keys have a single restriction: they must have the prefix "custom:".
### A chave em um mapa de componentes
A chave representa o nome da ação e deve ser equivalente a propriedade `_beagleComponent_` do JSON. A única restrição para criação do nome é utilizar o prefixo "custom"

### The values on a map of components (factories of component builders)
The `ComponentBuilder` is an abstract class that must be implemented. The subclass must implement the method `buildForBeagle` that returns a Widget and receive the following positional parameters:
1. `BeagleUIElement element`: the Beagle element to render. Contains all properties that came from the JSON.
2. `List<Widget> children`: the children for this component. If this component must be a leaf, ignore it. If this component will always have a single child, use `children[0]`.
3. `BeagleView view`: the BeagleView that spawned this component. Useful for changing the Beagle UI tree from inside the component. This is rarely used.
### Os valores no mapa de componentes (factories of component builders)
O `ComponentBuilder` É uma classe abstrata que deve ser implementada, a subclasse deve implementar o método `buildForBeagle` que retorna um Widget e recebe os seguintes parâmetros:
1. `BeagleUIElement element`: O elemento a ser renderizado, contém todas as propriedades vindas do JSON
2. `List<Widget> children`: Os filhos deste component. Se este componente for a raiz, ignore este parâmetro. Se este componente sempre tiver apenas um filho acesse com `children[0]`.
3. `BeagleView view`: A BeagleView que iniciou o elemento. esta propriedade é raramente utilizada, e serve para alterar o Beagle UI a partir do componente.

See an example below of a component builder that exposes the original ElevatedButton widget from Flutter:
Veja um exemplo de um "component builder" que expõe o ElevatedButton widget do Flutter:

```dart
class _ElevatedButtonBuilder extends ComponentBuilder {
Expand All @@ -47,10 +47,10 @@ final beagleService = BeagleService(
);
```

In the example above, I purposefully omitted the properties `style` and `focusNode` from the `ElevatedButton`. I did this because these objects have too many properties and the other properties are enough to exemplify the use of custom components.
No exemplo acima, As propriedades `style` e `focusNode` foram omitidas do `ElevatedButton`. Isso foi feito porque os objetos possuem muitas propriedades e as outras propriedades são suficientes para exemplificar o uso do componente customizado.

Notice that `onPressed` is a function and we just call `element.getAttributeValue('onPressed')`. This is fine! Beagle will transform anything declared as an action in the JSON to a function.
Preste atenção que `onPressed` é uma função e podemos chamá-la com `element.getAttributeValue('onPressed')`. Isso não é um problema, a biblioteca do Beagle irá transformar qualquer ação declarada no JSON para uma função.

This is the most boring and mechanical part of Beagle Flutter. One could say this is a monkey job and we agree with it. It is among our next steps to think of a better, more automatic, way of declaring custom components. We'd welcome any suggestions in [our Github Page](https://github.com/ZupIT/beagle)!
Esta configuração do Beagle Flutter pode se tornar repetitiva para muitos componentes, mas uma vez feita você não precisa recadastrá-los. Se você quer contribuir com o projeto e dar ideias de como melhorar esse processo, dê uma olhada em [nosso github](https://github.com/ZupIT/beagle)!

That's it! You can use this same strategy to expose any of your Beagle components.
É isso! Você pode usar essa mesma estratégia para expor qualquer componente customizado que você criar.
32 changes: 16 additions & 16 deletions content/pt/flutter/extensions/operations.md
@@ -1,20 +1,20 @@
---
title: Custom Operations
title: Operações customizadas
weight: 3
description: >-
In this section, you will find information on how to create and use your own operations in Beagle Flutter.
Nesta seção, você vai encontrar informações de como criar e usar operações customizadas no Beagle Flutter.
---

---

## How to create custom operations?
1. Declare a map of type `Map<String, dynamic Function(List<dynamic> args)>`;
2. Pass this map to your BeagleService instance.
## Como criar as operações customizadas?
1. Declare um mapa do tipo `Map<String, dynamic Function(List<dynamic> args)>`
2. Use este mapa ao inicializar sua instancia do BeagleService.

This map tells Beagle which function to trigger when a given operation name comes in an expression of the JSON.
Essa mapa diz ao beagle quais funções chamar quando o identificador de uma operação vem do JSON.

### The keys on a map of operations
The key in a map of actions is a string and it must be equivalent to the operation name in an expression. For instance, if we want to declare a new operation that formats phone numbers, we'd use it like this in the JSON:
### O mapa de chaves de operações
O mapa de chaves de operação é uma string e deve ser equivalente ao nome de uma expressão. Se você quiser declarar uma nova operação que formata números de telefone por exemplo, veja abaixo:

```json
{
Expand All @@ -23,12 +23,12 @@ The key in a map of actions is a string and it must be equivalent to the operati
}
```

`formatPhoneNumber`, by default, is not a supported operation, so we need to declare it using its name as the key in the map of operations.
`formatPhoneNumber`, não é uma operação padrão do Beagle, por isso precisamos adicioná-la no mapa de operações

### The values on a map of operations (Operation)
An operation is a function that receives a list of arguments and returns a result. Since we can accept anything coming from an expression in the JSON, the list of arguments is of type `dynamic`. This function can also return any type, as long as it's serializable.
### Os valores no mapa de operações (Operation)
Uma operação é uma funcção que recebe uma lista de argumentos e retorna um resultado. Como podemos aceitar qualquer coisa vinda do JSON, a lista é do tipo `dynamic`. Essa função pode também retornar qualquer tipo desde que seja do tipo `serializable`.

The example to format a phone number would receive a list of dynamic arguments and return a String. See the example below:
O exemplo para formatar o telefone recebe uma lista dinâmica de argumentos e retorna uma `String`. Veja o exemplo:

```dart
final myOperations = {
Expand All @@ -42,9 +42,9 @@ final beagleService = BeagleService(
);
```

Since `formatPhoneNumber` accepts a single argument, we use only the position `0` of the array. If we wanted create a multiplication between 2 numbers, for example, we'd use `args[0]` and `args[1]`.
Como `formatPhonrNumber` aceita apenas um único argumento, usamos a posição `o` do vetor. No caso de multiplos parâmetros basta acessar as posições correspondentes.

Another common use case for operations is filtering. Let's say we want to filter the array `users` by a given `city`. Suppose `users` and `city` are both values available in the context. To create a new array with all users filtered by the city, we could use the expression `@{filterByCity(users, city)}`. Since there's no default operation for this filter, we create a new custom operation:
Outro caso comum de uso das operações são filtros. Digamos que que temos um vetor de `users` por `city`. Supondo que ambos os valores de `users` e `city` estão disponíveis no context. Para criar um novo vetor com todos os usuários de uma cidade, basta criar uma nova operação customizada chamada por exemplo de `@{filterByCity(Users, city)}`. A lógica desta operação é filtrar os usuários dados os parâmetros. Veja:

```dart
final myOperations = {
Expand All @@ -57,6 +57,6 @@ final myOperations = {
}
```

Remember that operations always work over the original JSON, so instead of receiving an instance of the class User, for instance, you will receive its map representation. Operations must also only return serializable data, so, if it's gonna work over a user, it should never return an instance of the class user, but instead, it should return a map.
Lembre-se que operações sempre trabalham nos valores originais do JSON, por isso ao invés de receber uma instância da classe User, você precisa receber sua estrutura de dados em forma de mapa. Operações também devem sempre retornar valores do tipo `serializable`, então, no caso de retornar um User deve-se usar um mapa e não uma instância da classe.

That's it! Now you can use your custom operations with Beagle Flutter!
É isso!, Agora vocÊ já sabe criar operações customizadas com Beagle Flutter!

0 comments on commit 2998324

Please sign in to comment.