Adding a Button and Button Event

Now, you'll add a button and a button event. After entering the zip code in the application, the user will click the button to send the input data to the web service. The button event won't work until you generate the code that calls the web service.

1. Drag a Button component from the Form Elements folder in the Component Libraries palette to the paneInput component and modify its properties as follows:
   
   • Name: Set property value to btnLookup
     
   • Text/HTML: Set property value to Find City and State
     
   • BG Color: Set property value to #ADADC6
     You can also use the Color Picker to choose color values. Choose Tools > Color Picker You can also click in the Value field in the Properties Editor palette and click the Color Picker button to open the Color Picker.
2. Choose Palettes > Events Editor Palette to open the Events Editor palette if it's not open.
3. Click the Docking Options button on the Events Editor palette toolbar and choose Floating to make working in the Events Editor palette easier.
4. Delete this JavaScript statement in the Value field of the Execute event alert('hello');
5. Type in the following JavaScript statement in the Value field of the Execute event eg.service.callReturnCityState();
   This button event won't work until you define this function in another tutorial. This function calls the web service that returns city and state information. When a user inputs a zip code and clicks the button, the zip code is sent to the web service.
6. Save the project and choose Project > Run Project to run your application and see what it looks like. The application should look similar to this:
   
   Click here to expand screenshot...
   
   
   
   
7. Close the running application.

The objects created in the previous steps are live application objects. When you save the parent component to disk, the parent and all child components are saved with the current object states.

Now that the user interface is complete, the next step is to create mappings between application objects and data elements. Once you've created the mappings, you'll generate the code that calls the web service.

To continue working with this application, see the General Interface Developer Guide. In the next tutorial, you connect the components to a web service and test the application.