Cloning components saves time in creating your application and in setting component properties. A clone is a copy of a selected component. In this application, all three panes for zip code, city, and state will have a text label and a text box, all with similar properties.
In this section, you'll remove the existing lytOutput child ** panes. Then you'll make clones of paneInput and move them to the lytOutput component. The two bottom panes will contain the city and state information returned by the Address Lookup Service.
To create clones of the paneInput component, complete these steps:
# Expand the *lytOutput* component in the Component Hierarchy palette, select both children, and click the *Recycle* button *!Cloning_Components_for_an_Application-icon_73.gif!* on the toolbar to delete the two child panes. Instead, you'll use clones of the paneInput component.
Use *Ctrl+click* to select multiple components. Use *Shift+click* to choose a range of components. If you delete components by mistake, you can recover them from the Recycle Bin. Choose *Palettes > Recycle Bin*.
# Select *paneInput* in the Component Hierarchy palette and click the *Clone* button !Cloning_Components_for_an_Application-icon_1.gif! on the toolbar two times to create two clones. Two clones of the paneInput ** component display at the bottom of the Component Hierarchy palette.
# Select the two *paneInput* clones and drag and drop them on the *lytOutput* component in the Component Hierarchy palette.
The component hierarchy and work area should look like the following:
{expand:Click here to expand screenshot...}!Cloning_Components_for_an_Application-form_element_dialog.gif!{expand}\\
\\
# Change the following properties for the *panelinput* (first child of *lytOutput*) in the Properties Editor palette:
\\
** Name: Set property value to *paneCity*
\\
** BG Color: Set property value to *@Solid Light*
# Change the following properties for *lblZipcode* in the Properties Editor palette:
\\
** Name: Set property value to *lblCity*
\\
** Text/HTML: Set property value to *City*
# Change the following properties for txtZipcode in the Properties Editor palette:
\\
** Name: Set property value to *txtCity*
\\
** Enabled: Set property value to *Disabled*
# Change the following properties for the panelinput (second child of *lytOutput*) in the Properties Editor palette:
\\
** Name: Set property value to *paneState*
\\
** BG Color: Set property value to *@Solid Light*
# Change the following properties for lblZipcode in the Properties Editor palette:
\\
** Name: Set property value to *lblState*
\\
** Text/HTML: Set property value to *State*
# Change the following properties for txtZipcode in the Properties Editor palette:
\\
** Name: Set property value to *txtState*
\\
** Enabled: Set property value to *Disabled*
The *txtCity* and *txtState* text boxes are set to *Disabled*, because user input isn't allowed for these text boxes. The Address Lookup Service will return city and state values in these text boxes.
The application should look similar to the following:
{expand:Click here to expand screenshot...}!Cloning_Components_for_an_Application-dialog_nobutton.gif!{expand}\\
\\
# Save your application.
Next, you'll add a button and a button event to the application.