Defining the content of the modal dialog

The content of a modal dialog is just a standard UIM page, though it is styled different when it is displayed by the browser. Specifically, in the modal dialog that we are going to define,

the title is displayed in the title bar of the window, refer to User Interface Element 1 in Introduction;
the action controls appear in a bar at the bottom of the page, refer to User Interface Element 3 in Introduction;
and the close button on the title bar allows the user to close the window without submitting changes, refer to User Interface Element 2 in Introduction.

Defining the content of the modal dialog shows the UIM code for this modal dialog.

Figure 1. CreateEmployments.uim

<PAGE PAGE_ID="CreateEmployments" WINDOW_OPTIONS="width=250">

  <PAGE_TITLE>
    <CONNECT>
      <SOURCE NAME="TEXT" PROPERTY="Page.Title"/>
    </CONNECT>
  </PAGE_TITLE>

  <PAGE_PARAMETER NAME="personID"/>

  <CONNECT>
    <SOURCE NAME="PAGE" PROPERTY="personID"/>
    <TARGET NAME="ACTION" PROPERTY="personID"/>
  </CONNECT>

  <SERVER_INTERFACE NAME="ACTION"
    CLASS="EmploymentFacade"
    OPERATION="createEmployment"
    PHASE="ACTION"/>

  <CLUSTER TITLE="Cluster.Title.Details" NUM_COLS="2">
    <FIELD LABEL="Field.Label.EmployerName">
      <CONNECT>
        <TARGET NAME="ACTION" PROPERTY="employerName"/>
      </CONNECT>
    </FIELD>
    <FIELD LABEL="Field.Label.JobTitle">
      <CONNECT>
        <TARGET NAME="ACTION" PROPERTY="jobTitle"/>
      </CONNECT>
    </FIELD>
    <FIELD LABEL="Field.Label.FromDate">
      <CONNECT>
        <TARGET NAME="ACTION" PROPERTY="fromDate"/>
      </CONNECT>
    </FIELD>
    <FIELD LABEL="Field.Label.ToDate">
      <CONNECT>
        <TARGET NAME="ACTION" PROPERTY="toDate"/>
      </CONNECT>
    </FIELD>
  </CLUSTER>

  <ACTION_SET TOP="false">
    <ACTION_CONTROL LABEL="Control.Label.Save" TYPE="SUBMIT">
    <ACTION_CONTROL LABEL="Control.Label.Cancel" TYPE="SUBMIT"/>
  </ACTION_SET>

</PAGE>

One element to note is the WINDOW_OPTIONS attribute of the PAGE element. In this example, the width has been set to 250. As no height is set, it will be automatically calculated when the dialog is displayed.

The corresponding .properties should contain the localizable content for the modal dialog:

Page.Title=Create Employment
Cluster.Title.Details=Details
Field.Value.Welcome=Here's the details panel for a person

Control.Label.Save=Save
Control.Label.Cancel=Cancel

Field.Label.PersonID=Person ID
Field.Label.EmployerName=Employer Name
Field.Label.JobTitle=Job Title
Field.Label.FromDate=From
Field.Label.ToDate=To