Adobe
Modified
3 May 2011

Add data

 

Code

FlexMobileTestDriveHomeView.mxml
 
<?xml version="1.0" encoding="utf-8"?> <s:View …> <fx:Script> <![CDATA[ protected function addBtn_clickHandler(event:MouseEvent):void { navigator.pushView(AddEditView); } ]]> </fx:Script> (…) <s:Button id="addBtn" click="addBtn_clickHandler(event)"…/> (…) </s:View>
AddEditView.mxml
 
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:valueObjects="valueObjects.*" xmlns:employeeservice="services.employeeservice.*" title="Add Employee"> <fx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; protected function saveBtn_clickHandler(event:MouseEvent):void { createEmployeeResult.token = employeeService.createEmployee(employee); } protected function createEmployeeResult_resultHandler(event:ResultEvent):void { navigator.popView(); navigator.pushView(DetailView,event.result as int); } protected function cancelBtn_clickHandler(event:MouseEvent):void { navigator.popView(); } ]]> </fx:Script> <fx:Declarations> <valueObjects:Employee id="employee"/> <s:CallResponder id="createEmployeeResult" result="createEmployeeResult_resultHandler(event)"/> <employeeservice:EmployeeService id="employeeService"/> </fx:Declarations> <s:Scroller left="0" right="0" top="0" bottom="60"> <s:VGroup width="100%" gap="10" paddingLeft="15" paddingRight="15"> <s:Label fontWeight="bold" text="First Name" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.firstname}"/> <s:Label fontWeight="bold" text="Last Name" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.lastname}"/> <s:Label fontWeight="bold" text="Title" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.title}"/> <s:Label fontWeight="bold" text="Cell Phone" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.cellphone}"/> <s:Label fontWeight="bold" text="Office Phone" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.officephone}"/> <s:Label fontWeight="bold" text="Email" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.email}"/> <s:Label fontWeight="bold" text="Office" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.office}"/> <s:Label fontWeight="bold" text="Street" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.street}"/> <s:Label fontWeight="bold" text="City" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.city}"/> <s:Label fontWeight="bold" text="State" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.state}"/> <s:Label fontWeight="bold" text="Zipcode" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.zipcode}"/> <s:Label fontWeight="bold" text="Photo File" paddingTop="15"/> <s:TextInput width="100%" text="@{employee.photofile}"/> </s:VGroup> </s:Scroller> <s:Button id="saveBtn" left="15" bottom="0" width="45%" label="Save" click="saveBtn_clickHandler(event)"> <s:icon> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/save160.png')" source240dpi="@Embed('assets/save240.png')" source320dpi="@Embed('assets/save320.png')"/> </s:icon> </s:Button> <s:Button id="cancelBtn" label="Cancel" width="45%" right="15" bottom="0" click="cancelBtn_clickHandler(event)"> <s:icon> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/cancel160.png')" source240dpi="@Embed('assets/cancel240.png')" source320dpi="@Embed('assets/cancel320.png')"/> </s:icon> </s:Button> </s:View>


Tutorial

In this tutorial, you create a new view that has an input form the user can use to add a new employee to the database.
 
Note: In the previous tutorials, you changed the project server settings and the photo URLs to reference your publicly available server. You can continue to use these settings or if you wish to continue development on your local server instead, you can change them back to reference the local server. Either server can be used to complete the next two tutorials.
 

 
Step 1: Create a new view called AddEditView.

Create a new MXML component called AddEditView in the views folder that extends the View class (see Figure 1). Set the title of the view to Add Employee.
 
Figure 1. Create a new AddEditView view.
Figure 1. Create a new AddEditView view.
Set the title property of the View object using Source mode or Design mode.
 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Add Employee">

 
Step 2: Switch views when the Add button is clicked.

In FlexMobileTestDriveHomeView.mxml, generate a click handler for the addBtn button and inside the handler, push AddEditView onto the navigation view stack.
 
You can create the handler using Design mode or Source mode. In Design mode, right-click the button and select Generate Click Handler. Alternatively, in Source mode, add a click attribute to the button and then select Generate Click Handler from code-hinting.
 
Inside the generated handler, use the pushView() method of the ViewNavigator class to push AddEditView onto the navigation view stack. Remember from Module 1 that the ViewNavigator is referenced as the navigator property of a View object.
 
The event handler should appear as shown here:
 
protected function addBtn_clickHandler(event:MouseEvent):void { navigator.pushView(AddEditView); }
The addBtn control should appear as shown here:
 
<s:Button id="addBtn" click="addBtn_clickHandler(event)" ...
Run the application using the desktop simulator and click the Add button. You should see the new view, which is currently empty, displayed (see Figure 2). You will add content to the view next.
 
Figure 2. Navigate to the new AddEditView view.
Figure 2. Navigate to the new AddEditView view.

 
Step 3: Add a scrollable VGroup to the view.

Return to AddEditView.mxml in Design mode and add a Scroller component. Leave the height and width blank and select the VGroup as the viewport. Set its right, left , and top constraints to 0 and its bottom constraint to 60. Set the VGroup's width to 100%, its gap to 10, its paddingLeft and paddingRight to 15, and remove its height .
 
You can set constraints using Source mode or Design mode as shown in Figure 3.
 
Figure 3. Set Scroller constraints.
Figure 3. Set Scroller constraints.
You are setting the bottom constraint to 60 so that regardless of the device screen size there will always be 60 pixels beneath the scrolling content. You will place Save and Cancel buttons in this space in a later step.
 
Your code should appear as shown here:
 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Add Employee"> <s:Scroller left="0" right="0" top="0" bottom="60"> <s:VGroup width="100%" gap="10" paddingLeft="15" paddingRight="15"> </s:VGroup> </s:Scroller> </s:View>

 
Step 4: Add input fields.

Add a Label to the VGroup and set its fontWeight to bold, its paddingTop to 15, and its text to First Name. Add a TextInput below the Label and set its width to 100%. In Source mode, make 11 copies of the Label and TextInput fields and set the Label text properties to Last Name, Title, Cell Phone, Office Phone, Email, Office, Street, City, State, Zip Code, and Photo File.
 
Your code should appear as shown here:
 
<s:Scroller left="0" right="0" top="0" bottom="100"> <s:VGroup width="100%" gap="10" paddingLeft="15" paddingRight="15"> <s:Label fontWeight="bold" paddingTop="15" text="First Name"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="Last Name"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="Title"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="Cell Phone"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="Office Phone"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="Email"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="Office"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="Street"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="City"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="State"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="Zip Code"/> <s:TextInput width="100%"/> <s:Label fontWeight="bold" paddingTop="15" text="Photo File"/> <s:TextInput width="100%"/> </s:VGroup> </s:Scroller>
Only some of the fields will be visible in Design mode (see Figure 4). Note that there are controls at the top of the Design window allowing you to select what device is used to preview the application in design mode and the device orientation.
 
Figure 4. View the new input fields in AddEditView.
Figure 4. View the new input fields in AddEditView.
Note: You are not using the Form control because it has not been optimized for mobile use. Only components optimized and recommended for mobile use appear in the Components view in Design mode.
 
Run the application and click the Add button to navigate to the AddEditView. You should be able to scroll the content to see all the input fields.
 

Step 5: Declare an employee object.

In the Declarations block, define a new property called employee of type Employee.
 
When you declare the variable, be sure to select the Employee data type from Content Assist (see Figure 5).
 
Figure 5. Select the Employee data type using Content Assist.
Figure 5. Select the Employee data type using Content Assist.
When you select a data type from Content Assist, the namespace will be declared for you:
 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Add Employee" xmlns:valueObjects="valueObjects.*"> <fx:Declarations> <valueObjects:Employee id="employee"/> </fx:Declarations>

 
Step 6: Bind the TextInput controls to the employee object.

Bind the text property of the first TextInput to the firstname property of the employee object. Place an @ symbol in front of the binding expression to enable two-way binding. Bind the remaining 11 TextInput controls to the appropriate employee properties.
 
Data binding is used so that if the employee object is not null, its property values will be displayed in the TextInput fields. In this tutorial you are adding a new employee, so employee is initially null and no initial values will be displayed. In the next tutorial, this view will be modified to also edit employee data and this will become useful. Two-way binding is used so that if a text property of any of the TextInput controls is changed, the corresponding field of the employee object will also be updated.
 
Your code should appear as shown here:
 
<s:Label fontWeight="bold" paddingTop="15" text="First Name"/> <s:TextInput width="100%" text="@{employee.firstname}"/> <s:Label fontWeight="bold" paddingTop="15" text="Last Name"/> <s:TextInput width="100%" text="@{employee.lastname}"/> <s:Label fontWeight="bold" paddingTop="15" text="Title"/> <s:TextInput width="100%" text="@{employee.title}"/> <s:Label fontWeight="bold" paddingTop="15" text="Cell Phone"/> <s:TextInput width="100%" text="@{employee.cellphone}"/> <s:Label fontWeight="bold" paddingTop="15" text="Office Phone"/> <s:TextInput width="100%" text="@{employee.officephone}"/> <s:Label fontWeight="bold" paddingTop="15" text="Email"/> <s:TextInput width="100%" text="@{employee.email}"/> <s:Label fontWeight="bold" paddingTop="15" text="Office"/> <s:TextInput width="100%" text="@{employee.office}"/> <s:Label fontWeight="bold" paddingTop="15" text="Street"/> <s:TextInput width="100%" text="@{employee.street}"/> <s:Label fontWeight="bold" paddingTop="15" text="City"/> <s:TextInput width="100%" text="@{employee.city}"/> <s:Label fontWeight="bold" paddingTop="15" text="State"/> <s:TextInput width="100%" text="@{employee.state}"/> <s:Label fontWeight="bold" paddingTop="15" text="Zip Code"/> <s:TextInput width="100%" text="@{employee.zipcode}"/> <s:Label fontWeight="bold" paddingTop="15" text="Photo File"/> <s:TextInput width="100%" text="@{employee.photofile}"/>

 
Step 7: Add Save and Cancel buttons.

Add a Button after the Scroller and set its id to saveBtn, its label to Save, its width to 45%, its left constraint to 15, its bottom constraint to 0, and its icon property to the a multiresolution bitmap with embedded images save160.png, save240.png, and save320.png.. Add a second Button after the Scroller and set its id to cancelBtn, its label to Cancel, its width to 45%, its right constraint to 15, its bottom constraint to 0, and its icon property to a multiresolution bitmap with embedded images cancel160.png, cancel240.png, and cancel320.png.
 
Your interface should appear as shown in Figure 6.
 
Figure 6. Add Save and Cancel buttons.
Figure 6. Add Save and Cancel buttons.
Your code should appear as shown here:
 
<s:Button id="saveBtn" left="15" bottom="0" width="45%" label="Save" <s:icon> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/save160.png')" source240dpi="@Embed('assets/save240.png')" source320dpi="@Embed('assets/save320.png')"/> </s:icon> </s:Button> <s:Button id="cancelBtn" right="15" bottom="0" width="45%" label="Button" <s:icon> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/cancel160.png')" source240dpi="@Embed('assets/cancel240.png')" source320dpi="@Embed('assets/cancel320.png')"/> </s:icon> </s:Button>

 
Step 8: Submit data to the server.

In the Data/Services view, configure the createEmployee() operation and set its input type to Employee and its return type to int (see Figure 7). Drag the createEmployee() operation and drop it on the Save button. In the generated handler, pass employee to the service operation.
 
Note: For Java, the createEmployee() operation is already configured.
 
Recall that to configure an operation, you right-click it in the Data/Services view and select Configure Input Type or Configure Return Type. 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.
 
Figure 7. Configure the createEmployee() operation.
Figure 7. Configure the createEmployee() operation.
The Save button should now have a click handler:
 
<s:Button id="saveBtn" left="15" bottom="0" width="45%" label="Save" click="saveBtn_clickHandler(event)" ... />
The click handler should appear as shown here:
 
protected function saveBtn_clickHandler(event:MouseEvent):void { createEmployeeResult.token = employeeService.createEmployee(employee); }
A new service object has been declared in the Declarations block:
 
<employeeservice:EmployeeService id="employeeService"/>
… and a new CallResponder created for this service call:
 
<s:CallResponder id="createEmployeeResult"/>

 
Step 9: Navigate to the DetailView when data is saved successfully.

Create a result handler for the CallResponder object. Inside the generated handler, remove the current view from the navigator view stack and navigate to the DetailView for the new employee.
 
Use Content Assist to create the result handler (see Figure 8).
 
Figure 8. Generate a result handler.
Figure 8. Generate a result handler.
Inside the handler, use the ViewNavigator's popView() method to remove the current view and its pushView() method to add DetailView. Pass the id of the new employee to DetailView. 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. For the createEmployee() method, the return value is an integer, the id of the new employee added to the database. 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. Thus, you 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 the Debug client-side code tutorial.
 
Your handler should appear as shown here:
 
protected function createEmployeeResult_resultHandler(event:ResultEvent):void { navigator.popView(); navigator.pushView(DetailView, event.result as int); }
You could swap the views using the replaceView() method:
 
protected function createEmployeeResult_resultHandler(event:ResultEvent):void { navigator.replaceView(DetailView, event.result as int); }
The responder should appear as shown here:
 
<s:CallResponder id="createEmployeeResult" result="createEmployeeResult_resultHandler(event)"/>

 
Step 10: Add a new employee.

Run the application and add data for a new employee (see Figure 9).
 
If you enter a value for state, be sure to enter a two letter string; this value is validated by the database. If you want an image to be displayed, enter the name of an existing photo file, like jdoe.jpg.
 
Note: In a real application, you should also add client-side validation for the form fields and provide user feedback as well as add fault handlers for all service calls. If you enter an invalid state value in this sample application, the service fail calls silently and it appears to the user that nothing happens when the Save button is clicked.
 
Figure 9. Add a new employee.
Figure 9. Add a new employee.
Click the Save button. You should see the details for the new employee saved in the database displayed (see Figure 10).
 
Figure 10. View details for the new employee.
Figure 10. View details for the new employee.
Select Device > Back to return to the employee list and locate your new employee (see Figure 11).
 
Figure 11. Locate the new employee in the employee list.
Figure 11. Locate the new employee in the employee list.

 
Step 11: Add cancel functionality.

Generate a click handler for the Cancel button. Inside the handler, remove the current view from the navigator view stack.
 
To remove the view, use the popView() method of the ViewNavigator. Your handler should appear as shown here:
 
protected function cancelBtn_clickHandler(event:MouseEvent):void { navigator.popView(); }
The Cancel button should now have a click handler:
 
<s:Button id="cancelBtn" right="15" bottom="0" width="45%" label="Cancel" click="cancelBtn_clickHandler(event)" ... />
Run the application and click the Add button. Click the Cancel button. You should return to the employee list in the home view.
 
In this tutorial, you added new data to the database. In the next tutorial, you edit and delete data.
 

Learn more

Refer to the following resources to learn more about this topic:
 
Documentation
 
Documentation: Accessing data with Flex
 
ActionScript 3 Reference
 
More resources