CodeProject: Using XForms and formsPlayer to Build A Weather Web Services Client. Free source code and programming help

Report Article

Discuss

Send to a friend

7 votes for this Article.

Popularity: 3.80 Rating: 4.50 out of 5

Weather web service rendered by formsPlayer in XFormation

Introduction

Web Services is a technology with great promise. The idea that we should be able to build our own custom applications that interact with everything from Google searches, Amazon book-stores, weather forecasts, diaries, travel plans, and more, is of course an exciting notion for us developers.

But, a big problem is that the most common way that this is achieved is either by aggregating web services on a server and then delivering an HTML user interface to the user, or to use some development application with a SOAP wizard, which generates a static user interface that interacts with the web service.

The problem with both of these solutions is that it sets the bar quite high for playing with web services - you either need a server and all its associated software, or at the very least, you need some expensive development environment. And then there is the bigger problem that any solution you come up with can only be further developed by someone with the same programming environment as you.

XForms

XForms [1] gets us out of this by offering an open standard language that allows us to interact with web services. Using a non-proprietary language allows us to share solutions without requiring that we all run the same development environment.

And more than that, since XForms processors can be built for any platform you can think of, the code produced is incredibly portable.

But the final advantage that I think out-weighs all others, is that XForms is a declarative language - it means that we can build and test sophisticated solutions incredibly quickly. In this tutorial, we will build a program that interacts with a weather service in less than 50 lines of mark-up - and that includes stylesheet rules, and no hidden 'code behind'!

In short, think of the advantages of the Java virtual machine ... but without the headache.

Development Environment

To follow along with this sample, all you really need is a simple text editor, like Notepad, and an XForms processor. I'm using formsPlayer [2] here, since it is a plug-in to Internet Explorer 6, and so makes it very easy to mix ordinary HTML with the form, but you could also try others, such as:

X-Smiles [3]
Novell Technology Preview [4]
Chiba [5]
DENG [6]

Weather Web Service

In this example, we will access a weather report web service. The service we will use has been mentioned in a few other samples in CodeProject [7, 8] and comes from EJSE [9].

Step 1 - A Simple Form

The first thing we will do is create a simple XForm that loads the weather report for zip code 02852 from the web service into a DOM. The form will also show the name of the location and the current forecast.

The code for the form is made up of a model and a user interface. The model contains a DOM and an instruction to initialize it with the weather forecast, whilst the UI has a couple of output controls wired up to the general weather forecast and the location that corresponds to the zip code.

The first thing we need to do when writing our form is establish all of the namespaces we will need. Obviously, we need one for XForms, but we also need one for XHTML (which is hosting our XForms elements), and one for the weather web service:

<?xml version="1.0" encoding="utf-8"?>
<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xforms="http://www.w3.org/2002/xforms"
 xmlns:wr="http://ejse.com/WeatherService/"
>

Next, we need to load formsPlayer, to process the XForms elements. This step is not required if you are using X-Smiles or the Novell Technology Preview, but since they ignore this tag, it won't hurt - in other words, this form will still be cross-platform:

    <head>
        <object id="formsPlayer" 
          classid="CLSID:4D0ABA11-C5F0-4478-991A-375C4B648F58">
            formsPlayer has failed to load! Please check your installation.
        </object>
        <?import NAMESPACE="xforms" IMPLEMENTATION="#formsPlayer" ?>

Now, we can establish the data model. In the data model, we simply have an XML document that is initialized to the result of a request to the weather web service for a nine day weather forecast (using the HTTP GET method):

        <xforms:model>
            <xforms:instance
             src="http://ejse.com/WeatherService/Service.asmx/
                           GetExtendedWeatherInfo?zipCode=02852"
            />
        </xforms:model>
    </head>

The results from the web service consists of nine elements (one for each day of the weather forecast) preceded by an element that contains information about the location, when the report was last updated, a forecast, and so on:

<ExtendedWeatherInfo
 xmlns="http://ejse.com/WeatherService/">
  <Info>
    <Location>North Kingstown, RI</Location>
    ...
  </Info>
  <Day1>
    ...
  </Day1>
  <Day2>
    ...
  </Day2>
  .
  .
  .
  <Day9>
    ...
  </Day9>
</ExtendedWeatherInfo>

So that we can establish that everything is working fine, we'll build a simple UI that shows some of the information from the Info block:

    <body>
        <xforms:group ref="wr:Info">
            <xforms:label>Current Conditions</xforms:label>


            <xforms:output ref="wr:Location">
                <xforms:label>Location:</xforms:label>
            </xforms:output>

            <xforms:output ref="wr:Forecast">
                <xforms:label>Forecast:</xforms:label>
            </xforms:output>
        </xforms:group>
    </body>
</html>

If you have opened the zip files, and installed an XForms processor, then open the document fP-and-weather-ws-step-1.html and you should see something like the following:

If you want to play with this simple form before moving on, here is a typical content for the Info element:

  <Info>
    <Location>North Kingstown, RI</Location>
    <IconIndex>-1</IconIndex>
    <Temprature>69°F</Temprature>
    <FeelsLike>69°F</FeelsLike>
    <Forecast>Partly Cloudy</Forecast>
    <Visibility>6.0 miles</Visibility>
    <Pressure>29.95 inches and rising</Pressure>
    <DewPoint>64°F</DewPoint>
    <UVIndex>0 Low</UVIndex>
    <Humidity>84%</Humidity>
    <Wind>From the West at 5 mph</Wind>
    <ReportedAt>Providence, RI</ReportedAt>
    <LastUpdated>Wednesday, July 21, 2004, 
       at 6:51 AM Eastern Daylight Time.</LastUpdated>
  </Info>

Change any of the @ref values, or add some new outputs, to see what happens.

Step 2 - Styling

Before we add any more information, let's make the form a little easier to read. Since XForms builds on other W3C standards, it will be no surprise to you to learn that we can use CSS to style our output.

The first thing we'll do is get rid of any margins, and set a default font. We insert the following in the head, after the model element:

        </xforms:model>
        
        <style>
            html, body
            {
                margin: 0px;
                padding: 0px;
            }
            body
            {
                font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif;
            }

Next, we create a rule for all group elements:

            xforms\:group
            {
                float: left;
                border: 3px silver window-inset;
                padding: 5px;
                background-color: silver;
            }

Finally, we add some rules for the information from the weather forecast:

            .location, .forecast
            {
                display: block;
                font-size: xx-small;
            }
        </style>
    </head>

We can then use these style names by altering the UI as follows:

            <xforms:output ref="wr:Location" class="location">
                <xforms:label>Location:</xforms:label>
            </xforms:output>

            <xforms:output ref="wr:Forecast" class="forecast">
                <xforms:label>Forecast:</xforms:label>
            </xforms:output>

The resulting display will now be:

Step 3 - Repeating Data

Now that we know our form works, and it's starting to look a little better, let's get the data for the nine day forecast. We'll make use of the XForms repeat element which allows us to specify a template that will be used to render each item in a nodeset, no matter how many items there are.

The first thing that we need to specify in our repeat is the list of nodes we want to process. As you saw at the beginning, the elements for the forecast are uniquely named (Day1, Day2, and so on) so we can't use the element name as the selector. However, each forecast has a child element of Day, so we can use that to uniquely identify our nodeset. Add the following after the closing element of the group:

        </xforms:group>

        <xforms:repeat nodeset="*[wr:Day]">
            [template goes here]
        </xforms:repeat>
    </body>

We now have a repeat that will iterate over a nodeset that contains all elements with a child of Day. Next, we need to specify the template that will be used for each of these nodes. A typical entry for the forecast for one day is:

  <Day1>
    <Day>Thu</Day>
    <Date>Jul 22</Date>
    <IconIndex>30</IconIndex>
    <Forecast>Partly Cloudy</Forecast>
    <High>80°</High>
    <Low>65°</Low>
    <PrecipChance>20 %</PrecipChance>
  </Day1>

So to get us going - and ensure that our repeat is working OK - let's just output Day. We'll add a twist though - when the user hovers over the Day value, we'll render a hint that is derived from the Date. The repeat template now looks like this:

        <xforms:repeat nodeset="*[wr:Day]">
            <xforms:output class="day" ref="wr:Day">
                <xforms:hint ref="../wr:Date" />
            </xforms:output>
        </xforms:repeat>

Note that all XPath statements have a context, and in this example, the context for hint is wr:Day - hence the need for ".." before wr:Date. We also need some style for the class 'day':

            .location, .forecast
            {
                display: block;
                font-size: xx-small;
            }
            .day
            {
                color: blue;
                font-weight: bold;
            }
        </STYLE>

The form should now look something like this:

Now that we are sure everything is working, we can modify the repeat template as much as we like. We're not restricted to just echoing data from the instance document with @ref, though. In the next snippet, we can see how we can use @value on output to call functions, and so concatenate two strings together - the low and high temperature values:

        <xforms:repeat nodeset="*[wr:Day]">
            <xforms:output class="day" ref="wr:Day">
                <xforms:hint ref="../wr:Date" />
            </xforms:output>
            <xforms:output class="tempRange" value="concat(wr:Low, '-', 

wr:High)"/>
        </xforms:repeat>

The associated stylesheet changes are:

            .day
            {
                color: blue;
                font-weight: bold;
                display: block;
            }
            .tempRange
            {
                font-size: smaller;
            }

With the temperature range added, the form should look like this:

Step 4 - Rendering Images

The final step in this short tutorial is to show an image associated with the forecast. XForms 1 .0 does not support the rendering of images based on instance data, but this will be included in the forthcoming XForms 1.1. However, formsPlayer does provide a mechanism to do this, which is to use nested mark-up. We'll use that feature here, mindful of the fact that we'll need to change this in the future, when a platform-independent way of specifying images becomes available.

As before, the location of the mark-up is in the repeat template. This time we are going to use the IconIndex element from the web service data, and build up an HTML img element with a URL that refers to an image on the EJSE web service server. Our template should now look like this:

        <xforms:repeat nodeset="*[wr:Day]">
            <xforms:output class="day" ref="wr:Day">
                <xforms:hint ref="../wr:Date" />
            </xforms:output>
            <xforms:output
             class="image"
             value="concat(
                '<img src="http://www.ejse.com/WeatherService/images/52/',
                wr:IconIndex,
                '.gif" />'
             )"
            >

Note that we have also added a hint, so that hovering over the image gives us the forecast.

We need to add a further style rule to make our image a 'block', and whilst we're editing the CSS, let's factor a little:
.day, .location, .forecast, .image { display: block; } .location, .forecast { font-size: xx-small; } .day { color: blue; font-weight: bold; }

We also need to add a rule to control the style of each item within the repeat. This is addressed in XForms using a pseudo-class called repeat-item, although formsPlayer implements this using ordinary class names - but there is no harm in having both formats in the style rules. We'll also make the group used for 'today' have the same style as repeat-items:
::repeat-item, .repeat-item, xforms\:group { float: left; border: 3px silver window-inset; padding: 5px; width: 80px; height: 140px; background-color: white; text-align: center; }

Our display should now look like this:

Step 5 - Branding

One additional step is formsPlayer specific, but involves customizing the branding for the forms in your project. This is easily achieved with an extra attribute on model, which points to a configuration file, which in turn contains information about the splash-page and form-control icons that you want to use. The file is encrypted and will only work with specific URLs, and is obtained when licensing formsPlayer [10]. Note that this does not alter the behavior of formsPlayer, and forms such as the one demonstrated in this article will work on formsPlayer with or without a license. This makes it a great platform for developing web service -based applications.

If you do purchase a license, you may find that during testing, you'll want to avoid having to repeatedly deploy your application to a web server. An alternative is to obtain a fully licensed version of XFormation [11], which allows full control over the branding used by formsPlayer. In the following screen-shot, we can see XFormation rendering the form we have just completed, but with no branding:

Conclusion

If an application or form has a strong dependency on XML - such as those using web services - then XForms is the language of choice. Its declarative syntax makes it easy to build, test, and deploy applications, many times faster than traditional techniques. And as more XForms processors are developed for more platforms, any application and form you develop now will be able to run in an ever increasing number of environments.

References

XForms - The Next Generation of Web Forms - W3C.
formsPlayer - The XForms Toolkit.
X-Smiles. An open XML-browser for exotic devices.
Novell XForms Technology Preview.
Chiba - An Open Source Java Implementation of the W3C XForms standard.
DENG.
Writing a Web Service Consumer using Borland C# Builder.
Consuming a Weather Web Service with MyXaml.
EJSE Inc.
formsPlayer Licensing.
XFormation.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.
A list of licenses authors might use can be found here

About the Author

Mark Birbeck

Mark Birbeck is CEO of x-port.net Ltd., creators of the XForms tool-kit, formsPlayer.

fP allows both complete applications and custom controls to be built using a new declarative mark-up language from the W3C - XForms.

Mark has over 23 years of software development experience, and has written on XML and RDF.

Occupation: Web Developer

Location: United Kingdom

Other popular HTML / CSS articles:
Five XHTML Elements You Didn't Know But Were Afraid to Ask
Exploring five useful XHTML/HTML elements that are important but not commonly used. Moreover, pointing to their relation with Internet Explorer, Firefox, and ASP.NET.
HTML For Beginners
A tutorial for those who want to learn HTML in a quick and easy way.
CSS For Beginners
Add CSS to your HTML files.
Speed Up Your Website - By Example
Learn how to optimize web page for better user experience
Color Picker Control for your Web site – A HTML Component (HTC)
Color Picker Control for your Web site – A HTML Component (HTC)

Article Top

Sign Up to vote for this article

You must Sign In to use this message board.

FAQ Noise Tolerance Search Messages
Layout   Per page

Msgs 1 to 7 of 7 (Total in Forum: 7) (Refresh) FirstPrevNext

Subject Author Date

Alternative for ASP.NET Locusta74 13:12 12 Feb '08

What is the alternative for running XFORMS on ASP.NET?

Sign In·View Thread·PermaLink

Images in XForms Will_H 4:38 20 Sep '04

Good article. There is a mistake when it comes to rendering images however:

<xforms:output
   class="image"
   value="concat('<img src="http://www.ejse.com/WeatherService/images/52/', wr:IconIndex, '.gif" />')">

The characters "<" and ">" cannot be used in attribute values, and there are also nested double quotes in the "value" attribute of the xforms:output element in question. Both of these things would break an XML processor.

Sign In·View Thread·PermaLink

Re: Images in XForms Mark Birbeck 5:39 20 Sep '04

Hello Will,

Thanks for taking the time to comment.

Although you are right, the mistake is not in my original text. I think it may have been overzealously tidied up by the editors . I've checked the zip files and they correctly have the following:

<xforms:output
class="image"
value="concat(
   '&lt;img src=&quot;http://www.ejse.com/WeatherService/images/52/',
   wr:IconIndex,
   '.gif&quot; /&gt;'
)"
> ...

(Assuming this doesn't get munged up too!)

Mark

Sign In·View Thread·PermaLink

Nice Marc Clifton 8:52 20 Aug '04

Is it possible to allow the user to enter the zipcode? Not everyone is interested in knowing the weather in my little area of the country.

It's definitely cool to see an XForms demonstration--they should put this on the FormsPlayer website!

Marc

Microsoft MVP, Visual C#
MyXaml
MyXaml Blog
Hunt The Wumpus
RealDevs.Net

Sign In·View Thread·PermaLink

Comparison to XML/XSL? Mike Ellison 15:10 10 Aug '04

Hi Mark. Nice article. I wasn't familiar with XForms before reading it, and you provided a nice introduction to the topic for me.

As I was reading I kept making comparisons to XSLT for similar kinds of rendering based on XML data. Where does XForms take us that XML/XSLT doesn't?

Thanks

Sign In·View Thread·PermaLink

Re: Comparison to XML/XSL? Mark Birbeck 2:07 16 Aug '04

Hello Mike,

Good question, especially when you consider that what you describe is pretty much how Microsft have implemented InfoPath. However, they were forced to extend the way XSLT works so that they could change the 'view' dynamically, based on changes to the 'model' (i.e., the underlying XML data).

Even putting this implementation detail aside though, I would still say that defining 'views' onto your XML data using XSLT is weaker than using a forms language such as XForms to *manipulate* the data. For a start, XForms makes it very easy to deal with multiple documents, but it also allows you to ignore the platform, and simply define the behaviour of 'abstract' forms. The XSLT approach on the other hand requires that you define stylesheets that create 'views' on your data for each platform.

Of course these stylesheets themselves can all be dynamically generated from GUI tools, but ultimately it's a difficult paradigm to deal with, makes maintenance a nightmare, and is non-standard - you don't know if your 'view' will work on anything other than the software that it was built for.

When talking to hard-core techies like the people on CodeProject the metaphor I use is that of device drivers under platforms like Windows; your application draws lines and circles on an abstract device, which in turn translates for a specific device. An XForms processor is much the same - it may use voice, SVG or HTML for the final rendering, but the initial format for the form is always that same. So even if you did use XSLT in your application, you would use it to transform an XForms document, and not the initial instance data.

Thanks for your interest.

Regards,

Mark

Mark Birbeck
CEO
x-port.net Ltd.

e: Mark.Birbeck@x-port.net
t: +44 (0) 20 7689 9232
w: http://www.formsPlayer.com/

Download our XForms processor from
http://www.formsPlayer.com/

Sign In·View Thread·PermaLink 2.00/5 (1 vote)

Re: Comparison to XML/XSL? Mike Ellison 8:04 16 Aug '04

Thanks for the reponse Mark. You make good points.

Sign In·View Thread·PermaLink

Last Visit: Sunday, July 20, 2008 1:31 AM Last Update:Sunday, July 20, 2008 1:31 AM

General    News    Question    Answer    Joke    Rant    Admin