Tutorial do Wix Blocks: criar um widget de contador

12 min de leitura
O Wix Blocks está aberto a todos os usuários do Wix Studio. Para ter acesso ao Wix Blocks, junte-se ao Wix Studio.
Este tutorial mostra como criar um widget de contador, onde você pode aumentar e diminuir um número. Através deste widget simples, mostraremos tudo o que você pode fazer com o Wix Blocks. 

contador
Recomendamos que você crie esse widget do zero, mas se não conseguir, você pode visualizar um template do widget no Blocks e editá-lo em sua conta Wix.

Etapa 1 | Crie um novo widget no Blocks

  1. Crie um aplicativo do Blocks vazio.
  2. Se o aplicativo não for criado com um widget padrão, adicione um widget ao seu aplicativo. 

Etapa 2 | Adicione um layouter

Um layouter é um contêiner que permite a responsividade. Isso manterá os outros elementos organizados. Para adicionar um layouter: 
  1. Clique no botão Elementos. add no menu superior. 
  2. Clique em LAYOUT ->  Caixas flexíveis -> LAYOUTERS
  3. Clique no layouter vertical de 3 seções. 

Etapa 3 | Adicione elementos do widget

Adicionar os botões

  1. Clique no botão Elementos. add no menu superior. 
  2. Clique em Botões
  3. Arraste e solte um botão na seção direita do layouter.
4. Clique em Alterar texto e ícone
5. Selecione Apenas texto na lista dropdown. 
6. Altere o texto para "+".
7. Clique no ícone Design design icon  no painel Inspetor inspector e selecione Texto.
8. Clique em Tema e selecione Cabeçalho 6 na lista dropdown. 
9. Arraste e solte outro botão quadrado na seção à esquerda. 
10. Altere o texto para "-".

Adicionar o número do meio

  1. Clique no botão Elementos add e selecione Texto.
  2. Arraste e solte um elemento 32px Title para a seção central do layouter. 
  3. Edite o texto para "0" e alinhe-o ao centro. 

Alterar os IDs

  1. Clique no ícone Propriedades e eventos properties and events  no canto inferior direito da tela.  
  2. Altere o ID do botão de aumento para incBtn.
  3. Altere o ID do botão de diminuição para decBtn.
  4. Altere o ID do seu elemento de texto para countTxt.

Etapa 4 | Adicione código aos seus elementos

Agora é hora de fazer com que o widget faça o que deve fazer: contar quando os botões forem clicados. 
1. Clique na aba Código ou vá para a parte inferior da tela para adicionar código ao seu widget. 
2. Adicione o seguinte código antes da função onReady().

1//Set the count to 0 
2let count = 0;
3
4//Assign the count to your text element
5function render() {
6 $w('#countTxt').text = count.toString();
7}
8
9//Add a certain amount to the count and fire an event in the widget API
10function addToCount(amount) {
11 count += amount;
12 render();
13}
3. Adicione o seguinte código na sua função onReady()
1 $w('#incBtn').onClick(() => {
2  addToCount(1);
3 });
4 
5   $w('#decBtn').onClick(() => {
6  addToCount(-1); 
7 });
8  
9  render();
4. Clique no botão Executar para ver o widget em ação. 

Etapa 5 | Torne seu widget personalizável com a API de widget

Você pode definir uma API para seu widget, para que o usuário (um proprietário do site que instala o widget) possa personalizá-lo como preferir A API pode conter propriedades, eventos e funções exportadas.

Digamos que você queira que o proprietário do site possa decidir qual é o "passo" da contagem. Talvez eles queiram que o passo seja 2, para que a contagem seja 0, 2, 4, 6 etc. 

Você pode definir uma propriedade na API do widget chamada "passo" e permitir que o usuário a personalize.

Definir a propriedade "passo"

  1. Clique no ícone API do widget widget api para abrir o painel da API do widget.
  2. Clique em Adicionar nova propriedade na seção Propriedades (ou passe o mouse sobre a seção e clique no botão add que aparece).
3. Nomeie sua propriedade como "passo", dê a ela o tipo Número e um valor padrão de 1

Alterar seu código para considerar sua nova propriedade

Altere seu código para que, quando os botões forem clicados, addToCount seja chamado com a etapa das propriedades em vez de com o valor padrão de 1.
Use $widget.props para acessar suas propriedades (observe as sugestões de preenchimento automático do Velo). 
1$w.onReady(function () {
2 $w('#incBtn').onClick(() => {
3  addToCount($widget.props.step);
4 });
5 $w('#decBtn').onClick(() => {
6  addToCount(-$widget.props.step);
7 });
8
9 render();
10});

Testar sua propriedade no modo Execução

  1. Clique em Executar para ir para o modo visualização. 
  2. Clique em Testar propriedades de API
3. Altere o passo para um número diferente e veja como seu widget funciona. 

Adicionar um evento público à API do seu widget

A API do widget permite que você adicione um evento que é acionado sempre que você decidir. 
Adicionar um evento que é acionado quando a variável "count" (contagem) é alterada:
  1. Clique na API pública do widget widget api para abrir o painel da API do widget. 
  2. Clique em Adicionar novo evento público na seção Eventos (ou passe o mouse sobre a seção e clique no ícone add que aparece). 
  3. Dê um nome e uma descrição ao seu evento
4. Adicione essa linha à função addToCount() para acionar o evento quando a contagem mudar. 
1$widget.fireEvent('change', count);
5. Agora, sua função addToCount() deve ficar assim: 
1function addToCount(amount) {
2 count += amount;
3 render();
4 $widget.fireEvent('change', count);
5}
Capture seu evento no Editor do site
Você precisará capturar seu evento no editor do site depois de instalar o widget em seu site (isso será descrito na Etapa 8).

Adicione uma função pública à API do seu widget

Crie e exporte uma função reset(), para que os proprietários do site possam facilmente definir a contagem para 0. 
  1. Clique na API pública do widget widget api para abrir o painel da API do widget. 
  2. Clique em Adicionar nova função pública na seção Funções (ou passe o mouse sobre a seção e clique no ícone add que aparece). 
  3. Uma nova função vazia com o nome padrão foo() é criada, com um JSDoc designado (o bloco de comentários) que pode ser lido por qualquer pessoa que usar sua função em um site. 
4. Cole o seguinte código em vez do código padrão da função: 
1export function reset(){
2 //This function is part of my public API
3 count = 0;
4 render();
5}
5. Atualize o JSDoc. Observação: você deve manter a anotação da função nesse formato.  
1/**
2*@function
3*@description Sets count to 0 and renders. 
4*@returns nothing
5*/
Dica
Você também pode fazer o caminho inverso. Qualquer função exportada com o JSDoc adequado acima dela aparecerá no painel API do widget à direita. Assim, você pode escrever seu código diretamente, em vez de receber o template clicando em Adicionar nova função pública

Etapa 6 | (Opcional) Configure o comportamento de edição de tempo do seu widget

A aba Configuração permite que você determine o comportamento do widget e seus elementos quando um proprietário do site o edita no editor.  Experimente algumas opções da aba Configuração.
Defina um nome de exibição para os elementos do widget: 
  1. Selecione o botão de diminuição.
  2. Altere seu nome de exibição em Nome do componente para "Diminuir" no painel Inspetor inspector.
Evite que o elemento de texto seja selecionável no editor: 
  1. Selecione o elemento de texto que representa sua contagem. 
  2. Clique na opção Pode ser selecionado na seção inspector Comportamento do Inspetor painel para remover a marca de seleção azul. 

Etapa 7 | (Opcional) Crie mais predefinições de design

O Blocks permite que você crie diversas variações para o design e layout do seu widget, através de predefinições de design. Para criar outro design predefinido: 
  1. Clique na aba Design no menu superior. 
  2. Clique em + Adicionar design predefinido + na seção Predefinições de design do painel Design em Estrutura do aplicativo app structure..
  3. Clique no ícone Mais ações   para renomear sua predefinição (você também pode duplicá-la ou excluí-la). 
4. Faça algumas alterações visíveis no seu widget, como alterar a cor da seção do meio.
Alterne as predefinições para ver as diferenças.
Alterações por predefinição vs. alterações globais
Observe que algumas alterações de design e layout afetam apenas sua predefinição atual, enquanto outras afetam tudo (saiba mais). 

Etapa 8 | Capture seu evento no editor do site

Importante
Essa etapa ocorre no Editor Wix ou no Editor do Wix Studio, não no Blocks. 
Vá para o Editor do site para capturar o evento no seu aplicativo. Primeiro você precisa registrar um Manipulador de Eventos para o evento de alteração:
  1. Instale seu aplicativo do widget
  2. Ative o Modo avançado
  3. Clique no ícone Propriedades e eventos .
  4. Altere o ID do seu widget, por exemplo, para "counter1".
  5. Clique em onChange( ) em Manipuladores de eventos.
  6. Selecione Counter1_change na caixa.
Agora escreva a função. Ela recebe o `count` como um parâmetro e redefine a contagem quando chega ao número que você decidir (no nosso exemplo: 30). Sua função deve ficar assim:
1export function counter1_change({data: count}) {
2 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
3 // Add your code for this event here: 
4 if (count > 30) {
5  $w('#counter1').reset();}
6}
Visualize ou publique para ver seu site em ação.

Esse artigo foi útil?

|