The enhanced focus indicator makes it easier to see which item has the focus by drawing a small, black square near the top-left corner of the item. This enhancement appears in addition to the regular focus indicator, which normally outlines an item or places the cursor inside an item.

1. Open a form in the Viewer.
2. Click Preferences The Preferences form opens to the Basic Preferences.
3. Beside Accessibility Configuration, select Use Enhanced Focus Indicator.
4. Click Save to close the Preferences form and save your changes.

You can set the Viewer to use the operating system colors rather than the colors defined by the form itself. This is useful if you have set your operating system colors to provide a higher contrast than normal.

1. Open a form in the Viewer.
2. Click Preferences .
   • The Preferences form opens to the Basic Preferences.
3. Beside Accessibility Configuration, select Use Operating System Colors.
4. Click Save.

1. Place a comment wrapper between the script tags. For example:

      <SCRIPT ...script attributes...>
         <!-- 
         -->
      </SCRIPT>

2. Paste the entire XFDL form inside the comment wrapper.

   <SCRIPT ...script attributes...>
      <!--
         <?xml version="1.0"?>
         <XFDL xmlns="http://www.ibm.com/xmlns/prod/XFDL/7.0" 
            xmlns:custom="http://www.ibm.com/xmlns/prod/XFDL/Custom">
            <globalpage sid="global">
                <global sid="global">
                   <vfd_date>9/7/2004</vfd_date>
               </global>
            </globalpage>
            <page sid="PAGE1">
               <global sid="global">
                  <label>PAGE1</label>
               </global>
               <label sid="LABEL1">
                  <value>This is a short sample form.</value>
               </label>
            </page>
         </XFDL>
      -->
   </SCRIPT>

1. Open the Designer.
2. Open the form you want to base64-gzip encode.
3. In the Outline view, select Form Global.
   • Form Global data appears in the Properties view.
4. Click the popup in the field next to saveformat and select application/vnd.xfdl;content-encoding="base64-gzip".

   <META http-equiv="Content-Type" content="text/html;
    charset=utf-8">

1. Open the file in a text editor. Do not open it in the Designer.
2. Search for the encoding attribute on the XML version tag and delete the attribute and its setting.
3. Save the form.

To avoid problems during the tutorial, make sure that you have Dojo Toolkit in the correct location and that you have the appropriate supporting files in place.

1. Install IBM Forms Viewer 4.
2. In a convenient location on your hard disk, create the folder structure for this project.
   1. Create a new folder, and give it the name HTMLPane.
   2. In the HTMLPane folder, create two new folders: JavaScript and dojo.
3. Copy the supporting files into the folders that you created.
   1. Locate LF_FormNodeP.js and LF_XFDL.js. Copy them into the JavaScript folder that you created.

      The default source location of the two files is C:\Program Files\IBM\Forms Viewer\4.0\JavaScript but it might be different on your computer, depending on where you installed Viewer.

   2. Locate LF_ViewerFormEmbeddedHTMLFrame.htm and copy it into the HTMLPane folder.

      Although the source location of this file is the same as LF_ViewerScript.js and LF_XFDL.js, the destination is different. Make sure that you copy it into the HTMLPane folder, not the HTMLPane\JavaScript folder.

   3. Copy the folder structure from the Dojo toolkit into the HTMLPane folder.

HTMLPane\dojo\dijit
HTMLPane\dojo\dojo
HTMLPane\dojo\dojox
HTMLPane\JavaScript

The form contains a label and a pane. The form also contains an XForms model that supplies the value for the label and for the slider control.

1. Create a new XFDL file, give it the name TutorialHTMLPane.xfdl, and open it in a text editor.
2. Create a skeleton XFDL form that contains the namespaces that are needed, the globalpage, and the first page.

   <?xml version="1.0" encoding="UTF-8"?>
   <XFDL xmlns="http://www.ibm.com/xmlns/prod/XFDL/8.0" 
         xmlns:xfdl="http://www.ibm.com/xmlns/prod/XFDL/8.0" 
         xmlns:xforms="http://www.w3.org/2002/xforms">
      <globalpage sid="global">
        <global sid="global">
   
          <!-- add XForms model here -->
   
        </global>
      </globalpage>
      <page sid="PAGE1">
        <global sid="global">
           <label>HTML pane</label>
         </global>
         <label sid="LABEL1">
           <value>HTML in pane Tutorial</value>
         </label>
   
        <!-- add the label and items here -->
   
      </page>
   </XFDL>

3. Add the XForms model to the global page.

   The model contains the data that is updated by the slider control. The model also provides the initial value for the slider, which in this case is 4.

   <globalpage sid="global">
        <global sid="global">
          <xformsmodels>
            <xforms:model>
              <xforms:instance id="slider-value" xmlns="">
                <data>
                  <slider>4</slider>
                </data>
              </xforms:instance>
            </xforms:model>
          </xformsmodels> 
        </global>
      </globalpage>

4. Add a label item to the PAGE1 page. This label displays the value of the <slider> element that is in the XForms model.

   <page sid="PAGE1">
     <global sid="global">
        <label>Modal Dialog</label>
      </global>
      <label sid="LABEL1">
        <value>HTML in pane Tutorial</value>
      </label>
      <label sid="LABEL2">
         <xforms:output ref="instance('slider-value')/slider">
           <xforms:label>Value of slider: </xforms:label>
         </xforms:output>
         <itemlocation>
           <below>LABEL1</below>
         </itemlocation>
       </label> 
     .
     .
     .

5. Add the pane item after the label item.

   The pane item has three purposes; to provide the URL of the embedded web page, to provide the width and height of embedded content, and to provide content for the printed version of the form. Everything within the xforms:group element is visible only when the form is printed.

     .
     .
     .
       </label>
   
       <pane sid="PANE1">
          <xforms:group ref="instance('slider-value')/slider">
             <label sid="PANE1_LABEL1">
               <value>This is printed.</value>
             </label>
             <spacer sid="vfd_spacer">
               <itemlocation>
                 <x>300</x>
                 <y>40</y>
               </itemlocation>
            </spacer>
           </xforms:group>         
           <!-- The file must be in the same folder as the XFDL form -->
           <url>TutorialHTMLPane.html</url>
        </pane>
     </page>
   </XFDL>      

6. Save the file.

<?xml version="1.0" encoding="UTF-8"?>
<XFDL xmlns="http://www.ibm.com/xmlns/prod/XFDL/8.0" 
      xmlns:xfdl="http://www.ibm.com/xmlns/prod/XFDL/8.0" 
      xmlns:xforms="http://www.w3.org/2002/xforms">
   <globalpage sid="global">
     <global sid="global">
       <xformsmodels>
         <xforms:model>
           <xforms:instance xmlns="" id="slider-value">
             <data>
               <slider>4</slider>
             </data>
           </xforms:instance>
         </xforms:model>
       </xformsmodels> 
     </global>
   </globalpage>
   <page sid="PAGE1">
   
      <global sid="global">
        <label>HTML in pane</label>
      </global>

      <label sid="LABEL1">
         <value>Viewer HTML in pane Tutorial</value>      
      </label>
      
      <label sid="LABEL2">
        <xforms:output ref="instance('slider-value')/slider">
          <xforms:label>Value of slider: </xforms:label>
        </xforms:output>
        <itemlocation>
          <below>LABEL1</below>
        </itemlocation>
      </label>
      
      <pane sid="PANE1">
         <xforms:group ref="instance('slider-value')/slider">
            <label sid="PANE1_LABEL1">
              <value>This is printed.</value>
            </label>
            <spacer sid="vfd_spacer">
              <itemlocation>
                <x>300</x>
                <y>40</y>
              </itemlocation>
            </spacer>
        </xforms:group>
        <!-- The file must be in the same folder as the XFDL form -->
        <url>TutorialHTMLPane.html</url>       
     </pane>

   </page>
</XFDL>

In this stage of the tutorial, you create the web page for the form.

1. Create a new HTML file, give it the name TutorialHTMLPane.html, and open it in a text editor.
2. Create a skeleton HTML file that contains references to the Dojo library and IBM Forms JavaScript API files.

   <html>
     <head>
       <link href="dojo/dijit/themes/nihilo/nihilo.css" rel="stylesheet" type="text/css">
       <link href="dojo/dojo/resources/dojo.css" rel="stylesheet" type="text/css">
   
       <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
       <script type="text/javascript" src="JavaScript/LF_FormNodeP.js"></script>
       <script type="text/javascript" src="JavaScript/LF_XFDL.js"></script>
   
       <!-- Add custom JavaScript here -->
   
     </head>
   
     <body class="nihilo">
   
     <!-- Add slider control here -->
   
     </body>
   
   </html>

3. Add the JavaScript functions that load the Dojo slider control and initialize it when the form opens.

       .
       .
       .
   
       <script type="text/javascript">
         dojo.require("dijit.form.Slider");
   
         dojo.addOnLoad(function() {
         
           /* get the value of the field in the form and assign it to the variable
              initvalue. The extractXFormsInstance method from the IBM Forms 
              JavaScript API returns a string in this format: "<slider>n</slider>" 
              where n is a number */
           var initvalue = XFDL.getCurrentForm().extractXFormsInstance(null,
             "instance('slider-value')/slider", true, true, null);        
           
           // use a regular expression to extract the number from initvalue
           initvalue = initvalue.match(/\d+/);
   
           // set up the Dojo slider
           var sliderRules = new dijit.form.HorizontalRule({
             count: 10,
             style: "height:5px;"
           },
           "sliderrules");
   
           var slider = new dijit.form.HorizontalSlider({
             name: "slider",
             value: initvalue,
             minimum: 1,
             maximum: 10,
             discreteValues: 10,
             style: "width:300px;",
             onChange: function(value) {
               // update the XForms model when the slider value changes
               XFDL.getCurrentForm().updateXFormsInstance(null, 
               "instance('slider-value')/slider", 
               null, value.toString(), 
               XFDL.UFL_XFORMS_UPDATE_REPLACE_TEXT);
             }
           },
           "slider");
         });
         </script>    
       </head>
       .
       .
       .

4. Add the slider control to the body of the web page.

     .
     .
     .
     <body class="nihilo">
       <div id="slider">
          <div id="sliderrules"></div>
          <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" 
              style="height:1.5em;font-size:75%;color:gray;">
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
             <li>6</li>
             <li>7</li>
             <li>8</li>
             <li>9</li>
             <li>10</li>
           </ol>
         </div>
     </body>

5. 
   

<html>
  <head>
    <link href="dojo/dijit/themes/nihilo/nihilo.css" rel="stylesheet" type="text/css">
    <link href="dojo/dojo/resources/dojo.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript" src="JavaScript/LF_FormNodeP.js"></script>
    <script type="text/javascript" src="JavaScript/LF_XFDL.js"></script>
    <script type="text/javascript">
      dojo.require("dijit.form.Slider");

      dojo.addOnLoad(function() {
      
        /* get the value of the field in the form and assign it to the variable
           initvalue. The extractXFormsInstance method from the IBM Forms 
           JavaScript API returns a string in this format: "<slider>n</slider>" 
           where n is a number */
        var initvalue = XFDL.getCurrentForm().extractXFormsInstance(null,
          "instance('slider-value')/slider", true, true, null);
        
        // use a regular expression to extract the number from initvalue
        initvalue = initvalue.match(/\d+/);
        
        // set up the Dojo slider
        var sliderRules = new dijit.form.HorizontalRule({
          count: 10,
          style: "height:5px;"
        },
        "sliderrules");

        var slider = new dijit.form.HorizontalSlider({
          name: "slider",
          value: initvalue,
          minimum: 1,
          maximum: 10,
          discreteValues: 10,
          style: "width:300px;",
          onChange: function(value) {
            // update the XForms model when the slider value changes
            XFDL.getCurrentForm().updateXFormsInstance(null, 
            "instance('slider-value')/slider", 
            null, value.toString(), 
            XFDL.UFL_XFORMS_UPDATE_REPLACE_TEXT);
          }
        },
        "slider");
      });
    </script>
  </head>

  <body class="nihilo">
      <div id="slider">
        <div id="sliderrules"></div>
        <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" 
            style="height:1.5em;font-size:75%;color:gray;">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ol>
      </div>
  </body>

</html>

After creating the form and the web page, open the form in Viewer.

To use the HTML in pane project:

1. In Windows® Explorer, double-click TutorialHTMLPane.xfdl. The form that you created opens in Viewer.
2. Use the slider control to change the value.
3. Print the form. On the printed page, the slider control is replaced with the text This is printed.

To avoid problems during the tutorial, make sure that you have Dojo Toolkit in the correct location and that you have the appropriate supporting files in place.

1. Install IBM Forms Viewer 4.
2. In a convenient location on your hard disk, create the folder structure for this project.
   1. Create a new folder, and give it the name ModalDialog.
   2. In the ModalDialog folder, create two new folders: JavaScript and dojo.
3. Copy the supporting files into the folders that you created.
   1. Locate LF_FormNodeP.js and LF_XFDL.js. Copy them into the JavaScript folder that you created.

      The default source location of the two files is C:\Program Files\IBM\Forms Viewer\4.0\JavaScript but it might be different on your computer, depending on where you installed Viewer.

   2. Locate LF_ViewerFormEmbeddedHTMLFrame.htm and copy it into the ModalDialog folder.

      Although the source location of this file is the same as LF_ViewerScript.js and LF_XFDL.js, the destination is different. Make sure that you copy it into the ModalDialog folder, not the ModalDialog\JavaScript folder.

   3. Copy the folder structure from the Dojo toolkit into the ModalDialog folder.

ModalDialog\dojo\dijit
ModalDialog\dojo\dojo
ModalDialog\dojo\dojox
ModalDialog\JavaScript

The form contains a label, a button, and a field. The form also contains an XForms model that supplies the value for the field.

1. Change to the ModalDialog folder and create a new XFDL file. Give the XFDL file the name TutorialModalDialog.xfdl, and open it in a text editor.
2. Create a skeleton XFDL form that contains the namespaces that you will use, the globalpage, and the first page.

   <?xml version="1.0" encoding="UTF-8"?>
   <XFDL xmlns="http://www.ibm.com/xmlns/prod/XFDL/8.0" 
         xmlns:custom="http://www.ibm.com/xmlns/prod/XFDL/Custom" 
         xmlns:xfdl="http://www.ibm.com/xmlns/prod/XFDL/8.0" 
         xmlns:xforms="http://www.w3.org/2002/xforms">
      <globalpage sid="global">
        <global sid="global">
   
          <!-- add XForms model here -->
   
        </global>
      </globalpage>
      <page sid="PAGE1">
        <global sid="global">
           <label>Modal Dialog</label>
         </global>
         <label sid="LABEL1">
           <value>Modal Dialog Tutorial</value>
         </label>
   
        <!-- add the button and field items here -->
   
      </page>
   </XFDL>

3. Add the XForms model to the global page.

   The model contains the data that is updated by the slider control. In this case, the initial value for the slider is 9.

   <globalpage sid="global">
        <global sid="global">
          <xformsmodels>
            <xforms:model>
              <xforms:instance id="slider-value" xmlns="">
                <data>
                  <slider>9</slider>
                </data>
              </xforms:instance>
            </xforms:model>
          </xformsmodels> 
        </global>
      </globalpage>

4. Add the button item to the PAGE1 page.

   When the button is clicked, the Modal Dialog opens and displays the TutorialModalDialog.html web page inside a frame that is 380 pixels wide and 200 pixels high. This is accomplished with the viewer.launchModalDialog function. Note that Webform Server and Viewer have different requirements for the first parameter to the viewer.launchModalDialog function. For Webform Server, the file must be in a path that is in the same domain as the servlet that you use to open forms. For Viewer, the file must be in the same folder as the XFDL form.

   <page sid="PAGE1">
     <global sid="global">
        <label>Modal Dialog</label>
      </global>
      <label sid="LABEL1">
        <value>Modal Dialog Tutorial</value>
      </label>
      <button sid="BUTTON1">
         <value>Open Modal Dialog</value>
         <layoutflow>block</layoutflow>     
         <!-- 
           Viewer only: The file must be in the same folder as the XFDL form 
         -->
         <custom:option xfdl:compute="toggle(activated, 'off', 'on') == '1' ? 
         viewer.launchModalDialog('TutorialModalDialog.html', '',
         '380', '200', 'false', 'false') : ''"></custom:option>
      </button>
     .
     .
     .

5. Add the field item after the button item.

     .
     .
     .
     </button>
   
     <field sid="FIELD1">
        <xforms:input ref="instance('slider-value')/slider">
          <xforms:label></xforms:label>
        </xforms:input>
        <size>
          <width>2</width>
        </size>
        <justify>right</justify>
        <value></value>
     </field>
   
     </page>
   </XFDL>      

6. Save the file.

<?xml version="1.0" encoding="UTF-8"?>
<XFDL xmlns="http://www.ibm.com/xmlns/prod/XFDL/8.0" 
      xmlns:custom="http://www.ibm.com/xmlns/prod/XFDL/Custom" 
      xmlns:xfdl="http://www.ibm.com/xmlns/prod/XFDL/8.0" 
      xmlns:xforms="http://www.w3.org/2002/xforms">
   <globalpage sid="global">
     <global sid="global">
       <xformsmodels>
         <xforms:model>
           <xforms:instance id="slider-value" xmlns="">
             <data>
               <slider>9</slider>
             </data>
           </xforms:instance>
         </xforms:model>
       </xformsmodels> 
     </global>
   </globalpage>
   <page sid="PAGE1">
   
      <global sid="global">
        <label>Modal Dialog</label>
      </global>

      <label sid="LABEL1">
        <value>Modal Dialog Tutorial</value>
      </label>

      <button sid="BUTTON1">
         <value>Open Modal Dialog</value>
         <layoutflow>block</layoutflow>
         <custom:option xfdl:compute="toggle(activated, 'off', 'on') == '1' ? 
         viewer.launchModalDialog('TutorialModalDialog.html', '', 
         '380', '200', 'false', 'false') : ''"></custom:option>
      </button>
      
      <field sid="FIELD1">
         <xforms:input ref="instance('slider-value')/slider">
           <xforms:label></xforms:label>
         </xforms:input>
         <size>
           <width>2</width>
         </size>
         <justify>right</justify>
         <value></value>
      </field>
      
   </page>
</XFDL>

In this stage of the tutorial, you create the web page for the Modal Dialog.

1. Create a new HTML file, give it the name TutorialModalDialog.html, and open it in a text editor.
2. Create a skeleton HTML file that contains references to the Dojo library and IBM Forms JavaScript API files.

   <html>
     <head>
       <link href="dojo/dijit/themes/nihilo/nihilo.css" rel="stylesheet" type="text/css">
       <link href="dojo/dojo/resources/dojo.css" rel="stylesheet" type="text/css">
   
       <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
       <script type="text/javascript" src="JavaScript/LF_FormNodeP.js"></script>
       <script type="text/javascript" src="JavaScript/LF_XFDL.js"></script>
   
       <!-- Add custom JavaScript here -->
   
     </head>
   
     <body class="nihilo">
   
     <!-- Add slider control and buttons here -->
   
     </body>
   
   </html>

3. Add the JavaScript functions that load the Dojo slider control and initialize it when the Modal Dialog opens

       .
       .
       .
   
       <script type="text/javascript">
         dojo.require("dijit.form.Slider");
         dojo.require("dijit.form.TextBox");
   
         dojo.addOnLoad(function() {
         
           // get the value of the field in the form, and assign it to the variable
           // initvalue. The extractXFormsInstance method from the IBM Forms 
           // JavaScript API returns a string in this format: 
           // "<slider>n</slider>" where n is a number
           var initvalue = XFDL.getCurrentForm().extractXFormsInstance(null,
             "instance('slider-value')/slider", true, true, null);        
           
           // use a regular expression to extract the number from initvalue
           initvalue = initvalue.match(/\d+/);
   
           // set up the Dojo slider
           var sliderRules = new dijit.form.HorizontalRule({
             count: 10,
             style: "height:5px;"
           },
           "sliderrules");
   
           var slider = new dijit.form.HorizontalSlider({
             name: "slider",
             value: initvalue,
             minimum: 1,
             maximum: 10,
             discreteValues: 10,
             style: "width:300px;",
             onChange: function(value) {
               dojo.byId("sliderValue").value = value;
             }
           },
           "slider");
   
           dojo.byId("sliderValue").value = slider.value;
         });    
       .
       .
       .

4. Add the JavaScript functions that update the form when the Update Form button is clicked and close the form when the Close button is clicked.

       .
       .
       .
         function update()
         {
           // Use the updateXFormsInstance method from the IBM Forms
           // JavaScript API to update the form
           XFDL.getCurrentForm().updateXFormsInstance(null, 
             "instance('slider-value')/slider", 
             null, dojo.byId("sliderValue").value, 
             XFDL.UFL_XFORMS_UPDATE_REPLACE_TEXT);
         }
   
         function cancel()
         {
           XFDL.getCurrentForm().getDialog().close();
         }
   
       </script>
     </head>
     .
     .
     .

5. Add the body of the web page, which includes the slider control, the Update Form button, and a Close button

     .
     .
     .
     <body class="nihilo">
       <div style="position:absolute;left:34px;top:30px;width:302px;height:150px">
         <div id="slider">
           <div id="sliderrules"></div>
           <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" 
               style="height:1.5em;font-size:75%;color:gray;">
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
             <li>6</li>
             <li>7</li>
             <li>8</li>
             <li>9</li>
             <li>10</li>
           </ol>
         </div>
         <table>
           <tr>
             <td style="text-align:center;width:318px;height:38px;">Selected Value: 
               <label style="width:30px" id="sliderValue" dojoType="dijit.form.TextBox"></label>
             </td>
           </tr>
           <tr>
             <td style="text-align:center;width:318px;height:38px;">
               <button onclick="javascript:update();">Update Form</button>
               <button onclick="javascript:cancel();">Close</button>
             </td>
           </tr>
         </table>
       </div>
     </body>

6. 
   

<html>
  <head>
    <link href="dojo/dijit/themes/nihilo/nihilo.css" rel="stylesheet" type="text/css">
    <link href="dojo/dojo/resources/dojo.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript" src="JavaScript/LF_FormNodeP.js"></script>
    <script type="text/javascript" src="JavaScript/LF_XFDL.js"></script>
    <script type="text/javascript">
      dojo.require("dijit.form.Slider");
      dojo.require("dijit.form.TextBox");

      dojo.addOnLoad(function() {
      
        // get the value of the field in the form, and assign it to the variable
        // initvalue. The extractXFormsInstance method from the IBM Forms 
        // JavaScript API returns a string in this format: 
        // "<slider>n</slider>" where n is a number
        var initvalue = XFDL.getCurrentForm().extractXFormsInstance(null,
          "instance('slider-value')/slider", true, true, null);
        
        // use a regular expression to extract the number from initvalue
        initvalue = initvalue.match(/\d+/);
        
        // set up the Dojo slider
        var sliderRules = new dijit.form.HorizontalRule({
          count: 10,
          style: "height:5px;"
        },
        "sliderrules");

        var slider = new dijit.form.HorizontalSlider({
          name: "slider",
          value: initvalue,
          minimum: 1,
          maximum: 10,
          discreteValues: 10,
          style: "width:300px;",
          onChange: function(value) {
            dojo.byId("sliderValue").value = value;
          }
        },
        "slider");

        dojo.byId("sliderValue").value = slider.value;
      });

      function update()
      {
        // Use the updateXFormsInstance method from the IBM Forms
        // JavaScript API to update the form
        XFDL.getCurrentForm().updateXFormsInstance(null, 
          "instance('slider-value')/slider", 
          null, dojo.byId("sliderValue").value, 
          XFDL.UFL_XFORMS_UPDATE_REPLACE_TEXT);
      }

      function cancel()
      {
        XFDL.getCurrentForm().getDialog().close();
      }

    </script>
  </head>

  <body class="nihilo">
    <div style="position:absolute;left:34px;top:30px;width:302px;height:150px">
      <div id="slider">
        <div id="sliderrules"></div>
        <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" 
            style="height:1.5em;font-size:75%;color:gray;">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ol>
      </div>
      <table>
        <tr>
          <td style="text-align:center;width:318px;height:38px;">Selected Value: 
            <label style="width:30px" id="sliderValue" dojoType="dijit.form.TextBox"></label>
          </td>
        </tr>
        <tr>
          <td style="text-align:center;width:318px;height:38px;">
            <button onclick="javascript:update();">Update Form</button>
            <button onclick="javascript:cancel();">Close</button>
          </td>
        </tr>
      </table>
    </div>
  </body>

</html>

After creating the form and the web page, open the form in Viewer.

To use the Modal Dialog project:

1. In Windows Explorer, double-click TutorialModalDialog.xfdl. The form that you created opens in Viewer.
2. In the text field, delete the number 9 and enter 5.
3. Click Open Modal Dialog. A dialog opens that shows a Dojo slider control that is set to the value 5.
4. Use the slider control to change the value from 5 to 3 then click Update Form. The value in the text box on the form changes to 3.