Opakovače

V tomto diele tipov a trikov sa pozrieme na komponenty typu opakovač.

Opakovače (Repeaters)

Opakovač je komponenta určená na vykreslenie opakujúcich sa tagov (komponentov). Wicket ponúka niekoľko druhov opakovačov z nich dvaja si predstavíme bližšie.

RepeatingView

Najjednoduchším opakovačom je RepeatingView. Ten sa používa pre opakovanie jednoduché časti html kódu (jedného tagu). Je použiteľný napríklad pre zobrazenie položiek zoznamu.

.java

RepeatingView rv = new RepeatingView("rv");
rv.add(new Label(rv.newChildId(), "red"));
rv.add(new Label(rv.newChildId(), "green"));
rv.add(new Label(rv.newChildId(), "blue"));
add(rv);

.html

<ul>
    <li wicket:id="rv"></li>
</ul>

Vytvorená stránka:

Zdrojový kód stránky s opakovačom:

<body>
    <ul>
        <li wicket:id="rv">red</li><li wicket:id="rv">green</li><li wicket:id="rv">blue</li>
    </ul>
</body>

RepeatingView opakuje html tag, ktorému je pridelený (ktorý obsahuje jeho id). Každá Wick komponent musí mať id. To možno získať pomocou metódy RepeatingView.newChildId ().

V prípade, že ste miesto vyššie uvedené stránky dostali tento chybový výpis,

chyba pri zobrazení - Tipy a triky pre Wicket

znamená to, že ste síce opakovač vytvorili, ale nepridali ste ho do stránky pomocou add(rv);.

ListView

Teraz sa zoznámime s opakovačom ListView. Ako už jeho názov napovedá (list = zoznam), je vytvorený pre zobrazovanie položiek zo zoznamu (zoznamu objektov).

Najskôr si vytvoríme triedu Customer a model, ktorý nám bude poskytovať dáta (zoznam zákazníkov).

Customer.java

public class Customer {

    private String firstName;
    private String lastName;
    private String phone;
    private String email;

    public Customer() {
    }
    public Customer(String firstName, String lastName, String phone, String email) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.phone = phone;
        this.email = email;
    }

    public String getFirstName() {
        return firstName;
    }
    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }
    public String getLastName() {
        return lastName;
    }
    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
    public String getPhone() {
        return phone;
    }
    public void setPhone(String phone) {
        this.phone = phone;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getName() {
        return firstName + " " + lastName;
    }
}

Všimnite si, že okrem setter a Getter obsahuje aj metódu getName(), ktorá vracia meno a priezvisko. Tiež obsahuje bezparametrický konštruktor a konštruktor s parametrami pre jednoduchšie vytvorenie objektu.

CustomersModel.java

public class CustomersModel implements IModel<List<Customer>> {

    @Override
    public void detach() {
    }

    @Override
    public List<Customer> getObject() {
        return getCustomers();
    }

    @Override
    public void setObject(List<Customer> object) {
    }

    private List<Customer> getCustomers() {
        List<Customer> list = new ArrayList<Customer>();

        Customer c1 = new Customer("František", "Koudelka", "777 123 456", "[email protected]");
        Customer c2 = new Customer("Jan", "Novák", "776 231 564", "[email protected]");
        Customer c3 = new Customer("Petra", "Novotná", "777 123 456", "[email protected]");
        Customer c4 = new Customer("Jiří", "Zelený", "606 568 721", "[email protected]");

        list.add(c1);
        list.add(c2);
        list.add(c3);
        list.add(c4);

        return list;
    }
}

Vďaka tomu, že používame generiká IModel<List<Customer>> tak nám metóda GetObject vracia typ List<Customer>. V prípade, že by sme generiká nepoužili (aj to je možné), táto metóda by vracala Object a my by sme si ho potom museli pretypovať. Odporúčam teda generiká používať.

Teraz vytvoríme ListView a zobrazíme všetky informácie o zákazníkoch.

.java

IModel<List<Customer>> model = new CustomersModel();
ListView lv = new ListView<Customer>("lv", model) {
    @Override
    protected void populateItem(ListItem<Customer> item) {
        Customer customer = item.getModelObject();
        item.add(new Label("firstName", customer.getFirstName()));
        item.add(new Label("lastName", customer.getLastName()));
        item.add(new Label("phone", customer.getPhone()));
        item.add(new Label("email", customer.getEmail()));
    }
};
add(lv);

.html

<div wicket:id="lv">
    <span wicket:id="firstName"></span>
    <span wicket:id="lastName"></span>
    <span wicket:id="phone"></span>
    <span wicket:id="email"></span>
</div>

Pre každú položku v zozname volá list metódu populateItem(). Položku v zozname je možné získať zavolálním metódy ListItem.getModelObject().

Pravdepodobne vás napadlo, že pre prezentáciu takýchto dát by sa lepšie hodila tabuľka. V tom prípade stačí iba obmeniť html kód.

<table style="border: 1px solid black;">
    <tr wicket:id="lv">
        <td wicket:id="firstName"></td>
        <td wicket:id="lastName"></td>
        <td wicket:id="phone"></td>
        <td wicket:id="email"></td>
    </tr>
</table>

table s pomocou ListView - Tipy a triky pre Wicket

Ešte sa vrátime k jednoduchému opakovačmi RepeatingView zo začiatku lekcie. Ak by nám stačilo na stránke zobrazí iba meno a priezvisko, mohli by sme použiť tento jednoduchý opakovač.

.java

RepeatingView rv2 = new RepeatingView("rv2");
for (Customer customer : model.getObject()) {
    rv2.add(new Label(rv2.newChildId(), customer.getName()));
}
add(rv2);

.html

<div wicket:id="rv2"></div>

Tip pre prácu v Eclipse

V prípade, že sa vám pri práci v Eclipse nezobrazuje javadoc, je to spôsobené tým, že maven zaistil závislosti (stiahol potrebné Wick knižnice), ale nestiahol javadoc. To isté platí pre zdrojové kódy (možnosť prekliknúť sa do zdrojových kódov tried wicketu). Kliknite pravým tlačidlom na projekt -> Maven -> Download javadoc | Download Sources

rozbaľovacej ponuka v Eclipse - Tipy a triky pre Wicket

Potom by už malo fungovať ako zobrazovanie javadoc,

kontextová ponuka v Eclipse - Tipy a triky pre Wicket

tak možnosť prekliknúť sa do tried wicketu (držte klávesu Ctrl a prejdite kurzorom myši nad dátový typ triedy -> kurzor sa zmení na kurzor odkaze a po kliknutí ľavým tlačítkom sa dostanete do danej triedy).

Článok pre vás napísal vita

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

vita

Aktivity