PATH  WebObjects 4.0 Documentation > What's New in WebObjects 4.0

Table of Contents Previous Section

"Container" Components (WOComponentContent)

 WOComponentContent is a dynamic element that allows you to write nested components as HTML container elements. A container element is an element that can include text and other elements between its opening and closing tags. For example, the HTML FORM element is a container element. As well, WORepetition is a container element.

Using WOComponentContent you can, for example, write a component that defines the header and footer for all of your application's pages. To do so, you'd define a component with HTML similar to the following:

<HTML>

	<HEAD>

		<TITLE>Cool WebObjects App</TITLE>

	</HEAD>

	<BODY>

		<!-- A banner common to all pages here -->

		<!-- Start of content defined by the parent element -->

		<WEBOBJECT name=ParentContent></WEBOBJECT>

		<!-- End of content defined by the parent element -->

		<!-- Put a footer common to all pages here. -->

	</BODY>

</HTML>
The <WEBOBJECT> element on this page is a WOComponentContent element declared like this:

ParentContent : WOComponentContent {};
WOComponentContent is simply a marker that specifies where the contents wrapped by this component's WEBOBJECT tag should go. You can have only one WOComponentContent element in a given component.

To use the component shown above, you'd wrap the contents of all of the other components in the application with a <WEBOBJECT> tag that specifies the component defined above. For example, suppose you named the above component HeaderFooterPage.wo. You could use it in another component like this:

<!-- HTML for a simple component wrapped with HeaderFooterPage -->

<WEBOBJECT name = templateWrapperElement>

	<P>Hello, world!</P>

</WEBOBJECT>
Where templateWrapperElement is declared in the .wod file like this:

templateWrapperElement : HeaderFooterPage {};
At run-time, the contents wrapped by templateWrapperElement are substituted for the WOComponentContent definition. As a result, the HTML generated for this component would be:

<!-- HTML for a simple component wrapped with HeaderFooterPage -->

<HTML>

	<HEAD>

		<TITLE>Cool WebObjects App</TITLE>

	</HEAD>

	<BODY>

		<!-- A banner common to all pages here -->

		<!-- Start of content defined by the parent element -->

		<P>Hello, world!</P>

		<!-- End of content defined by the parent element -->

		<!-- Put a footer common to all pages here. -->

	</BODY>

</HTML>

Table of Contents Next Section