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 (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

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

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">;

TriDoc - 3 ways to store text documents
rel="stylesheet" type="text/css" href="tri-doc.css"/>

xmlns="">

xsi:type="xs:base64Binary"/>

id="save" action="echo.xq" method="post"/>

class="horiz-tabs-menu">
id="tab1">
href="#tab1">Text
case="case-1" ev:event="DOMActivate"/>

id="tab2">
href="#tab2">Upload
case="case-2" ev:event="DOMActivate"/>

id="tab3">
href="#tab3">URL
case="case-3" ev:event="DOMActivate"/>

id="case-1" selected="true()">
Text:

ref="text" class="textarea-big"/>

id="case-2">
ref="binary">
Upload:
file:///C:/tmp/*.xml
text/xml

id="case-3">
ref="url" class="url">
URL:

class="test">
ref="text">
Text:

ref="binary">
Binary:

ref="url">
URL:

submission="save">
Save

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;
}

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.