Introductie
De Blocs Developer API stelt derden in staat om aangepaste Brics dat kan worden gebruikt binnen de Blocs ontwerpomgeving. De kerncomponenten van een custom Bric worden gemaakt met HTML, JS en CSS (u kunt meer lezen over gegevens en bestandsstructuur hier Er zijn verschillende API-protocollen die toegankelijk zijn via elke op javascript gebaseerde taal.
Let op: het Blocs developer API bevindt zich momenteel in de eerste Alpha-fase, dus sommige functies en documentatie kunnen veranderen.
Bric Bouwer
Blocs wordt geleverd met een ontwikkelaarstool genaamd de Bric Builder die is ontworpen om te helpen bij de ontwikkeling en creatie van custom Brics Het is toegankelijk via Ontwikkelaar> Bric Bouwer in het hoofdmenu. De Bric Builder is de gemakkelijkste manier om aan de slag te gaan met het maken van aangepaste Brics, wordt u aangeraden deze basisgids te volgen om uw eerste aangepaste versie te maken Bric.
Interfaces bouwen
De gebruikersinterface voor een custom Bric moet worden gemaakt met behulp van de Bric Bouwer tool Onder het interfacetabblad zijn er verschillende velden en bedieningselementen voor het toevoegen en beheren van de gebruikersinterface voor uw aangepaste bric.
Een item toevoegen
Om een nieuwe gebruikersinterfacecomponent toe te voegen, klikt u op de + knop in de rechterbovenhoek van de UI-lagenboom en selecteer het type interfacecomponent dat u wilt toevoegen.
Artikelen opnieuw ordenen
Gebruikersinterface-items kunnen opnieuw worden gerangschikt door de relevante laag in de lagenboom te slepen en neer te zetten.
Items dupliceren
Gebruikersinterface-items kunnen eenvoudig worden gedupliceerd Rechts klikken de relevante laag in de lagenboom en selecteren duplicaat vanuit het contextmenu.
Het is ook mogelijk om een volledig aangepaste versie te dupliceren Brics by Rechts klikken de Bric in de hoofdlijst aan de linkerkant van de Bric Bouwer en selecteren duplicaat vanuit het contextmenu.
Beschikbare UI-componenten
Titel - Een titel is een visuele tekstcomponent die geen functie aanroept.
Etiket met meerdere regels - Een label met meerdere regels is een visuele tekstcomponent die geen functie aanroept.
Tekstveld - Een tekstveld geeft een tekenreekswaarde door aan de toegewezen bewerkingsfunctie.
Stepper Veld - Een tekstveld met stepper-besturing geeft een geheel getal door aan de toegewezen bewerkingsfunctie.
Tekstgebied - Een tekstgebied geeft een tekenreekswaarde door aan de toegewezen bewerkingsfunctie.
Afbeelding Nou - Een afbeeldingsbron geeft een bestandspad door aan de toegewezen bewerkingsfunctie.
Drop-down menu - Een vervolgkeuzemenu geeft de geselecteerde integer-index en itemstringwaarde door aan de toegewezen bewerkingsfunctie.
checkbox - Een selectievakje geeft een bool-waarde door aan de toegewezen bewerkingsfunctie.
Knop - Een knop roept de toegewezen bewerkingsfunctie aan wanneer erop wordt geklikt.
Lettertype-selector - Een vervolgkeuzemenu dat een lettertypeselectie doorgeeft aan de toegewezen bewerkingsfunctie.
Paginakiezer - Een vervolgkeuzemenu dat een pagina-ID, naam, attribuut en de gehele index van het geselecteerde item doorgeeft aan de toegewezen bewerkingsfunctie. Pagina-ID's worden bij export verwisseld voor daadwerkelijke pagina-URL's, zolang de ID is opgeslagen onder het data-attribuut gegevens-blocs-bladzijde.
ID-kiezer – Een vervolgkeuzemenu dat een ID doorgeeft aan de toegewezen bewerkingsfunctie. Dit menu wordt automatisch gevuld met alle element-ID's van de huidige pagina.
Hype-kiezer - Een vervolgkeuzemenu dat een hype-projectnaam doorgeeft aan de toegewezen bewerkingsfunctie. Dit menu wordt automatisch gevuld met alle .hyperbronnen mappen toegevoegd aan het huidige project.
Kleur goed - Een kleurenbron geeft een hexadecimale waarde door aan de toegewezen bewerkingsfunctie.
Slider - Een schuifregelaar geeft een geheel getal door aan de toegewezen bewerkingsfunctie.
Horizontale uitlijningscontrole - Een uitgelijnd gesegmenteerd besturingselement geeft een geheel getal door aan de toegewezen bewerkingsfunctie (0 = Links | 1 = Midden | 2 = Rechts).
Verticale uitlijning - Een uitgelijnd gesegmenteerd besturingselement geeft een geheel getal door aan de toegewezen bewerkingsfunctie (0 = Boven | 1 = Midden | 2 = Onder).
Tekstuitlijning - Een uitgelijnd gesegmenteerd besturingselement geeft een geheel getal door aan de toegewezen bewerkingsfunctie (0 = Links | 1 = Midden | 2 = Rechts | 3 = Uitvullen).
Bediening apparaatselectie – Een apparaatgesegmenteerd besturingselement geeft een geheel getal door aan de toegewezen bewerkingsfunctie (1 = Desktop | 2 = Tablet | 3 = Mobiel Liggend | 4 = Mobiel).
Edge Select-bediening – Een edge select gesegmenteerd besturingselement geeft een geheel getal door aan de toegewezen bewerkingsfunctie (0 = Links | 1 = Boven | 2 = Rechts | 3 = Onder).
Richting Selecteer Controle – Een richtingsgesegmenteerde besturing geeft een geheel getal door aan de toegewezen bewerkingsfunctie (0 = Links | 1 = Omhoog | 2 = Rechts | 3 = Omlaag).
verdeler - Een scheidingslijn is een visuele component die geen functie aanroept.
UI-componentgegevensattributen
Elke gebruikersinterfacecomponent heeft verschillende gegevensattributen die worden gebruikt om belangrijke interactiekenmerken in te stellen, zoals de functie die wordt aangeroepen wanneer een component wordt gebruikt of de tooltip die wordt weergegeven wanneer de gebruiker de cursor over een component beweegt.
Titel - De titel voor het interface-element. Meestal weergegeven aan de linkerkant van de zijbalk.
Functie - De functienaam die wordt aangeroepen wanneer er interactie is met dit interface-element. Neem alleen de functienaam op, niet ().
Kenmerk - De attribuutnaam die wordt gebruikt om de gegevenswaarde voor dit interface-element op te slaan.
Waarde - De initiële gegevenswaarde van het kenmerk van dit interface-element.
Tooltip - De tooltip-tekst die wordt weergegeven wanneer de cursor zich boven de component bevindt.
Schrijffuncties
Om de HTML van een custom Bric, moet u eerst uw eigen (op javascript gebaseerde) bewerkingsfunctionaliteit schrijven. Deze bewerkingsfuncties zijn bedoeld voor gebruik binnen het Blocs ontwerpomgeving en worden niet gebruikt wanneer uw custom Bric is opgenomen in een geëxporteerd project. Deze bewerkingsfuncties moeten allemaal in een enkel JS-bestand worden geplaatst dat in de koptekst van uw aangepaste Brics index.html het dossier. Bewerkingsfuncties zijn via de gebruikersinterfacecomponenten aan een gebruikersinterfacecomponent gebonden functie data attribuut.
Wanneer er interactie is met een gebruikersinterfacecomponent, roept deze de aangewezen bewerkingsfunctie op en geeft er een waarde aan door samen met het doelattribuut waaraan de waarde is toegewezen. De gegevensnettolading voor de bewerkingsfunctie is afhankelijk van het type gebruikersinterfacecomponent dat wordt gebruikt om het op te roepen. Er moet een bewerkingsfunctie worden geschreven zodat deze de variabele payload correct declareert. In het volgende voorbeeld is de bewerkingsfunctie die door een selectievakje wordt gebruikt, ingesteld om eerst een BOOL-payload te ontvangen en als tweede de doelattribuutreekswaarde.
Voorbeeld:
function myCheckbox(isChecked,targetAttr)
{
if(isChecked)
{
// checkbox is checked
}
}
Foutopsporing op maat Brics
Blocs wordt geleverd met een aantal handige functies die zijn ingebouwd om te helpen bij het opsporen van fouten op maat Brics U kunt meer te weten komen over deze ingebouwde foutopsporingsfuncties voor hier.