I've been working on a few IBM XPages-based application frameworks lately (some basic templates to help jumpstart application development for project work), and have been using Dojo contentPanes (dijit.layout.ContentPane) with great success. One of the features of the Dojo ContentPane is the ability to load content via XHR (XMLHttpRequest). This tactic allows you to use ultimately surface same-domain contents inside of your ContentPane as if they were native to the current application.

Combining this ContentPane tactic with an ExpandoPane (dojox.layout.ExpandoPane)-based BorderContainer (dijit.layout.BorderContainer), I was able to create an amazingly functional and slick, yet totally familiar, shell for my XPages applications that required a more traditional application layout vs. a website-style layout.

In other words, my layout looked like this...

(Click thru for the complete article.)

I (finally) contribute to NotesIn9 with a tutorial (and live demo) on how to create an HTML5 Custom Control for IBM XPages. Huge thanks to David Leedy for accepting my ~20 minute rambling submission...

For the complete episode, check out NotesIn9: 067 Creating a Custom Control.

And for those of you interested in an online demo of the finished product, check out the HTML5 Audio Custom Control for IBM XPages Demo.

Now get back to work creating your very own IBM XPages Custom Controls. Leave any questions in the comments to this post or email me at ctoohey@dominoGuru.com.

During the XPages Markup Ultra Combos article yesterday, I showed a simple HTML5 Video Element Custom Control. While it would have worked as shown, I took into consideration a few things - specifically that you could have more than 2 media types depending on the specific browser (and browser version) you're using - so I redesigned it.

Here's the updated version of an HTML5 Video Element Custom Control...

Click here for the complete article and online demo...

I recently posted an article on how to use the tagName Property of an IBM XPage xp:text Control to create any particular HTML container Element you desire while using the xp:text Value Property to set the childNodes / contents of said container.

From that article:

...I'll discuss another method you can employ to get pretty much any pass thru markup to co-exist with core XPages Controls, which should in turn address any HTML markup delivery need you can imagine.

That method, which we'll discuss in this article, is the combination of SSJS, Expression Language, and any other functional XPage markup passed as Properties and Attributes for your XPages Pass-Thru HTML...

Click to read more... | Comments (0)

Best Practices Demo Example IBM ICS SSJS XPages

xp:text Controls allow you to use the tagName property to change the default rendered HTML Element container from a SPAN to... well, pretty much whatever you want.

Here's a few examples to explain...

Example:

<xp:text value="foo" tagName="h1" />

-- will produce the following HTML markup:

<h1 class="xspTextComputedField">foo</h1>

Using the escape Property of the xp:text Control, you can load HTML markup (vs. the default Text), and get something like an HTML Unordered List:

<xp:text
    tagName="ul"
    escape="false">
    <xp:this.value>
        <![CDATA[<li>Hello</li>
            <li>World</li>
        ]]>
    </xp:this.value>
</xp:text>

-- which generates the following HTML markup:

<ul class="xspTextComputedField">
    <li>Hello</li>
    <li>World</li>
</ul>

Of course, you'll most likely want to set the styleClass Property of the xp:text Control to something other than xspTextComputedField, as the xsp.css (and other XPages-specific stylesheets) use non-Element specific className assignments in their CSS.

For example, from the xsp.css Stylesheet:

.xspTextComputedField {
    font-weight: normal;
}

... which I personally can't stand, and I think makes things ultimately more difficult, but that's a tangent/rant for another post.

The point is, with the tagName Property, you can do some pretty slick stuff. And with Domino 8.5.3, you can set pretty much any HTML Element you like, and easily compute the value.

Online Demo

Here's a simple demo that you can play with. It uses sessionScope variables to control the value, tagName, styleClass, and even the escape Properties of the example xp:text Control. This gives you a pretty decent sandbox that you can use to test things out and see just how far you can take a simple xp:text Control.

HTML TagNames for IBM XPages xp:text Controls - Online Demo

In a future post (perhaps tomorrow, but let's be honest - I make no promises), I'll discuss another method you can employ to get pretty much any pass thru markup to co-exist with core XPages Controls, which should in turn address any HTML markup delivery need you can imagine.