Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.

Tutorial

In the previous tutorial you created a view to add a new employee to the database. In this tutorial you will use the same view to update the data for an existing employee in the database. You will also add functionality to delete employees from the database.

Note: You can complete this tutorial for a Flash Builder project set up to use either your local or public server.

Step 1: Create a click handler for the Edit button.

In DetailView.mxml, create aclickhandler for the Edit button. Inside the handler, navigate to AddEditView and pass to it the data for the selected employee.

To navigate to the AddEditView, use the pushView() method of the ViewNavigator. Set the first argument to the view to navigate to, AddEditView, and the second argument to the data you want to "pass" to the view, which in this case is the data for the employee. The employee data is held in getEmployeesByIDResult.lastResult .

Step 2: Create Add and Edit states.

Return to Design mode for AddEditView.mxml and use the States view to create a new state called Edit based on the existing state, <State1>. Rename <State1> to Add (see Figure 1).

Figure 1. Create Edit and Add states.

Take a look at the generated code. You will see the two states defined; the View component's states property is set equal to an array of State objects for which you assign names.

<s:states>
<s:State name="Add"/>
<s:State name="Edit"/>
</s:states>

Step 3: When the view is added, set the appropriate state.

Create anaddhandler for the View object. Inside the handler, set the view'scurrentStateproperty to Add if no data is passed to the view (itsdataproperty is null). Ifdatais not null, set thecurrentStateto Edit,employeetodata, and thetitleto Edit Employee.

Run the application. Select an employee and then click the Edit button. The title of the view should be Edit Employee and the TextInput fields should be populated with the current values for that employee (see Figure 2).

Note: If you do not see any data, make sure the getEmployeesByID() operation in the Data/Services view is configured to have a return type of Employee.

Figure 2. See employee details in the AddEditView view.

Step 4: Update the data on the server.

In the Data/Services view, configureupdateEmployee()to have an input of type Employee and a return type of void (if they are not already configured). In Design mode, drag theupdateEmployee()operation and drop it on the Save button. Pass theemployeeobject to the operation call. Inside the Save buttonclickhandler, use conditional logic to make the appropriate service call.

Run the application and add a new employee. This should work as before. Select an employee and click the Edit button. The details for the selected employee should be displayed. Change the value for at least one field and click Save (see Figure 3). The updated employee details should be displayed.

Figure 3. Edit an employee record.

Step 6: Add delete functionality.

In the Data/Services view, configuredeleteEmployee()to have an input of type int and a return type of void (if they are not already configured). Return to Design mode for DetailView.mxml and drag thedeleteEmployee()operation and drop it on the Delete button. Pass thedataobject (cast as an int) to the service call.

Run the application and select one of the new employees you added. Click the Delete button. You should return to the employee list and no longer see that employee displayed. That employee has been deleted from the database.

In this module you added application functionality. You added the ability for your application to send emails and texts and to make calls. You also performed all the data CRUD in a mobile Flex application: you created, read, updated, and deleted data from the database. In the next module, you learn how to debug and deploy the application.