W tym artykule wyjaśniono przykładowy własny składnik napisany w języku HTML5.

W tym artykule omówiono tworzenie własnych składników. Pierwszy przykład ilustruje składnik obrazu (dostępny również w programie Animate CC) i pozwala zapoznać się z platformą oraz etapami programowania. W drugim przykładzie można zapoznać się ze sposobem opakowywania istniejących składników interfejsu użytkownika (takich jak jQuery) i importowania ich do programu Animate CC.

  1. Tworzenie składnika obrazu DOM

    Utwórz kategorię o nazwie „My Components”.

    A. Najpierw w folderze <HTML5Components> utwórz folder o nazwie mycomponents.

    B. Pobierz dołączony plik myimage.zip i rozpakuj zawartość do nowego folderu

    mycomponents.

    Pobierz

    c. Uruchom ponownie program Animate.

Struktura katalogów w folderze mycomponents

W folderze składników powinna się pojawić nowe kategoria o nazwie „My Components” z nowym składnikiem o nazwie My Image. Aby sprawdzić sposób działania własnego składnika, przeciągnij go na stół montażowy, ustaw właściwości źródła obrazu i opublikuj. 

Metadane składnika — components.js

Components.js

Zwróć uwagę, że ustawiono kategorię CATEGORY_MY_COMPONENTS. Nazwy poszczególnych właściwości używają podobnych kluczy. To jest klucz do zlokalizowanego ciągu w nazwie kategorii. Po otwarciu pliku strings.json w folderze locale pojawią się następujące pozycje.

Uwaga:

Najczęstszym błędem przy edycji tego pliku jest pozostawienie niepotrzebnego przecinka na końcu ostatniej pozycji tablicy.

Szczegóły kategorii

Polu icon nadano wartość Sp_Image_Sm. W folderze assets znajdują się dwa pliki PNG z przedrostkiem Sp_Image_Sm.

Wartość pola icon

Są to ikony do ciemnego i do jasnego interfejsu użytkownika.

Polu source w pliku components.json nadano wartość „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 CC
		// 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);

W zrozumieniu kodu pomagają umieszczone w nim komentarze. 

Warto zapoznać się z kodem źródłowym innych składników dołączonych do programu Animate. W większości przypadków można ich użyć jako punktu startowego do przygotowania własnego składnika do indywidualnych wymagań.

Opakowywanie składnika interfejsu użytkownika jQuery

W tej sekcji przedstawiono sposób opakowania widżetu interfejsu użytkownika jQuery i użycia go w programie Animate CC. Za pomocą przedstawionych mechanizmów można następnie opakować dowolny inny istniejący składnik z innej platformy interfejsu użytkownika.

Przyjrzymy się spakowanemu składnikowi DatePicker z programu Animate CC, który jest widżetem interfejsu użytkownika jQuery. Pobierz i rozpakuj zawartość poniższego archiwum. Będzie ona przydatna jako odniesienie.

Pobierz

Struktura rozpakowanej zawartości

W folderze jquery-ui-1.12.0 znajduje się kod źródłowy platformy interfejsu użytkownika jQuery z pierwotną wersją widżetu DatePicker i dodatkowymi zasobami (obrazami i plikami CSS) do opakowania. Pozwoli to na użycie tego widżetu w programie Animate CC tak samo jak dowolnego innego składnika HTML5. Wymagane jest to tylko przy podglądzie lokalnym. Jeśli w ustawieniach publikowania używane są biblioteki na serwerach, wymagane źródła zależne można pobrać z sieci dostarczania treści (CDN). 

Components.js

Domyślnie istnieją dwa elementy zależne: jQuery oraz anwidget.js. Ponieważ elementu anwidget.js nie ma w sieci CDN, nie istnieje dla niego odpowiedni wpis.

Następnym zbiorem pozycji są inne zasoby wymagane do wczytania widżetu datepicker z elementu jquery-ui. W przypadku opakowywania widżetu z dowolnej innej biblioteki zbiór zasobów zależnych można wprowadzić w podobny sposób. Elementy te są pobierane przed zainicjowaniem składnika.

W sekcji properties uwidoczniono wyłącznie jedną właściwość o nazwie label połączoną z właściwością label składnika datepicker. W analogiczny sposób można uwidocznić inne właściwości, udostępniając je użytkownikowi do konfiguracji w środowisku projektowym programu Animate. Podczas pracy każda z tych właściwości będzie widoczna jako para klucz-wartość w tabeli options wystąpienia. Istnieje możliwość rozpakowania skonfigurowanej wartości i zastosowania jej podczas działania aplikacji.

Główny plik źródłowy: src/datepicker.js.

Sekcje z różnicami względem przykładu

  1. getCreateString:

    Widżet datepicker z biblioteki jQuery-UI konwertuje taki element do wprowadzania tekstu — w czasie wykonywania staje się on elementem date-picker. Dlatego inicjowany jest model DOM.

  2. attach:

    Tę funkcję interfejsu API należy nadpisać w tym widżecie. Funkcja ta jest wywoływana przy podłączaniu elementu do modelu DOM. Jednak z powodu różnic w sposobie pracy bazowego środowiska wykonawczego (w tym przypadku: createjs) ten interfejs API może być wywoływany wielokrotnie w określonym czasie.

    Zapamiętujemy stan podłączonego elementu bazowego, a następnie z klasy bazowej wywołujemy interfejs API podłączania (za pomocą wywołania this._superApply(argumenty)). Jeśli element jest pierwszy raz podłączany do nadrzędnego modelu DOM, należy za pomocą wywołania widżetu jQuery-UI przekonwertować model DOM składnika na element datepicker. Więcej informacji na ten temat podano na stronie https://jqueryui.com/datepicker/

    Większość widżetów języka JavaScript działa w podobny sposób. Za pomocą tej samej metody można opakować dowolny wybrany element i wprowadzić go do programu Animate CC.

  3. Aktualizacja: Nadpisujemy metodę update i stosujemy właściwości CSS do kontenerowego elementu div, a atrybuty — do rzeczywistego elementu modelu DOM.

    Uwaga:

    Przy nadpisywaniu metod interfejsu API — takich jak attach, detach lub update — należy ocenić domyślne wdrożenie klasy bazowej oraz wywołać w odpowiednim momencie wdrożenie bazowe. W przeciwnym razie nie powiedzie się zainicjowanie składnika.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online