Echo2 Web Framework – Echopointng, nech sa páči

V tomto článku si predstavíme druhú hlavnú knižnicu rozširujúcu možnosti Echo2. Zoznámime sa aj s ďalšími komponentami a povieme si niečo nové ohľadom starých.

Predtým než začneme, mali by ste si stiahnuť zdrojové kódy ku tejto časti seriálu. Ako obvykle, aj teraz bude najlepšie, pokiaľ si zaktualizujeme súbory spravy.properties a Style.xml.

Echopointng

Knižnica Echopointng vznikla v rámci komunity zoskupenej okolo Echo2. Táto knižnica je pokračovaním staršej knižnice echopoint, ktorá je určená pre jednotkovú verziu Echa. Knižnica nielenže rozširuje už existujúce komponenty, ale aj prináša nové. Rozširujúce triedy, ktoré sú spravidla potomkami tried starých, rozoznáte podľa prípony Ex v ich názve. Jedná sa napríklad o komponenty ako LabelEx, TextFieldEx,TableEx atp. My sme doteraz nepoužili ani jednu z týchto tried, a to jednoducho preto lebo to nebolo potrebné. Zdrojové kódy nájdeme tu.

V tomto článku si vytvoríme novú záložku v našom okne. Bude obsahovať formulár pre vytváranie úloh. Pre jednotlivé úlohy budeme môcť zadať okrem iného ich názov, časový rozsah a samozrejme samotné zadanie úlohy. Tieto polia budú predstavované nami už známymi triedami. Pre nás sú zaujímavejšie nové komponenty.

RadioButton a ButtonGroup

Trieda nextapp.echo2.app.RadioButton slúži pre vytváranie kompomentu RadioButton. My ich vytvoríme hneď dva. Pomocou nich budeme označovať či je úloha riešená alebo sa len na jej riešenie pripravujeme. Vytvorenie RadioButtonu je samozrejme jednoduché:

preparationStateButton = new RadioButton();

Nastáva však problém. Však je nám jasné, že úloha nemôže byť v oboch stavoch naraz? To znamená, že nesmieme dovoliť označiť obe tlačidlá v ten istý moment. Riešením je trieda nextapp.echo2.app.button.ButtonGroup. Tá slúži na zoskupovanie objektov triedy RadioButton. Do tejto skupiny vložíme obe naše tlačidla:

ButtonGroup buttonGroup = new ButtonGroup();
preparationStateButton.setGroup(buttonGroup);
workingStateButton.setGroup(buttonGroup);

SelectField

Pokiaľ budeme mať úloh uložených viac bolo by dobré rozlíšiť, ktorá má pre nás akú prioritu. Vďaka tomu sa budeme vedieť lepšie rozhodnúť, ktorú úlohu kedy riešiť. Pre tento účel nám perfektne poslúži trieda nextapp.echo2.app.SelectField. Táto trieda vytvorí výberové pole. Na jej vytvorenie použijeme metódu createPriorityField():

Object[] items = new Object[11];
for(int i=0;i<=10;i++)
{
   items[i] = „“+i ;
}
SelectField field = new SelectField(items);
field.setSelectedIndex(0);
return field; }

V tele metódy najskôr naplníme pole číslicami od 0 do 10. Toto pole následne vložíme do novo vytvoreného objektu triedy SelectField. Do daného poľa sme mohli vložiť aj vlastné objekty. Triedam týchto objektov by sme následne prekryli metódu toString(). Prekrytím tejto metódy by sme určili aký názov by mali objekty v komponente SelectField.

CheckBox

Bolo by skvelé pokiaľ by nás aplikácia mohla upozorniť na to, že by sme sa mali pustiť do riešenia úlohy. Najlepšie by bolo jednoduché zaškrtávacie tlačidlo. Pokiaľ sa pozorne pozrieme do API zistíme, že trieda nextapp.echo2.app.CheckBox je stvorená presne na to.

Ako obvykle aj tu jednoducho vytvoríme objekt pomocou bez parametrického konštruktora.

alarmField = new CheckBox();

Tak už máme vlastne celý formulár avšak mne osobne tam niečo chýba. Jedná sa o polia pre začiatočný a konečný dátum. Priznám sa ja som lenivý a mne sa nechce stále vypĺňať tieto polia ručne.

DateWindow

Vytvorme si triedu DateWindow v balíku organizer.components. Táto trieda bude potomkom triedy WindowPane. Okno to bude naozaj jednoduché okrem kalendára a odosielacieho tlačidla tam nič iné nebude.

DateChooser

Knižnicu Echopointng sme si nepridali len tak pre radosť. Prinášam nám niekoľko nových komponentov a my jeden hneď aj použijeme. Trieda echopointng.DateChooser predstavuje kalendár. Pomocou tohto kalendára budeme vedieť jednoducho pridávať dátumy do našich polí. Urobíme to tak, že ku poliam pre jednotlivé dátumy pridáme tlačidlá. Týmito tlačidla vytvoríme malé okno kde bude kalendár.

Vytvorenie kalendára spočíva v niekoľkých krokoch.

• Vytvoríme objekty typu java.util.Calendar.

  Calendar cal = Calendar.getInstance();

• Pokiaľ bude v poli už zadaný nejaký dátum označíme ho v kalendári.

  try
  {
     Date date = dateFormat.parse(field.getText());
     cal.setTime(date);
  } catch (ParseException ex) {
  }

• Vytvoríme selection model. Na vytvorenie modelu musíme použiť objekt implementujúci rozhranie echopointng.model.CalendarSelectionModel. My použijeme jedinú predvytvorenú triedu, ktorá ho implementuje, a to echopointng.model.DefaultCalendarSelectionModel. Tomuto objektu predáme odkaz na objekt cal.

  CalendarSelectionModel model = new DefaultCalendarSelectionModel(cal);

• Na model pripojíme listener.

  model.addListener(listener);

• Vytvoríme objekt typu DateChooser. Nastavíme mu štýly a nastavíme model.

  DateChooser dateChooser = new DateChooser();
  dateChooser.setModel(model);
  dateChooser.setStyleName(„DateChooser“);

CalendarSelectionListener

Listener, ktorý je predstavovaný rozhraním echopointng.model.CalendarSelectionListener, má dve metódy, ktoré musíme prekryť. Obe prekryjeme rovnako. Jednoducho zistíme, ktorý dátum bol vybraný a ten uložíme do atribútu triedy.

public void displayedDateChange(CalendarEvent ce)
{
   CalendarSelectionModel model =    (CalendarSelectionModel)ce.getSource();
   selectedDate = model.getSelectedDate().getTime();
}
public void selectedDateChange(CalendarEvent ce)
{
   CalendarSelectionModel model =    (CalendarSelectionModel)ce.getSource();
   selectedDate = model.getSelectedDate().getTime();
}

Vyber dát z formulára.

Už máme dva formuláre, dokonca máme aj tlačidlá, ktorými ich môžeme odoslať. Posledné čo nám chýba je metóda, ktorá by nám dáta vybrala. My si teraz ukážeme ako vyberieme dáta z jednotlivých polí. To ako si ich uložíte nechám na Vás.

Najlepšie bude ak použijeme jeden listener na obe tlačidlá, ale ako ich od seba odlíšiť? Keď sa pozorne pozrieme do API zistíme, že našim tlačidlám môžeme nastaviť atribút Id. Preto si v rámci triedy zadefinujeme statické finálne premenné typu String. Tieto premenné predáme pomocou metódy setId() našim tlačidlám. Pomocou tejto techniky sme od seba odlíšili jednotlivé tlačidlá.

public static final String START_DATE_BUTTON_ID = „startDateButton“;
public static final String END_DATE_BUTTON_ID = „endDateButton“;
public static final String MEETING_TAB_BUTTON = „meetingTab“;
public static final String TASK_TAB_BUTTON = „taskTab“;
submitButton.setId(MEETING_TAB_BUTTON);
startDateButton.setId(START_DATE_BUTTON_ID);
endDateButton.setId(END_DATE_BUTTON_ID);
submitButton.setIcon(Images.SUBMIT_BUTTON);

Výber jednotlivých dát je už len formalitou:

public void actionPerformed(ActionEvent ae)
{
   Button button = (Button)ae.getSource();
   String buttonId = button.getId();
   if(buttonId.equals(MEETING_TAB_BUTTON))
   {
      String subject = subjectField.getText();
      String place = placeField.getText();
      String start = startField.getText();
      String end = endField.getText();
      String note = notesArea.getText();
   } else if(buttonId.equals(TASK_TAB_BUTTON)) {
      String name = nameField.getText();
      String start = startField.getText();
      String end = endField.getText();
      boolean preparationState = preparationStateButton.isSelected();
      boolean workingstate = workingStateButton.isSelected();
      int selectedIndex = priorityField.getSelectedIndex();
      Object obj = priorityField.getSelectedItem();
      boolean alarmSelected = alarmField.isSelected();
}
}

V tomto článku sme si vytvorili v poradí druhý formulár. Už by nikomu z Nás nemal robiť veľký problém vytvoriť si ľubovolný vlastný formulár.