j-Box - 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.

j-Box je skvelý flexibilný UI komponent, ktorý môže byť použitý na implementáciu rôznych vyskakovacích okien vo vašej webovej aplikácií. Môže byť použitý či už pre formuláre, upozorenia, galérie alebo čokoľvek čo potrebujete zobraziť ako vyskakovacie okno.

V predchádzajúcom blogu, ktorým bol o UI komponente j-Importer sme si malým príkladom predstavili už aj komponent j-Box. V tomto blogu budeme pokračovať s kódom z minulého blogu, pretože tam už máme pripravený aj komponent j-Importer pre náš j-Box. Ak ste sa teda dostali najprv k tomuto blogu, tak si prosím prečítajte najprv ten predchádzajúci o UI komponente j-Importer aby ste boli schopný plne pochopiť prepojenie medzi nimi a prečo sme ich použili spoločne.

V tomto príklade sa budeme venovať vytvoreniu vyskakovacieho formulára pomocou komponentu j-Box a vytvoríme si ho v novom HTML súbore. Tento súbor sa bude nachádzať v adresári s názvom forms a bude importovaný do našej webovej stránky pomocou komponentu j-Importer po kliknutí na tlačidlo Open form. Tento HTML súbor môže obsahovať HTML časti, štýli a taktiež svoj JavaScript PLUGIN.

Ako používať j-Box

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

Môžeme používať aj viacero j-Box komponentov v jednom projekte ak je to potrebné. V tomto príklade budeme pracovať len s jedným j-Box komponentom a na ňom sa naučíme všetko potrebné na to, aby ste ho boli schopný použiť vo vašich projektoch.

<ui-component name="box" path="*form" config="if:CLASS;title:TEST;width:350;submit:?/submit;reload:?/reload" plugin="CLASS" class="hidden CLASS">
  <nav>
    <button class="exec" data-exec="?/menu"><i class="ti ti-angle-down"></i>Menu</button>
  </nav>

  <div class="padding">
    CLASS
  </div>

  <nav>
    <button name="submit">SUBMIT</button>
    <button name="cancel">CANCEL</button>
  </nav>
</ui-component>

V tomto príklade môžeme vidieť použité slovo CLASS na viacerých miestach. Je dôležité pochopiť jeho význam, toto slovo je v tomto prípade rezervované slovo (rovnako ako ~PATH~). Obe tieto slová budú na pozadí vymenené za hodnotu z definovanej cesty (path). V tomto prípade budú vymenené za hodnotu testform, pretože táto hodnota je použitá na vyvolanie komponentu j-Box, ktorý počúva na ceste common.form.

Použili sme rovnakú HTML značku ako pri predchádzajúcich komponentoch - ui-component. Atribúty, ktoré sme použili sú name s hodnotou box, pretože chceme použiť komponent j-Box. Atribút path s hodnotou *form kde *(hviezdička) je na pozadí vymenená za cestu common, takže výsledná cesta bude common.form. Posledným atribútom je config s nastavením if, ktorý má hodnotu CLASS, čo je podmienka pre vyvolanie formulára (porovnáva sa s hodnotou v atribúte path). Nastavenie title s hodnotou TEST, čo je názov formulára. Nastavenie width s hodnotou 350, čo znamená, že formulár bude mať šírku 350 pixelov. Nastavenie submit s hodnotou ?/submit, čo znamená, že funkcia ?/submit z daného PLUGINu bude vyvolaná po kliknutí na tlačidlo Submit. A posledným nastavením je reload s hodnotou ?/reload, čo znamená, že táto funkcia z daného PLUGINu bude vyvoladá po vyvolaní formulára.

Ďalším atribútom je plugin s hodnotou CLASS, čo nastaví náš plugin na hodnotu testform, pretože ako sme si povedali vyššie, slovo CLASS bude na pozadí nahradené.

Posledným atribútom je class čo je klasický atribút pre definovanie štýlov. My sme tu použili hodnoty hidden a CLASS pretože chceme túto triedu použiť ako unikátny identifikátor pre naše štýli. Je to vhodné, pretože týmto spôsobom nemusíme miešať štýli pre konkrétny formulár s ostatnými štýlmi našej aplikácie.

V kóde si môžeme všimnúť, že by sme si vnútro tohto komponentu mohli rozdeliť na tri časti.

Menu

Prvou časťou je navigácia s jedným tlačidlom. Toto tlačidlo môžeme vidieť v hlavičke formulára. V prípade, že menu nechceme použiť, tak môžeme túto časť odstrániť. Ak chceme využiť toto tlačidlo, môžeme z neho vyvolať napríklad vyskakovacie menu s možnosťami. V tomto prípade si ukážeme vyskakovacie menu. Toto menu vytvoríme s pomocou UI komponentu j-Menu. Po kliknutí na tlačidlo Menu sa vyvolá funkcia ?/menu z daného PLUGINu a toto menu sa zobrazí nad daným formulárom. (JavaScript PLUGIN je súčasťou súboru test.html, ktorý obsahuje aj komponent j-Box, takže tento PLUGIN je vytvorený primo pre tento formulár).

exports.menu = function(el) {
  var opt = {};
  opt.items = [];
  opt.items.push({ id: 'eidt', name: 'Edit', icon: 'ti ti-pencil' });
  opt.items.push({ id: 'remove', name: 'Remove', icon: 'ti ti-trash red' });
  opt.align = 'right';
  opt.element = el;
  opt.callback = function(selected) {
    console.log(selected);
  };
  SETTER('menu/show', opt);
};

S týmto kódom dostaneme vyskakovacie menu s dvomi možnosťami - Edit a Remove.

Kontent

Prostredná časť vo vnútri komponentu j-Box slúži pre kontent. V kóde môžeme vidieť, že sme sem napísali len slovo CLASS, ale pretože je na pozadí vymenené, tak na webovej stránke sa zobrazí slovo testform.

Kontent, ktorý sem chceme vložiť záleží len od našej potreby. Môže to byť napríklad informačný text, galéria, formulár alebo čokoľvek čo potrebujeme.

V tomto príklade si vytvoríme formulár a teda do tejto časti vložíme niekoľko UI komponentov j-Input. Pre jednoduchosť len skopírujem pár príkladov zo stránky componentator.com a ukážeme si ako by to vyzeralo.

Použitý kód v tomto príklade (len vymenená stredná časť):

<div class="padding">
  <ui-component name="input" path="?.framework" config="placeholder:Choose a framework;dirsource:frameworks" class="m">Framework</ui-component>
  <ui-component name="input" path="?.terms" config="type:checkbox" class="m">I agree with terms</ui-component>
  <ui-component name="input" path="?.notes" config="type:multiline;innerlabel:1;placeholder:Enter notes" class="m">Notes</ui-component>
  <ui-component name="input" path="?.frameworks" config="placeholder:Select frameworks;multiple:true;dirsource:frameworks">Frameworks</ui-component>
  <br />
  <ui-component name="input" path="?.city" config="required:1;placeholder:Where do you live?;dirsource:cities;innerlabel:true;dircustom:true">City</ui-component>
  <br />
  <ui-component name="input" path="?.date" config="placeholder:Enter date;type:date;required:true;innerlabel:true">Date</ui-component>
  <br />
  <ui-component name="input" path="?.search" config="placeholder:Search...;type:search;innerlabel:true">Search</ui-component>
  <br />
  <ui-component name="input" path="?.password" config="placeholder:Type a password...;type:password">Password</ui-component>
</div>

Pretože sme v tomto komponente definovali atribút plugin, tak všetky hodnoty z našich inputov budú dostupné na danej ceste (v tomto prípade testform).

Tlačidlá

Poslednou sekciou sú tlačidlá, ktoré môžeme vydieť zobrazené v spodnej časti nášho formuláru. V prípade, že ich nechceme použiť, tak ich môžeme odstrániť, prípadne použiť len jedno z nich. V našom prípade ich necháme obe. V konfigurácií nášho komponentu j-Box sme si definovali, že po kliknutí na tlačidlo Submit chceme vyvolať funkciu ?/submit. Vytvoríme si preto jednoduchú funkciu v našom PLUGINe.

exports.submit = function() {
  console.log('SUBMIT');
};

V tomto prípade chceme len vypísať text SUBMIT do konzoly po kliknutí na tlačidlo Submit.

V prípade potreby môžeme niečo podobné urobiť aj pre tlačidlo Cancel.

Pre lepšie pochopenie kódu sem vložíme celý kód z nášho súboru test.html.

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: