Vytvoření obrázkové komponenty DOM
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
c. Restartujte aplikaci Animate.
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.
Č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("my.Image", { options: { 'visible': true, 'position': 'absolute' }, _props: ["left", "top", "width", "height", "position", "transform-origin", "transform"], _attrs: ["id", "src", "alt", "class", "border"], //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': "image" + _widgetID++ }); }, // Vrácení řetězce pro vytvoření elementu modelu DOM // Pro obraz stačí vytvořit tag <img> getCreateString: function() { return "<img>"; }, // 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ů.
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
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.
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ří.
Přihlaste se ke svému účtu.