Flex Test Drive for Mobile: Add application functionality
<?xml version="1.0" encoding="utf-8"?>
<s:View …>
<fx:Script>
<![CDATA[
(…)
protected function editBtn_clickHandler(event:MouseEvent):void
{
navigator.pushView(AddEditView,getEmployeesByIDResult.lastResult);
}
protected function deleteBtn_clickHandler(event:MouseEvent):void
{
deleteEmployeeResult.token = employeeService.deleteEmployee(data as int);
}
protected function deleteEmployeeResult_resultHandler(event:ResultEvent):void
{
navigator.popView();
}
]]>
</fx:Script>
<fx:Declarations>
(…)
<s:CallResponder id="deleteEmployeeResult" result="deleteEmployeeResult_resultHandler(event)"/>
</fx:Declarations>
<s:actionContent>
<s:Button id="editBtn" click="editBtn_clickHandler(event)" …/>
<s:Button id="deleteBtn" click="deleteBtn_clickHandler(event)" …/>
</s:actionContent>
(…)
</s:View>
AddEditView.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:View title="Add Employee" add="view1_addHandler(event)" …>
<fx:Script>
<![CDATA[
(…)
protected function saveBtn_clickHandler(event:MouseEvent):void
{
if(currentState=="Add")
{
createEmployeeResult.token = employeeService.createEmployee(employee);
}
else
{
updateEmployeeResult.token = employeeService.updateEmployee(employee);
}
}
protected function createEmployeeResult_resultHandler(event:ResultEvent):void
{
navigator.replaceView(DetailView,event.result as int);
}
protected function view1_addHandler(event:FlexEvent):void
{
if(data==null)
{
currentState="Add";
}
else
{
currentState="Edit";
employee=data as Employee;
title="Edit Employee";
}
}
protected function updateEmployeeResult_resultHandler(event:ResultEvent):void
{
navigator.popView();
}
]]>
</fx:Script>
<s:states>
<s:State name="Add"/>
<s:State name="Edit"/>
</s:states>
<fx:Declarations>
(…)
<employeeservice:EmployeeService id="employeeService"/>
<s:CallResponder id="updateEmployeeResult" result="updateEmployeeResult_resultHandler(event)"/>
</fx:Declarations>
(…)
</s:View>
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 a click handler 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 .
Your handler should appear as shown here:
protected function editBtn_clickHandler(event:MouseEvent):void
{
navigator.pushView(AddEditView,getEmployeesByIDResult.lastResult);
}
The Edit button should now appear as shown here:
<s:Button id="editBtn"
click="editBtn_clickHandler(event)" ... />
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).
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 an add handler for the View object. Inside the handler, set the view's currentState property to Add if no data is passed to the view (its data property is null). If data is not null, set the currentState to Edit, employee to data , and the title to Edit Employee.
The code for the View object should appear as shown here:
<s:View title="Add Employee" add="view1_addHandler(event)" ...>
The handler should appear as shown here:
protected function view1_addHandler(event:FlexEvent):void
{
if(data==null)
{
currentState="Add";
}
else
{
currentState="Edit";
employee=data as Employee;
title ="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.
Step 4: Update the data on the server.
In the Data/Services view, configure updateEmployee() to have an input of type Employee and a return type of void (if they are not already configured). In Design mode, drag the updateEmployee() operation and drop it on the Save button. Pass the employee object to the operation call. Inside the Save button click handler, use conditional logic to make the appropriate service call.
Your handler should appear as shown here:
protected function saveBtn_clickHandler(event:MouseEvent):void
{
if(currentState=="Add")
{
createEmployeeResult.token = employeeService.createEmployee(employee);
}
else
{
updateEmployeeResult.token = employeeService.updateEmployee(employee);
}
}
You should also have a new CallResponder object defined in the Declarations block:
<s:CallResponder id="updateEmployeeResult"/>Step 5: When the data is saved, return to the DetailView.
Generate a result handler for the updateEmployeeResult CallResponder. Inside the handler, pop the eixisting view to return to the DetailView.
Your responder should appear as shown here:
<s:CallResponder id="updateEmployeeResult"
result="updateEmployeeResult_resultHandler(event)"/>
The handler should appear as shown here:
protected function updateEmployeeResult_resultHandler(event:ResultEvent):void
{
navigator.popView();
}
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.
Step 6: Add delete functionality.
In the Data/Services view, configure deleteEmployee() 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 the deleteEmployee() operation and drop it on the Delete button. Pass the data object (cast as an int) to the service call.
Your handler should appear as shown here:
protected function deleteBtn_clickHandler(event:MouseEvent):void
{
deleteEmployeeResult.token = employeeService.deleteEmployee(data as int);
}
Your Delete button should appear as shown here:
<s:Button id="deleteBtn" click="deleteBtn_clickHandler(event)"
... />
You should have a new CallResponder object defined in the Declarations block:
<s:CallResponder id="deleteEmployeeResult"/>
Step 7: Return to the employee list when the employee is deleted.
Generate a result handler for the deleteEmployeeResult CallResponder. Inside the handler, pop off the existing view.
The CallResponder should appear as shown here:
<s:CallResponder id="deleteEmployeeResult"
result="deleteEmployeeResult_resultHandler(event)"/>
Its result handler should appear as shown here:
protected function deleteEmployeeResult_resultHandler(event:ResultEvent):void
{
navigator.popView();
}
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.
Learn more
Refer to the following resources to learn more about this topic:
Documentation: Using Flash Builder 4.5
Documentation: Using Flex 4.5
Documentation: Developing mobile applications with Flash Builder and Flex
Documentation: Accessing Data with Flex
More resources
+
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 for Mobile: Add application functionality
- Flex Test Drive for Mobile: Add application functionality
- Flex Test Drive for Mobile: Debug and package the application
- Flex Test Drive for Mobile: Debug and package the application
- Flex Test Drive for Mobile: Build a mobile application in an hour
- Flex Test Drive for Mobile: Build a mobile application in an hour
- Flex Test Drive for Mobile: Build a mobile application in an hour
- Flex Test Drive for Mobile: Add application functionality
- Flex Test Drive for Mobile: Add application functionality
- Flex Test Drive for Mobile: Test and deploy your code
