Krátce o Ext Core 3.0

Ext Core 3.0 je javascriptový framework určení k použití ve webových stránkách a je jakýmsi derivátem velkého Ext JS, čili není zaměřen na tvorbu velkých RIA aplikací.

Je zřejmé, že po něm, stejně jako já, v první řadě sáhnou vývojáři znalí Ext JS, kteří se nemohou rozloučit se svou oblíbenou knihovnou i na běžných webových stránkách.

Ext Core 3.0 se neobsahuje třídy pro vytváření GUI komponent (chcete-li widgetů), které tvoří podstatnou část „velkého“ Ext JS. Díky své jednoduchosti však může být také jednoduchou cestou, jak se naučit základy Ext JS.

Podstatnou informací je, že lze framework (zazipováním) „sešlápnout“ z 99 kB na 25 kB a milou informací je, že je šířen pod Open Source MIT licencí, čili je volně šiřitelný a použitelný.

Podrobnější popis lze nalézt buď v dokumentaci API ExtCore3.0 nebo v pěkně zpracovaném manuálu.

ČTĚTE K TÉMATU: Ext JS – javascriptový framework pro tvorbu RIA

Důležité třídy a objekty Ext Core3.0

Ext.DomHelper

Ext.DomHelper je třída, která zjednodušuje vytváření nových prvků DOM. Prvek může být zadán jako kód HTML nebo pomocí konfiguračního objektu.

Tento kód vytvoří prvek „span“, jehož rodičem bude prvek body

Ext.DomHelper.append(Ext.getBody(), {
    tag: 'span',
    id: 'el1',
    cls: 'myel',
    html: 'muj html prvek',
    style: {
        color: 'blue'
    }
}); 

Ext.Template

Třída Ext.Template slouží k vygenerování kódu HTML z dat JSON objektu pomocí šablony. Šablonu je možné kompilovat a tím optimalizovat pro pozdější, vícenásobné použití.

Tento příklad vygeneruje stejný kód HTML jako příklad předchozí:

var tmp = new Ext.Template('<span class="{cls} style="{style}">{html}</html>');
tmp.append(Ext.getBody(), {
    cls: 'myel',
    id: 'el1',
    html: 'muj html prvek',
    style: 'color: blue;'
}); 

Ext.DomQuery

Ext.DomQuery umožňuje vyhledávání prvků. Jako dotazovací jazyk může být použit způsob dotazování pomocí CSS selectorů známý z řady dalších javascriptových frameworků.

Tato funkce vrátí referenci na objekt z předchozího příkladu:

Ext.DomQuery.selectNode('span.myel') 

Ext.Element

Ext.Element zapouzdřuje prvky DOM a zjednodušuje práci s nimi. Umožňuje nastavovat styly, třídy, skrývat/zobrazovat prvek, pracovat se souvisejícími prvky (potomci, předci, sousedé) a pod.

Následující příklad změní barvu našeho prvku:

var el = new Ext.Element('el1');
el.setStyle({
    color: 'red'
}); 

Ext.Composite­ElementLite

Ext.Composite­ElementLite je třída pracující s kolekcí objektů typu Ext.Element, a co je podstatné, umožňuje nad celou kolekcí volat metody třídy Ext.Ele­ment. 

Slůvko „Lite“ je součástí názvu z prostého důvodu – pro práci s jednotlivými elementy se používá metoda Ext.fly, postavená na návrhovém vzoru Flyweight. Důsledkem je, že pro práci s prvkem se vytváří pouze jedna instance třídy Ext.Element, což způsobuje nižší nároky na paměťový prostor. Třída Ext.Composite­Element, nevyužívající vzor Flyweight, není v Ext Core 3 zahrnuta.

Ext.Ajax

Třídy Ext.Ajax a Ext.Connection zapouzdřují XMLHttpRequest a jsou tudíž branou do světa AJAXových aplikací.

Následující kód odešle XMLHttpRequest metodou GET, v případě úspěchu zavolá funkci success a předá jí data, v případě neúspěchu zavolá funkci failure, obě v kontexu objektu nastaveného v parametru scope.

Ext.Ajax.request({
    url: 'request.php',
    success: success,
    failure: failure,
    method: 'GET',
    scope: this
}); 

To je z obecného představení Ext Core vše a přejdeme ke druhé části článku.

Čtečka pro twitter

Motivace

Jelikož jsem zjistil, že časově nezvládám psát blog, ale přesto mám nutkavou potřebu „vytrubovat“ svoje úvahy na internetu, založil jsem si účet na Twitteru. Napsal jsem pár příspěvků a zjistil jsem, že bych byl rád, aby se moje twitty zobrazovaly na mém blogu, aniž by dosavadní čtenáři zpozorovali nějakou významnou změnu. 

Twitter sám takovou možnost size nabízí jako Twitter Widget http://t­witter.com/wid­gets, leč na mém striktně česky psaném webu by se časové údaje jako „about 2 hours ago“ nevyjímaly příliš hezky. Tudíž je na čase si něco napsat sám.

Server

Malým zklamáním může být neexistence možnosti poslat XMLHttpRequest mezi doménami (v některých novějších prohlížečích to již není problém – pozn. redakce), což lze ovšem jednoduše vyřešit PHP skriptem na serveru, jehož úkol bude načíst data z API Twitteru z URL http://twitter­.com/statuses/u­ser_timeline/u­sername.json, kde za „username“ dodáme uživatelské jméno:

<?php echo file_get_contents( 'http://twitter.com/statuses/user_timeline/' . $_GET['login'] . '.json'); ?> 

Více informací o Twitter API najdete na http://api­wiki.twitter.com/.

Twitter.js

Poněvadž nejsme žádná ořezávátka, napíšeme si Twitterovou čtečku rovnou objektově a protože budeme počítat s jeho pozdějším využitím, a jistě se nám pak bude hodit mít možnost vyvolávat události, podědíme jej od třídy Ext.util.Obser­vable, pomocí funkce Ext.extend:

var Twitter = Ext.extend( Ext.util.Observable, {}); 

Konstruktor třídy Twitter pouze uloží proměnné jako členské proměnné, případně na jejich základě vytvoří objekty se kterými budeme pracovat dále.

constructor: function(element, username, template) {
    Ext.apply(this, {
      el: Ext.get(element),
      username: username,
      template: new Ext.Template(template || this.template)
    })
}, 

Nyní je třeba získat data, k čemuž využijeme singletonu Ext.Ajax. 

load: function() {
    Ext.Ajax.request({
       params: {
             login: this.username
        },
        url: 'request.php',
        success: function(response) {
            this.renderData(Ext.decode(response.responseText));
        },
        failure: this.renderFailure,
        method: 'GET',
        scope: this
    });
} 

Data načtená ze serveru budou převedena z formátu JSON na javascriptové objekty pomocí funkce Ext.decode.

Vypsání dat do HTML obstará metoda renderData: 

renderData: function(data) {
    Ext.each(data, function(item) {
        item.date = new Date(item.created_at).getFormatedDate();
        this.template.append(this.el, item);
    }, this);
} 

Funkce Ext.each projde všechny prvky pole, což jsou jednotlivé twitty a u každého z nich přeformátuje datum na požadovaný formát, a pak na základě šablony vygeneruje kód HTML:

template: '<div id="{id}"><h3>{date}</h3><p>{text}</p></div>', 

Při selhání requestu pouze zobrazíme chybové hlášení:

renderFailure: function() {
    this.el.update('<p>Při načítání dat došlo bohužel k chybě. Zachovejte klid a za chvilku to zkuste znovu.</p>');
} 

Date.js

Z mně neznámého důvodu tvůrci Ext Core 3.0 nepřidali funkce pro práci s datem, byť pro „plný“ Ext JS existují. Tudíž musíme, pokud nám nestačí možnosti javascriptového objektu Date, si je napsat vlastnoručně:

Date.prototype.getFormatedDate = function() {
    var date = this;
    var minutes = new String(this.getMinutes());

    return String.format(
        '{0}. {1} {2} {3}:{4}',
        this.getDate(),
        this.mothNames[date.getMonth()],
        this.getFullYear(),
        this.getHours(),
        (minutes.length < 2) ? '0' + minutes : minutes
    );
};

Date.prototype.mothNames = [
    'ledna',
    'února',
    'března',
    'dubna',
    'května',
    'června',
    'července',
    'srpna',
    'září',
    'října',
    'listopadu',
    'prosince'
]; 

Závěr

A nyní již zbývá jen vložit skripty Date.js a Twitter.js do webové stránky a neopomenout ani na ext-core.js.

Samotnou aplikaci pak donutíme k činnosti tímto kódem, který se provede po načtení Ext Core:

Ext.onReady(function() {
    new Twitter(Ext.getBody(), 'juhy').load();
}); 

Skript v provozu je k vidění na mém blogu. Zdrojový kód celé čtečky si můžete snadno stáhnout.

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.