dominoGuru.com

Your Development & Design Resource

XPages Markup Ultra Combos

05/08/2012 03:36 PM by Chris Toohey

XPages Markup Ultra Combos by Chris Toohey @ dominoGuru.com

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.

Let's take a look at a sample Custom Control named HTML_UnorderedList.xsp that will illustrate this technique. In this Custom Control, I have defined two Custom Properties: styleClass, and ListValues.

Here's the entire Custom Control via the XPage Source Pane markup:


<?xml version="1.0" encoding="UTF-8"?>

<xp:view

    xmlns:xp="http://www.ibm.com/xsp/core">



    <ul class="#{compositeData.styleClass}">

        <xp:repeat

            var="item"

            value="#{compositeData.ListValues}">

            <xp:text tagName="li" value="#{item}" />

        </xp:repeat>

    </ul>



</xp:view>

Pretty basic stuff, but take note that we're using Expression Language (EL) to define the className of the HTML Pass-Thru UnorderedList (UL) Element. We're also using an xp:repeat Control in combination with an xp:text Control (using the tagName Property) to create our ListItem (LI) Elements.

Let's see this Custom Control in action:


<xc:HTML_UnorderedList

    styleClass="helloworld">

    <xc:this.ListValues>

        <xp:value>One</xp:value>

        <xp:value>Two</xp:value>

        <xp:value>Three</xp:value>

    </xc:this.ListValues>

</xc:HTML_UnorderedList>

This Custom Control - as configured above - will produce the following HTML markup:


<ul class="helloworld">

    <li class="xspTextComputedField">One</li>

    <li class="xspTextComputedField">Two</li>

    <li class="xspTextComputedField">Three</li>

</ul>

Note: The HTML ListItem Element className (xspTextComputedField), comes from the fact that we're using an xp:text XPage Control to generate the LI tag. You could/should throw a specific Custom Control Property in there for the ListItem Elements and override that xspTextComputedField.

Demo

XPages Markup Ultra Combos Demo

I wanted to keep the example simple, but in doing so you might have missed what's going on here. Basically, when you write your XML markup (as that's what XPage "source" really is), you have the opportunity to mix any SSJS, Expression Language (EL), or any other language you're supporting in your XPages.

Here's another simple example that will hopefully give you a few ideas:


<h1

    class="#{javascript:context.getUrlParameter('h1_class')
}">

    <xp:text

        styleClass=""

        value="#{javascript:context.getUrlParameter('h1')
;}">

    </xp:text>

</h1>

This mix-and-match of XPages markup (XML) with Pass-Thru HTML combined with functional SSJS is a pretty simple demo... but the next time you're stuck in your application because there's no xp:ul or some specific HTML5 XPage Control...


<?xml version="1.0" encoding="UTF-8"?>

<xp:view

    xmlns:xp="http://www.ibm.com/xsp/core">



    <video

        width="#{compositeData.width}"

        height="#{compositeData.height}"

        autoplay="#{compositeData.autoplay}"

        loop="#{compositeData.loop}"

        poster="#{compositeData.poster}"

        controls="#{compositeData.controls}"

        preload="#{compositeData.preload}">

        <source

            src="#{compositeData.mp4}"

            type="video/mp4" />

        <source

            src="#{compositeData.ogg}"

            type="video/ogg" />

        Your browser does not support the video tag.

    </video>



</xp:view>

Have fun, and let me know down in the comments below how you're planning to use (or are currently using) this ultra combo markup technique!

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.