Vytvoření obrázkové komponenty DOM
Naposledy aktualizováno
24. 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řte kategorii nazvanou My Components (Moje komponenty).
a. Vytvořit složku s názvem mycomponent ve složce <HTML5Component> při prvním spuštění
b. Stáhněte připojený soubor myimage.zip a extrahujte obsah pod tímto souborem
složka mojekomponenty.
Kliknutím na sem stáhnete soubor myImage.Zip.
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.
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í.
(function($) {
// Zaregistrujte komponentu pomocí třídyName: my.Image,
// a prototyp s následujícími potlačeními
// getCreateOptions
// getCreateString
// getProperties
// getAtributy
$.anwidget("my.Image", {
možnosti: {
"viditelné": pravda,
"poloha": "absolutní"
},
_props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
_atributy: ["id", "src", "alt", "třída", "okraj"],
// Vrátit jedinečné ID s obrázkem prefix
// _widgetID je globální deklarovaný v anwidgetu
// Toto ID se použije pouze v případě, že uživatel nenastavil žádné ID instance komponenty v aplikaci Animate
// Jinak bude použito uživatelské jméno nakonfigurované
getCreateOptions: funkce {
return $.extend(this.options, {'id': "image" + _widgetID++ });
// Vrací řetězec pro vytvoření elementu DOM
// Pro obrázek stačí vytvořit značku <img>
getCreateString: funkce {
vrátit "<img>";
// Sada konfigurovatelných vlastností
getProperties: funkce {
vrátit tohle._props;
},
// Sada konfigurovatelných atributů
getAtributy: funkce {
vrátit toto._attrs;
}
});
})(jQuery);
Hodnota pole „source“ v souboru components.json je nastavena na „src/myimage.js“.
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 extrahujte obsah následujícího archivu a použijte ho pro svůj odkaz.
Kliknutím na sem stáhnete 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.
Čá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.
Pamatujeme si připojený stav elementu a pak zavoláme API základní třídy (pomocí tohoto._superPoužití(argumenty)). 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ří.
Vytvářejte interaktivní animace pomocí aplikace Animate
Navrhujte animace pro kreslené filmy, bannery, hry a web.
