j-Input - Total.js part 1

j-Input je súčasťou client-side 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-Input je UI komponent, ktorý podporuje veľké množstvo dátových typov ako sú napríklad string, email, číslo, telefónne číslo, checkbox, zip, heslo, dátum, čas a ďalšie. Je vhodný na použitie v rôznych aplikáciach a obsahuje mnoho fukncionalít zabalených v jednom komponente. Obsiahnuť celú funkčnosť komponentu j-Input v jednom blogu by bolo veľmi obsiahle, preto si ho rozdelíme do dvoch častí. V tejto prvej si ukážeme základnejšie použitie tohto komponentu a v nasledujúcom blogu si vysvetlíme použitie j-Inputu v kombinácií s inými komponentmi.

Prosím, berte na vedomie, že tieto blogy sú ukážkou pár dôležitých funkcií j-Inputu z môjho pohľadu a verím, že po ich prečítaní budete schopný použiť tento komponent v špecifických prípadoch vo vašich projektoch

Ako používať j-Input

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

Ako som uviedol vyššie, j-Input je veľmi všestranný a dokáže spracovať rôzne dátové typy, preto si z nich vyberieme niekoľko najzaujímavejších a postupne si ich prejdeme.

Stavy j-Inputu

Invalid

j-Input sa môže ocitnúť v stave invalid (neplatný), keď hodnota v danom inpute nespĺňa požadované podmienky (napríklad hodnota v inpute nespĺňa parametre daného dátového typu, povinný input je prázdny ...). V prípade, že sa input ocitne v tomto stave, tak sa zobrazí červené ohraničenie okolo celého inputu a trieda ui-invalid-input bude pridaná HTML elementu ui-component.

Binded

Ak je nastavená hodnota na cestu priradenú k inputu, tak trieda ui-input-binded bude pridaná HTML elementu ui-component.

Focused - Touched - Modified (Fokusované - Dotknuté - Upravené)

Môžeme taktiež zachytiť, či je na nejakom inpute fokus, či bol dotknutý (či bol na daný input už fokus), alebo či bol upravený (hodnota v inpute bola zmenená užívateľom). Toto sa prejaví pridaním tried ui-input-focused, ui-touched, or ui-modified k HTML elementu ui-component.

Dátové typy

String

Je to najpoužívanejší dátový typ pre tento komponent.

Príklad komponentu j-Input s dátovým typom string:

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="" default="">Test</ui-component>
</ui-plugin>

V elemente ui-component máme štyri atributy (name, path, config, default), pre viac informácií o týchto atributoch si prosím prečítajte predchádzajúci blog (jComponent - Total.js), kde som sa im venoval podrobnejšie.

Ak chceme aby j-Input validoval vstupné dáta pre dátový typ string, nie je potrebné túto požiadavku nastaviť, pretože je to predvolená hodnota pre dátový typ. V týchto príkladoch budem používať ako cestu pre naše inputy cestu common.test.

Zobrazovanie j-Inputu s takotou deklaráciou:

Po zadaní hodnoty do inputu bude táto hodnota ihneď vložená na zadanú cestu.

Email

j-Input s nastaveným dátovým typom email bude validovať hodnotu zadanú do tohto inputu ako email. to znamená, že hodnota bez použitia znaku "@" a prípony, bude vyhodnotená ako neplatná.

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="type:email" default="">Test</ui-component>
</ui-plugin>

Zobrazovanie j-Inputu s takotou deklaráciou:

V skutočnosti má komponent j-Input v neplatnom stave celé ohraničenie červenej farby, problém je v zobrazení priloženého súboru gif, za čo sa ospravedlňujem.

Číslo

j-Input s dátovým typom číslo bude vyhodnocovať, či uživateľ zadal číselnú hodnotu. Ak hodnota zadaná do tohto inputu bude obsahovať písmená, tak bude vymazaná. V konfigurácií je možné definovať aj maximálnu a minimálnu hodnotu pre daný input. Ak bude zadaná hodnota väčšia než maximálna, tak bude automaticky zmenená na maximálnu definovanú hodnotu a ak bude nižšia ako minimálna hodnota, tak bude automaticky zmenená na minimálnu definovanú hodnotu.

Existujú dva typy (number a number2), ktoré budú validovať zadanú hodnotu ako dátový typ číslo. Pracujú rovnako s jediným rozdielom. V prípade, že použijeme typ number a necháme tento input prázdny, tak sa jeho hodnota automaticky nastaví na hodnotu nula (0). Ak použijeme typ number2 a necháme tento input prázdny, tak sa jeho hodnota automaticky nastaví na hodnotu null.

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="type:number" default="">Test</ui-component>
</ui-plugin>

Zobrazovanie j-Inputu s takotou deklaráciou:

Telefónne číslo

j-Input s typom telefónne číslo bude vyhodnocovať zadanú hodnotu ako telefónne čislo. Hodnota v takomto inpute môže byť zadaná bez alebo spolu s predvoľbou krajiny.

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="type:phone" default="">Test</ui-component>
</ui-plugin>

Zobrazovanie j-Inputu s takotou deklaráciou:

V skutočnosti má komponent j-Input v neplatnom stave celé ohraničenie červenej farby, problém je v zobrazení priloženého súboru gif, za čo sa ospravedlňujem.

Heslo

j-Input s typom heslo bude vyhodnocovať zadanú hodnotu v inpute ako string, ale bude zamaskovaná hviezdičkami. Taktiež bude tento input obsahovať na pravej strane tlačidlo, ktorým môžeme skryť alebo odkryť zadanú hodnotu.

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="type:password" default="">Test</ui-component>
</ui-plugin>

Zobrazovanie j-Inputu s takotou deklaráciou:

Checkbox

j-Input s dátovým typom checkbox bude pracovať ako jednoduché zaškrtávacie pole. Na zadanú cestu sa vloží len hodnota true alebo false, podľa toho, či je zaškrtávacie pole zaškrtnuté alebo nezaškrtnuté.

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="type:checkbox" default="">Test</ui-component>
</ui-plugin>

Zobrazovanie j-Inputu s takotou deklaráciou:

K dispozícií je aj video tutorial ku komponentu j-Input v anglickom jazyku: