Adding Form Elements to the Application

In this section, you'll add text boxes and labels to describe the text boxes. Text boxes are required for entering a zip code and for displaying returned city and state information. The sample application also requires a button for calling the web service. You'll add the button later in the tutorial.

To add form elements to the application, complete these steps:

1. Open the Block folder in the Component Libraries palette and drag a Label component to the top pane component, paneInput, in the work area.
2. Open the Form Elements folder in the Component Libraries palette and drag a Text Box component to the paneInput component in the Component Hierarchy palette.
   The component hierarchy should look like the following:
   
   Click here to expand screenshot...
   
   
   
   
3. Select the label component of paneInput in the Component Hierarchy palette and enter the following values in the Properties Editor palette. For padding and margin, be sure to enter a space between each number.
   
   • Name: Set the property value to lblZipcode
     
   • Width: Set the property value to 100
     
   • Height: Set the property value to 18
     
   • Text/HTML: Set the property value to Type Zip Code
     
   • Padding: Set the property value to 4 0 0 0
     
   • Margin: Set the property value to 0 4 0 0
     
4. Select the textbox child component of paneInput and enter the specified values in the Properties Editor palette. For padding and margin, be sure to enter a space between each number.
   
   • Name: Set the property value to txtZipcode
     
   • Height: Set the property value to 18
     
   • Margin: Set the property value to 0 4 0 0
     

     To learn more about properties in the Properties Editor palette, hover the mouse over the property name or see General Interface GUI Property Reference.

     For properties that require CSS values, such as margin and padding, you can use General Interface syntax or W3C valid CSS syntax. See the General Interface Component Guide.
     

5. Drag and drop another Layout - Top/Over component from the Containers folder in the Component Libraries palette onto the lower paneOutput component. You need a layout here, because you'll be adding two rows of components for the return information, city and state.
6. Change the new layout(--) component properties in the Properties Editor palette to the following:
   
   • Name: Set the property value to lytOutput
     
   • Rows Array: Set the property value to 50,***

In the next section, you'll make two clones of the paneInput pane to create two panes for the lytOutput component. These panes are for the city and state information that the web service returns.