Wix Helpcentrum
    Home
  1. Een website maken
  2. Geavanceerde functies
  3. Wix Blocks
  4. Tutorials
    5. Wix Blocks Tutorial: Een tellerwidget maken

Wix Blocks Tutorial: Een tellerwidget maken

Leestijd 12 minuten
Wix Blocks is beschikbaar voor alle Wix Studio-gebruikers. Word lid van Wix Studio.
Deze tutorial laat zien hoe je een tellerwidget bouwt, waarmee je een getal kunt verhogen en verlagen. Aan de hand van deze eenvoudige widget laten we je alles zien wat je met Wix Blocks kunt doen. 

teller
We raden aan om deze widget helemaal vanaf nul te bouwen, maar als je vastloopt, kun je onder je Wix-account een template van de widget in Blocks bekijken en bewerken.

Stap 1 | Maak een nieuwe widget in Blocks

  1. Maak een lege Blocks-app.
  2. Als de app niet is gemaakt met een standaardwidget, voeg dan een widget toe aan je app. 

Stap 2 | Voeg een layouter toe

Een layouter is een container die responsiviteit mogelijk maakt. Het houdt de andere elementen georganiseerd. Om een layouter toe te voegen: 
  1. Klik in het bovenste menu op de Elementen toevoegen-knopadd.
  2. Klik op Indeling ->  Flexboxes.
  3. Klik op de verticale layouter met drie onderdelen. 

Stap 3 | Voeg widget-elementen toe

Knoppen toevoegen

  1. Klik in het bovenste menu op de Elementen toevoegen-knopadd.
  2. Klik op Knoppen.
  3. Sleep een knop naar het rechtergedeelte van de layouter.
4. Klik op Wijzig tekst en pictogram. 
5. Selecteer Alleen tekst in de dropdownlijst. 
6.  Wijzig de tekst naar '+'.
7. Klik in het Inspector-paneelinspectorop het Ontwerp-pictogramdesign iconen selecteer Tekst.
8. Klik op Thema's en selecteer Koptekst 6 in de dropdown. 
9. Sleep nog een vierkante knop naar het linkergedeelte. 
10. Wijzig de tekst naar '-'.

Het middelste getal toevoegen

  1. Klik op de Elementen toevoegen-knopadden selecteer Tekst.
  2. Sleep een 32px Title-element naar het centrale gedeelte van de layouter. 
  3. Bewerk de tekst naar '0' en lijn deze uit met het midden. 

De ID's wijzigen

  1. Klik rechtsonder in het scherm op het Eigenschappen en gebeurtenissen-pictogramproperties and events.  
  2. Wijzig de ID van je verhogingsknop naar incBtn.
  3. Wijzig de ID van je verlagingsknop naar decBtn.
  4. Wijzig de ID van je tekstelement in countTxt.

Stap 4 | Voeg code toe aan je elementen

Nu is het tijd om de widget te laten doen wat hij moet doen: op en neer tellen wanneer er op de knoppen wordt geklikt. 
1. Klik op het Code-tabblad of ga naar het onderste deel van je scherm om code aan je widget toe te voegen. 
2. Voeg de volgende code toe vóór je onReady()-functie.

1// Stel het aantal in op 0
2let count = 0;
3
4//Wijs de telling toe aan je tekstelement
5function render() {
6  $w('#countTxt').text = count.toString();
7}
8
9//Voeg een bepaald aantal toe aan de telling en activeer een gebeurtenis in de widget-API
10function addToCount(amount) {
11  count += amount;
12  render();
13}
3. Voeg de volgende code toe in je onReady()-functie. 
1 $w('#incBtn').onClick(() => {
2   addToCount(1);
3 });
4
5$w('#decBtn').onClick(() => {
6   addToCount(-1);
7 });
8
9render();
4. Klik op de Voorbeeld-knop om je widget in actie te zien. 

Stap 5 | Maak je widget aanpasbaar met de Widget API

Je kunt een API voor je widget definiëren, zodat de gebruiker (een website-eigenaar die de widget installeert) deze aan hun behoeften kan aanpassen. De API kan eigenschappen, gebeurtenissen en geëxporteerde functies bevatten.

Stel dat je wilt dat de website-eigenaar kan bepalen wat de 'stap' voor het tellen is. Misschien willen ze dat de stap 2 is, zodat het aantal 0,2,4,6 is, enzovoort. 

Je kunt in de widget-API een eigenschap met de naam 'step' definiëren en de gebruiker toestaan deze aan te passen.

Definieer de 'step'-eigenschap

  1. Klik op de Widget APIwidget apiom het Widget API-paneel te openen.
  2. Klik in het Eigenschappen-gedeelte op Nieuwe eigenschap toevoegen (of wijs het onderdeel aan en klik op het pictogramadddat verschijnt).
3. Geef je eigenschap de naam 'step', geef het het type Nummer en een standaardwaarde van 1. 

Wijzig je code om rekening te houden met je nieuwe eigenschap

Wijzig je code zodat wanneer op de knoppen wordt geklikt, addToCount wordt aangeroepen met de stap van de eigenschappen in plaats van met de standaardwaarde van 1.
Gebruik $widget.props om toegang te krijgen tot je eigenschappen (let op de Velo-suggesties voor automatisch aanvullen). 
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});

Test je eigenschap in de voorbeeldmodus

  1. Klik op Voorbeeld om naar de voorbeeldmodus te gaan. 
  2. Klik op Test API-eigenschappen.
3. Wijzig de stap naar een ander getal en bekijk hoe je widget werkt. 

Voeg een openbare gebeurtenis toe aan je Widget API

Met de widget-API kun je een gebeurtenis toevoegen dat wordt geactiveerd wanneer je maar wilt. 
Voeg een gebeurtenis toe die wordt geactiveerd wanneer de 'count'-variabele verandert:
  1. Klik op de Widget APIwidget apiom het Widget API-paneel te openen. 
  2. Klik op Nieuwe openbare gebeurtenis toevoegen in het Gebeurtenissen-gedeelte (of wijs het onderdeel aan en klik op het pictogramadddat verschijnt). 
  3. Geef je gebeurtenis een naam en beschrijf het
4. Voeg deze regel toe aan je addToCount()-functie om de gebeurtenis te activeren wanneer het aantal verandert. 
1$widget.fireEvent('change', count);
5. Nu zou je addToCount()-functie er als volgt uit moeten zien: 
1function addToCount(amount) {
2  count += amount;
3  render();
4  $widget.fireEvent('change', count);
5}
Leg je gebeurtenis vast in de website-editor
Je moet je gebeurtenis in de website-Editor vastleggen zodra je je widget op je website hebt geïnstalleerd (dit wordt beschreven in stap 8).

Voeg een openbare functie toe aan je Widget API

Maak en exporteer een reset()-functie, zodat website-eigenaren het aantal eenvoudig op 0 kunnen zetten. 
  1. Klik op de Widget APIwidget apiom het Widget API-paneel te openen. 
  2. Klik in het Functies-gedeelte op Nieuwe openbare functie toevoegen (of wijs het onderdeel aan en klik op het pictogramadddat verschijnt). 
  3. Er wordt een nieuwe lege functie met de standaardnaam foo() gemaakt, met een aangewezen JSDoc (het opmerkingenblok) die kan worden gelezen door iedereen die je functie op een website zal gebruiken. 
4. Plak de volgende code in plaats van de standaardcode van de functie: 
1export function reset(){
2  //This function is part of my public API
3  count = 0;
4  render();
5}
5. Werk het JSDoc bij. Let op: Je moet de annotatie van de functie in deze indeling houden.  
1/**
2*@function
3*@description Stelt het aantal in op 0 en wordt weergegeven.
4*@returns nothing
5*/
Tip:
Je kunt het ook andersom doen. Elke geëxporteerde functie met het juiste JSDoc erboven, verschijnt rechts in het Widget API-paneel. Je kunt je code dus rechtstreeks schrijven, in plaats van de template te ontvangen door op Nieuwe openbare functie toevoegen te klikken. 

Stap 6 | (Optioneel) Configureer het bewerkingstijdgedrag van je widget

Met het Configuratie-tabblad kun je het gedrag van de widget en de elementen ervan bepalen wanneer een website-eigenaar deze bewerkt in de Editor.  Probeer een paar opties uit op het Configuratie-tabblad.
Stel een weergavenaam in voor je widget-elementen: 
  1. Selecteer de verlagingsknop.
  2. Wijzig de weergavenaam onder Componentnaam in 'Mijn afname' in het Inspector-paneelinspector.
Voorkom dat het tekstelement selecteerbaar is in de Editor: 
  1. Selecteer het tekstelement dat je aantal vertegenwoordigt. 
  2. Klik in het Gedrag-gedeelte van het Inspector-paneelinspector op de Kan worden geselecteerd-optie om het blauwe vinkje te verwijderen. 

Stap 7 | (Optioneel) Maak meer ontwerpvoorinstellingen

Met Blocks kun je verschillende variaties maken voor het ontwerp en de indeling van je widget, via ontwerpvoorinstellingen. Om nog een ontwerpvoorinstelling te maken: 
  1. Klik in het bovenste menu op het Ontwerp-tabblad.
  2. Klik in het Ontwerpvoorinstellingen-gedeelte van het Ontwerp-paneel onder App-structuur op + Ontwerpvoorinstelling toevoegenapp structure..
  3. Klik op het ֿMeer acties-pictogramom de naam van je voorinstelling te wijzigen (je kunt deze ook dupliceren of verwijderen). 
4. Breng enkele zichtbare wijzigingen aan in je widget, zoals het wijzigen van de kleur van het middelste gedeelte.
Ga heen en weer tussen voorinstellingen om de verschillen te zien.
Wijzigingen per voorinstelling versus algemene wijzigingen
Houd er rekening mee dat sommige ontwerp- en indelingswijzigingen alleen van invloed zijn op je huidige voorinstelling, terwijl andere van invloed zijn op alle voorinstellingen. Lees meer.

Stap 8 | Vang je gebeurtenis in de website-Editor

Belangrijk
Deze stap vindt plaats in de Wix Editor of Studio Editor, niet in Blocks. 
Ga naar je website-Editor om de gebeurtenis vanuit je app op te vangen. Eerst moet je een Gebeurtenis-handler registreren voor de veranderingsgebeurtenis:
  1. Installeer je widget-app. 
  2. Schakel de Dev-modus in. 
  3. Klik op het Eigenschappen en gebeurtenissen-pictogram.
  4. Wijzig de ID van je widget, bijvoorbeeld naar 'teller1'.
  5. Klik onder Gebeurtenis-handlers op onChange( ).
  6. Selecteer counter1_change in het vak.
Schrijf nu de functie. Het krijgt het `aantal` als een parameter en reset de telling wanneer het op welk getal dan ook komt (in ons voorbeeld: 30). Je functie zou er als volgt uit moeten zien:
1export function counter1_change({data: count}) {
2  // Deze functie is toegevoegd vanuit het Eigenschappen en gebeurtenissen-paneel. Ga voor meer informatie naar http://wix.to/UcBnC-4
3  // Voeg hier je code voor deze gebeurtenis toe:
4  if (count > 30) {
5    $w('#counter1').reset();}
6}
Bekijk een voorbeeld of publiceer om je website in actie te zien.

Vond je dit artikel nuttig?

|

In dit artikel

  • Stap 1 | Maak een nieuwe widget in Blocks
  • Stap 2 | Voeg een layouter toe
  • Stap 3 | Voeg widget-elementen toe
  • Knoppen toevoegen
  • Het middelste getal toevoegen
  • De ID's wijzigen
  • Stap 4 | Voeg code toe aan je elementen
  • Stap 5 | Maak je widget aanpasbaar met de Widget API
  • Definieer de 'step'-eigenschap
  • Wijzig je code om rekening te houden met je nieuwe eigenschap
  • Test je eigenschap in de voorbeeldmodus
  • Voeg een openbare gebeurtenis toe aan je Widget API
  • Voeg een openbare functie toe aan je Widget API
  • Stap 6 | (Optioneel) Configureer het bewerkingstijdgedrag van je widget
  • Stap 7 | (Optioneel) Maak meer ontwerpvoorinstellingen
  • Stap 8 | Vang je gebeurtenis in de website-Editor