Collection Elements

In seaBreeze the user interface is described in a static way. Yet it is very easy to describe dynamic websites in the web painter. When you need to display a collection of objects, the idea of seaBreeze is you define how one object is displayed and all the other objects are shown in the same way. This is done by using the Collection Element. It replicates its content for all the objects that it should display.

Imagine a Comic gallery where a list of pictures needs to be shown. Each Comic Issue has an image, a name and number. It is not necessary to describe how each single issue is rendered because in that case only a fixed number of pictures can be shown. Instead the elements used to display the issue are described once and are then wrapped in a collection element.

The collection element operates on an aspect that should return a collection. It then replicates its sub-elements for each of the objects in its aspect. The most important part now is how the aspects of each object are communicated to the elements. While the aspect of the collection element is sent to the application model, the aspects of elements inside the collection element are sent to the replicated object. 

Example

Let's build a simple Comic Gallery application. The Comics will be displayed in a table, one issue per row. First create the Table Element. It can be found in the palette in Table tab. 

AddTable.png

A new table automatically contains a table row. Lets use the existing table row to describe how each comic is displayed. The first column should show the cover of the comic. Add a table cell to the row and add an image to the cell.

TableWithImage.png

The element tree should look like in the image. Repeat the steps to add cells for the name and for the issue. The Comic objects that we are going to display have the following aspects: #cover, #name and #issue. The text fields' aspects are set to exactly these values.

TableWithImageAndText.png

The image also has an aspect attribute, which is set to #cover. The #cover method is now expected to return the name of a file in the image's selected file library. 

ImageProperties1.png

Now the description of the Comic issue is finished. What's missing is the collection element that repeats this description for every issue.

To do that add a Collection-element to the table. 

AddCollectionContainer.png

Insert it next to the table row. Then drag the row inside the collection element.

CollectionContainerWithTree.png

In the created container enter the aspect which returns the collection of objects. In our case the aspect is called #comics.

The method #comics returns an OrderedCollection of Comic objects. 

If the application model implements this method correctly and returns objects that have the aspects as mentioned in this example, then the website should render properly.

 

Copyright 2013 by Georg Heeg eK, released under MIT License