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.
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
- Crie um aplicativo do Blocks vazio.
- Se o aplicativo não for criado com um widget padrão, adicione um widget ao seu aplicativo.
Mostrar captura de tela
Etapa 2 | Adicione um layouter
Um layouter é um contêiner que permite a responsividade. Isso manterá os outros elementos organizados. Para adicionar um layouter:
- Clique no botão Elementos. no menu superior.
- Clique em LAYOUT -> Caixas flexíveis -> LAYOUTERS
- Clique no layouter vertical de 3 seções.
Mostrar captura de tela
Etapa 3 | Adicione elementos do widget
Adicionar os botões
- Clique no botão Elementos. no menu superior.
- Clique em Botões.
- Arraste e solte um botão na seção direita do layouter.
Mostrar captura de tela
4. Clique em Alterar texto e ícone.
5. Selecione Apenas texto na lista dropdown.
6. Altere o texto para "+".
7. Clique no ícone Design no painel Inspetor 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 "-".
Mostrar captura de tela
Adicionar o número do meio
- Clique no botão Elementos e selecione Texto.
- Arraste e solte um elemento 32px Title para a seção central do layouter.
- Edite o texto para "0" e alinhe-o ao centro.
Mostrar captura de tela
Alterar os IDs
- Clique no ícone Propriedades e eventos no canto inferior direito da tela.
- Altere o ID do botão de aumento para incBtn.
- Altere o ID do botão de diminuição para decBtn.
- Altere o ID do seu elemento de texto para countTxt.
Mostrar captura de tela
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.
Mostrar captura de tela
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"
- Clique no ícone API do widget para abrir o painel da API do widget.
- Clique em Adicionar nova propriedade na seção Propriedades (ou passe o mouse sobre a seção e clique no botão que aparece).
Mostrar captura de tela
3. Nomeie sua propriedade como "passo", dê a ela o tipo Número e um valor padrão de 1.
Mostrar captura de tela
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
- Clique em Executar para ir para o modo visualização.
- Clique em Testar propriedades de API.
Mostrar captura de tela
3. Altere o passo para um número diferente e veja como seu widget funciona.
Mostrar captura de tela
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:
- Clique na API pública do widget para abrir o painel da API do widget.
- Clique em Adicionar novo evento público na seção Eventos (ou passe o mouse sobre a seção e clique no ícone que aparece).
- Dê um nome e uma descrição ao seu evento
Mostrar captura de tela
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.
- Clique na API pública do widget para abrir o painel da API do widget.
- 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 que aparece).
- 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.
Mostrar captura de tela
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.
Mostrar captura de tela
Defina um nome de exibição para os elementos do widget:
- Selecione o botão de diminuição.
- Altere seu nome de exibição em Nome do componente para "Diminuir" no painel Inspetor .
Mostrar captura de tela
Evite que o elemento de texto seja selecionável no editor:
- Selecione o elemento de texto que representa sua contagem.
- Clique na opção Pode ser selecionado na seção Comportamento do Inspetor painel para remover a marca de seleção azul.
Mostrar captura de tela
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:
- Clique na aba Design no menu superior.
- Clique em + Adicionar design predefinido + na seção Predefinições de design do painel Design em Estrutura do aplicativo .
- Clique no ícone Mais ações para renomear sua predefinição (você também pode duplicá-la ou excluí-la).
Mostrar captura de tela
4. Faça algumas alterações visíveis no seu widget, como alterar a cor da seção do meio.
Mostrar captura de tela
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:
- Instale seu aplicativo do widget.
- Ative o Modo avançado.
- Clique no ícone Propriedades e eventos .
- Altere o ID do seu widget, por exemplo, para "counter1".
- Clique em onChange( ) em Manipuladores de eventos.
- Selecione Counter1_change na caixa.
Mostrar captura de tela
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?
|