Echo2 Web Framework – naše okno dostáva obsah

V predchádzajúcom článku sme spolu vytvorili prázdne okno. V tomto ho doplníme o formulár pre vytváranie pripomienky na stretnutia. V našom formulári budeme môcť zadať predmet stretnutia, miesto, začiatočný a konečný dátum a pole pre napísanie poznámok. Samozrejme nebude chýbať možnosť odoslania.

Než začneme, aktualizujme si súbor spravy.properties z priložených zdrojových súborov.

Domáca úloha

Na konci minulého článku som zadal malú domácu úlohu. Mali ste si do menu doplniť položku s názvom Zobraz. Správne riešenie si môžete pozrieť v zdrojových kódoch tohoto článku.

Malá predpríprava

Predtým, než čokoľvek začneme pridávať, musíme urobiť pár vecí. Ako prvé vytvoríme baliček organizer.images. V tomto balíčku bude všetko, čo má niečo spoločné s obrázkami. V hotovom balíčku vytvoríme triedu Images. Jej obsah vyzerá nasledovne:

public class Images
{
   public static final String IMAGE_PATH = „/organizer/images/“;
   public static final ImageReference CALLENDAR_WINDOW_BUTTON = new ResourceImageReference(IMAGE_PATH + „calendar.jpg“, new Extent(16), new Extent(16));
   public static final ImageReference SUBMIT_BUTTON = new ResourceImageReference(IMAGE_PATH + „odosielacieTlacidlo.gif“, new Extent(16), new Extent(16));
}

Trieda zatiaľ obsahuje len statickú premennú hovoriacu o umiestnení obrázkov a dve premenné predstavujúce obrázky. Trieda nextapp.echo2.app.ResourceImageReference, je trieda implementujúca nextapp.echo2.app.ImageReference. Táto implementácia triedy ImageReference slúži na preberanie obrázkov z Classpath. Existujú ešte tri ďalšie implementácie. Cestu ku obrázku sme predali ako parameter konštruktora. Bolo by dobré, aby ste si všetci nahrali tieto obrázky. Nájdete ich samozrejme v zdrojových kódoch.

LayoutData

Než začneme pracovať na našom okne, mali by sme mať predstavu, na čo slúži rozhranie nextapp.echo2.app.LayoutData. Jednoducho povedané popisuje, akým spôsobom sa podriadený komponent vykresluje v nadriadenom komponente. Je potrebné si zapamätať:

• V praxi používame triedu implemetujúcu LayoutData. Týchto tried je viac a my si vyberáme poďla nadradeného komponetu. Napríklad ak vkladáme Label do objektu triedy Row, použijeme RowLayoutData. Ak použijeme nesprávny objekt, napríklad v našom prípade ColumnLayoutData, dôjde spravidla ku vyhodeniu výnimky.
• Objekt implemetujúci LayoutData nastavujeme podriadenému prvku pomocou metódy setLayoutData(LayoutData data).

Čo sa týka štýlov, tak všeobecný zápis by vyzeral takto:

<style name=“Názov štýlu“ type=“Trieda podriadeného prvku“>
   <properties>
      <property name=“layoutData“>
         <layout-data type=“Trieda nadriadeného prvku“>
            <properties>
               <property name=“Názov vlastnosti“ value=“Hodnota vlastnosti“/>
               <property name=“Názov vlastnosti 2″ value=“Hodnota vlastnosti 2″/>
            </properties>
         </layout-data>
      </property>
   </properties>
</style>

Naše okno dostáva prvý obsah…

Našim cieľom je vytvorenie viacerých formulárov. Namiesto zbytočného vytvárania nových okien pre každý nový formulár, pridáme do okna záložky.

Pridávanie záložiek

Na vytvorenie záložiek použijeme triedu nextapp.echo2.extras.app.TabPane. Postup je jednoduchý. Pridáme do objektu triedy TabPane už pripravený objekt typu SplitPane. Objekt typu TabPane následne vložíme do nášho okna.

TabPane pane = new TabPane();
pane.add(createMeetingTab());

Metóda createMeetingTab()

Táto metóda slúži na vytvorenie záložky pre stretnutia. Naša obrazovka pre stretnutie sa buďe skladať z objektu typu SplitPane. V horne časti budú poukladané polia spolu s názvami. V spodnej časti bude riadok s odosielacím tlačidlom. Čo sa týka samotných polí, tie budú obalené v špeciálnom objekte predstavujúcom mriežku.

Poďme si spolu vysvetliť najdôležitejšie časti metódy:

SplitPane meetingPane = new SplitPane(SplitPane.ORIENTATION_VERTICAL_BOTTOM_TOP,new Extent(30));
TabPaneLayoutData layout = new TabPaneLayoutData();
layout.setTitle(Messages.getMessage(„AddWindow.Meeting“));
meetingPane.setLayoutData(layout);

Najskôr vytvoríme objekt meetingPane. Tomuto objektu (podradenému) nastavíme pomocou zavolania metódy setLayoutData(LayoutData) objekt typu TabPaneLayoutData (nadradený prvok je TabPane). Následne zavoláme metódu setTitle(String) objektu Layout. Táto metóda nastaví nadpis záložky. Nadpis nastavujeme priamo v kóde, keďže správy nahrávame dynamicky a cez štýly nadpis nemôžeme nastaviť (je to tak urobené naschvál, momentálne nie je podstatné prečo).

Trieda Grid

Trieda nextapp.echo2.app.Grid predstavuje mriežku. My ju budeme používať na umiestnenie našich textových polí spolu s ich názvami. Použijeme bezparametrický konštruktor, ktorý vytvorí mriežku s veľkosťou dva a horizontálnou orientáciou. Orientácia znamená, či sa prvky pridané do nášho objektu budú ukladať po riadkoch alebo po stĺpcoch. Veľkosť určuje, koľko prvkov sa do riadku či stĺpca zmestí. Nášmu objektu ešte priradíme štýl, pomocou ktorého nastavíme vlasnosť insets. Tá určuje rozostup prvkov vo vnútri komponentu.

Musím vás ešte upozorniť na jednu slabinu triedy Grid. Nie je do nej vhodné vkladať veľké množstvo komponentov. Komponent Grid sa na výslednej stránka v prípade akéľkoľvek malej zmeny prekreslí celý. To môže spôsobiť výkonostné problémy, hlavne na strane klienta. V takom prípade porozmýšlajte nad použitím tabuľky.

Grid grid = new Grid();
grid.setStyleName(„Grid“);

Trieda TextField

Trieda nextapp.echo2.app.TextField predstavuje textové pole. Opäť použijeme bezparametrický konštruktor a následne aplikujeme štýly.

Triedy Font a Border

Trieda nextapp.echo2.app.Font určuje, ako je zrejmé, písmo. Objekt tejto triedy spolu s nastavenými parametrami je predávaný ako parameter metóde setFont(Font) určitého komponentu.

Objekt triedy nextapp.echo2.app.Border je predavaný objektom v metóde setBorder(Border), ktorá nastaví okraj daného komponentu.

Poďme si ukázať, ako písmo a okraj nadefinujeme pomocou štýlov:

<style name=“InputLabel“ type=“nextapp.echo2.app.Label“>
   <properties>
      <property name=“font“>
         <font typeface=“Arial“ bold=“true“ size=“12px“/>
      </property>
   </properties>
</style>
</div>
<p>Ako vidíte naše popisy ku textovým poliam búdu písma typuArial zvýraznené a budú mať veľkosť 12px. Orámovanie textových polí je nadefinované nasledovne: </p>
<div class=’sample‘>
<style name=“InputField“ type=“nextapp.echo2.app.TextField“>
   <properties>
      <property name=“width“ value=“200px“/>
      <property name=“foreground“ value=“#000000″/>
      <property name=“border“>
         <border size=“1px“ style=“solid“ color=“#6292ce“/>
      </property>
   </properties>
</style>

Trieda TextArea

Aby sme si ku pripomienke pre stretnutie mohli napísať dlhšiu poznámku, použijeme objekt nextapp.echo2.app.TextArea.. Ani teraz nepotrebujeme urobiť nič iné, než použiť bezparametrický konštruktor a následne nastaviť štýlmi šírku, výšku a okraje.

Ako to všetko odošleme?

Samozrejme jednoducho. Trieda nextapp.echo2.app.Button predstavuje tlačidlo. Obvykle by sme vytvorili konštruktor, ktorému by sme pomocou premennej typu String predali nápis pre tlačidlo. Následne by sme ho veľmi pravdepodobne aj naštýlovali. My však urobíme toto:

Button submitButton = new Button();
submitButton.setIcon(Images.SUBMIT_BUTTON);

Po vytvorení objektu sme mu nastavili obrázok pomocou setIcon(ImageReference). Chcem dodať, že akákoľvek podobnosť medzi našim tlačidlom a tlačidlom použivaným v formúlari na stránke Intervalu nie je náhodná.

Tlačidlo sme vložili do objektu triedy nextapp.echo2.app.Row. Riadku sme nastavili štýlmi centrovanie podradených komponentov.

Súhrn

Z tohto článku by sme si mali zapamätať nasledujúce dve veci:

• Pri používani tried typu LayoutData je potrebné dávať pozor, aby sme použili správnu implementujúcu triedu.
• Komponet typu Grid sa stále prekresľuje celý, čo môže spôsobiť výkonostné problémy.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.