Portlet & titlePane Custom Controls

I figured I'd use a titlePane Custom Control to display the markup for both of these controls:

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

    <xp:this.resources>
        <xp:dojoModule name="dojox.widget.Portlet" />
        <xp:styleSheet
            href="/.ibmxspres/dojoroot/dojox/widget/Portlet/Portlet.css" />
    </xp:this.resources>

    <xp:div
        dojoType="dojox.widget.Portlet"
        title="#{compositeData.title}">
        <xp:this.dojoAttributes>
            <xp:dojoAttribute
                name="closable"
                value="#{compositeData.closable}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="doLayout"
                value="#{compositeData.doLayout}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="dragRestriction"
                value="#{compositeData.dragRestriction}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="errorMessage"
                value="#{compositeData.errorMessage}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="extractContent"
                value="#{compositeData.extractContent}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="href"
                value="#{compositeData.href}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="loadingMessage"
                value="#{compositeData.loadingMessage}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="parseOnLoad"
                value="#{compositeData.parseOnLoad}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="preload"
                value="#{compositeData.preload}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="toggleable"
                value="#{compositeData.toggleable}">
            </xp:dojoAttribute>
        </xp:this.dojoAttributes>

        <xp:div dojoType="dojox.widget.PortletSettings">
            <xp:callback facetName="settings"></xp:callback>
        </xp:div>

        <xp:callback facetName="body"></xp:callback>

    </xp:div>

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

    <xp:this.resources>
        <xp:dojoModule name="dijit.TitlePane" />
    </xp:this.resources>

    <xp:div
        dojoType="dijit.TitlePane"
        title="#{compositeData.title}">
        <xp:this.dojoAttributes>
            <xp:dojoAttribute
                name="closable"
                value="#{compositeData.closable}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="doLayout"
                value="#{compositeData.doLayout}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="dragRestriction"
                value="#{compositeData.dragRestriction}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="errorMessage"
                value="#{compositeData.errorMessage}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="extractContent"
                value="#{compositeData.extractContent}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="href"
                value="#{compositeData.href}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="loadingMessage"
                value="#{compositeData.loadingMessage}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="parseOnLoad"
                value="#{compositeData.parseOnLoad}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="preload"
                value="#{compositeData.preload}">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="toggleable"
                value="#{compositeData.toggleable}">
            </xp:dojoAttribute>
        </xp:this.dojoAttributes>

        <xp:callback facetName="body"></xp:callback>

    </xp:div>

</xp:view>

Each of these controls use Editable Areas.

portlet.xsp uses two: "body" for the body-content on non-XHR-driven portlets and "settings" for an editable area for any portlet-specific settings/controls you wish to add.

titlePane.xsp uses just the "body" xp:callback, as it does not have a "settings" area.

Demo: Standard Portlets & titlePanes

Settings goes here...
Content Body goes here...
<xc:portlet
    doLayout="false"
    closable="true"
    dragRestriction="true"
    title="Standard Portlet"
    toggleable="true">
    <xp:this.facets>
        <xp:div
            xp:key="settings">
            Settings goes here...
        </xp:div>
        <xp:div
            xp:key="body">
            Content Body goes here...
        </xp:div>
    </xp:this.facets>
</xc:portlet>
Content Body goes here...
<xc:titlePane
    closable="false"
    doLayout="false"
    title="Standard titlePane"
    toggleable="true">
    <xp:this.facets>
        <xp:div xp:key="body">
            Content Body goes here...
        </xp:div>
    </xp:this.facets>
</xc:titlePane>
Content Body goes here...
<xc:titlePane
    closable="false"
    doLayout="false"
    title="Standard titlePane"
    toggleable="false">
    <xp:this.facets>
        <xp:div
            xp:key="body">
            Content Body goes here...
            </xp:div>
    </xp:this.facets>
</xc:titlePane>

Even when you set the "toggleable" attribute to "false", the titlePane leaves the "arrow" to the left of the title, but we're cleaning that up with the following CSS:

div[class~="dijitTitlePane"] > div[class~="dijitTitlePaneTitle"][class~="dijitFixedOpen"] > div[role~="heading"] > img[class~="dijitArrowNode"] {
        background-image: none;
        display: none;
}

Portlets and paneTitles with XHR-driven content

<xc:portlet
    closable="false"
    doLayout="true"
    dragRestriction="true"
    errorMessage="I screwed something up..."
    extractContent="true"
    href="/demo/sxt.nsf/demo_xhr.xsp"
    loadingMessage="Loading... so calm down!"
    parseOnLoad="true"
    preload="true"
    title="Dojo XHR-loaded Content"
    toggleable="true">
</xc:portlet>
<xc:titlePane
    closable="false"
    doLayout="false"
    dragRestriction="true"
    errorMessage="Oops - something broke!"
    extractContent="true"
    href="/demo/sxt.nsf/demo_xhr.xsp"
    loadingMessage="Loading... Please chill."
    open="true"
    parseOnLoad="true"
    preload="true"
    title="Dojo XHR-loaded Content"
    toggleable="true">
</xc:titlePane>