Tento článek vysvětluje, jak vytvářet vlastní komponenty. První příklad popisuje obrázkovou komponentu (kterou najdete i v Animate CC), 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 CC.
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.
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.
Poznámka:
Č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.
(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);
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ů.
Tato část popisuje, jak zabalit ovládací prvek jQuery-UI a použít ho v Animate CC. 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 CC 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
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 CC 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.
-
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 CC.
-
update: Aktualizaci potlačíme, aplikujeme vlastnosti CSS na kontejner div a aplikujeme atributy na skutečný prvek DOM.
Poznámka:
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ří.
Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.