Podręcznik użytkownika Anuluj

Tworzenie własnych składników: przykłady

Szukaj

Ostatnia aktualizacja 25 maj 2023

W tym artykule omówiono 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) 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 jQueryUI) i importowania ich do programu Animate.

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

Pobierz plik
Kliknij tutaj, aby pobrać plik myimage.zip.

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

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.

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

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

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

Polu source w pliku components.json nadano wartość „src/myimage.js”.

(function($) {    

// Zarejestruj składnik w klasie className: my.Image,
 // i prototyp za pomocą następujących nadpisań 
 // 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;],
  
// Zwraca unikatowy identyfikator z obrazem prefiksu
  // Identyfikator _widgetID jest globalnie deklarowany w elemencie anwidget.
  // Ten identyfikator jest używany tylko wtedy, gdy użytkownik nie ustawił żadnego identyfikatora wystąpienia dla składnika w programie Animate.
  // W przeciwnym razie jest używana nazwa skonfigurowana przez użytkownika.
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Zwraca ciąg umożliwiający utworzenie elementu DOM.
  // W przypadku obrazu musimy utworzyć tylko znacznik <img>.
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Zestaw konfigurowalnych właściwości
  getProperties: function() {
   return this._props;
  },
  
// Zestaw konfigurowalnych atrybutów
  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. 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, który jest widżetem interfejsu użytkownika jQuery. Pobierz i rozpakuj zawartość poniższego archiwum. Będzie ona przydatna jako odniesienie.

Pobierz

Pobierz plik

Kliknij tutaj, aby pobrać plik datepicker.zip.

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 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).

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

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.
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 składnik i wprowadzić go do programu Animate.
Aktualizacja: Nadpisujemy metodę update i stosujemy właściwości CSS do kontenerowego elementu div, a atrybuty — do rzeczywistego elementu modelu DOM.

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

Więcej materiałów tego typu

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?