j-Importer - Total.js

j-Importer je súčasťou client-side UI knižnice jComponent od Total.js. Viac informácií o tomto komponente môžete nájsť na webe componentator.com alebo v GitHub repozitári.

Importer je komponent vhodný na použitie v prípade, že chcete importovať HTML šablóny, skripty alebo štýly pre váš web. Tieto importy môžeme vykonávať dynamicky na základe podmienky na ceste v danom komponente.

V tomto blogu si ukážeme ako používať j-Importer na importovanie vyskakovacích formulárov a v ďalšom blogu si predstavíme ako s takýmto formulárom pracovať. Tieto dva blogy budú spolu súvisieť a pre lepšie pochopenie celého konceptu si prosím prečítajte oba.

Ako používať j-Importer

Ako prvé je potrebné vedieť ako pracovať s UI knižnicou jComponent. Podrobnejšie som sa tomu venoval v predchádzajúcom blogu, pre viac informácií si odporúčam prečítať blog jComponent - Total.js.

Inicializácia

V prípade komponentu j-Importer môžeme inicializovať toľko komponentov, koľko potrebujeme. V tomto príklade si ukážeme inicializáciu jedného komponentu j-Importer a rovnaký postup by sme použili aj v prípade, že by sme ho chceli použiť viac krát.

V našom prípade budeme importovať jeden vyskakovací formulár na našu webovú stránku po kliknutí na tlačidlo Open form. Tento formulár bude v tomto prípade prázdny a viac si o ňom povieme v nasledujúcom blogu.

Príklad:

<ui-component name="importer" path="*form" config="if:testform;url:../forms/test.html;reload:?/reload"></ui-component>

Použili sme rovnakú HTML značku ako pri predchádzajúcich komponentoch - ui-component. V príklade môžeme vidieť tri atribúty, ktorými sú name, path a config. V prvom atribúte sme zapísali hodnotu importer, pretože to je názov komponentu, ktorý chceme použiť. V druhom atribúte, ktorým je path máme hodnotu *form, kde *(hviezdička) bude na pozadí zmenená na cestu common. To znamená, že výsledná cesta pre tento komponent bude common.form. V konfigurácií máme nastavenia if s hodnotou testform, čo je podmienka pre importovanie (hodnota na zadanej ceste komponentu sa musí zhodnovať s hodnotou v nastavení if). V nastavení url sme zadali hodnotu ../forms/test.html, čo je cesta k súboru, ktorý chceme importovať (v tomto prípade je to súbor test.html v adresári forms). Posledným nastavením je reload s hodnotou ?/reload.

Takto zapísaný komponent znamená, že keď na ceste common.form bude hodnota testform, tak súbor test.html z adresára forms bude importovaný do našej webovej stránky a v ňom sa vyvolá funkcia reload.

Teraz keď máme pripravený náš komponent, tak môžeme vytvoriť tlačidlo a funkciu, ktorá vyvoláme po kliknutí na toto tlačidlo.

<button class="exec open" data-exec="?/openform">Open form</button>

Naše tlačidlo bude obsahovať text Open form a po kliknutí naň sa vyvolá funkcia ?/openform v JavasScript PLUGINe.

exports.openform = function() {
  SET('*form', 'testform');
};

Vo funkcii openform môžeme vidieť, že jediné čo potrebujeme urobiť je nastaviť na cestu common.form hodnotu testform a tým vyvoláme náš j-Importer.

Príklád kódu v súbore test.html:

<ui-component name="box" path="*form" config="if:CLASS;title:TEST;width:350;reload:?/reload" plugin="CLASS" class="hidden CLASS">
  <div class="padding">
    CLASS
  </div>
</ui-component>

V importovanom súbore sme použili UI komponent j-Box, o ktorom budeme viac hovoriť v nasledujúcom blogu. V tomto prípade slúži len ako ukážka.

Teraz sa nám po kliknutí na tlačidlo Open form zobrazí j-Box vďaka komponente j-Importer.

Ak si iste spomínate, pri definovaní komponentu j-Importer sme použili v konfigurácií aj nastavenie reload. Môžeme si teda rozšíriť náš príklad a pridať funkciu exports.reload do nášho súboru test.html. Táto funkcia sa vyvolá automaticky po importovaní daného súboru.

PLUGIN(function(exports) {
  exports.reload = function() {
    console.log('HERE');
  };
});

Po importovaní súboru chceme v konzole zobraziť text HERE.

Ako môžeme vidieť v príklade, text HERE sa nám zobrazí v konzole vždy po vyvolaní formulára. To znamená, že funkcia reload z JavaScript PLUGINu v súbore test.html je vyvolaná komponentom j-Importer. To nám poskytuje rôzne možnosti využitia ako napríklad načítanie dát do formulára alebo čohokoľvek, čo chceme zobraziť v komponente j-Box. Nemusí to byť len formulár, ale rôzne vyskakovacie okná, upozornenia a podobne.

Verím, že ste sa v tomto blogu naučili niečo nové, ale nezabudnite, že toto bola len ukážka a s týmyto komponentami toho môžete dosiahniť oveľa viac.

K dispozícií je aj video tutorial v anglickom jazyku: