Hierarchical "Tour"

This section provides a visual "tour" of what (above) was referred to as the "essentially hierarchical nature of the various elements that come together to form a page."

This section—a series of screen captures with complex annotations—cannot by itself tell the entire story, but it should serve as a useful visual introduction to the basic premise of this site build system. Namely, that to one degree or another, the variety of parts (and kinds of parts) that make up the whole, can be seen as "nesting," as having a series of "parent-child" hierarchical relationships.

The system is largely based on recognizing this scheme, on identifying optimal points of division, on naming and labelling parts in useful ways. The system provides mechanisms for recording the assignment of parts (of content) to positions (in presentation), and finally of providing mechanisms for rolling parts (of whatever place in the hierarchy) back up together, to create wholes (whole Modules, whole Pages, whole Site Sections, whole Sites, ultimately) .

Bottom-Up vs. Top-Down. The sequence below happens to be "bottom-up," but the arrangement could have as easily been presented the other way round: "top-down." The thinking was that it might be easier to initially grasp the context of an innermost object (simply the text contents of a single deeply nested element), and that working out from there might be the best way to start. Conceivably, however, an approach beginning from the overall view of the Page Layout and its Zones, etc., might permit a more comprehensible "descent" into the details of how everything is made up.

The reader of course may peruse the set of figures in either direction, and is encouraged to do so. More than a single pass is really required to absorb the information presented herein. Many hyperlinks to these figures from further on in the documentation will lead back to these examples of some of the concepts discussed there.

Figure 3.7. Level 03: "Place-able" Elements

Level 03: "Place-able" Elements

Level 03: "Place-able" Elements

With the "Place-able" Elements, we finally come to an object in our "tour" that we can affect, in terms of presence (select or suppress), location (i.e. "zone"), and position (i.e. arrangement in that zone). As can be seen in this figure ("Level 03"), these Elements are typically those that are significant, and that get proprietary, semantic, "business-meaningful" (e.g. "BusinessML") tag names: <date>, <header>, <subHeader>, <mentionedOrgs>, <summary>.

[Note]Note

Documentation differs slightly from Code.  Please note: the bulleted list element <mentionedOrgs> is an invented element. It is here only to provide another example of a Module "Zone" (seen in the next figure ("Level 04")) with more than one "stacked" Place-able Element in its available "Positions." <mentionedOrgs> is not in the live Millennium website as developed in this project. Thank you.

Secondly, for the purpose of making this documentation simpler, I have here re-introduced an element you won't actually find in the code implementation, if you are comparing that to this. The <summary> tag as seen in these figures had been in use during development; it was later removed, and the "summary" information is now actually obtained via a more complicated XSLT/XPath "select" statement, to effectively grab the first paragraph (or <div>) from the overall Press Release element called <main>. But to remove this complication from the documentation, I've shown the more straightforward (original!) approach, which is to have an Element devoted to the task of storing the Summary paragraph. Thank you.

At the level of source XML (BusinessML), some of these Place-able Elements hold text (#PCDATA) directly: <date>, <header>, <subHeader>. The other Elements don't hold text directly, and instead are containers of other Elements ("Non-Place-able"). These include <mentionedOrgs>, which is the "plural" container for the "singular" (and also Non-Place-able) element <mentionedOrg>. The more complex example of this is <summary>, which is container for the several "Non-Place-able" Elements seen in the figure above ("Level 02"):

  • the semantic tag <dateline>

  • as well as (more typically) the elements that make up the core Summary content:

    • the fundamental paragraphs (<p>)

    • bulleted lists (ul)

Source XML Elements vs. Final HTML Elements. Please note an important distinction: while in this "visual" tour in the documentation we are looking at screen captures of rendered final HTML, the example Elements under discussion are mostly the source XML elements from which these finished products were derived. So it is important to keep in mind that Elements for which the content model as defined in the source data XML (BusinessML) markup is #PCDATA may well have presentational markup in the final "SiteHTML" that includes mixed content, or has text that is nested inside container elements.

For example, the text inside the <date> tag becomes nested inside a <b> element, while the <header> is wrapped inside an <a> element.

The corollary for BusinessML elements with complex content models (not just #PCDATA) is that of course their rendered final HTML may differ greatly from the source model (this is, you could say, the whole point of the website build system!). For example, the Place-able Element <mentionedOrgs> (with a content model that is not simply #PCDATA), effectively becomes a ul, and its Non-Place-able Element children <mentionedOrg> each become of course li tags. But it is useful to note that its final implementation in "SiteHTML" might also be achieved using a perhaps highly complex <table><tr><td>... construct.

As will be seen in the next figure ("Level 04"), each of these Place-able Elements will be assigned to a particular Position within a particular Zone, within the overall Module Type (layout).

Figure 3.8. Level 04: Module Type ('mt2col_top') Zones and Positions

Level 04: Module Type ('mt2col_top') Zones and Positions

Level 04: Module Type ('mt2col_top') Zones and Positions

In this figure, moving "up" from Level 03 to Level 04, we see that the same objects that were noted as Place-able Elements above have now been used here to indicate where the "Positions" are located (within "Zones"). Thus we encounter the first "transition" as it were, from looking at Elements (Levels 03, 02, and 01), to now looking at where those Elements go in the parent "Module Type" (Level 04). In particular, where within a Zone within that Module Type (or "layout"), and where down within that Zone: what Position.

As can be seen from this snippet of code from an "EZA Recipe" (Element-Zone Assignment), the information for these assignments is recorded like so:

<elementZoneAssignments>
	<eza zone="A" position="1" elementName="date"/>
	<eza zone="A" position="2" elementName="header"/>
	<eza zone="B" position="1" elementName="subHeader"/>
	<eza zone="B" position="2" elementName="mentionedOrgs"/>
	<eza zone="C" position="1" elementName="summary"/>
</elementZoneAssignments>

Please note that the concept is to create a single recipe "treatment" per Content Type, for any given website build design. That is, here we have the "Press Release Summary: CT11," which, for this particular project, gets this kind of look, re: the placement of its significant elements. This one EZA Recipe is then used against all CT11 content instances on the website. On another, future website build, of a new design (but with the same content), you might choose a different recipe; you'd simply alter some of these "A," "B," and "C," and "1" and "2" choices, etc., to achieve a new look.

[Tip]Tip

Just to address the question: Is it possible to have more than one Recipe for a Content Type on one website? Yes, without question, but you would then need to set up more ad hoc processing requirements to indicate which "special case" CT11 Modules were to get a different recipe. With the essentially recommended approach of a single recipe per content type, you can take advantage of simple wildcard processing: "All ct11*.xml get a particular EZA Recipe." The intent is to foster consistency as a "good thing" in terms of content display. But if you wanted one particular Press Release Summary (most recent, perhaps) to appear differently (say, on the /media/index.asp page), you'd have to set up a special single " <styler>" entry in the processing file (the Ant /mlnmdev/util/build.xml file). This would have to be updated each time (manually, until some automation might get introduced here) with the particular BusinessML filename to be processed that way. It would not be especially efficient, but you could certainly do it.

Module Type: 'mt2col_top'. The name given to the example Module Type is nearly self-describing: 'M'odule 'T'ype with '2' 'col'umns and a colspan on 'top.' See the Module Types section of this documentation for a graphical depiction of this and other Module Types.

You might also note that this figure (Level 04) does contain two further Modules here in the main body content part of the page, in addition to the highlighted three instances of 'mt2col_top.' These other Modules are both simple Module Type 'mt01' (one column), and they house (as will be seen highlighted in the figure below (Level 05) the plain text contents: "Recent Press Releases" and "Click here to see additional 2002 press releases."

Figure 3.9. Level 05: Page Layout Zones and Positions, and Modules

Level 05: Page Layout Zones and Positions, and Modules

Level 05: Page Layout Zones and Positions, and Modules

In Level 03, 02, and 01 above we looked at Elements; in Level 04 above we looked at the constitution of Modules (their layouts, their inner Zones and Positions). With our here moving further "up" to Level 05, we see where the Modules as a whole get placed within the next level of organization: the Page Layout, and in turn its own system of Zones and Positions.

This figure, for Level 05, shows one Page Layout Zone (Level 06 will show the other Zones) and the five Module instances placed in it, at Positions '_a', '_b' etc. The two code snippets below show how the one object type (Module instance) is coded to appear in the other object type (Page Layout Zone, and Position), by means of the Build List XML and the Page Layout HTML. (The process that then joins the two is provided by the Java classes in the package com.digitas.pagebuilder, located in the /mlnmdev/util/java/src/com/digitas/pagebuilder subdirectory.) More discussion of each of these concepts is found further along in the documentation.

									Build List (snippet) (/mlnmdev/util/buildlist.xml)
<mza position="b_ma_co_co1_a">
	<moduleinstance>
		<instancename>ct01_1med_press-releases_headline.html</instancename>
	</moduleinstance>
</mza>
<mza position="b_ma_co_co1_b">
	<moduleinstance>
		<instancename>ct11_pr-2002-12-11-0.html</instancename>
	</moduleinstance>
</mza>

									Page Layout 05 (snippet) (/mlnmdev/SiteHTML/PgLayouts/pl05.html)
<div id="b_ma_co" class="bgImage">
<table border="0" width="639" cellpadding="0" cellspacing="0" height="550">
	<tr>
	<td valign="top">
	<div id="b_ma_co_co1" class="coMargin_pl05">
	<!-- ############  b_ma_co_co1 POSITION ################ -->
		<!-- *************************************************** -->
		<!-- *************************************************** -->
		<!--!!b_ma_co_co1_a!!--> 
		<!--!!b_ma_co_co1_b!!--> 
		<!--!!b_ma_co_co1_c!!--> 
		<!--!!b_ma_co_co1_d!!--> 
		<!--!!b_ma_co_co1_e!!--> 
		<!--!!b_ma_co_co1_f!!--> 
		<!--!!b_ma_co_co1_g!!--> 
		<!--!!b_ma_co_co1_h!!--> 
		<!--!!b_ma_co_co1_i!!--> 
		<!--!!b_ma_co_co1_j!!--> 
		<!-- *************************************************** -->
		<!-- *************************************************** -->
	<!-- ############  b_ma_co_co1 POSITION ################ -->
	</div> <!-- /b_ma_co_co1 -->

Figure 3.10. Level 06: Page Layout Zones: Header, Body, Footer; Zone-holding Zones; Module-holding Zones

Level 06: Page Layout Zones: Header, Body, Footer; Zone-holding Zones; Module-holding Zones

Level 06: Page Layout Zones: Header, Body, Footer; Zone-holding Zones; Module-holding Zones

The figure preceding this, for Level 05, depicted one Page Layout Zone, and provided details on the Module instances within it. Here in figure for Level 06 we leave behind Modules, and present a graphic showing all the Zones for this Page Layout. (Note that the filenaming convention for this Page Layout just happens to be (perhaps confusingly) '05', as in pl05.html—It has nothing to do with our "Level 05" here in this "tour").

This presentation here at Level 06 of the overall Page and its Page Layout "Zones" may, at a first glance, not appear to be terribly different from the overall Page depiction seen in the following figure for "Level 07", but the key distinction is that here the "Zones" actually represent a concept, not the implementation of that concept. (It is that implementation that we will see in Level 07.) Here, the Zones are, simply, rectangles. In the next Level we see the HTML <table>s etc. that instantiate them.

These Zones (conceptual rectangles) are of three types: "Overall" Zones, "Zone-holding" Zones, and "Module-holding" Zones. Overall zones (seen in red above) form the fundamental three-part structure of the entire page: Header on top of Body on top of Footer. They can be "Zone-holding" (as Header and Body are), or "Module-holding" directly (as Footer is).

After the "Overall" zones, the only other zone in this particular example that holds other zones ("Zone-holding")—instead of holding Modules directly—is the "Body, Matter" zone (b_ma), as seen in blue above. Finally, we have the longer list (in pink) of zones that do hold Modules directly, and which therefore appear in the Buildlist XML, to be applied into the Page Layout HTML, as seen in code snippets above.

The naming conventions and other information about Page Layout Zones is covered in much more detail further into the documentation.

Figure 3.11. Level 07: Page Layout '05'; Page Layout <table>s; CSS Margins

Level 07: Page Layout '05'; Page Layout <table>s; CSS Margins

Level 07: Page Layout '05'; Page Layout <table>s; CSS Margins

With "Level 07" we arrive at the "highest" hierarchical level in this tour, looking at the Page entire, from the point of view of the structural code that makes it up (not all seen or annotated in the "visual" depiction above): HTML <table>s and <div>s, appropriately labelled with id="" attributes and some identifying HTML <!-- comments -->, and with the use of CSS for some margin spacing control.

[Tip]Tip

One small observation regarding design decisions on what you might term the "division of labor" amongst the various parts: Here the decision to control margin space at the Page Layout (Zone) level, rather than at the level of the individual modules that go into that Layout Zone, means more flexibility for use of those modules in other Zones.

Essentially, the principle of not incorporating a "look +feel" decision at the wrong level means, in this example, that you need to recognize that if you find yourself giving a module a margin only so that its appearance in a larger container will look "right," then you should be considering enacting that margin up at the larger container level instead, and leave the module itself in its own "full" presentation mode (no margin), such that it is a piece with its own structural and presentational integrity: a complete, unadulterated buildling block, which can be used in this situtation (parent container with margin) or another (parent container situation that might not call for a margin).

If you implement the margin too far down in the hierarchy, you have created a building block "hard-coded" to certain uses only.

The red lines show the basic Page Layout structure, though this is better seen in the "Page Visualizations—Page Layouts PL05" graphic.

The green lines show the nesting of <table>s used to implement the red line structure.

[Note]Note

Note that the innermost green rectangle ('co') might appear, on inspection, to be redundant, as it would seem that it could simply be handled by having it be the bottom row (<tr>) of its parent table ('ma'(=ph-co)).

Not Always Straightforward "Parent-Child" Hierarchical Relationship.  In fact, however, it has a different task to perform, and serves as an example of how the kinds of design decisions concerning objects that are not always straightforwardly visible may come into play. Here we are dealing with a background image (the "helix") that has the special requirement of requiring a container that spans two columns. This container (a <div> holding the green 'co' table) serves as the appropriate object from which to invoke the CSS for the background image.

The details of the code snippet for this is provided in the documentation elsewhere.