Yahoo! UI Library - Úvod

Druhý nejpoužívanější vyhledávač Yahoo! uvolnil zdrojové kódy některých jeho prvků uživatelského rozhraní (našeptávač, kalendář, menu) postavených na JavaScript/AJAX. V tomto seriálu uvidíte návod na jejich použití na stránkách.

Yahoo! UI Library nabízí všem webmasterům pod licencí BSD jedoduchou sadu použitelných ovládacích prvků, které můžete vidět na portálu Yahoo! Jejich implementace je snadná.

Hlavní stránky knihovny jsou http://developer.yahoo.com/yui/, na tomto odkaze je ke stažení: http://kent.dl.sourceforge.net/sourceforge/yui/yui_0.11.2.zip. Instalace je jednoduchá, stáhněte si výše uvedený soubor a rozbalte jej. Skládá se ze 3 složek: build, docs a examples. Ve složce build najdete zdrojové soubory – ty jsou pro nás nejdůležitější. Ve složce docs se nachází dokumentace a ve složce examples příklady.

Samotná knihovna nám nabízí tyto prvky:

Animation

Prvek umožňující jednoduchou animaci prvků. Zvládá jednorázový přesun, změnu CSS stylů, plynulou animaci, definovat kontrolní body, apod. Pro ukázku, zde jsou příklady.

Drag & Drop

Prvek umožňující jednoduchý systém přetahování. Odesílá události, čili můžeme na každé přesunutí zareagovat JavaScriptem a pomocí prvku Connection Manager (více níže) reagovat i PHP skriptem. Toto však obecně platí u všech prvků této knihovny. Prvek Drag & Drop zvládá přetažení „divů“, obrázků, změnu velikosti, seznamy, aj. Více opět příklady.

Connection Manager

Prvek, který umožňuje velice jednoduše otevřít nové HTTP spojení (např. kvůli spuštění PHP skriptu) a pokračovat v něm (získávat výsledek, apod.). Pomocí něj lze jednoduše v JavaScriptu měnit obsah databáze. Používá se nejčastěji ve spojení s jinými prvky této knihovny. Více opět příklady.

Calendar

Prvek zobrazující obligátní kalendář pro výběr data. Je plně skinovatelný, lze jednoduše přeložit do češtiny, obsahaje podporu pro výběr více dat, zvýraznění týdne, apod. Použití demonstrují příklady.

Menu

Velice výkonný prvek, umožňující jednoduchou tvorbu nabídek. Deklarují se jako jednoduché nečíslované seznamy <ul>, kód knihovny z nich udělá nabídku. Může být víceúrovňová, dá se dynamicky JavaScriptem měnit. Tyto příklady ukazují i celkové použití na stránce, napodobují nabídku Start systému Windows a hlavní nabídku aplikací.

Slider

Zajímavý prvek, který by se dal přeložit jako číselník. Pomocí něj se dá vybrat číslo ze zadaného rozsahu. V těchto příkladech uvidíte jeho použítí i jeho velice zajímavý vzhled.

Tree View

Chcete-li zobrazit data ve stromové struktuře (seznam rubrik a podrubrik, soubory na disku), tento prvek se hodí nejvíce. V příkladech můžete vidět jeho použítí.

Container

Tento prvek obsahuje další prvky, pojďme se na ně podívat:

Module

Pokud chcete na stránkách zobrazit nějaké informace, můžete použít prvek Module. Např. na této stránce by to mohly být ony bloky v levém a pravém sloupci. Pomocí tohoto prvku se dělají ostatní, zde uvedené prvky.

Panel

Tento prvek zobrazuje různá „podokna“ stránky. Zajímavé jsou základní styly nabízené knihovnou (Aqua, XP, Photo Box); jsou hezké a onen XP styl jen tak nelze rozeznat od pravého okna. Tato „okna“ jsou jen plovoucí divy. Jsou přesunovatelné za „záhlaví“ a mají „ikonku“ zavřít.

Dialog

Tento prvek by se dal zařadit jako druh prvku Panel. Je to také okno se všemi styly jako prvek Panel, jehož obsahem je (X)HTML formulář. Ten se po odeslání může odeslat pomocí metody (GET/POST) rodičovskému oknu, pomocí prvku Connection Manager získat odpověď nebo vyvolat uživatelskou funkci. Dá se často použít jako zpestření uživatelského rozhraní stránky.

SimpleBox

Tento prvek je zjednodušený prvek Dialog, který se používá na potrvzení akce. Vypadá o mnoho lépe než zabudovaný objekt JavaScriptu confirm(). Je „modální“, čili při jeho použití nelze používat zbytek stránky, která efektně zašedne. Tímto se však neliší od prvku Dialog, který je taktéž „modální“.

Všechny tyto prvky mají své příklady zde.

Tolik stručný popis většiny ovládacích prvků knihovny Yahoo! UI Library. V příštích dílech si povíme o použití každého z nich.