Ext JS – javascriptový framework pro tvorbu RIA

Cílem toho článku je představit zběžně všechny rysy javascriptového frameworku Ext JS, zaměřit se na informace, které umožní čtenářům si ujasnit, zda má smysl zabývat se Ext JS detailněji a použít jej v jejich vlastních projektech.
Nálepky:
Ext JS je javascriptová knihovna pro vytváření RIA aplikací, jak uvádí na svých stránkách její autor Jack Slocum, někdy úsměvně označovaný přízviskem ‚JavaScript rock star‘.
Ext JS mimo zjednodušení práce s DOM a AJAXem přináší hlavně řadu GUI komponent. Nespornou výhodou této knihovny (či chcete-li frameworku) je to, že je optimalizována pro všechny současné majoritně používané prohlížeče.
Podpora prohlížečů
Javascriptový framework by se nás měl snažit odstínit od implementačních problémů v jednotlivých prohlížečích, proto podpora Internet Exploreru od verze 6 a taktéž Mozilla Firefoxu od verze 1.5 není asi žádným překvapením. Podpora prohlížečů jako je Opera (od verze 9) či Safari (od verze 3) není ve světě javascriptových frameworků zcela samozřejmá, leč v současné době s příchodem dalších prohlížečů na jádře Webkit, jako je Google Chrome (a nesmíme zapomenout na Adobe AIR), nutná.
ČTĚTE K TÉMATU: Proč používat javascriptový framework?
Licence
V současné době je možné používat Ext JS pod licencí GNU GPL (do verze 2.0.2 byl pod LGPL), případně je možno užívat komerční licenci, která nevyžaduje vydávat software jako open source a navíc přidává technickou podporu ze strany Ext JS. Při přistoupení na licenci GNU GPL musí dát vývojáři volně k dispozici i svoje zdrojové kódy.
Lokalizace
S Ext JS je dodáván soubor obsahující všechny použité texty. Je přeložen do nemála jazyků, kromě nezbytné čínštiny taktéž do češtiny a slovenštiny.
Použití frameworku
Ext JS potřebuje k běhu načtení tří souborů:
- ext-all.js
- ext-core.js
- ext-all.css
Jejich celková velikost se ve verzi Ext JS 2.2 pohybuje kolem 0.7 MB. Všechny tři soubory jsou minimalizovány.
GUI prvky (widgety) – pohled shora
Ext JS obsahuje celou řadu prvků uživatelského rozhraní, čímž rozšiřuje malé možnosti, které k tomuto účelu nabízí HTML.
Formulářové prvky
Tradiční formulářové prvky jako je například tradiční element INPUT s typem „text“, běžně nazývaný „Text box“, jsou rozšířeny o možnost validace, u zmíněného texboxu buď oproti vestavěným regulárním výrazům např. pro e-mailovou adresu, tak o možnost validace oproti vlastním regulárním výrazům nebo validační funkci.

Kromě tradičních prvků jako je Radiobutton či Checkbox přináší Ext JS ovládací prvek pro editaci HTML textu, tvořený jednoduchým DHTML editorem a prvek pro editaci data a času.

Taktéž ovládací prvek Combo box Ext JS implementuje i přesto, že v HTML je obsažen, a to hlavně protože funkcionalita toho prvku je jaksi nedostačující. Proto jej Ext JS rozšiřuje o možnost vyhledávání během psaní (našeptávač) a o další funkce.

DataView a Grid
Pro velkou část RIA aplikací je nezbytné mít ovládací prvek umožňující zobrazení velkého množství dat v přehledných tabulkách.
DataView umožňuje zobrazovat data přijatá ve formátu JSON v libovolném zobrazení, vygenerovaném na základě šablony pro jednotlivé datové položky. Zároveň nad nimi zavádí možnost výběrů pro další operace.
DataGrid definuje zobrazení dat v předem definované tabulce, která má funkce pro třídění a filtrování záznamů. Možnost změny šířky sloupce pomocí „Drag & drop“ je samozřejmostí.

Tree
Podobně jako je nezbytná komponenta Grid pro zobrazení tabulkových dat, tak je nezbytná komponenta Tree pro zobrazení dat stromových struktur.

Komponenta umožňuje mimo jiné přesunování uzlů Drag & drop a umožňuje použití editoru pro inline editaci názvu uzlu.
Panel
Panel slouží k uspořádání komponent v okně aplikace. Čili Panel může obsahovat další panely či komponenty a navíc nad nimi zavádí zobrazení pomocí rozvržení (layoutu).

Nad objektem panelu (přesněji Ext.Container) zavádí Ext JS možnost nastavení rozvržení (layout) vnitřních panelů a komponent.
Window
Je základním stavebním kamenem dialogových aplikací, jeho funkcionalita je odvozená od Panelu, přidává navíc jen funkčnost, která dělá okno oknem – tj. ovládací prvky pro přesouvání, změnu velikosti, maximalizaci apod.

Ukázka dalších možností je k dispozici na stránkách autora.
API – pohled zdola
Aplikační rozhraní API je, jak sám výrobce tvrdí, intuitivní a jednoduché pro užívání, a je nutno dát mu za pravdu. API nepřináší dramatickou změnu oproti logice aplikací např. v Javě, tudíž bude vývojářům alespoň povědomé.
Ext JS nemá definovaného společného předchůdce všech objektů, ovšem všechny objekty jsou potomkem nativního objektu JavaScriptu jménem Object.
Objekty s implementovaným událostním modelem jsou potomky třídy Ext.util.Observable
, značná množství komponent Ext JS (např. formulářové prvky) jsou potomky třídy Ext.Component,
Ext.BoxComponent
přidává komponentě možnost s rozměry komponenty uzavřené do pravoúhlé oblasti a konečně Ext.Container
umožňuje umísťovat další komponenty i s možností volby rozmístění (více v Layout Browseru).
- Ext.util.Observable
- Ext.Component
- Ext.BoxComponent
- Ext.Container
- Ext.Panel
- Ext.TabPanel
- Ext.Window
- Ext.FormPanel
- Ext.Viewport
- Ext.Panel
- Ext.Container
- Ext.BoxComponent
- Ext.Component
Ext.Panel
je základním stavebním kamenem všech webových aplikací v Ext JS. Taktéž Ext.Viewport
je podstatnou komponentou pro vytvoření aplikace – je to totiž kontejner, který se přizpůsobí rozměrům okna prohlížeče, Ext.Window
je pak komponentou okna umožňující vytváření dialogů.
Tato část API je jednou z nejpodstatnějších, jelikož Ext.Panel
či některý z jeho potomků používá prakticky každá aplikace v Ext JS.
Pro vytváření instancí tříd je možno použít zadávání pomocí tzv. konfiguračních objektů, a pro zjednodušení zápisu do toho objektu Ext JS zavádí identifikátor typu, ke kterému je registrována příslušná třída, tzv. xtype.
Příklad
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body></body>
</html>
script.js
Ext.onReady(function(){
var wnd = new
Ext.Window({
height: 250,
width: 300,
layout: 'fit',
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
id: 'msg',
value: 'Hello world',
fieldLabel : 'Message',
anchor: '100%'
}]
}],
buttons: [
{
text: 'Ok',
handler: function() {
Ext.MessageBox.alert('Message', wnd.findById('msg').getValue());
},
scope: this
},
{
text: 'Cancel',
handler: function() {
wnd.hide();
},
scope: this
}]
});
wnd.show();
});
Slabé stránky
Není softwarový produkt, který by byl po všech stránkách ideální, a ani Ext JS není výjimkou.
- V současné době je problematickou částí vývoje v Ext JS změna licence (z LGPL na GPL), která zkomplikovala jeho použití v komerčních aplikacích.
- Dokumentace API občas neuvádí pro vývojáře podstatné informace a občas nezbývá než jít do zdrojových kódů, přesto je Ext JS poměrně slušně zdokumentován, obzvlášť v porovnání s ostatními javascriptovými frameworky.
- Vývoj javascriptových frameworků je zatím velmi bouřlivý a tudíž i vývoj Ext JS přinesl nemalé změny v API, obzvláště při přechodu z verze 1 na verzi 2, mohu však s potěšením konstatovat, že se jednalo vždy o změny k lepšímu.
Závěrem
Na závěr je třeba zmínit, že Ext JS také obsahuje zapouzdření funkcí Adobe AIR, obsahuje několik komponent pro zjednodušení tvorby mashupů (míchanic) např. s Google Maps, komunita kolem Ext JS pak vyvíjí i další Ext JS komponenty, popř. zapouzdřuje jiné produkty např. HTML editor Tiny MCE pro Ext JS.
Musíme také zmínit existenci dalšího projektu, úzce spojeného s Ext JS a to je Ext GWT, knihovna v jazyce Java pro vytváření RIA aplikací pomocí Google Web Toolkitu, která taktéž využívá na klientské části Ext JS.
Odkazy
Autorem článku je Miroslav Juhos, vývojář webových aplikací se specializací na JavaScript a Ext JS ve společnosti Kerio Technologies s.r.o., která je jedním z hlavních výrobců bezpečnostního internetového softwaru pro malé a středně rozsáhlé sítě, se specializací na síťové firewally a bezpečnost interní firemní komunikace.
…ovsem pouze tomu, komu vysledny produkt distribuuji. Jinak by to nebyla GNU GPL, ale nejaka „Ext JS licence“
Tak webovou aplikaci všem uživatelům automaticky distribuuju – mám na mysli onu javascriptovou část běžící na straně klienta – tudíž budu muset i celý svůj javascriptový kód dát pod GPL (on by byl uživatelům sice stejně přístupný, ale mohl bych si na něj jinak nárokovat práva).
To je taky fakt :-)
Z pohledu GPL je "kód" to, co jako autor aplikace editujete, když děláte v aplikaci změny. Jako autor určitě needitujete výsledné "statické" HTML stránky, ale serverové skripty, které je generují.
Druhá otázka je, nakolik je takový JS skript součástí celého díla, aby vynucoval GPL licenci i na celé dílo. Pokud je bez něj aplikace nepoužitelná, pak je vynucení GPL jisté. A v případě takovéhodle frameworku to tak bude v drtivé většině případů.
Stavěli jsme ve firmě na Ext GWT aplikaci… Engine Extu je brutálně pomalý, což je limitující ve chvíli, kdy zákazník chce aby mu to svižně běhalo i na IE7 (díky bohu že IE6 nepožadoval). Takže se optimalizovalo prakticky všechno – od datového modelu, přes množství načítaných záznamů, po komprimace a obfuskace celého Extu. A nic extra celý Ext nepřinesl, vytvoření aplikace přes standardní frameworky by asi trvalo déle, ale rozhodně by bylo praktičtější.
Další limit Extu je jeho příšerná snaha o přemýšlení za vývojáře. Ve chvíli, kdy vytváříte vlastní skin podle požadavků zákazníka, a Ext v IE simuluje quirk, zatímco vy potřebujete standard, nemáte pro autory Extu jediné slušné slovo. A skinování vůbec je v případě Extu dost špatně řešené.
Ext je vhodný tam, kde můžete zajistit homogenní prostředí (Firefox, nebo Chrome) a stačí vám ten příšerný modrý skin celé aplikace. Jinak přináší problémy a komplikace.
IMHO perfektní článek. Uvítal bych popis i konkurenčních frameworků, např. DOJO
Děkujeme, časem se objeví i ty další.
Díky autorovi za článek.
ExtJs je pekny framework na pohlad ale je to strasny moloch.Umoznuje aj vyuzitie dalsich frameworkov.Inak celkovo je dost pomaly.Cim dalej tym viac mam pocit ze toto neni zrovna ta spravna cesta.Taketo mohutne frameworky sice obsahuju vsetko ale su tazkopadne,neprehladne.Mimochodom nieco podobne je aj qooxdoo. Nemam s nim blizsie skusenosti.
Par bolgů o qooxdoo napsal Kenny Tilton na smuglispweeny.
V soucasnosti nejlepsi JS framework je zrejme http://www.smartclient.com (LGPL), pripadne jeho GWT varianta http://code.google.com/p/smartgwt/. Nove skiny tam pridavaji jak na bezicim pasu (http://www.gwtnow.com/2009/02/08/slick-new-skin-for-smartgwt-is-out/) a skaluje temer libovolnym zpusobem – vse ma live dotahovani az v okamziku potreby, podpora milionu radku v tabulkach, ve stromech, v menu….
Pro srovnani s ExtJS viz://www.infoq.com/news/2008/11/smartgwt (pise byvaly vyvojar gwt-ext).
Neni lehké rozhodnout, který framework je lepší, natož nejlepší.
My jsme při výběru do frameworku do našich aplikací, který probíhal před dvěma lety, pohořeli hlavně na tehdejší licenci Smartclienta, která nám nevyhovovala, a kritérií pro výběr bylo velmi mnoho mnohem víc než jen dotahování dat na požádání (fetch on demand) nebo množství skinů.
Pokud vás tento výběr a porovnání frameworků zajímá, naleznete jej ve sborníku konference Europen http://europen.cz/Anot/33/HLAVNI.pdf, v příspěvku mého kolegy Pavla Beneše v kapitole JavaScript a JS frameworky.
> Neni lehké rozhodnout, který framework je lepší, natož nejlepší.
Tak tak, zrovna nedavno jsme vyber provadeli a kriterii bylo opravdu hodne. Dival jsem se pritom podrobne na 29 frameworku vcetne jejich zdojaku (jestlize byly k dispozici). Proto jsem si temer jist, ze SmartClient v dnesni dobe nema konkurenci a to hlavne po strance architectury.
Na vase porovnani se ale samozrejme rad podivam (zbezne jsem se mrknul a zda se mi, ze jsme tech kriterii meli podstatne vic).
Ext uz pouzivam dost dlho a robil som v nom uz par web aplikacii. Cely napad sa mi zda super, vyrobit cele web rozhranie na strane klienta, aj podpora adobe air, google gears,… chlapci sa snazia pridavat nove ficury. je tu vsak velke ale. ak chcete urobit nejaku komplikovanejsiu aplikaciu narazite na veeeelke mnozstvo bugov, hlavne co sa tyka renderovania UI. ak vsak potrebujete iba nieco male a rychlo moze byt ext dobra volba. pre velke aplikacie vsak urcite nedoporucujem.
Chtěl bych upřesnit že nápad s "webovým rozhraním na straně klienta" není nápadem ExtJS, alebrž architekturou, kterou přinesl příchod RIA aplikací, či jak laicky říkáme AJAXu.
Pokud vím, tak všechny javascriptové frameworky se snaží o to samé, usnadnit a zjednodušit vývojářům vytváření GUI a komunikaci se serverem omezit na přenost dat ať už pomocí JSON nebo jinéh protokolu.
Renderování UI obsahuje nějaké bugy (ruku na srdce, existuje bugůprostý softwarový produkt?) ovšem s množstvím bugů, které se dá vytvořit při psaní v čistém JavaScriptu + DOM je nesrovnatelné, s jiným frameworkem bohužel nemám srovnatelnou zkušenost.
Kromě toho řešení známých bugů v ExtJS a možnost zareportování nových je zde http://extjs.com/forum/.
Bohužel ono hnutí „RIA“ se právě snaží webové rozhraní zcela potlačit a postavit na něm rozhraní úplně jiné (okýnkové), které vůbec klasické webové GUI nerespektuje. (Nejen) podle mě to není moc dobrá cesta. Myslím, že to R v RIA nemusí nutně znamenat sestavování buttonů z haldy spanů omalovaných namodro.
Kupodivu je hodně frameworků, kterým je GUI víceméně ukradené. Rozlišoval bych „javascriptové frameworky“ (jQuery, Prototype) a „knihovny pro tvorbu GUI“ (ExtJS). Hranice není zcela ostrá, ale stále dostatečně zřetelná. Většina těchto GUI knihoven je pro mě osobně těžko použitelná, protože se soustředí příliš na efekty a nahrazování pěkných systémových tlačítek a scrollbarů za škaredé javascriptové tlačítka a scrollbary, omezuje vývojáře a vlastně nic moc užitečného navíc nepřináší.
Rád bych Vás s RIA vyvedl z omylu – jak vysvětluje wikipedia http://en.wikipedia.org/wiki/Rich_Internet_application RIA jsou webové aplikace s některými charakteristikami typickými pro aplikace desktopové (a tyto jsou dále jmenovány). A designu GUI ani o "okýnkách" tu zmínka není.
Sám si vysvětluji tento pojem, že se jedná o snahu aby uživatel nerozlišoval mezi desktopovou aplikací a webovou. Čímž je myšleno chování, nikoli vzhled aplikace.
Termínu "klasické webové GUI" bych se raději vyhýbal, GUI má dle mého názoru v první řadě splňovat požadavky na aplikaci, čili není bezpodmínečně nutné aby respektovalo svým GUI platformu na které běží – GUI webových aplikací by ale bylo ale téma minimálně na další článek.
S termínem "framework" jsem si naběhl, samozřejmě jsem neměl na mysli nízkoúrovňové knihovny typu jQuery, měl jsem lépe použít termín "GUI knihovny", byť ho nikdo nepoužívá a většina vývojářů háže tyto knihovny do jednoho pytle pod názvem "framework".
ExtJS nemusí být pochopitelně pro každého přínosem, žádný softwarový (ani jiný) produkt neoslovuje neomezenou cílovou skupinu, pokud ovšem píšete webovou aplikaci s mnoha dialogy (typicky aplikací pro správu databází) máte volbu – buď si psát celé GUI sám od tlačítek po dialogy a nebo využijete dejme tomu JavaScriptovou GUI knihovnu abyste se mohl věnovat implementaci funkcionality Vaši aplikace, nikoli implementaci funkcionality GUI prvků – ale to už je námětem jiného článku http://zdrojak.root.cz/clanky/proc-javascriptovy-framework/.
Vždyť jsem psal prakticky to samé. Jinak já si RIA vysvětluju spíš jako marketingovou zkratku na prodporu Flashe a Silverlighu.
Já jsem zastáncem toho, aby GUI aplikace co nejvíce respektovalo zvyklosti platformy na které běží, než aby bylo stejné na všech platformách. Což je právě u webových aplikací problém – obvykle zavádí nové GUI které s hostitelským vůbec nekoresponduje.
Jinak nechci, aby můj příspěvek vyzníval nějak agresivně, sám jsem ExtJS svého času zkoušel, abych zjistil, že přináší víc problémů než jich řeší. Chybí mi zde nějaká GUI knihovna, která by byla naprosto „light“, nezaváděla zbytečný balast a nesvazovala vývojáři ruce. Většina knihoven k tomu bohužel inklinuje.
RIA vysvětluju spíš jako marketingovou zkratku na prodporu Flashe a Silverlighu.
V temínu RIA není nijak nedefinované, jakým způsobem je realizována. RIA lze vytvářet jak pomocí Flashe nebo Silverlightu tak pomocí HTML a JavaScriptu. To vše je RIA.
Ale jistě, akademicky se můžeme tvářit, že RIA je obecný pojem. Ale s přihlédnutím k tomu, že jej vynalezla, pokud se nemýlím, Macromedia v souvislosti s Flashem, tak není proč se divit, že jsem napsal to, co jsem napsal.
Neřekl bych akademicky. Běžně se v tomhle kontextu používá. Případné prvotní autorství termínu na to nemá vliv.
Možná že neřekl ještě neznamená nenapsal a akademicky naopak znamená low level. Kontext je výtažek z contentu a content by mohl být kontext, ale není. Blábol nemusí být lež a názor nemůže být lež. Co je co, ví málokdo. To, co se může šířit mezi lidmi, je fáma a nebo taky zkušenost. Fámy jsou pro staré baby a zkušenosti je třeba šířit a sdílet, ne je dementovat.
A také platí, že přání je otcem myšlenky. Dnes se čím dál víc rozdíl mezi HTML+JS aplikací a ne-HTML+JS aplikací smývá. Možnosti jsou z hlediska výsledku podobné, rozdílů postupně ubývá. Opravdu bohatou aplikaci, RIA, lze dnes vytvořit v obou případech. Pár let zpět to možná neplatilo, ale dnes opravdu není třeba je odlišovat nějakou zvláštní nálepkou.
Já už něco pod Extem spáchal a je to pro mě zcela určitě to nejpoužitelnější, s čím jsem měl na poli JS tu čest pracovat. Pracuje se mi s tím totiž neskutečně jednoduše rychle a rychle jsem se ho taky naučil. A taky v něm mám stále co objevovat.
Je pravdou, že některé složitější věci se tam musí řešit oklikami a berličkami, ale ukažte mi někdo takhle robustní JS FW, který tohle zvládá?
Dokumentace se tu už zmiňovala, tak další výhodou je výborné fórum, a uživatelská základna. V 90% případů mi vytáhli trn z paty a na mnohé běžné funkčnosti, jež v Extu nejsou, už někdo napsal plugin, který opravdu funguje podle filosofie plug-and-play.
Presne rovnaké skúsenosti (a keď ich nie je nejak mnoho) mám aj ja.
Skvelá dokumentácia nemá nikde takú podobu. A čo som nenašiel tam, zatiaľ vždy vyriešilo fórum.