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

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

 

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.

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

Adresářová struktura ve složce mycomponents
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

Kód Components.js
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.

Podrobné informace o kategorii
Podrobné informace o kategorii

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.

Hodnota pole icon
Hodnota pole icon

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);
(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);
(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

Struktura rozbaleného obsahu
Struktura rozbaleného obsahu

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. 

Kód Components.js
Components.js

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.
Hlavní zdrojový soubor: src/datepicker.js.

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

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

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

  3. 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ří.

Získejte pomoc rychleji a snáze

Nový uživatel?