Echo2 Web Framework – tabuľka a klávesnica

23. dubna 2008

•

V tomto článku sa naučíme, ako vytvárať v Echo2 tabuľky. Tabuľky sú veľmi užitočným nástroj a pre našu aplikáciu sú priam nenahraditeľné.

Predtým, ako začneme, stiahnite si zdrojové kódy a aktualizujte texty.

Oproti predošlému článku nám do menu „Zobraz“ pribudla ďalšia položka s názvom „Tabuľka s úlohami“. Po kliknutí na ňu sa nám zobrazia jednotlivé úlohy. Keďže v našom projekte nepoužívame databázu, zoznam úloh si vytvoríme. Pridajme si teda balíček organizer.dto, do ktorého vložíme triedu DTOTask. (Tomu, kto nevie, o čo sa jedná prezradím, že predložka DTO je skratka návrhového vzoru Data Transfer Objects.) Trieda je to naozaj jednoduchá, predstavuje len miesto pre uloženie údajov týkajúcich sa úlohy.

Ako dobre vieme, nie je možné vložiť našu tabuľku priamo do obsahu objektu typu ContentPane, a preto ju musíme do niečoho obaliť. Vytvoríme si triedu TablePane v balíčku organizer.components. Táto trieda bude slúžiť len ako obal pre všetky naše tabuľky. Tabuľky budeme vkladať do objektu type SplitPane, pričom zatiaľ do jeho druhej časti vložíme len prázdny Label.

nextapp.echo2.app.Table

Teraz sa dostaneme ku tomu podstatnému, a to ku vytvoreniu tabuľky. Echo2 nám poskytuje široké spektrum tabuliek, no nám postačí tá základná. Na vytvorenie základnej tabuľky by nám stačilo:

1. Vytvoriť samotný objekt tabuľky.
2. Vytvoriť model pre dáta.
3. Priradiť mu objekt pre vykresľovanie.

My však urobíme niečo viac, a preto naše ďalšie kroky budú:

4. Vytvoriť model pre stĺpce a upraviť ich vzhľad.
5. Implementovanie metód potrebných pre pridávanie, upravovanie a odoberanie dát z tabuľky. (To si necháme na ďalší článok.)

1. Vytvoriť samotný objekt tabuľky

Ako prvé vytvoríme objekty cellLayout a headerLayout. Sú to objekty triedy nextapp.echo2.app.layout.TableLayoutData. Vďaka nim môžeme ovplyvniť to, ako sa budú vykresľovať bunky a hlavička tabuľky. Z vlastnostní, ktoré tieto objekty nastavujú, je nová len tá posledná, a to setInsets(Insets). Predstavuje CSS vlastnosť padding.

cellLayout = new TableLayoutData();
cellLayout.setAlignment(Alignment.ALIGN_CENTER);
cellLayout.setBackground(new Color(0x3366cc));
cellLayout.setInsets(new Insets(new Extent(3)));
headerLayout = new TableLayoutData();
headerLayout.setAlignment(Alignment.ALIGN_CENTER);
headerLayout.setBackground(new Color(0xeeeeee));
headerLayout.setInsets(new Insets(new Extent(3)));
tableModel = new TaskTableModel(tasks);
setModel(tableModel);
setColumnModel(createTabColModel());
setDefaultRenderer(Object.class,cellRenderer);
setDefaultHeaderRenderer(headCellRenderer);

V nasledujúcich riadkov sme vytvorili model pre dáta a stĺpce a postarali sme sa o nastavenie objektov pre vykresľovanie.

2. Vytvoriť model pre dáta

Model tabuľky je predstavovaný objektom triedy nextapp.echo2.app.table.AbstractTableModel. Dátový model sa naozaj stará len o dáta. On rozhoduje, aká hodnota sa vykreslí.

Tým, že naša vnútorná trieda dedí od triedy AbstractTableModel, sa zaväzujeme prekryť metódy:

1. int getRowCount(), metóda vracajúca počet riadkov
2. int getColumnCount(), metóda vracajúca počet stĺpcov
3. Object getValueAt(int čísloStĺpca,int čísloRiadku), metóda vracajú hodnotu na danom riadku v danom stĺpci

My ešte prekryjeme metódu String getColumnName(int čísloStĺpca), v ktorej vrátime prvok z poľa s názvami stĺpcov pre našu tabuľku:

public String getColumnName(int colIndex)
{
   return headerNames[colIndex];
}
private final String[] headerNames = new String[]
{
   Messages.getMessage(„TaskTable.Name“),
   Messages.getMessage(„TaskTable.Start“),
   Messages.getMessage(„TaskTable.End“),
   Messages.getMessage(„TaskTable.Priority“),
   Messages.getMessage(„TaskTable.State“),
   Messages.getMessage(„TaskTable.Alarm“),
   Messages.getMessage(„TaskTable.Text“)
};

3. Priradiť objekt na vykresľovanie

Budeme používať dva objekty typu nextapp.echo2.app.table.TableCellRenderer. Jeden z nich bude slúžiť na vykresľovanie hlavičky a ten druhý na zvyšné bunky. Vykresľovanie prebieha v metóde Component getTableCellRendererComponent(Table naša tabuľka, Object hodnotaNaVykreslenie,int indexStĺpca,int indexRiadka)).

public Component getTableCellRendererComponent(Table table,Object value, int column, int row)
{
   Label cellLabel = new Label((String) value);
   cellLabel.setForeground(new Color(0x3366cc));
   cellLabel.setLayoutData(headerLayout);
   return cellLabel;
}

4. Vytvoreniť model pre stĺpce a úpraviť ich vzhľad

Model stĺpcov vytvoríme pomocou objektu nextapp.echo2.app.table.TableColumnModel;, do ktorého pridáme objekty typu nextapp.echo2.app.table.TableColumn, predstavujúce jednotlivé stĺpce. Do konštruktora triedy TableColumn vložíme index stĺpca, jeho šírku, objekt cellRenderer pre vykreslenie buniek a objekt headCellRenderer pre vykreslenie hlavičky.

private TableColumnModel createTabColModel()
{
   TableColumnModel tabColModel = new DefaultTableColumnModel();
   TableColumn[] tabCols = createTabCols();
   tabColModel.addColumn(tabCols[0]);
   tabColModel.addColumn(tabCols[1]);
   tabColModel.addColumn(tabCols[2]);
   tabColModel.addColumn(tabCols[3]);
   tabColModel.addColumn(tabCols[4]);
   tabColModel.addColumn(tabCols[5]);
   tabColModel.addColumn(tabCols[6]);
   return tabColModel;
}
   private TableColumn[] createTabCols()
   {
   TableColumn[] tabCols = new TableColumn[7];
   tabCols[0] = new TableColumn(0, new Extent(8, Extent.PERCENT),cellRenderer, headCellRenderer);
   tabCols[1] = new TableColumn(1, new Extent(5, Extent.PERCENT),cellRenderer, headCellRenderer);
   tabCols[2] = new TableColumn(2, new Extent(5, Extent.PERCENT),cellRenderer, headCellRenderer);
   tabCols[3] = new TableColumn(3, new Extent(8, Extent.PERCENT),cellRenderer, headCellRenderer);
   tabCols[4] = new TableColumn(4, new Extent(10, Extent.PERCENT)cellRenderer, headCellRenderer);
   tabCols[5] = new TableColumn(5, new Extent(5, Extent.PERCENT),cellRenderer, headCellRenderer);
   tabCols[6] = new TableColumn(6, new Extent(59, Extent.PERCENT),cellRenderer, headCellRenderer);
   return tabCols;
}

Keď nám klikanie nerobí dobre…

Okrem ovládania myšou môžeme pomocou knižnice Echopointing nadefinovať aj to, ako sa má aplikácia správať po stlačení určitých tlačidiel. Na tento účel použijeme triedu echopointng.KeyStrokeListener. Použitie tohto objektu je jednoduché. Povedzme, že budeme chcieť použiť klávesy Escape a Enter. Prvou klávesov zavrieme naše okno pre pridávanie udalostí a druhou potvrdíme odoslanie formulára. Pre tento účel slúži kód:

   keyStroke = new KeyStrokeListener();
   keyStroke.addKeyCombination(KeyStrokeListener.VK_RETURN, „Enter“);
   keyStroke.addKeyCombination(KeyStrokeListener.VK_ESCAPE, „Escape“);
   keyStroke.addActionListener(new ActionListener()
   {
      public void actionPerformed(ActionEvent ae)
      {
      if(ae.getActionCommand() == „Enter“)
      {
         submitButton.fireActionPerformed(ae);
      }
      if(ae.getActionCommand() == „Escape“)
      {
         ApplicationInstance.getActive().getDefaultWindow().getContent().remove(AddWindow.this);
      }
      }
   });

Ako vidíme jednoducho pri stlačení klávesy Eenter zavoláme metódu fireActionPerformed pre naše odosielacie tlačidlo. Po stlačení klávesy Escape zase jednoducho okno zavrieme. Aby náš kód naozaj fungoval, je potrebné ešte objekt keyStroke vložiť do iného komponentu. V našom prípade to bude riadok pre odosielacie tlačidlo.