I have developed a couple of mobile web sites using XPages. Every time there seems to be some text I want to put above a data view. When you use regular text, the font is pretty small. I like the formatting that the data view gives instead. Inspecting the HTML that gets generated, there's a lot of wrapping that goes around a data view to get it the special look. I decided to write a couple server-side JavaScript functions to duplicate that formatting. Now, I can put 3 computed text blocks on my XPage and get some good formatting. For example:

<xp:text escape="false" id="computedField3"
    value="#{javascript:return dataViewOpenHTML()}">
</xp:text>
<xp:text escape="true" id="homePageMessage">
    <xp:this.value><![CDATA[#{javascript:@DbLookup("", "vwAllByForm", "frmHomePageMsg", "Message");}]]></xp:this.value>
</xp:text>
<xp:text escape="false" id="computedField4"
    value="#{javascript:return dataViewCloseHTML()}">
</xp:text>

The "before" and "after" computed text fields are in HTML (escape="false"). This keeps me from having to have a bunch of raw HTML on my XPage source. Here's the code for the "dataViewOpenHTML" function:

function dataViewOpenHTML() {
    // Return all the HTML that gets us the formatting around a data view. This is used
    // to show "standard text" in a larger format on the mobile device.
    var html:string = "";
    html += "<ul dojotype=\"dojox.mobile.EdgeToEdgeList\" class=\"mblEdgeToEdgeList mblDataView\">";
    html += "<div class=\"mblListItemWrapper mblDataRow\">";
    html += "<li dojotype=\"extlib.dijit.mobile.ListItem\" class=\"mblListItem mblVariableHeight\">";
    html += "<a class=\"mblListItemAnchor mblListItemAnchorNoIcon\">";
    html += "<div class=\"mblListItemTextBox\">";
    html += "<div class=\"mblDataViewTextTitle\">";
    return html;
}

And here's the code for the "dataViewCloseHTML" function:

function dataViewCloseHTML() {
    // Close all the tags that were opened by the "dataViewOpenHTML" function
    var html:string = "";
    html += "</div>"; // <div class=\"mblDataViewTextTitle\">
    html += "</div>"; // <div class=\"mblListItemTextBox\">
    html += "</a>"; // <a class=...>
    html += "</li>"; // <li dojotype=...>
    html += "</div>"; // <div class=\"mblListItemWrapper mblDataRow\">
    html += "</ul>"; // <ul dojotype=...>
    return html;
}


Now, the computed text in the middle is the same size as rows from a data view, but it's computed text without having to go back to a view and have an underlying document associated.