Příručka uživatele Zrušit

Vytváření vlastních komponent: Příklady

Hledat

Naposledy aktualizováno 25. 5. 2023

Toto téma popisuje vzory vlastních komponent HTML5.

Tento článek vysvětluje, jak vytvářet vlastní komponenty. První příklad popisuje obrázkovou komponentu (kterou najdete i v Animate ), vysvětluje fungování tohoto aplikačního rozhraní a ukazuje postup při práci s ním. Druhý příklad popisuje, jak zabalit existující komponenty uživatelského rozhraní (jako třeba jQueryUI) a importovat je do Animate.

Vytvoření obrázkové komponenty DOM

Vytvořte kategorii nazvanou My Components (Moje komponenty).

a. Při prvním spuštění vytvořte ve složce <HTML5Components> složku pojmenovanou mycomponents.

b. Stáhněte přiložený soubor myimage.zip a rozbalte jeho obsah do složky

mycomponents.

Stáhnout

Získat soubor
Soubor myimage.zip si stáhnete kliknutím sem.

c. Restartujte aplikaci Animate.

Adresářová struktura ve složce mycomponents

Ve složce komponent byste nyní měli vidět novou kategorii s názvem My Components (Moje komponenty) a v ní novou komponentu s názvem My Image (Můj obrázek). Tuto komponentu můžete přetáhnout na plochu, nastavit vlastnosti zdroje obrázku a publikovat video, na kterém vlastní komponentu uvidíte v akci.

Metadata komponenty – components.js

Všimněte si, že kategorie je nastavena na hodnotu CATEGORY_MY_COMPONENTS. Názvy všech vlastností používají podobné klíče. Je to klíč pro lokalizovaný řetězec pro název kategorie. Pokud ve složce locale otevřete soubor strings.json, uvidíte v něm následující položky.

Častou chybou při úpravách tohoto souboru je nadbytečná čárka za posledním elementem v poli.

Hodnota pole icon je nastavena na Sp_Image_Sm. Ve složce assets naleznete následující dva soubory s předponou Sp_Image_Sm.

Jedná se o ikony pro tmavé a světlé uživatelské rozhraní.

Hodnota pole „source“ v souboru components.json je nastavena na „src/myimage.js“.

(function($) {    

// Registrace komponenty s className: my.Image,
 // a prototypem s následujícími přepisy 
 // 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;],
  
//Vrácení jedinečného ID s obrázkem předpony
  // _widgetID je globálně deklarované v anwidget
  // Toto ID se používá pouze v případě, že uživatel nenastavil žádné ID instance pro komponentu v Animate.
  // V opačném případě se použije uživatelem nakonfigurovaný název
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Vrácení řetězce pro vytvoření elementu modelu DOM
  //  Pro obraz stačí vytvořit tag <img>
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Sada konfigurovatelných vlastností
  getProperties: function() {
   vrátit toto._props;
  },
  
// Sada konfigurovatelných atributů
  getAttributes: function() {
   vrátit toto._attrs;
  }    
 });   
})(jQuery);

Poznámky vám pomohou snadněji pochopit kód.

Ve složce source se můžete podívat na další komponenty dodávané s aplikací Animate. Ve většině případů můžete některou z těchto komponent použít jako výchozí bod a následně ji konfigurovat podle svých požadavků.

Balení komponenty uživatelského rozhraní jQuery-UI

Tato část popisuje, jak zabalit ovládací prvek jQuery-UI a použít ho v Animate. Stejným způsobem lze zabalit libovolnou jinou komponentu z jakéhokoli jiného uživatelského rozhraní.

Nejdřív si vysvětlíme, jak v Animate funguje zabalená komponenta DatePicker (jedná se o ovládací prvek aplikačního rozhraní jQuery-UI). Stáhněte a rozbalte obsah následujícího archivu a použijte ho jako referenční zdroj.

Stáhnout

Získat soubor

Kliknutím sem si stáhněte soubor datepicker.zip.

Složka jquery-ui-1.12.0 je zdrojem aplikačního rozhraní jQuery UI. Obsahuje původní ovládací prvek DatePicker a jeho zdrojové soubory jako například obrázky a CSS styly, které chceme zabalit a použít je v Animate podobně jako jakékoli jiné komponenty HTML5. Tyto zdroje jsou nutné pouze pro místní náhled. Když v nastavení publikování zvolíte „hostované knihovny“, budete si moct stáhnout závislé zdroje ze sítě CDN.

V seznamu výše jsou dvě výchozí závislosti, knihovna jQuery a soubor anwidget.js. Soubor anwidget.js není v síti CDN, proto pro něj nejsou uvedeny žádné položky sítě CND.

Následující sada položek se vztahuje k dalším zdrojům, které jsou potřeba pro stažení ovládacího prvku datepicker z rozhraní jquery ui. Pokud byste balili jiný ovládací prvek z jiné knihovny, můžete podobně určit sadu závislostí pro tento prvek. Tyto závislé soubory jsou staženy před inicializací komponenty.

V části properties je zpřístupněna pouze jedna vlastnost s názvem label, která je svázána s vlastností label komponenty datepicker. Podobně je možné zpřístupnit jakékoli další vlastnosti, u nichž chceme uživatelům umožnit jejich konfiguraci ve vývojovém prostředí aplikace Animate. Při spuštění budou jednotlivé vlastnosti dostupné jako páry klíč–hodnota v poli options příslušné instance. Konfigurovanou hodnotu můžeme extrahovat a použít za běhu.

Hlavní zdrojový soubor: src/datepicker.js.

Části, které se liší od příkladu

getCreateString:

Ovládací prvek datepicker rozhraní jQuery-UI jej použije jako element textinput a za běhu jej převede na element datepicker. Takto tedy inicializujeme model DOM.
attach:

Pro tento ovládací prvek je potřeba tuto funkci potlačit. Toto API je voláno vždy, když je element připojován k modelu DOM. Nicméně kvůli tomu, jakým způsobem funguje podkladové běhové prostředí (v tomto případě createjs), může být toto API během rozpětí snímku voláno vícekrát.

Zapamatujeme si připojený stav podkladového elementu a poté voláme rozhraní API attach základní třídy (pomocí this._superApply(arguments)). Pokud je to první připojení elementu k nadřazenému modelu DOM, použije se volání podkladového ovládacího prvku rozhraní jQuery-UI k převedení modelu DOM komponenty na komponentu datepicker. Podrobné informace naleznete na adrese https://jqueryui.com/datepicker/.

Většina javascriptových ovládacích prvků funguje podobným způsobem. Stejnou techniku můžete použít k zabalení jakékoli zvolené komponenty a následnému použití v aplikaci Animate.
update: Aktualizaci potlačíme, aplikujeme vlastnosti CSS na kontejner div a aplikujeme atributy na skutečný prvek DOM.

Pokud potlačíte rozhraní API, jako jsou attach, detach nebo update, je potřeba, abyste zhodnotili výchozí implementaci základní třídy a v příslušný čas volali základní implementaci, jinak se inicializace komponenty nezdaří.

Související témata

Získejte pomoc rychleji a snáze

Nový uživatel?