Creazione di componenti personalizzati: esempi

Cerca

Ultimo aggiornamento il 24 mag 2023

Animate

Apri app

Guida utente di Adobe Animate

Introduzione ad Animate

Animazione

Interattività

Area di lavoro e flusso di lavoro

File multimediali e video

Piattaforme

Esportazione e pubblicazione

Risoluzione dei problemi

Questo articolo descrive un componente HTML5 personalizzato di esempio.

Questo articolo descrive come creare componenti personalizzati. Il primo esempio è un componente immagine (fornito con Animate ), per meglio comprendere la struttura e i passaggi di sviluppo necessari. Il secondo esempio descrive come effettuare il wrapping di un componente di interfaccia utente esistente (ad esempio, jQueryUI) e importarlo in Animate.

Creazione di un componente immagine DOM

Crea la categoria My Components.

a. Create una cartella denominata mycomponents all’interno della cartella <HTML5Components> nella prima esecuzione

b. Scaricate il file allegato myimage.zip ed estraetene il contenuto all'interno della

cartella mycomponents.

Scarica

Ottieni file
Fate clic qui per scaricare il file myimage.zip.

c. Riavviate Animate.

Struttura di directory nella cartella mycomponents

Ora dovrebbe essere visibile la nuova categoria “My Components” nella cartella dei componenti, e al suo interno il nuovo componente “My Image”. Puoi trascinarlo sullo stage, impostare la proprietà di origine dell’immagine e pubblicare il filmato per vedere il componente personalizzato in azione.

Metadati del componente - components.js

La categoria è impostata su CATEGORY_MY_COMPONENTS. Anche i nomi delle proprietà usano chiavi simili. Questa è la chiave per la stringa localizzata per il nome della categoria. Se apri il file strings.json dalla cartella “locale”, trovi le seguenti voci.

L’errore più comunemente commesso quando si modifica questo file è l’aggiunta di una virgola finale dopo l’ultimo elemento dell’array.

Il valore del campo dell’icona è impostato su Sp_Image_Sm. Nella cartella delle risorse trovi i due seguenti file png, con il prefisso Sp_Image_Sm.

Si tratta delle icone per le modalità di interfaccia utente scura e chiara.

Il valore del campo ‘source’ in components.json è impostato su ‘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);

Il codice contiene dei commenti per facilitarne la comprensione.

Dai un’occhiata al codice sorgente degli altri componenti forniti con Animate. Nella maggior parte dei casi, puoi utilizzare uno di tali componenti come punto di partenza, da configurare in base alle tue esigenze.

Wrapping di un componente jQuery-UI

Questa sezione descrive come eseguire il wrapping di un widget jQuery-UI e come utilizzarlo in Animate. Gli stessi concetti possono essere applicati al wrapping di qualsiasi altro componente esistente da altri framework di interfaccia utente.

Esaminiamo il componente Selettore data fornito con Animate come widget jQuery-UI. Scaricate ed estraete il contenuto del seguente archivio e utilizzatelo come riferimento.

Scarica

Ottieni file

Fate clic qui per scaricare il file datepicker.zip.

La cartella jquery-ui-1.12.0 è l’origine per il framework jQuery UI contenente il widget Selettore data originale e le relative risorse, come immagini e css, da includere nel wrapping e da utilizzare in Animate come qualsiasi altro componente HTML5. Questo è necessario solo per l’anteprima locale; se utilizzi “Librerie in hosting” nelle impostazioni Pubblicazione, puoi usare CDN per scaricare le origini dipendenti.

Esistono due dipendenze predefinite, jQuery e anwidget.js. Poiché anwidget.js non si trova sul CDN, non è presente alcuna voce CDN per lo stesso.

Il successivo set di voci riguarda le altre risorse richieste per il caricamento del widget Selettore data da jQuery UI. Se devi eseguire il wrapping di un widget da qualsiasi altra libreria, puoi specificare in modo analogo il relativo set di dipendenze. Queste dipendenze vengono scaricate prima dell’inizializzazione del componente.

Nella sezione proprietà, è stata esposta solo una proprietà denominata “label”, associata alla proprietà label del componente Selettore data. Allo stesso modo, è possibile esporre anche le altre proprietà, a seconda delle possibilità di configurazione che si desidera offrire all’utente nell’ambiente di authoring di Animate. In fase di runtime, ognuna di queste sarà disponibile come coppia chiave-valore nell’array delle opzioni per l’istanza. È possibile estrarre il valore configurato e applicarlo in fase di runtime.

File origine principale: src/datepicker.js.

Sezioni che differiscono dall’esempio

getCreateString:

Il widget Selettore data da jQuery-UI converte tale elemento di immissione testo in un elemento Selettore data in fase di runtime. Il DOM viene quindi inizializzato di conseguenza.
attach:

Dobbiamo escludere questa funzione per il widget. Questa API viene chiamata ogni volta che l’elemento viene allegato al DOM. Tuttavia, a causa del modo in cui funziona il runtime sottostante (in questo caso, createjs) l’API può essere chiamata più volte durante l’estensione di un fotogramma.

Lo stato “attached” dell’elemento sottostante viene ricordato e viene quindi chiamata l’API attach della classe base (mediante this._superApply(arguments)). Se è la prima volta che si allega l’elemento al DOM di livello superiore, è necessario usare la chiamata del widget jQuery-UI sottostante per convertire il DOM del componente in un selettore data. Consulta https://jqueryui.com/datepicker/

La maggior parte dei widget Javascript funziona in modo analogo. È possibile usare la stessa tecnica per effettuare il wrapping di qualsiasi componente e portarlo in Animate allo stesso modo.
Aggiornamento: dobbiamo escludere la funzione update e applicare le proprietà css al div del contenitore e gli attributi all’elemento DOM effettivo.

Quando si escludono le API quali attach, detach o update, occorre verificare l’implementazione predefinita della classe di base e chiamare l’implementazione di base al momento appropriato. In caso contrario l’inizializzazione dei componenti potrebbe non riuscire.

Altri argomenti correlati

Ottieni supporto in modo più facile e veloce

Nuovo utente?