< XForms

Motivation

You want a generic tool for testing a REST web service. You want to be able to put in a URI and an instance document and see what data is returned.

Screen Images

before submission
after submission

Source Code

<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <title>REST Service Tester</title>
        <style type="text/css">
        @namespace xf url("http://www.w3.org/2002/xforms");
        body {font-family: Ariel,Helvetica,sans-serif;}
        .header {font-weight: bold;}
        xf|group {border: black solid 1px; padding:10px; margin: 15px 5px;}
        .group-label {display:block; position:relative; font-weight:bold;font-size:12pt; 
        background-color: silver; margin: 3px; width: 30%;
        padding: 2px 4px; top: -20px; left: -3px;}
        .url .xf-value {width: 100%;}
        </style>
        <xf:model>
            <xf:instance id="atomFeed">
                <feed xmlns="http://www.w3.org/2005/Atom">
                    <title>Atom Feed</title>
                </feed>
            </xf:instance>
            <xf:instance id="resource">
                <root xmlns="">
                    <resource>http://xformstest.org/cgi-bin/echo.sh</resource>
                </root>
            </xf:instance>
            <xf:instance xmlns="" id="messages">
                <messages>
                    <xforms-submit-error>
                        <error-type/>
                        <resource-uri/>
                        <response-status-code/>
                        <response-headers/>
                        <response-reason-phrase/>
                        <response-body/>
                    </xforms-submit-error>
                    <xforms-submit-done>
                        <resource-uri/>
                        <response-status-code/>
                        <response-headers/>
                        <response-reason-phrase/>
                    </xforms-submit-done>
                </messages>
            </xf:instance>
            <xf:submission id="submit" replace="none" ref="instance('atomFeed')" method="post"
                mediatype="application/atom+xml">
                <xf:resource value="instance('resource')/resource"/>
                <xf:action ev:event="xforms-submit-error">
                    <xf:setvalue ref="instance('messages')/xforms-submit-error/error-type"
                        value="event('error-type')"/>
                    <xf:setvalue ref="instance('messages')/xforms-submit-error/resource-uri"
                        value="event('resource-uri')"/>
                    <xf:setvalue ref="instance('messages')/xforms-submit-error/response-status-code"
                        value="event('response-status-code')"/>
                    <xf:setvalue ref="instance('messages')/xforms-submit-error/response-headers"
                        value="event('response-headers')"/>
                    <xf:setvalue
                        ref="instance('messages')/xforms-submit-error/response-reason-phrase"
                        value="event('response-reason-phrase')"/>
                    <xf:setvalue ref="instance('messages')/xforms-submit-error/response-body"
                        value="event('response-body')"/>
                </xf:action>
                <xf:action ev:event="xforms-submit-done">
                    <xf:setvalue ref="instance('messages')/xforms-submit-done/resource-uri"
                        value="event('resource-uri')"/>
                    <xf:setvalue ref="instance('messages')/xforms-submit-done/response-status-code"
                        value="event('response-status-code')"/>
                    <xf:insert nodeset="instance('messages')/xforms-submit-done/response-headers"
                        origin="event('response-headers')"/>
                    <xf:setvalue
                        ref="instance('messages')/xforms-submit-done/response-reason-phrase"
                        value="event('response-reason-phrase')"/>
                </xf:action>
            </xf:submission>
        </xf:model>
    </head>
    <body>
        <div class="header">XForms Service Tester</div>
        
        <!-- Form for entering the resource URI  -->
        <xf:group ref="instance('resource')">
        <xf:label class="group-label">Submission Data</xf:label>
        <span class="prompt-nl">Enter the web address (URL) to which you would like to submit the instance:</span>
            <xf:input ref="resource" class="url"/>
        </xf:group>

        <!-- Submit Response Messages  -->
        <xf:group ref="instance('messages')/xforms-submit-error">
            <xf:label class="group-label">Error Messages</xf:label>
            <xf:output ref="error-type">
                <xf:label>
                    <xf:output value="name(.)"/>
                </xf:label>
            </xf:output>
            <xf:output ref="resource-uri">
                <xf:label>
                    <xf:output value="name(.)"/>
                </xf:label>
            </xf:output>
            <xf:output ref="response-status-code">
                <xf:label>
                    <xf:output value="name(.)"/>
                </xf:label>
            </xf:output>
            <xf:output ref="response-headers">
                <xf:label>
                    <xf:output value="name(.)"/>
                </xf:label>
            </xf:output>
            <xf:output ref="response-reason-phrase">
                <xf:label>
                    <xf:output value="name(.)"/>
                </xf:label>
            </xf:output>
            <xf:output ref="response-body">
                <xf:label>
                    <xf:output value="name(.)"/>
                </xf:label>
            </xf:output>
        </xf:group>
        <xf:group ref="instance('messages')/xforms-submit-done">
            <xf:label class="group-label">Submit Done Messages</xf:label>
            <xf:output ref="resource-uri">
                <xf:label>
                    <xf:output value="name(.)"/>
                </xf:label>
            </xf:output>
            <br/>
            <xf:output ref="response-status-code">
                <xf:label>
                    <xf:output value="name(.)"/>
                </xf:label>
            </xf:output>
            <xf:group ref="response-headers">
                <xf:label class="group-label">
                    <xf:output value="name(.)"/>
                </xf:label>
                <xf:repeat nodeset="../header">
                    <xf:output ref="./value">
                        <xf:label><xf:output ref="../name"/>: </xf:label>
                    </xf:output>
                </xf:repeat>
            </xf:group>
            <xf:output ref="response-reason-phrase">
                <xf:label>
                    <xf:output value="name(.)"/>
                </xf:label>
            </xf:output>
        </xf:group>

        <!-- Submission Button  -->
        <xf:submit ev:event="DOMActivate" submission="submit">
            <xf:label>Submit</xf:label>
        </xf:submit>
    </body>
</html>

Discussion

The response area could be hidden in a switch/case view and a toggle done after submission.

Acknowledgments

Thanks to Fraser for this suggestion.


This article is issued from Wikibooks. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.