Cloning Components for an Application

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:

1. Expand the lytOutput component in the Component Hierarchy palette, select both children, and click the Recycle button 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.
2. Select paneInput in the Component Hierarchy palette and click the Clone button on the toolbar two times to create two clones. Two clones of the paneInput ** component display at the bottom of the Component Hierarchy palette.
3. 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:
   
   Click here to expand screenshot...
   
   
   
   
4. 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
5. Change the following properties for lblZipcode in the Properties Editor palette:
   
   • Name: Set property value to lblCity
     
   • Text/HTML: Set property value to City
6. Change the following properties for txtZipcode in the Properties Editor palette:
   
   • Name: Set property value to txtCity
     
   • Enabled: Set property value to Disabled
7. 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
8. Change the following properties for lblZipcode in the Properties Editor palette:
   
   • Name: Set property value to lblState
     
   • Text/HTML: Set property value to State
9. 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:
     
     Click here to expand screenshot...
     
     
     
     
10. Save your application.

Next, you'll add a button and a button event to the application.