XForms

Here are some naming conventions used for this WikiBook. These naming conventions are designed to be consistent across the sample programs, allowing our students to be able to copy and paste blocks of code from the sample programs with a minimum amount of reformatting. So even though it may be a lit

At the end of the cookbook there are integration examples of how to extend and integrate XForms with other systems such as web services. The philosophy behind this book centers around the fact that people often learn best by taking a fully-functioning program and making slight modifications to it to

One thing is clear: the introduction of clean [MVC]( concepts were never part of the original HTML specification. Many attempts were made to introduce better controls into browsers and the HTML language, but most of these additions fell short for four reasons: - They were either browser or vendor sp

- **Declarative** - XForms is considered a [declarative]( system in that it allows users to declare **what** they want the forms to do, not **how** to do it. Movement away from highly complex and primitive procedural JavaScript to advanced declarative styles is the principal way that non-programmers

There are several ways to get started using XForms. But we must first understand that running XForms within a web browser has several security-related issues that prevent software from saving to your local hard drive. There are several workarounds for this. There are several XForms systems that can

Common options are Commercial (with link), Apache 2.0, LGPL, GPL or other. The column should always provide a URL to the exact license. ### Cost Per 10 or 100 or 1,000 or 10,000 Users What is the typical estimated costs for this product for between 10 and 10,000 users. Assume 10 medium-complexity fo

You should be able to just copy and paste the text into a program such as Notepad and save it to a file such as hello.htm. This will tell you if you have the [Firefox]( or other browser extension installed correctly. ## Screen Image (Note that this is only a .jpg and NOT an actual form!) ## Link to

ref="inp1"> Ephemeral message: level="ephemeral" ev:event="DOMFocusIn">This is an ephemeral message. Don't worry, I go away after a few seconds. Press enter in the input field to get a modeless message: ref="inp2"> Modeless message input: level="modeless" model="myModel" ref="/data/MyMessage" ev:eve

Most people that have studied [MVC]( architecture agree on two aspects: The Model and the View. The model is where you store your data or your business objects. The View is what the user sees. But many variations of MVC have very different implementations of a controller.

The model has instance data in it to store the values that the user enters in the form. The view is part of the presentation in the body of the HTML document. ## Sample Program xmlns=" xmlns:xf=" XForms inputs with labels xmlns=""> Enter your first name, and last name. ref="PersonGivenName" incremen

The name of the Data Element is a concatenation of three fields: the Object Class Name, the Property Name and the Representation Term. The first two are text fields and the third is a value that is picked from a list. This form creates a single output based on the values of the input fields. This sh

Here is an example program that demonstrates this. ## Screen Image Here is a screen capture of the application: Note that top grid is actually just unlabeled input cells. Below that is a sample output inside a table. You should be able to change any of the input cells, enter a tab, and see the outpu

This example has two input fields for a person's first and last name and two output controls. ## Sample Program xmlns=" xmlns:xf=" xmlns:xs=" xmlns:xsi=" Your Title Here xmlns=""> id="PersonGivenName" nodeset="/data/PersonGivenName"/> id="PersonSurName" nodeset="/data/PersonSurName"/> bind="PersonGi

The model has instance data in it to store the values that the user enters in the form. The view is part of the presentation in the body of the HTML document. ## Sample Program xmlns=" xmlns:xf=" XForms inputs with labels xmlns=""> Enter your first name, and last name. ref="PersonGivenName" incremen

It will need additions if you want to align select, select1, textarea and other controls. A full CSS file for doing this is described later on in this cookbook. Note that you MUST put inputs inside of a group element for this stylesheet to work. Also note that the table can grow if the labels get to

This example has been tested using the FireFox browser. The use of the .xf-value class selector may not work on other systems.

This example uses a CSS style sheet to put the labels and fieldset legend in bold and align the login and password labels. By default the fieldset box stretches the entire width of the page. You can make it static by adding a style attribute with the width set to 250 pixels like this:

There are three message options: - **ephemeral** - a message that just appears briefly and goes away by itself - **modeless** - a message you can ignore for now - **modal** - a message the user must acknowledge before you go on ## Screen Image Here is a sceen image with the ephemeral message showing

lang="css"> textarea { font-family: sans-serif; height: 8em; width: 600px; } == Sample Program == lang="xml"> xmlns=" xmlns:xf=" XForms textarea xmlns=""> /> ref="Name" incremental="true"> Name: </xf:output ref="Name"> ref="MyTextValue"> Note: ## Discussion One of the challenges is to be able to for

The example includes the default textarea and a small, medium, large and extra large version. Note that if the content exceeds the textarea a scroll bar is automatically added to the control.  ## Sample Program xmln

But in that case a series of space-delimited values is stored in the value associated with the control. ## Screen Image  ## Link to XForms Ap

There are two variations of this, one to display all the values (also known as a radio-button) and one that presents a drop-down list and thus takes up less screen area. Each item on the list of possible choices must have an **item** and within that it must have a **value** and an optional **label**

Values are typically stored in a database and use to compare to items together. Since values are frequently passed as arguments in a URL in a REST interface the convention is to only use lowercase letters and dashs. Do not put spaces, slashes and other characters in values if you are using REST inte