Opakovače

V tomto díle tipů a triků se podíváme na komponenty typu opakovač.

Opakovače (repeaters)

Opakovač je komponenta určená k vykreslení opakujících se tagů (komponent). Wicket nabízí několik druhů opakovačů z nich dva si představíme blíže.

RepeatingView

Nejjednodušším opakovačem je RepeatingView. Ten se používá pro opakování jednoduché části html kódu (jednoho tagu). Je použitelný například pro zobrazení položek seznamu.

.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>

Vytvořená stránka:

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

<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, kterému je přidělen (který obsahuje jeho id). Každá wicketí komponenta musí mít id. To lze získat pomocí metody RepeatingView.newChildId().

V případě, že jste místo výše uvedené stránky dostali tento chybový výpis,

chyba při zobrazení - Tipy a triky pro Wicket

znamená to, že jste sice opakovač vytvořili, ale nepřidali jste jej do stránky pomocí add(rv);.

ListView

Nyní se seznámíme s opakovačem ListView. Jak již jeho název napovídá (list = seznam), je vytvořen pro zobrazování položek ze seznamu (seznamu objektů).

Nejdříve si vytvoříme třídu Customer a model, který nám bude poskytovat data (seznam zákazníků).

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šimněte si, že kromě setterů a getterů obsahuje i metodu getName(), která vrací jméno a příjmení. Také obsahuje bezparametrický konstruktor a konstruktor s parametry pro jednodušší vytvoření 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;
    }
}

Díky tomu, že používáme generiku IModel<List<Customer>> tak nám metoda getObject vrací typ List<Customer>. V případě, že bychom generiku nepoužili (i to je možné), tato metoda by vracela Object a my bychom si jej potom museli přetypovat. Doporučuji tedy generiku používat.

Nyní vytvoříme ListView a zobrazíme všechny informace o zákaznících.

.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>

Pro každou položku v seznamu volá list metodu populateItem(). Položku v seznamu lze získat zavolálním metody ListItem.getModelObject().

Pravděpodobně vás napadlo, že pro prezentaci takovýchto dat by se lépe hodila tabulka. V tom případě stačí pouze obměnit 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 pomocí ListView - Tipy a triky pro Wicket

Ještě se vrátíme k jednoduchému opakovači RepeatingView ze začátku lekce. Pokud by nám stačilo na stránce zobrazi pouze jméno a příjmení, mohli bychom použít 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 pro práci v Eclipse

V případě, že se vám při práci v Eclipse nezobrazuje javadoc, je to způsobeno tím, že maven zajistil závislosti (stáhl potřebné wicketí knihovny), ale nestáhl javadoc. Totéž platí pro zdrojové kódy (možnost prokliknout se do zdrojových kódů tříd wicketu). Klikněte pravým tlačítkem na projekt -> Maven -> Download JavaDoc | Download Sources

rozbalovací nabídka v Eclipse - Tipy a triky pro Wicket

Pak by již mělo fungovat jak zobrazování javadoc,

kontextová nabídka v Eclipse - Tipy a triky pro Wicket

tak možnost prokliknout se do tříd Wicketu (držte klávesu Ctrl a najeďte kurzorem myši nad datový typ třídy -> kurzor se změní na kurzor odkazu a po kliknutí levým tlačítkem se dostanete do dané třídy).

Článek pro vás napsal vita

Uživatelské hodnocení:

2 hlasů

vita

Aktivity