Maken van een DOM-afbeeldingscomponent
Laatst bijgewerkt op
24 mei 2023
Gebruik dit artikel om een voorbeeld van een aangepaste HTML5-component te begrijpen.
In dit artikel wordt beschreven hoe u aangepaste componenten maakt. Het eerste voorbeeld beschrijft de afbeeldingscomponent (die ook wordt geleverd met Animate ) en het proces om het framework en de stappen die nodig zijn bij de ontwikkeling, te begrijpen. In het tweede voorbeeld wordt beschreven hoe u een bestaande UI-component (zoals jQueryUI) kunt verpakken en importeren naar Animate.
Een categorie maken met de naam Mijn componenten.
een. Creeer een omslag genoemd mycomponents onder <HTML5Components> omslag in eerste looppas
b. Download het in bijlage myimage.zip dossier en haal de inhoud onder uit
mijncomponenten omslag.
Klik hier om myImage.Zip dossier te downloaden.
c. Start Animate opnieuw.
U moet nu dan een nieuwe categorie zien met de naam „My Components” in de componentenmap en een nieuwe component met de naam My Image eronder. U kunt dit in het werkgebied slepen, de eigenschap van de bronafbeelding instellen en de film publiceren om de aangepaste componenten in actie te zien.
Metadata van component - components.js
Houd er rekening mee dat de categorie is ingesteld op CATEGORY_MY_COMPONENTS. De namen van elk van de eigenschappen gebruiken ook vergelijkbare sleutels. Dit is de sleutel voor de gelokaliseerde tekenreeks voor de categorienaam. Als u strings.json opent in de lokale map, worden de volgende items getoond.
De meest gangbare fout tijdens het bewerken van dit bestand is een komma na het laatste element in de array.
De waarde van het pictogramveld is ingesteld op Sp_Image_Sm. Als u naar de map assets gaat, kunt u de volgende twee png-afbeeldingen zien met het voorvoegsel Sp_Image_Sm.
Dit zijn de pictogrammen voor een donkere en lichte UI.
(function($) {
// Registreer een component met de className: my.Image,
// en prototype maken met de volgende overschrijvingen
// getCreateOptions
// getCreateString
// getProperties
// getAttributes
$.anwidget("my.image", {
opties: {
'visible': true,
"positie": 'absoluut'
},
_props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
_attrs: ["id", "src", "alt", "class", "border"],
// Retourneer een unieke id met de voorvoegselafbeelding
// _widgetID is een algemeen gedeclareerd in een widget
// Deze id wordt alleen gebruikt als de gebruiker geen instantie-id heeft ingesteld voor de component in Animate.
// Anders wordt de door de gebruiker ingestelde naam gebruikt.
getCreateOptions: function() {
return $.extend(this.options, { 'id': "image" + _widgetID++ });
},
// Retourneer de tekenreeks voor het maken van het DOM-element
// Voor afbeeldingen hoeft u alleen de tag <img> te maken.
getCreateString: function() {
return "<img>";
},
// Set configureerbare eigenschappen
getProperties: function() {
retourneert deze._props;
},
// Set configureerbare kenmerken
getAttributes: function() {
return this._attrs;
}
});
})(jQuery);
De waarde van het 'source'-veld in components.json is ingesteld op 'src/myimage.js'.
U kunt de opmerkingen in de code volgen om het gemakkelijk te begrijpen.
Kijk zeker ook eens naar de bron van de andere componenten die worden meegeleverd met Animate. In de meeste gevallen kunt u een daarvan gebruiken als beginpunt en vervolgens configureren volgens uw eigen vereisten.
Het verpakken van een jQuery-UI component
Dit gedeelte beschrijft hoe u een jQuery-UI-widget kunt verpakken en gebruiken in Animate. Dezelfde concepten kunnen worden gebruikt om een andere bestaande component uit eender welk ander UI-framework te verpakken.
Laten we eens kijken naar de verpakte DatePicker-component met Animate die een jQuery-UI-widget is. Download en extraheer de inhoud van het volgende archief en gebruik het ter referentie.
Klik hier om het dossier datepicker.zip te downloaden.
De map met de naam jquery-ui-1.12.0 is de bron voor het jQuery UI-framework dat de originele DatePicker-widget en de bijbehorende bronnen, zoals afbeeldingen en css, bevat om te verpakken en gebruiken in Animate zoals elke andere HTML5-component. Dit is alleen vereist voor lokale voorvertoning. Als u “gehoste bibliotheken” gebruikt in de publicatie-instellingen, hebt u de optie om de cdn te gebruiken om de afhankelijke bronnen te downloaden.
Er zijn twee standaard afhankelijkheden, jQuery en anwidget.js. Aangezien anwidget.js niet in de CDN zit, hebben we er geen enkel CDN-item voor.
De volgende reeks items is voor de andere bronnen die vereist zijn voor het laden van het datepicker-widget uit de jquery ui. Als u een widget van een andere bibliotheek in een pakket opneemt, kunt u de set van afhankelijkheden ook opgeven. Deze afhankelijkheden worden gedownload voordat de component wordt geïnitialiseerd.
In het gedeelte eigenschappen hebben we slechts één eigenschap met de naam label beschikbaar gemaakt, die aan de label-eigenschap voor de date-picker component is verbonden. Op dezelfde manier kunnen we de andere eigenschappen ook beschikbaar maken, waarvan we willen dat de gebruiker ze kan configureren in ontwerpomgeving van Animate. Bij uitvoering wordt elk van deze beschikbaar als sleutelwaardepaar in de array opties voor de instantie. We kunnen de geconfigureerde waarde extraheren en deze toepassen bij uitvoering.
Secties die van het voorbeeld verschillen
getCreateString:
Het datepicker-widget van de jQuery-UI heeft een dergelijk invoertekstelement en zet dit om in een date-picker element bij uitvoering. Daarom wordt dienovereenkomstig DOM geïnitialiseerd.
attach:
We moeten deze functie voor deze widget overschrijven. Deze API wordt aangeroepen wanneer het element aan de DOM wordt gekoppeld. Vanwege de manier waarop de onderliggende runtime (in dit geval createjs) werkt, kan deze API meerdere keren tijdens een framereeks worden aangeroepen.
We herinneren ons de verbonden status van het onderliggende element en roepen vervolgens de API voor de attach van de basisklasse aan (met deze._superApply(arguments)). Als dit de eerste keer is dat we het element aan de ouder DOM toevoegen, dan gebruiken we de onderliggende aanroep voor widget jQuery-UI om de DOM van onze component naar een datumkiezer te converteren. Zie - https://jqueryui.com/datepicker/
Het grootste deel van javascript-widgets werkt op een vergelijkbare manier. U kunt dezelfde techniek gebruiken om een willekeurige component van uw keuze te verpakken en op dezelfde manier in Animate te brengen.
Update: We overschrijven update en passen de css-eigenschappen toe op de container div en kenmerken op het echte DOM-element.
Wanneer u API's, zoals band toevoegt, weghaalt of bijwerkt, controleert u de standaard implementatie van de basisklasse en roept u de basisimplementatie op het gewenste moment op omdat de initialisatie component anders kan mislukken.
Interactieve animaties maken met Animate
Ontwerp animaties voor cartoons, banners, games en het web.
