Ext JS - javascriptový framework pro tvorbu RIA

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 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

• Ext JS
• Dokumentace API
• Tutoriály

---

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.