Custom CSS

The HTML generated by the Wicket viewer include plenty of CSS classes so that you can easily target the required elements as required. For example, you could use CSS to suppress the entity’s icon alongside its title. This would be done using:

.entityIconAndTitlePanel a img {
    display: none;
}

These customizations should generally be added to application.css; this file is included by default in every webpage served up by the Wicket viewer.

Individual members

For example, the ToDoItem object of the example TodoApp has a notes property. The HTML for this will be something like:

<div>
  <div class="property ToDoItem-notes">
    <div class="multiLineStringPanel scalarNameAndValueComponentType">
      <label for="id83" title="">
        <span class="scalarName">Notes</span>
        <span class="scalarValue">
           <textarea
              name="middleColumn:memberGroup:1:properties:4:property:scalarIfRegular:scalarValue"
              disabled="disabled"
              id="id83" rows="5" maxlength="400" size="125"
              title="">
           </textarea>
         <span>
      </label>
    </div>
  </div>
</div>

The application.css file is the place to add application-specific styles. By way of an example, if (for some reason) we wanted to completely hide the notes value, we could do so using:

div.ToDoItem-notes span.scalarValue {
    display: none;
}

You can use a similar approach for collections and actions.

Custom CSS styles

The above technique works well if you know the class member to target, but you might instead want to apply a custom style to a set of members. For this, you can use the @PropertyLayout(cssClass=…).

For example, in the ToDoItem class the following annotation (indicating that this is a key, important, property) :

@PropertyLayout(cssClass="x-myapp-highlight")
public LocalDate getDueBy() {
    return dueBy;
}

would generate the HTML:

<div>
    <div class="property ToDoItem-dueBy x-myapp-highlight">
        ...
    </div>
</div>

This can then be targeted, for example using:

div.x-myapp-highlight span.scalarName {
    color: red;
}

Note also that instead of using @PropertyLayout(cssClass=…) annotation, you can also specify the CSS style using a layout file.

Table columns

Sometimes you may want to apply styling to specific columns of tables. For example, you might want to adjust width so that for certain properties have more (or less) room than they otherwise would; or you might want to hide the column completely. This also applies to the initial icon/title column.

There is also the issue of scoping:

You may wish the style to apply globally: that is, dependent on the type of entity being rendered in the table, irrespective of the page on which it is shown.
Alternativel, you may wish to target the CSS for a table as rendered either as a parented collection (owned by some other entity) or rendered as a standarlone collection (the result of invoking an action).

In each of these cases the Wicket viewer adds CSS classes either to containing divs or to the <th> and <td> elements of the table itself so that it can custom styles can be appropriately targetted.

Applying styles globally

Every rendered collection containing a domain class will be wrapped in a <div> that lists that domain class (in CSS safe form). For example:

<div class="entityCollection com-mycompany-myapp-Customer">
    ...
    <table>
        <tr>
            <th class="title-column">...</th>
            <th class="firstName">...</th>
            <th class="lastName">...</th>
            ...
        </tr>
        <tr>
            <td class="title-column">...</td>
            <td class="firstName">...</td>
            <td class="lastName">...</td>
            ...
        </tr>
        ...
    </table>
    ...
</div>

Using this, the lastName property could be targeted using:

.com-mycompany-myapp-Customer th.lastName {
    width: 30%;
}

Parented collections

Parented collections will be wrapped in <div>s that identify both the entity type and also the collection Id. For example:

<div class="entityPage com-mycompany-myapp-Customer">       (1)
    ...
    <div class="orders">                                    (2)
        <table>
            <tr>
                <th class="title-column">...</th>
                <th class="productRef">...</th>
                <th class="quantity">...</th>
                ...
            </tr>
            <tr>
                <td class="title-column">...</td>
                <td class="productRef">...</td>
                <td class="quantity">...</td>
                ...
            </tr>
            ...
        </table>
        ...
    </div>
    ...
</div>

1	the parent class identifier
2	the collection identifier. This element’s class also has the entity type within the collection (as discussed above).

Using this, the productRef property could be targeted using:

.com-mycompany-myapp-Customer orders td.productRef {
    font-style: italic;
}

Standalone collections

Standalone collections will be wrapped in a <div> that identifies the action invoked. For example:

<div class="standaloneCollectionPage">
    <div class="com-mycompany-myapp-Customer_mostRecentOrders ...">     (1)
        ...
        <div class="orders">
            <table>
                <tr>
                    <th class="title-column">...</th>
                    <th class="productRef">...</th>
                    <th class="quantity">...</th>
                    ...
                </tr>
                <tr>
                    <td class="title-column">...</td>
                    <td class="productRef">...</td>
                    <td class="quantity">...</td>
                    ...
                </tr>
                ...
            </table>
            ...
        </div>
        ...
    </div>
</div>

1	action identifier. This element’s class also identifies the entity type within the collection (as discussed above).

Using this, the quantity property could be targeted using:

.com-mycompany-myapp-Customer_mostRecentOrders td.quantity {
    font-weight: bold;
}