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 minHeight="700" …>
<fx:Script>
<![CDATA[
(…)
import mx.rpc.events.ResultEvent;
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;
createEmployeeResult.token = employeeService.createEmployee(employee);
}
protected function addBtn_clickHandler(event:MouseEvent):void
{
currentState="EmployeeAdd";
employee=new Employee();
}
protected function createEmployeeResult_resultHandler(event:ResultEvent):void
{
currentState="EmployeeDetails"; employee.id=event.result as int; empDg.dataProvider.addItem(employee); empDg.setSelectedIndex(empDg.dataProvider.getItemIndex(employee));
empDg.ensureCellIsVisible(empDg.selectedIndex);
}
]]>
</fx:Script>
<s:states>
(…)
<s:State name="EmployeeAdd"/>
</s:states>
<fx:Declarations>
(…)
<s:CallResponder id="createEmployeeResult" result="createEmployeeResult_resultHandler(event)"/>
</fx:Declarations>
<fx:Binding source="empDg.selectedItem as Employee" destination="employee"/>
<s:Label x="50" y="50" color="#1239E3" fontSize="20" fontWeight="bold"
text="XYZ Corporation Directory"/>
<s:Button id="empBtn" x="50" y="100" label="Employees"
click.Departments="empBtn_clickHandler(event)"
enabled.EmployeeAdd="false"
enabled.EmployeeDetails="false"
enabled.Employees="false"/>
<s:Button id="deptBtn" x="140" y="100" label="Departments"
enabled.Departments="false"
click="deptBtn_clickHandler(event)"/>
<s:DataGrid id="empDg" includeIn="EmployeeAdd,EmployeeDetails,Employees…/>
(…)
<s:TextInput id="searchTxt" includeIn="EmployeeAdd,EmployeeDetails,Employees" …/>
<s:Button id="searchBtn" includeIn="EmployeeAdd,EmployeeDetails,Employees" …/>
<s:Button id="updateBtn" includeIn="EmployeeAdd,EmployeeDetails"
enabled.EmployeeAdd="false" …/>
<s:Button id="deleteBtn" includeIn="EmployeeAdd,EmployeeDetails" enabled.EmployeeAdd="false"…/>
<s:Button id="addBtn" includeIn="EmployeeAdd,EmployeeDetails,Employees"
click="addBtn_clickHandler(event)" enabled.EmployeeAdd="false"…/>
<s:Form includeIn="EmployeeAdd" x="36" y="310" defaultButton="{button}">
<s:FormItem label="Last Name">
<s:TextInput id="lastnameTextInput" text="{employee.lastname}"/>
</s:FormItem>
<s:FormItem label="First Name">
<s:TextInput id="firstnameTextInput" text="{employee.firstname}"/>
</s:FormItem>
<s:FormItem label="Title">
<s:TextInput id="titleTextInput" text="{employee.title}"/>
</s:FormItem>
<s:FormItem label="Department ID">
<s:TextInput id="departmentidTextInput" text="{employee.departmentid}"/>
</s:FormItem>
<s:FormItem label="Cell Phone">
<s:TextInput id="cellphoneTextInput" text="{employee.cellphone}"/>
</s:FormItem>
<s:FormItem label="Office Phone">
<s:TextInput id="officephoneTextInput" text="{employee.officephone}"/>
</s:FormItem>
<s:FormItem label="Email">
<s:TextInput id="emailTextInput" text="{employee.email}"/>
</s:FormItem>
</s:Form>
<s:Form includeIn="EmployeeAdd" x="323" y="310">
<s:FormItem label="Office">
<s:TextInput id="officeTextInput" text="{employee.office}"/>
</s:FormItem>
<s:FormItem label="Street">
<s:TextInput id="streetTextInput" text="{employee.street}"/>
</s:FormItem>
<s:FormItem label="City">
<s:TextInput id="cityTextInput" text="{employee.city}"/>
</s:FormItem>
<s:FormItem label="State">
<s:TextInput id="stateTextInput" text="{employee.state}"/>
</s:FormItem>
<s:FormItem label="Zipcode">
<s:TextInput id="zipcodeTextInput" text="{employee.zipcode}"/>
</s:FormItem>
<s:FormItem label="Photo File">
<s:TextInput id="photofileTextInput" text="{employee.photofile}"/>
</s:FormItem>
<s:FormItem>
<s:Button id="button" label="Add" click="button_clickHandler(event)"/>
</s:FormItem>
</s:Form>
</s:Application>
Tutorial
In Module 1, you retrieved data from a database and displayed it. In this module, you will modify the database: adding, updating,and deleting data.
In this tutorial, you create a new EmployeeAdd state which has an input form for the user to add a new employee to the database.
Step 1: Create a new state.
Create a new state called EmployeeAdd based on the EmployeesDetails state. In the new state, delete the two forms and disable the Add, Delete, and Update Buttons (see Figure 1).
Step 2: Create an input form.
In Design mode for the new state, drag out a Form container and place it below the DataGrid. From the Data/Service view, drag out the getEmployees() operation and drop it on the Form container. Using the wizard, create an editable form that uses the existing getEmployeesResult call. In the Property Control Mapping, choose to not display the id and arrange the fields in the order in which you want them displayed (see Figure 2).
Switch to Source mode and look at the generated code. You will see similar code to that generated in the last module for the EmployeeDetails state. You will see your new EmployeeAdd state defined in the states tag and a new Form tag. In this case, though, the FormItem tags contain TextInput controls instead of Label controls.
Notice that the text properties of all the TextInput controls in the FormItem tags are bound to a property of an employee2 object.
<s:Form includeIn="EmployeeAdd" defaultButton="{button}">
<s:FormItem label="lastname">
<s:TextInput id=" lastnameTextInput" text="{employee2.lastname}"/>
</s:FormItem>
Look in the Declarations section. You will see the employee2 object defined as an instance of the Employee class:
<valueObjects:Employee id="employee2"/>
The Generate Form wizard does not allow you to specify an existing object to display (like employee) so it generates and binds to a new variable, employee2.
Locate the new Button at the end of the new form. It has a click event handler already defined:
<s:Button id="button" label="Submit" click="button_clickHandler(event)"/>
Locate the corrrespoding handler in the Script block. It sets the properties of the employee2 object equal to the new values entered by the user in the TextInput form fields.
protected function button_clickHandler(event:MouseEvent):void
{
employee2.lastname = lastnameTextInput.text;
employee2.firstname = firstnameTextInput.text;
employee2.title = titleTextInput.text;
employee2.departmentid = parseInt(departmentidTextInput.text);
employee2.cellphone = cellphoneTextInput.text;
employee2.officephone = officephoneTextInput.text;
employee2.email = emailTextInput.text;
employee2.office = officeTextInput.text;
employee2.street = streetTextInput.text;
employee2.city = cityTextInput.text;
employee2.state = stateTextInput.text;
employee2.zipcode = zipcodeTextInput.text;
employee2.photofile = photofileTextInput.text;
}
Step 3: Use the employee object instead of employee2.
Delete the declaration tags for employee2 and use Edit > Find/Replace to change the references to employee2 in the new Form and in the button_clickHandler() to employee.
Here is the line of code you should delete:
<valueObjects:Employee id="employee2"/>
All the TextInput controls in the new form should look similar to this:
<s:FormItem label="Last Name">
<s:TextInput id="lastnameTextInput" text="{employee.lastname}"/>
</s:FormItem>
And all the statements in the button_clickHandler() function should look similar to this:
employee.lastname = lastnameTextInput.text;
Step 4: Modify the form layout.
Arrange the input form as shown in Figure 3 by dragging out a second Form container from the Layout section of the Components view and dragging FormItems from one Form container to another. Edit the label properties and change the Submit Button label to Add.
Here are some tips for arranging your forms:
- You can Shift-click to select multiple items and move them all from one form container to the other.
- Look at the
xandypositions of the two forms in the EmployeeDetails state and use these for the positions of the new forms so they appear in exactly the same places. - If all the controls do not fit in the application, increase the
minHeightof the application. - Double-click a FormItem label in the Design area to edit it.
- To align the Add button with the form fields above it, place it inside of a FormItem with no
labelproperty set:
<s:FormItem>
<s:Button id="button" label="Add" click="button_clickHandler(event)"/>
</s:FormItem>
Step 5: Switch states when the Add button is clicked.
Generate a click handler for the Add button above the form (not the one in the form) and inside the handler, set the currentState to EmployeeAdd and set the employee variable to a new instance of the Employee class. Make this the click handler for this button in all states.
Your event handler should appear as shown here:
protected function addBtn_clickHandler(event:MouseEvent):void
{
currentState="EmployeeAdd";
employee=new Employee();
}
Change the addBtn Button control so that it is the click handler for all states:
<s:Button id="addBtn" includeIn="EmployeeAdd,EmployeeDetails,Employees"
label="Add" x="630" y="268" enabled.EmployeeAdd="false"
click="addBtn_clickHandler(event)"/>
Run the application and click the Add button. You should see a blank input form (see Figure 4).
Step 6: Submit data to the server.
Drag the createEmployee() operation from the Data/Services panel and drop it on the Add button in the Form. In the generated handler, pass employee to the service operation.
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;
createEmployeeResult.token = employeeService.createEmployee(employee);
}
A new CallResponder has been created for this service call:
<s:CallResponder id="createEmployeeResult"/>
Step 7: Update the local data.
Add a result event attribute to the createEmployeeResult CallResponder and generate an event handler (see Figure 5). Inside the handler, set currentState to EmployeeDetails, set the id for the new employee, and use the addItem() method to add the new employee to the DataGrid dataProvider.
Your createEmployeeResult CallResponder should appear as shown here:
<s:CallResponder id="createEmployeeResult" result="createEmployeeResult_resultHandler(event)"/>
The result event handler should appear as shown here:
protected function createEmployeeResult_resultHandler(event:ResultEvent):void
{
currentState="EmployeeDetails";
employee.id=event.result as int;
empDg.dataProvider.addItem(employee);
}
After the data is added successfully to the database, the EmployeeDetails state will be shown with the details for this new employee. At this point, though, the new employee was saved in the database on the server, but not in the collection of data being displayed in the DataGrid. You need to assign the newly generated id to employee and add employee to the data displayed in the DataGrid.
If you look in the TestDrive server-side service file, you will see that the createEmployee() method returns an integer equal to the id of the new employee inserted in the database. The data returned from a server-side method call is stored in the result property of the event object that is passed to the result event handler. The id property of employee is data typed as an integer. The result property of the event object is data typed as a general Object. You have to cast event.result to an integer to set id equal to it.
Note: You will use the Flash Builder debugger to examine the properties of the event object and other objects in Module 3: Test and debug your code.
addItem() 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: In this example, you are writing code to update both the server-side data (stored in the database) and the client-side data (stored in the DataGrid dataProvider). Flash Builder also has a data management feature you can use to help synchronize client and server-side data.
Run the application and add a new employee. You did not make any of the fields required, but enter at least a last name so you can easily find your new record. You will have to scroll in the DataGrid to see your new record.
Refresh the browser and make sure you see your new employee in the DataGrid.
Step 8: Select and show the new record in the DataGrid.
Inside the createEmployeeResult result handler, select the new employee by calling the DataGrid's setSelectedIndex() method, passing to it the index of the new employee in the DataGrid's dataProvider, empDg.dataProvider.getItemIndex(employee). Make sure the new row is visible by calling the DataGrid's ensureCellsIsVisible() method, passing to it the index of the row you want to have displayed, empDg.selectedIndex.
Your result event handler should appear as shown here:
protected function createEmployeeResult_resultHandler(event:ResultEvent):void
{
currentState="EmployeeDetails";
employee.id=event.result as int;
empDg.dataProvider.addItem(employee);
empDg.setSelectedIndex(empDg.dataProvider.getItemIndex(employee));
empDg.ensureCellsVisible(empDg.selectedIndex);
}
Run the application and add a new employee. The new employee should now be selected and displayed in the DataGrid (see Figure 6).
In the next tutorial you update and delete employee data in the database.
Learn more
Refer to the following resources to learn more about this topic:
Documentation: Accessing Data with Flex
Documentation: Using Flex 4.5
+
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: Change the appearance of your application
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Deploy your application to a web server
- Flex Test Drive: Add charts and graphs
- Test Drive: Deploy your application to a web server
- 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: Modify the database