XForms/Tri-Document Loading

Motivation

You want to allow a user to process a document in one of three ways:

by using a copy/paste from a text document
by uploading a file from a local file system
by referencing a URL

Method

We will use a combination of the switch/case with three tabs. The first tab will be for a textarea, the second for a upload control and the third for a URL.

Screen Image

Tri-document Example with Upload Tab Selected

The first control on the first tab uses the XForms "textarea" control. This allows users to copy and paste text into a document. The second tab uses an upload control. The upload control will take any file and convert it to a text-encoded XML file. The last tab allows the user to just submit a URL. This URL can then be stored directly into a database or the content can be extracted with other tools.

Depending on different conditions you may want one or more of these controls to be used. The textarea might be the most useful if the content of the document needs to be searched. The other two controls might require a server-side process to extract text for search.

Source Code

<html xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:ev="http://www.w3.org/2001/xml-events" 
 xmlns:xs="http://www.w3.org/2001/XMLSchema" 
 xmlns:xf="http://www.w3.org/2002/xforms" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <head>
        <title>TriDoc - 3 ways to store text documents</title>
        <link rel="stylesheet" type="text/css" href="tri-doc.css"/>
        <xf:model>
            <xf:instance xmlns="">
                <data>
                    <text/>
                    <binary xsi:type="xs:base64Binary"/>
                    <url/>
                </data>
            </xf:instance>
            <xf:submission id="save" action="echo.xq" method="post"/>
        </xf:model>
    </head>
    <body>
        <div class="horiz-tabs-menu">
            <div id="tab1">
                <a href="#tab1">Text
                    <xf:toggle case="case-1" ev:event="DOMActivate"/>
                </a>
            </div>
            <div id="tab2">
                <a href="#tab2">Upload
                    <xf:toggle case="case-2" ev:event="DOMActivate"/>
                </a>
            </div>
            <div id="tab3">
                <a href="#tab3">URL
                    <xf:toggle case="case-3" ev:event="DOMActivate"/>
                </a>
            </div>
        </div>
        <xf:switch>
            <xf:case id="case-1" selected="true()">
                <xf:label>Text: </xf:label>
                <br/>
                <xf:textarea ref="text" class="textarea-big"/>
            </xf:case>
            <xf:case id="case-2">
                <xf:upload ref="binary">
                    <xf:label>Upload: </xf:label>
                    <xf:filename>file:///C:/tmp/*.xml</xf:filename>
                    <xf:mediatype>text/xml</xf:mediatype>
                </xf:upload>
            </xf:case>
            <xf:case id="case-3">
                <xf:input ref="url" class="url">
                    <xf:label>URL: </xf:label>
                </xf:input>
            </xf:case>
        </xf:switch>
        <div class="test">
            <xf:output ref="text">
                <xf:label>Text: </xf:label>
            </xf:output>
            <br/>
            <xf:output ref="binary">
                <xf:label>Binary: </xf:label>
            </xf:output>
            <br/>
            <xf:output ref="url">
                <xf:label>URL: </xf:label>
            </xf:output>
        </div>
        <xf:submit submission="save">
            <xf:label>Save</xf:label>
        </xf:submit>
    </body>
</html>

Sample CSS File

@namespace xf url("http://www.w3.org/2002/xforms");
            
/* Put the tab divs all on one line */
div.horiz-tabs-menu div {
   display: inline;
}		

/* style each individual tab */
div.horiz-tabs-menu div a {
    color: black;
    border: 0.1em outset #BBB;	/* Make it look like a button */
    border-bottom: 0.1em solid #CCC;
    font-weight: bold;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
    margin-right: 5px;
    padding: 0.2em;
    /* round the top corners - works under FireFox */
    -moz-border-radius: .5em .5em 0em 0em;
}

/* Make non-selected tabs appear in the background */
div.horiz-tabs-menu div:not(:target) a {
    border-bottom: none;		/* Make the bottom border disappear */
    background: #999;
}		

/* Make the selected (targeted) item or default selection to appear on top */
div.horiz-tabs-menu div:target  a {
       border-bottom: 0.1em solid #CCC;   /* Visually connect tab and tab body */
       background: #CCC;                          /* Set active tab to light gray */
}

/* the sylying of the divs below each tab */
xf|switch xf|case div {
    background: #CCC;		/* Light gray */
    padding: 0.3em;		/* Looks better */
    width: 500px;
    height: 150px;
    -moz-border-radius: 0;
}

.textarea-big textarea {
   width: 490px;
   height: 120px;
}

.url .xf-value  {
      width: 450px;
}

Next Page: Entity Selection | Previous Page: Saving Intermediate Form Data
Home: XForms