A frame is a top-level container that cannot be embedded in another container. If you want the ability to embed arbitrary collections of presentation components, consider using a panel, which is a generic container that can itself be embedded in a wide variety of containers — including another panel. Unlike frames, which usually have built-in decorations such as a title bar and a close box, panels have no intrinsic adornments or gadgets.

It is easy to describe complex view hierarchies by embedding one or more presentation components inside a panel, or by embedding a panel inside another presentation component.The following example shows how to embed a label inside a panel. You describe this simply by placing a label element inside a panel element.

Make this object in eNode Sandbox. The result should be similar to the following:

Both the introductory example and the example above show object associations through element containment. There are other ways to express associations, such as through attribute values that are Universal Resource Indicators (URI), but for describing view hierarchies, the most common method is to use element containment.

The meaning of an association described by containment depends on the types of both the parent element and the child element. During element realization, a given element may assimilate different types of child elements differently. Likewise, an element may be assimilated differently by parents of different types.

In general, when both the parent element type and the child element type represent presentation components, the component represented by the child element is embedded inside the component represented by the parent element.

In the example above, the panel element contains a label element whose icon attribute specifies the location of an image resource. The location is specified as a URI. In this example, we use a relative URI, but you can also use an absolute URI to access resources from any host, provided the security settings for your application allow you to access the resource identified by that URI.

In this example, the label displays a gif image of a map in which the oceans and seas are defined by transparent regions in the image. Since the label itself is transparent (by default), the panel’s background color shows through the transparent regions in the image.

Here, the background attribute of the panel element specifies the background color of the realized panel as an RGB value. A panel, like most other presentation components, is opaque, by default. So, its opacity need not be changed just to paint its background color. Try specifying a different color value in the background attribute of the panel element to see what happens. Also, observe what happens when you set the label element’s opaque attribute to true.

See Image Background, Transparency, and Translucency for more on this topic.