3.6. Employee store page

XForms model

Create a employeeStore.xdime file in the main jive folder

Add the forms namespace declaration to the html

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:xforms="http://www.w3.org/2002/xforms"
    ...
</html>

Within the head element the required xforms:model element defines the model for the form. The xforms:model element can be placed within the head section of an XDIME 2 page, or within its body (within elements from the XHTML 2 Structural and Text modules), but it must appear before any XForms elements that refer to it. In the action, it contains the definition of the URL to be used when the form is submitted. The form data is processed by the JSP checkAvail.jsp, described in the next module. Add the following markup.
```
<head>
  <link rel="mcs:layout" href="/jivearticle.mlyt"/>
  <link rel="mcs:theme" href="/jive.mthm"/>
  <xforms:model>
    <xforms:submission id="avail" action="checkAvail.jsp"/>
  </xforms:model>
</head>
```

XForms controls

The form controls appear within the body of the page. The xforms:select1 elements define two single selection dropdowns. One of these contains a list of products, the other a list of sizes. The ref attribute contains the value of the selection. xforms:item elements define labels and values for the clothing types. Complete the item section now. You can skip the content for sizes until later.

<h3 class="company_header">Availability</h3>
<p>
  <xforms:select1 ref="item">
    <xforms:label>Item</xforms:label>
    <xforms:item>
      <xforms:label>Storm Jacket</xforms:label>
      <xforms:value>storm jacket</xforms:value>
    </xforms:item>
    <xforms:item>
      <xforms:label>Long Sleeve Sport</xforms:label>
      <xforms:value>long sleeve sports shirt</xforms:value>
    </xforms:item>
    <xforms:item>
      <xforms:label>Twill Shirt</xforms:label>
      <xforms:value>twill shirt</xforms:value>
    </xforms:item>
    <xforms:item>
      <xforms:label>Jersey Sport Shirt</xforms:label>
      <xforms:value>jersey sports shirt</xforms:value>
    </xforms:item>
    <xforms:item>
      <xforms:label>Cotton Sport Shirt</xforms:label>
      <xforms:value>cotton sports shirt</xforms:value>
    </xforms:item>
  </xforms:select1>
</p>

The xforms:submit element defines the Check button. In the submission attribute, it references the xforms:submission element identifier in the model you defined.
```
<p>
  <xforms:submit submission="avail">
    <xforms:label>Check</xforms:label>
  </xforms:submit>
</p>
```

Complete the code

Include the additional code for the standard parts of the page, the sizes section of the form, the popular item descriptions, and the special offers.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>Employee Store</title>
    <!-- Links to the layout and theme for this page -->
    <link rel="mcs:layout" href="/jivearticle.mlyt"/>
    <link rel="mcs:theme" href="/jive.mthm"/>
    <!-- Model for availability check form -->
    <xforms:model>
      <xforms:submission id="avail" action="checkAvail.jsp"/>
    </xforms:model>
  </head>
  <!-- Page body -->
  <body>
    <!-- The common material for the page header -->
    <div>
      <!-- The banner -->
      <div id="logo">
        <a class="homelogo" href="jivehome.xdime">
          <object class="homelogo" src="/images/jive_logo.mimg"/>
        </a>
      </div>
      <div id="photos">
        <object src="/images/photos.mimg"/>
      </div>
    </div>
    <!-- The main menu -->
    <div id="menu_company_news" class="main_menu">
      <a class="pnav" href="companyNews.xdime">
        <object src="/images/menu_company_news.mimg"/>
      </a>
    </div>
    <div id="menu_human_resources" class="main_menu">
      <a class="pnav" href="humanResources.xdime">
        <object src="/images/menu_human_resources.mimg"/>
      </a>
    </div>
    <div id="menu_employee_store" class="main_menu">
      <a class="pnav" href="employeeStore.xdime">
        <object src="/images/menu_employee_store.mimg"/>
      </a>
    </div>
    <!--The current stock price-->
    <div id="stockprice"> Latest from NYSE for Jive (VBE): 21.50 (+ 2.25) </div>
    <!-- Page Title -->
    <h2 id="title">Employee Store</h2>
    <!-- The article -->
    <div id="article">
      <p> Various items of Jive sportswear are available to employees at discounted prices. Style
        has never been such good value! </p>
      <p> Get more information and purchase items by clicking on items in the lists. </p>
      <div class="company_item">
        <h3 class="company_header">Availability</h3>
        <p>
          <xforms:select1 ref="item">
            <xforms:label>Item</xforms:label>
            <xforms:item>
              <xforms:label>Storm Jacket</xforms:label>
              <xforms:value>storm jacket</xforms:value>
            </xforms:item>
            <xforms:item>
              <xforms:label>Long Sleeve Sport</xforms:label>
              <xforms:value>long sleeve sports shirt</xforms:value>
            </xforms:item>
            <xforms:item>
              <xforms:label>Twill Shirt</xforms:label>
              <xforms:value>twill shirt</xforms:value>
            </xforms:item>
            <xforms:item>
              <xforms:label>Jersey Sport Shirt</xforms:label>
              <xforms:value>jersey sports shirt</xforms:value>
            </xforms:item>
            <xforms:item>
              <xforms:label>Cotton Sport Shirt</xforms:label>
              <xforms:value>cotton sports shirt</xforms:value>
            </xforms:item>
          </xforms:select1>
        </p>
        <p>
          <xforms:select1 ref="size">
            <xforms:label>Size</xforms:label>
            <xforms:item>
              <xforms:label>XS</xforms:label>
              <xforms:value>extra small</xforms:value>
            </xforms:item>
            <xforms:item>
              <xforms:label>S</xforms:label>
              <xforms:value>small</xforms:value>
            </xforms:item>
            <xforms:item>
              <xforms:label>R</xforms:label>
              <xforms:value>regular</xforms:value>
            </xforms:item>
            <xforms:item>
              <xforms:label>L</xforms:label>
              <xforms:value>large</xforms:value>
            </xforms:item>
            <xforms:item>
              <xforms:label>XL</xforms:label>
              <xforms:value>extra Large</xforms:value>
            </xforms:item>
            <xforms:item>
              <xforms:label>XXL</xforms:label>
              <xforms:value>huge</xforms:value>
            </xforms:item>
          </xforms:select1>
        </p>
        <p>
          <xforms:submit submission="avail">
            <xforms:label>Check</xforms:label>
          </xforms:submit>
        </p>
      </div>
      <div class="company_item">
        <h3 class="company_header">Most Popular Items</h3>
        <dl>
          <dt>
            <a href="#">Storm Jacket</a>
          </dt>
          <dd>Jive-Tek Nylon shell Storm Jacket is water repellent, wind resistant, has a front
            zipper and elastic waistband. <strong>$19.98</strong></dd>
          <dt>
            <a href="#">Long Sleeve Sport Shirt</a>
          </dt>
          <dd>Cotton, long-sleeve pique knit sport shirt. Designed with a full cut and soft,
            comfortable look to please anyone. <strong>$15.98</strong></dd>
          <dt>
            <a href="#">Short Sleeve Twill Shirt</a>
          </dt>
          <dd>This classic 100% cotton, twill short sleeve shirt has a patch pocket and a
            button-down collar. <strong>$15.98</strong></dd>
          <dt>
            <a href="#">Jersey Knit Sport Shirt</a>
          </dt>
          <dd>This cotton jersey knit sport shirt is unique and upscale, perfect for the office or
            out on the putting green. <strong>$14.98</strong></dd>
          <dt>
            <a href="#">Cotton Sport Shirt</a>
          </dt>
          <dd class="article">This 100% cotton shirt pays has horn tone buttons, welt collar and
            cuffs, side vents, and locker patch. <strong>$11.98</strong></dd>
        </dl>
      </div>
      <div class="company_item">
        <h3 class="company_header">Special Offers</h3>
        <dl>
          <dt>
            <a href="#">Long Sleeve Twill Shirt</a>
          </dt>
          <dd>This classic 100% cotton, twill long sleeve shirt has a patch pocket and a button-down
            collar. <strong>$15.98</strong></dd>
          <dt>
            <a href="#">Short Sleeve Denim Shirt</a>
          </dt>
          <dd>This classic cotton, 6.5-ounce stonewashed denim shirt is perfect for a corporate or
            casual situation. <strong>$15.98</strong></dd>
        </dl>
      </div>
    </div>
    <!-- The common material for the page footer -->
    <div id="footer">
      <p>Copyright <a href="jivehome.xdime">Jive Sports</a></p>
    </div>
  </body>
</html>

Checklist

Take some time to review the structure of the XForms elements in detail by following the following links.

Name	Purpose
div	A section used to add extra structure to documents. Style sheets can be used to control the presentation.
h1, h2, h3, h4, h5, h6	Heading elements for sections within a document. The number associated with each element indicates its relative position in the hierarchy of headings, with 1 indicating the beginning level and 6 the ending level.
p	Block element that defines a paragraph.
xforms:item	Container for the option values in `xforms:select` and `xforms:select1` elements.
xforms:label	Provides a descriptive label for forms controls.
xforms:model	Represents a form definition, used as a container for elements associated with its submission.
xforms:select1	A form control that provides for selection of a single choice from an available list of options; for example, a group of radio buttons.
xforms:submission	Defines the information to submit, where it should be sent, and how to send it.
xforms:submit	A form control that initiates submission of the form data for processing.
xforms:value	Provides the option values associated with select controls.
Core attributes	Attributes that are common to XDIME 2 elements.
Form attributes	Binding expressions provide the mapping between the data associated with a particular control and the data provided for processing when the form is submitted. The expression is the name of the parameter associated with the control's data when the form is submitted. These parameters appear on the submission URL if the form is submitted using the HTTP `GET` method, and are hidden if the `POST` method is used. The methods are specified as attributes on the `xforms:submission` element.