As xPages becomes a common platform for other modern web frameworks, you may find yourself writing a lot of standard HTML (such as Twitter Boostrap markup) in your Domino Designer source panel. Here is a convenient reminder that most HTML tags can be converted to xPage tags by adding the xp: prefix.
So,
<div>...</div>
becomes
<xp:div>...</xp:div>
Now it may not be immediately obvious why this would be a useful pattern but xPage tags have with them all the API hooks that are available for the standard xPages controls. One use case could be to leverage server side logic to selectively render certain parts of your code. For example you might have some mark up that resembles this:
<div id="show-when-editable" class="row">
<div class="col-md-2">...</div>
<div class="col-md-4">...</div>
<div class="col-md-6">...</div>
</div>
<div id="hide-when-editable" class="row">
<div class="col-md-2">...</div>
<div class="col-md-4">...</div>
<div class="col-md-6">...</div>
</div>
If you want to show the first div in edit mode and the second otherwise you could convert the above to the following:
<xp:div styleClass="row">
<xp:this.rendered><![CDATA[#{javascript:document.isEditable()==true}]]></xp:this.rendered>
<div class="col-md-2">...</div>
<div class="col-md-4">...</div>
<div class="col-md-6">...</div>
</xp:div>
<xp:div styleClass="row">
<xp:this.rendered><![CDATA[#{javascript:document.isEditable()==false}]]></xp:this.rendered>
<div class="col-md-2">...</div>
<div class="col-md-4">...</div>
<div class="col-md-6">...</div>
</xp:div>
A couple things to note about this type of tag conversion:
– <xp:div> tags don’t respect normal HTML attributes. For this reason, you need to also convert class="class-name" to styleClass="class-name"
– To use other attributes you can add an attribute block. For example, code to add a data-title="My Title" to your tag would look like this:
<xp:this.attrs>
<xp:attr name="data-title">
<xp:this.value><![CDATA[#{javascript:'My Title'}]]></xp:this.value>
</xp:attr>
</xp:this.attrs>
– I haven’t tested this with all legal HTML tags, so there may be some incompatibilities but it does work well with most of the standard building block tags used for construction Boostrap grids and tables. If you know of other limitations, please feel free to share.
The codeXplorer Blog by Shean P McManus 