seaBreezeHow to display a collection of objects

When you need to display a lot of objects, the idea of seaBreeze is that basically all these objects are shown in the same way. So you describe once how each object should look like and it is repeated for each object in a collection.

Getting Started

Lets assume we want to create an application to manage comics. In this application we want to display all comics in a table. The first thing we need to do is create a Table. You can find it in the Basic Palette.

Please delete the TableRow element that is created automatically. Now select the Table and create a CollectionContainer inside of it. You can find the CollectionContainer element in the Advanced Palette.

The CollectionContainer

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

The object returned by #comics is an OrderedCollection of Comic objects. Lets assume a comic has three properties: name, issue and coverUrl. Each comic is shown in one row of the table. It uses one column for each of its properties. Lets create a TableRow with three TableCells. Make sure that the CollectionContainer is selected, so that the table row is created inside of it. Both TableRow and TableCell elements can be found in the Basic Palette.

Define the look of an object

The first column should show all the names of the comics, so set the aspect of the text element in the first cell to "name". The important thing here is that the application model does not respond to #name. Instead the method that is specified as aspect is sent to the object for which the CollectionContainer replicates its subelements. In our case the message #name is sent to one of the Comic objects.

The red arrow that appears next to aspect means that this aspect is not defined in the ApplicationModel. That's completely correct, as the current object is a Comic object. seaBreeze doesn't know about this yet, so it shows the red arrow. Don't click it, just ignore it please.

Now repeat the previous step for the second column and set the text element's aspect to: #issue.

In the last column we want to show the cover of the comic. To do so we need to add an ImageElement. The ImageElement can be found in the Basic Palette. The text element that is still inside the table cell can be removed.

To finish this up, you need to enter "coverUrl" into the aspect field. Also make sure that the correct file library is selected. Lets assume here that the comic covers are all in the library ComicCatalogFiles.

Further Steps

If you like to see a simple example of CollectionContainers, please have a closer look to the Drag and Drop demo. The big gray container shows its contained red cubes with a CollectionContainer

If you don't have a collection of objects, but only one object that you want to show in more detail, you can also use an ObjectContainer, which will show only the object returned by the aspect.