Skapa anpassade komponenter: Exempel

Sök

Senast uppdaterad den 24 maj 2023

Animate

Öppna appen

Användarhandbok om Adobe Animate

Introduktion till Animate

Animering

Interaktivitet

Arbetsyta och arbetsflöde

Multimedia och video

Plattformar

Exportera och publicera

Felsökning

Läs den här artikeln som beskriver vad en anpassad HTML5-exempelkomponent är.

I den här artikeln beskrivs hur du skapar egna komponenter. Det första exemplet beskriver bildkomponenten (som tillhandahålls med Animate) och processen för att förstå ramverket samt stegen som används under utvecklingen. Det andra exemplet beskriver hur du kapslar en befintlig UI-komponent (som jQueryUI) och importerar den till Animate.

Skapa en DOM-bildkomponent

Skapa en kategori som heter Mina komponenter.

a. Skapa en mapp med namnet minakomponenter i mappen <HTML5Components> i den första körningen.

b. Ladda ned den bifogade filen myimage.zip och extrahera innehållet till

mappen minakomponenter.

Hämta

Hämta fil
Klicka här för att ladda ned filen myimage.zip.

c. Starta om Animate.

Katalogstruktur i mappen minakomponenter

Du bör nu se en ny kategori med namnet ”Mina komponenter” i komponentmappen och en ny komponent med namnet Min bild under den. Du kan dra och släppa den på scenen, ange egenskap för bildkälla och publicera filmen för att se hur den anpassade komponenten fungerar.

Komponentmetadata – components.js

Notera att kategorin är inställd på CATEGORY_MY_COMPONENTS. Namnen för var och en av egenskaperna använder också liknande nycklar. Det här är nyckeln för den lokaliserade strängen för kategorinamnet. Om du öppnar strings.json från mappen locale ser du följande poster.

Det vanligaste felet när den här filen redigeras är ett överflödigt komma efter det sista elementet i arrayen.

Värdet för ikonfältet är angett som Sp_Image_Sm. Om du öppnar mappen assets ser du följande två PNG-filer med prefixet Sp_Image_Sm.

Detta är ikonerna för det ljusa och mörka användargränssnittet.

Värdet på fältet ”source” i components.json är angett som ”src/myimage.js”.

(function($) {

// Register a component with the className: my.Image,

// and prototype with the following overrides

// getCreateOptions

// getCreateString

// getProperties

// getAttributes

$.anwidget("my.Image", {

options: {

'visible': true,

'position': 'absolute'

_props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],

_attrs: ["id", "src", "alt", "class", "border"],

// Return a unique ID with the prefix image

// _widgetID is a global declared in anwidget

// This id is used only if the user has not set any instance ID for the component in Animate

// Otherwise the user configured name is used

getCreateOptions: function() {

return $.extend(this.options, { 'id': "image" + _widgetID++ });

// Return the string for creating the DOM element

// For image we just need to create the <img> tag

getCreateString: function() {

return "<img>";

// Set of configurable properties

getProperties: function() {

return this._props;

// Set of configurable attributes

getAttributes: function() {

return this._attrs;

}

});

})(jQuery);

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

Kommentarerna i koden förklarar hur det hänger ihop.

Titta gärna på källan för de andra komponenterna som ingår i Animate. I de flesta fall kan du använda en av dessa som utgångspunkt och sedan konfigurera den för dina egna behov.

Kapsla in en jQuery-gränssnittskomponent

I det här avsnittet visas hur du kapslar en jQueryUI-widget och använder den i Animate. Samma koncept kan användas för att kapsla in andra befintliga komponenter från andra gränssnittsramverk.

Så här fungerar den förpackade DatePicker-komponenten som är en jQueryUI-widget i Animate Hämta och extrahera innehållet i följande arkiv och använd det som referens.

Hämta

Hämta fil

Klicka här för att ladda ned filen datepicker.zip.

Mappen med namnet jquery-ui-1.12.0 är källan för jQuery-gränssnittsramverket, som innehåller den ursprungliga DatePicker-widgeten och dess resurser (som bilder och CSS-filer) som ska kapslas in och användas i Animate som vanliga HTML5-komponenter. Det här krävs bara för lokal förhandsgranskning. När du använder hanterade bibliotek i publiceringsinställningarna kan du välja att använda nätverket för innehållsleverans (CDN) för att hämta de beroende källorna.

Det finns två standardberoenden, jQuery och anwidget.js. Eftersom anwidget.js inte finns i nätverket för innehållsleverans finns det inte någon CDN-post för den.

Nästa uppsättning poster är för de andra resurser som krävs för att läsa in DatePicker-widgeten från jquery-gränssnittet. Om du kapslar in en widget från något annat bibliotek kan du ange uppsättningen med beroenden för den på ett liknande sätt. Dessa beroenden laddas ned innan komponenten initieras.

I egenskapsavsnittet har vi bara exponerat en egenskap med namnet label, som är bunden till label-egenskapen för datumväljarkomponenten. På samma sätt kan vi exponera de andra egenskaperna beroende på vilka vi vill att användaren ska kunna konfigurera i Animate. Vid körning är var och en av dessa tillgänglig som ett nyckel-/värdepar i instansens options-array. Vi kan extrahera det konfigurerade värdet och använda det vid körning.

Avsnitt som skiljer sig från exemplet

getCreateString:

I DatePicker-widgeten från jquery-gränssnittet konverteras ett sådant indatatextelement till ett datumväljarelement vid körning. Därför initierar vi DOM därefter.
attach:

Vi måste åsidosätta den här funktionen för den här widgeten. Detta API anropas när elementet kopplas till DOM. På grund av den underliggande körningsmiljön (createjs i detta fall) kan detta API anropas flera gånger under ett intervall.

Vi minns den kopplade statusen för det underliggande elementet och anropar sedan basklassens API ”attach” (med hjälp av this._superApply(arguments)). Om det är första gången som elementet kopplas till överordnad DOM använder vi den underliggande jQuery-gränssnittswidgetens anrop för att konvertera komponentens DOM till en datumväljare. Läs mer på https://jqueryui.com/datepicker/

De flesta av javascript-widgetarna fungerar på ungefär samma sätt. Du kan kapsla in vilken komponent som helst och hämta in den till Animate på samma sätt.
Uppdatering: Uppdateringen åsidosätts och CSS-egenskaperna används på container div och attributen på det faktiska DOM-elementet.

När du åsidosätter API:er som attach, detach eller update bör du utvärdera basklassens standardimplementering och anropa basimplementeringen vid rätt tidpunkt annars kan komponentinitieringen misslyckas.

Liknande innehåll

Få hjälp snabbare och enklare

Ny användare?