technique for getting your custom layout into the model is out of
date. There is now (as of Portlet Factory 6.1.5) a new builder that
implements this functionality: HTML Data Layout
can just right click the element for which you want to hand-edit the
HTML, choose Export HTML for Data Layout, and the Designer will create
an HTML Data Layout builder for you and set it up with a new file that
contains the contents of the current layout.
Portlet Factory sample builds on the IBM - Custom Layout
sample, though you do not have to have that one installed to use this one. In this Model, we take the custom layout we defined for a single Row of data (which is fairly square, like a thumbnail view of the item), and present the items in a 3xN grid. Here are the two pages you will see if you run this model.
How It Works
There are 4 important steps. Constructing the custom HTML Template; Modifying the Data Definition to use the right construct in the template; Causing a "new row" in the presentation; and Hiding that new row except when we actually want it.
Like its predecessor, this Model also adds a new DisplayGroup construct to the template, using the "ByName" technique. In this case, however, the construct has a few additional pieces added to account for the repeated nature of the element and the extra work we will have to do to make three columns.
<tr name="DisplayGroupByName_Row" style="background-color:yellow">
<td colspan="2" style="padding:12" nowrap="true" align="center">
<table style="background-color:#ddddff" cellpadding="8" cellspacing="3">
<td nowrap="true" align="center" style="background-color:yellow">
<span style="color:navy; font:16pt Ariel"><span name="Make" /> <span name="Model" /></span>
<br /><hr width="50%" />
<span style="color:black; font:10pt Ariel">
<span name="Year" /> <span name="Color" />
Mileage: <span name="Mileage" />
<HTMLWRAPPER name="_afterTD" />
<HTMLWRAPPER name="DataContainer" />
The new features of this construct are the addition of an inner TABLE tag, with its corresponding TR and TD tags, and a new element named "RepeatElement." Notice that the RepeatElement wraps the TD tag. Therefore, as the page rendering repeats over the rows, it will be making a new TD tag (but NOT a new TR tag) for each one. Inside the TD tag is the same layout we had in the earlier sample. In this case it will constitute a "thumbnail."
Modify the Data Definition
After setting up the Data Page Builder to use this custom HTML Template, our next step was to make the data actually fit the template. A repeating element with simple children is, by default, a "Table" which is why we naturally get the tabular presentation. The HTML Template constructs that would naturally be used are "Table" and the assorted "Column" ones. Since we want to use the construct "DisplayGroup" we add a Data Field Modifier Builder to the Row, and specify that the "Container Display Dir." is "vertical." (While we are in there, we also turn off the display of the Label, which would normally be shown for a DisplayGroup.)
Causing a "new row" after some elements
If we were to run the Model at this point (try it by disabling the last three Builders and run it), we would get a single long row with all the thumbnails in it. Now we need a technique to cause a new row after every third item in the repeated section. What we want is to insert the text
after every third element. What we will actually do is to insert it after every element, but then hide it for the ones where we don't want it.
So we add a Text Builder with the text
and put it on the element named Row_afterTD. This named element was created by the HTML Template processor which will always prepend the element name to any named HTML node that is inside a construct, if the HTML node's name starts with an underscore. In our construct that we created, we added the node "" for this purpose.
Note that the magic tag "HTMLWRAPPER" does not appear in the final JSP that gets exported, so the text
will just be floating at the same level as the real tr tags from the construct.
If we were to run the Model at this point, we would have all the thumbnails in a single tall column. (Try it - leave just the bottom two BuilderCalls disabled and run it.)
Hiding the new row except when we really want it
Finally, we want to wrap the contents of the Text Builder with a visibility setter that will allow the contents to display only on every third item. First we make a little method which returns true if its first argument is a multiple of its second. (That code is below.)
Then we add a Visibility Setter on the same node the Text Builder operates on, with the Visibility Rule of "Hide when Value is false" and for the value we will call the method, passing in the variable RowCounterVar1 for the value to test, and the number 3 as the divisor, for three columns. The result is that the original behavior of the HTML Template, to put the elements across on one big row, is interrupted after every third element with the
text which causes the existing row to end and a new row to be started.
return (value % divisor) == 0;
Notes on running the sample and prerequisites
Import the attached zip file into your project using the Import WebSphere Portlet Factory Archive command.
To learn more about HTML Templates, see Introducing WebSphere Portlet Factory HTML Templates