Echo2 Web Framework – úvod

15. listopadu 2007

•

Predstavte si, že žijete vo svete, kde vládne Java. Ak chcete naprogramovať nejakú peknú stránku, pravdepodobne použijete svoje obľúbené JSP, servlety, Struts – všetko pomiešate, poprípade ešte nejakú technológiu pridáte a stránka je hotová. Jedného dňa sa dozviete o paralelnom svete, kde webové stránky vyzerajú inak. Zdá sa, že na príkazy užívateľa odpovedajú takmer hneď, vyzerá to ako desktop aplikácia. Od kamarátov sa dozviete, že na takúto stránku potrebujete vedieť Ajax, JavaScript, DOM, CSS, XHTML a kto vie čo všetko. Vás z toľkých nových vecí rozbolí hlava. Čo ak vám ale poviem, že vám stačí ostať pri svojej obľúbenej Jave, pričom budete môcť vytvárať Ajaxové stránky?

Touto sériou článkov by som vás chcel uviesť do webového open-source frameworku Echo 2, ktorý slúži pre rýchly vývoj užívateľského rozhrania web-based aplikácií. V pozadí tohto frameworku stoja spomenuté technológie ako Ajax, JavaScript, XHTML, CSS, XML a iné. Dôležité je, že framework je javovský, takže Java je to jediné, čo potrebujete na základné, ale aj pokročilé používanie vedieť. Za celým frameworkom stojí firma NextApp, ktorá vyvíja aj platený program pre jednoduchý vývoj v Echu. Rozšírenia sú vyvíjané dobrovoľníkmi a sú distribuované cez známu stránku Sourceforge.net.

Čo Echo ponúka a aké sú jeho výhody?

Odbremeňuje vás od starostí s vyššie uvedenými technológiami a ponúka vám na prácu Java API.
Echo spolu s jeho rozšíreniami ponúka široké spektrum komponentov, ktoré môžete použiť pre vytváranie GUI vašej webovej stránky.
Je open-source. Zdrojové kódy sú verejne prístupné.
Je jednoduchý. To platí hlavné pre ľudí, ktorý majú skúsenosti so Swingom. Echo poníma podobný koncept práce s komponentami.
Má dobrú podporu. Echo má vlastné fórum so slušným počtom užívateľov. Keď budete mať nejaký problém ohľadom Echa, je veľmi pravdepodobné, že niekto už niečo podobné riešil.
Vyvíja sa. Už počas písania tohto článku sa chystá tretia verzia Echa. Nemusíte sa obávať, prechod na ňu z dvojkovej verzie nebude pre vás problém.

Ako bude vyzerať tento tutoriál a čo bude jeho výsledkom?

Ja osobne som vždy nemal rád nepraktické tutoriály, kde je vám niečo vysvetlené a následne je vám predložený ukážkový kód bez akejkoľvek súvislosti s predošlými kódmi. Tento tutoriál bude mať cieľ. Počas celého tutoriálu budeme spolu vytvárať organizér. V tejto web aplikácii bude kalendár, kde budeme môcť zadávať úlohy, bude mať mesačný, ale aj týždenný prehľad, bude možné vytvoriť si denný prehľad činností. Určite sa nájde miesto pre nejaké grafy a podľa záujmu tam pridáme aj ďalšie funkčnosti.

Je dôležité pripomenúť, že Echo2 je na vytváranie GUI, alebo ak chcete prezenčnej vrstvy. V článkoch sa teda nebudem zaoberať ukladaním údajov. Práve preto nechávam na vás, či si budete údaje ukladať do databázi, do súboru a hoci aj na papier, alebo či si ich vôbec budete ukladať.

Po skončení tohto tutoriálu budete vedieť vytvoriť vlastnú pokročilú Echo2 web aplikáciu.

Na konci každého článku bude možné si stiahnuť zdrojové kódy s komentármi, ale aj war súbor pre jednoduché nasadenie priamo na webový server.

Trocha teórie na začiatok

Hierarchia komponentov v Echu sa riadi jednoznačnými pravidlami. Trieda Window predstavuje koreňový prvok stromu hierarchie komponentov a je to vlastne okno prehliadača. Môže mať len jedného potomka, a to objekt ContentPane, pod ktorým si predstavte oblasť zaberajúcu okno prehliadača. Do ContentPane je možné vložiť jediný komponent (s výnimkou jediného prípadu, ale to vám ukážem na príslušnom mieste).

Je potrebné si uvedomiť, že nemôžeme vkladať komponenty, kde sa nám zapáči. Postupne si ukážeme, ktoré komponenty kam patria.

Čo budeme potrebovať?

Pre tento tutoriál bude potrebné, aby ste si stiahli webový server. Ja osobne budem používať Tomcat 5.5.25.

Taktiež si stiahnite knižnice Echa2 (samotné jar súbory nájdete pod „NextApp_Echo2\BinaryLibraries\“).

Knižnice rozšírení nebudeme zatiaľ pridávať, keďže ich momentálne nepotrebujeme.

Môžeme začať s programovaním

Ako prvé si vytvoríme webový projekt s názvom Organizér. Do novovytvoreného projektu si pridáme knižnice Echa2.

Pre istotu uvádzam aj môj web.xml:

<?xml version=“1.0″ encoding=“UTF-8″?>
<web-app version=“2.4″
    xmlns=“http://java.sun.com/xml/ns/j2ee“
    xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance“
    xsi:schemaLocation=“http://java.sun.com/xml/ns/j2ee
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd“>
    <servlet>
        <servlet-name>MainServlet</servlet-name>
        <servlet-class>organizer.MainServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>MainServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

Prvé, čo budeme musieť vytvoriť, je servlet – je to jediný servlet, o ktorom sa počas celého tutoriálu dopočujete. Servlet si nazvime MainServlet a pridáme ho do balíčka organizer:

package organizer;
import nextapp.echo2.app.ApplicationInstance;
import nextapp.echo2.webcontainer.WebContainerServlet;
public class MainServlet extends WebContainerServlet
{
    public ApplicationInstance newApplicationInstance()
    {
        return new AppInstance();
    }
}

Náš servlet je dcérskou triedou nextapp.echo2.webcontainer.WebContainerServlet. Tento servlet je špeciálnou implementáciou HTTPServlet a je to základný kameň každej web aplikácie postavenej na Echu2. Pre nás je podstatné vedieť, že v našom servlete musíme prekryť verejnú metódu newApplicationInstance, ktorá vracia objekt typu ApplicationInstance.

Následne si vytvoríme triedu AppInstance a dáme ju do balíčka organizer:

package organizer;
import nextapp.echo2.app.ApplicationInstance;
import nextapp.echo2.app.Window;
public class AppInstance extends ApplicationInstance
{
    public Window init()
    {
        Window window = new Window();
        MainScreen mainScreen = new MainScreen();
        window.setContent(mainScreen);
        return window;
    }
}

Naša trieda je dcérskou triedou ApplicationInstance. Takáto trieda je druhým základným pilierom každej Echo aplikácie. Našou jedinou úlohou je prekryť jej verejnú metódu init, ktorá vracia komponent triedy Window, ktorý som už spomínal. V tejto metóde najskôr vytvoríme objekt Window a následne objekt triedy MainScreen, ktorý predáme ako parameter metódy setContent. Tým sme nastavili obsah okna. (Ja viem, vypisuje to chyby…)

Vytvorte si triedu MainScreen a pridajte ju do balíčka organizer:

package organizer;
import nextapp.echo2.app.ContentPane;
import nextapp.echo2.app.Label;
public class MainScreen extends ContentPane
{
    public MainScreen()
    {
        add( new Label(„Funguje to!“));
    }
}

Ako som na začiatku spomínal jediné, čo môžeme pridať do objektu Window, je objekt ContentPane. Naša trieda MainScreen túto podmienku splňuje tým, že je dcérskou triedou ContentPane. Táto trieda zatiaľ veľa nerobí, ale to nám zatiaľ stačí. (Sľubujem, že nabudúce to bude lepšie.) Čo je potrebné si všimnúť, je metóda add, ktorej parameter je objekt triedy nextapp.echo2.app.Component. Parameter predstavuje komponent, ktorý bude vložený. Túto metódu dedí každý objekt od triedy nextapp.echo2.app.Component.

Prvé, čo sme pridali, je objekt Label. Tento komponent slúži na vkladanie textu. Ako vidíte, žiadaný text proste predáte v konštruktore.

Súhrn

V tomto článku ste sa zapotiť nemohli. Povedali sme si, na čo Echo2 slúži, popísali sme si základy, ktoré je potrebné vedieť. Na koniec sme vytvorili základ našej budúcej aplikácie, takže si môžete vyskúšať, či vám všetko funguje ako má. ak nie, stiahnite si vzorové súbory našej aplikácie.