Macromedia Dreamweaver UltraDev - How to write a server behavior in ten easy steps: 5. Create the user interface and write the initializeUI() function

Home > Products > UltraDev > Support > Extending Dreamweaver UltraDev

5. Create the user interface and write the initializeUI() function

Key Concepts

	Create global variables for user interface elements
	Use the `ListControl` class for menus

The process that's described in this section is the same for all Dreamweaver extensions. First, create a user interface in HTML. The following example shows how to create a form, which must be set in a table:

    <FORM NAME="theForm">
      <TABLE>
        <TR>
          <TD ALIGN="right" VALIGN="baseline" NOWRAP>
            Recordset:
          </TD>
          <TD VALIGN="baseline" NOWRAP>
            <SELECT NAME="recordsetMenu" STYLE="width:230px">
              <OPTION SELECTED>*** no Recordsets found ***</OPTION>
            </SELECT>
          </TD>
        </TR>
        <TR>
          <TD ALIGN="right" VALIGN="baseline" NOWRAP>
            Redirect URL:
          </TD>
          <TD VALIGN="baseline" NOWRAP>
            <INPUT TYPE="text" NAME="url" STYLE="width:230px">
            <INPUT TYPE="button" VALUE="Browse..." onClick="browseFile(document.theForm.url">
          </TD>
        </TR>
      </TABLE>
    </form>

Next, you'll initialize the user interface by calling a function from the BODY tag onLoad handler. You declared the function in step 3, but you'll need to change the BODY tag to the following:

<BODY onLoad="initializeUI()">

Now you're ready to write the initialization function. For the example, there are two user interface elements to initialize: a list of recordsets, and a textfield for the URL. Start by adding two more global variables to the top of your script:

var TEXT_URL;
var LIST_RS;

In the initializeUI() function, get a list of all recordsets using the same function that was used in step 4. Assign a temporary variable to hold the array of recordset names:

  var rsNames = findAllRecordsetNames();

Next, use the ListControl class (documented in Configuration/Shared/MM/Scripts/Class/ListControlClass.js ) to build a menu of recordset names. Create an instance of the class for the SELECT tag named recordsetMenu , then set it to list all the recordset names:

  LIST_RS = new ListControl("recordsetMenu");
  LIST_RS.setAll(rsNames);

Now assign TEXT_URL to refer to the input named "url". This global constant will be available later when you need to get the URL from the textfield. The completed function should look like this:

function initializeUI() {
  var rsNames = findAllRecordsetNames();
  LIST_RS = new ListControl("recordsetMenu");
  LIST_RS.setAll(rsNames);
  TEXT_URL = document.theForm.url;
}

Notice that there is no " var " before the assignments of LIST_RS and TEXT_URL because they are global variables. Your server behavior file should now look like the sample file: Step05_RedirectIfEmpty.htm.

Restart Dreamweaver and open the test file. Open the server behavior window. Click the plus (+) menu, select RedirectIfEmpty. The user interface should include a menu of recordsets and a URL textfield.