Tip of the Iceberg

Category xpages
In Step 1, we created a server-side JavaScript library, defining a function that allows to easily pull data from the Yahoo Weather API based on the selected location. Now let's use that code to render the weather data inside a custom control.

Step 2: Create the Custom Control

Create a new custom control (I chose to call mine "sb_WeatherConditions"), switch to the Source tab, and overwrite the XML with the following:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    rendered="#{javascript:return (sessionScope.locationfilter);}">
    <xp:this.resources>
        <xp:script src="/xpWeatherAPI.jss" clientSide="false"></xp:script>
    </xp:this.resources>
    <xp:panel styleClass="lotusMenu">
        <xp:panel styleClass="lotusBottomCorner">
            <xp:panel styleClass="lotusInner">
                <xp:panel styleClass="lotusMenuSection">
                    <h3>
                        <xp:text
                            value="#{javascript: return 'Current Weather in ' + sessionScope.locationfilter}" />
                    </h3>
                </xp:panel>
                <xp:panel styleClass="lotusMenuSubsection">
                    <xp:repeat
                        value="#{javascript: return new WeatherAPI().getCurrentConditions();}"
                        var="currentConditions">
                        <img src="#{javascript: return currentConditions.conditionImage;}"
                            title="#{javascript: return currentConditions.description;}" />
                        <xp:text style="margin-left:10px;font-size:12pt;font-weight:bold;"
                            value="#{javascript: return currentConditions.temperature + '° ' + currentConditions.tempUnits;}" />
                    </xp:repeat>
                </xp:panel>
            </xp:panel>
        </xp:panel>
    </xp:panel>
</xp:view>

Again, let's take a closer look at what's happening here:

• We set a "rendered" attribute to a boolean evaluation of a sessionScope variable. This is a shorthand way of stating that, if the variable exists at all, the control will be rendered; otherwise, the entire control will be omitted.
• We load the script library we created in Step 1, giving us access to the function we defined therein.
• We have the same nested panel structure Declan used to define the locations menu, so our widget will look similar but have different content.
• We reference the same sessionScope variable as before to display the current location in the title bar of the widget.
• We set the content of the main body of the widget to be a repeat control.

That last bit may seem a bit odd, but then again, so did wrapping the API return object from Step 1 in an array... and this is why: a repeat control can be bound to any collection - a view, a NotesDocumentCollection, or even (as in this case) an array of non-Domino objects. The var attribute allows us to define a variable that can then be used to refer to each member of the collection as the control iterates all members. We can then insert any content we want inside the control, referencing that variable whenever we want any portion of the content to be dynamic. In other words, although we know there will only be one collection member to iterate, this is a very easy way to bind a section of dynamic content to SSJS code. In this example, we're defining an image with a dynamic source and title based on the weather API data, and a span to display the current temperature and units (C/F).

There's only one thing left to do... add our new control to an XPage.