Flex Test Drive: Modify the database
Download the Test Drive solution files (ZIP, 14 MB)
Code
<?xml version="1.0" encoding="utf-8"?>
<s:Application …>
<fx:Script>
<![CDATA[
(…)
import spark.events.GridItemEditorEvent;
import spark.events.GridSelectionEvent;
protected function button_clickHandler(event:MouseEvent):void
{
employee.lastname = lastnameTextInput.text;
employee.firstname = firstnameTextInput.text;
(…)
if(employee.id==0)
{
createEmployeeResult.token = employeeService.createEmployee(employee);
}
else
{
updateEmployeeResult.token = employeeService.updateEmployee(employee);
}
}
protected function updateBtn_clickHandler(event:MouseEvent):void
{
currentState="EmployeeUpdate";
}
protected function updateEmployeeResult_resultHandler(event:ResultEvent):void
{
currentState="EmployeeDetails";
}
protected function empDg_gridItemEditorSessionSaveHandler(event:GridItemEditorEvent):void
{
employeeService.updateEmployee(employee);
}
protected function deleteBtn_clickHandler(event:MouseEvent):void
{
deleteEmployeeResult.token = employeeService.deleteEmployee(employee.id);
}
protected function deleteEmployeeResult_resultHandler(event:ResultEvent):void
{
empDg.dataProvider.removeItemAt(empDg.selectedIndex);
currentState="Employees";
}
]]>
</fx:Script>
<s:states>
(…)
<s:State name="EmployeeUpdate"/>
</s:states>
<fx:Declarations>
(…)
<s:CallResponder id="updateEmployeeResult" result="updateEmployeeResult_resultHandler(event)"/>
<s:CallResponder id="deleteEmployeeResult" result="deleteEmployeeResult_resultHandler(event)"/>
</fx:Declarations>
(…)
<s:Button id="empBtn" enabled.EmployeeUpdate="false" …/>
<s:Button id="deptBtn" ... />
<s:DataGrid id="empDg" includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate,Employees" editable="true" gridItemEditorSessionSave="empDg_gridItemEditorSessionSaveHandler(event)" …/>
(…)
<s:TextInput id="searchTxt" includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate,Employees" …/>
<s:Button id="searchBtn" includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate,Employees" …/>
<s:Button id="updateBtn" includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate" click="updateBtn_clickHandler(event)" enabled.EmployeeUpdate="false" …/>
<s:Button id="deleteBtn" includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate"
click="deleteBtn_clickHandler(event)" enabled.EmployeeUpdate="true" …/>
<s:Button id="addBtn" includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate,Employees" enabled.EmployeeUpdate="false"/>
<s:Form includeIn="EmployeeAdd,EmployeeUpdate" …/>
<s:Form includeIn="EmployeeAdd,EmployeeUpdate" …>
(…)
<s:FormItem>
<s:Button id="button" label="Add" click="button_clickHandler(event)"
label.EmployeeUpdate="Update"/>
</s:FormItem>
</s:Form>
</s:Application>
Tutorial
In the previous tutorial you used an input form to add a new employee to the database. In this tutorial, you edit and delete employee data in the database. You add functionality to update data using the input form or by making changes directly in the DataGrid.
Step 1: Create a new state.
Create a new state called EmployeeUpdate based on the EmployeeAdd state. Enable the Delete button. Change the label of the Add button in the Form to Update (see Figure 1).
Step 2: Switch states when the Update button is clicked.
Generate a click handler for the main Update button (not the one in the form) that sets the currentState to EmployeeUpdate. Make it the handler for all states.
Your updateBtn Button tag should appear as shown here:
<s:Button includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate"
id="updateBtn" x="476" y="268" label="Update"
enabled.EmployeeAdd="false"
enabled.EmployeeUpdate="false" click="updateBtn_clickHandler(event)"/>
The click event handler should appear as shown here:
protected function updateBtn_clickHandler(event:MouseEvent):void
{
currentState="EmployeeUpdate";
}
Run the application, select an employee, and click the Update button. You should see your input form populated with the values of the selected employee (see Figure 2).
Step 3: Submit changes to the server.
In the EmployeeUpdate state, drag the updateEmployee() operation from the Data/Services panel and drop it on the Update button in the form. In the handler, pass the employee variable to updateEmployee()and use conditional logic to call the appropriate service based on whether the employee already has a non-zero id.
Your handler should appear as shown here:
protected function button_clickHandler(event:MouseEvent):void
{
employee.lastname = lastnameTextInput.text;
employee.firstname = firstnameTextInput.text;
employee.title = titleTextInput.text;
employee.departmentid = parseInt(departmentidTextInput.text);
employee.cellphone = cellphoneTextInput.text;
employee.officephone = officephoneTextInput.text;
employee.email = emailTextInput.text;
employee.office = officeTextInput.text;
employee.street = streetTextInput.text;
employee.city = cityTextInput.text;
employee.state = stateTextInput.text;
employee.zipcode = zipcodeTextInput.text;
employee.photofile = photofileTextInput.text;
if(employee.id==0){
createEmployeeResult.token = employeeService.createEmployee(employee);
}
else{
updateEmployeeResult.token = employeeService.updateEmployee(employee);
}
}
Step 4: After the update, switch to the EmployeeDetails state.
Add a result event attribute to the updateEmployeeResult CallResponder and generate an event handler. Inside the handler, set currentState to EmployeeDetails.
Your updateEmployeeResult CallResponder should appear as shown here:
<s:CallResponder id="updateEmployeeResult" result="updateEmployeeResult_resultHandler(event)"/>
The result event handler should appear as shown here:
protected function updateEmployeeResult_resultHandler(event:ResultEvent):void
{
currentState="EmployeeDetails";
}
After the data is updated successfully in the database, the EmployeeDetails state will be shown with the details for this employee.
Run the application and change the properties for an existing employee. Refresh the browser and make sure you see your updated employee data in the DataGrid.
Step 5: Update employee data using the DataGrid.
Make the empDg DataGrid editable in all states by setting its editable property to true and create an event handler for its gridItemEditorSessionSave event. Inside the event handler, save the updated employee data to the database.
Your empDg DataGrid tag should appear as shown here:
<s:DataGrid id="empDg" x="50" y="130" width="650"
creationComplete="empDg_creationCompleteHandler(event)"
requestedRowCount="4"
includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate,Employees"
selectionChange="empDg_selectionChangeHandler(event)"
editable="true"
gridItemEditorSessionSave="empDg_gridItemEditorSessionSaveHandler(event)">
The gridItemEditorSessionSave event handler should appear as shown here:
protected function empDg_gridItemEditorSessionSaveHandler(event:GridItemEditorEvent):void
{
employeeService.updateEmployee(employee);
}
In this case, you're not going to do anything after the data is successfully updated so you don't need to specify a CallResponder to handle the results.
Run the application and make changes to the data in the DataGrid (see Figure 3).
Refresh the browser page and see that your changes were not saved to the database.
In this example, you are sending updates to the server every time the user changes data in one DataGrid cell. If a lot of changes are going to be made, you may want to wait and submit all changes to the server at once.
Step 6: Add delete functionality.
In EmployeeDetails view, drag the deleteEmployee() operation out and drop it on the Delete button. In the handler that gets generated, pass the id of the selected employee.
Your handler should appear as shown here:
protected function deleteBtn_clickHandler(event:MouseEvent):void
{
deleteEmployeeResult.token = employeeService.deleteEmployee(employee.id);
}
Your deleteBtn Button tag should appear as shown here:
<s:Button includeIn="EmployeeAdd,EmployeeDetails,EmployeeUpdate"
id="deleteBtn" x="554" y="268" label="Delete "
enabled.EmployeeAdd="false"
enabled.EmployeeUpdate="true"
click="deleteBtn_clickHandler(event)"/>
Run the application and delete an employee—preferably one of the new ones you added. The employee is still shown in the DataGrid. Refresh the browser window and see that the employee has been deleted from the database and is no longer displayed in the DataGrid.
Step 7: Update the local data.
Add a result event attribute to the deleteEmployeeResult CallResponder and generate an event handler. Inside the handler, set currentState to Employees and use the removeItemAt() method to remove the employee from the DataGrid dataProvider.
Your deleteEmployeeResult CallResponder should appear as shown here:
<s:CallResponder id="deleteEmployeeResult"
result="deleteEmployeeResult_resultHandler(event)"/>
The result event handler should appear as shown here:
protected function
deleteEmployeeResult_resultHandler(event:ResultEvent):void
{
empDg.dataProvider.removeItemAt(empDg.selectedIndex);
currentState="Employees";
}
When you call the deleteEmployee() service operation, the employee is deleted from the database, but not from the collection of data being displayed in the DataGrid. You need to remove it from the data displayed in the DataGrid by removing it from the DataGrid's dataProvider.
removeItemAt() is a method of the Flex ArrayCollection class. When the employee data was initially retrieved from the server, it stored the data as an ArrayCollection of Employee objects as the DataGrid dataProvider.
Note: You will learn to debug your application and look at the values and data types of variables in Module 3: Test and debug your code.
Run the application and delete an employee—the employee should now be removed from the DataGrid.
In this module you've performed all the data CRUD from a Flex application: you created, read, updated, and deleted data from the database. To build on your knowledge, view some of the other TestDrive tutorials which cover topics, including debugging and deploying your application.
Learn more
Refer to the following resources to learn more about this topic:
Documentation: Accessing Data with Flex
Documentation: Using Flex 4.5
- View states
- The Spark Form, Spark FormHeading, and Spark FormItem containers
- Data providers and collections
- Data binding
- Validating data
ActionScript 3 Reference
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
More Like This
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Modify the database
- Flex Test Drive: Add charts and graphs
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Change the appearance of your application
- Flex Test Drive: Change the appearance of your application
- Flex Test Drive: Add charts and graphs
- Flex Test Drive: Test and debug your code
