XPages: Additional Facets for Viewpanels

Today I found some additional facets / sections for a normal view panel component which can help to design a layout of an application. They are named like the wind directions and  are equivalent to the position information for the relevant content.

The following screenshot shows all facets in use. In the center you can see the content of the view panel. The pagers are not used, only place holders for a better demonstration:

As you can see there is some HTML source code in the top of the page visible. This happens if you are using the „north“ facet. I don’t know why this happens.

Here is the source code of the demo XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">

    <xp:viewPanel rows="10" id="viewPanel1">
        <xp:this.facets>
            <xc:ccDisplayer name="headerPager" color="255,0,0" xp:key="headerPager" />
            <xc:ccDisplayer name="footerPager" color="0,255,255" xp:key="footerPager" />
            <xc:ccDisplayer name="viewTitle" color="255,0,255" xp:key="viewTitle" />
            <xc:ccDisplayer name="south" color="0,255,0" xp:key="south" />
            <xc:ccDisplayer name="southWest" color="96,96,96" xp:key="southWest" />
            <xc:ccDisplayer name="west" color="128,128,128" xp:key="west" />
            <xc:ccDisplayer name="northWest" color="160,160,160" xp:key="northWest" />
            <xc:ccDisplayer name="north" color="255,255,0" xp:key="north" />
            <xc:ccDisplayer name="northEast" color="192,192,192" xp:key="northEast" />
            <xc:ccDisplayer name="east" color="224,224,224" xp:key="east" />
            <xc:ccDisplayer name="southEast" color="255,255,255" xp:key="southEast" />
        </xp:this.facets>
        <xp:this.data>
            <xp:dominoView var="view1" viewName="DemoView"></xp:dominoView>
        </xp:this.data>
        <xp:viewColumn columnName="Col1" id="viewColumn1">
            <xp:viewColumnHeader value="DocUNID" id="viewColumnHeader1"></xp:viewColumnHeader>
        </xp:viewColumn>
    </xp:viewPanel>
</xp:view>

And here is the custom control used.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.style>
       <![CDATA[#{javascript:"height:100.0px;width:100.0%;background-color:rgb(" + compositeData.color + ")"}]]>
    </xp:this.style>
    <xp:label value="#{javascript:compositeData.name}" id="labelName">
    </xp:label>
</xp:view>