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 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 thetitleof the view to Add Employee.

Figure 1. Create a new AddEditView view.

Set the title property of the View object using Source mode or Design mode.

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

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.

Run the application using the desktop emulator 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.

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 itsright,left, andtopconstraints to 0 and itsbottomconstraint to 60. Set the VGroup's widthto 100%, itsgapto 10, itspaddingLeftandpaddingRightto 15, and remove itsheight.

You can set constraints using Source mode or Design mode as shown in Figure 3.

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.

Step 4: Add input fields.

Add a Label to the VGroup and set itsfontWeightto bold, itspaddingTopto 15, and itstextto First Name. Add a TextInput below the Label and set itswidthto 100%. In Source mode, make 11 copies of the Label and TextInput fields and set the Labeltextproperties to Last Name, Title, Cell Phone, Office Phone, Email, Office, Street, City, State, Zip Code, and Photo File.

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.

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 calledemployeeof 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.

When you select a data type from Content Assist, the namespace will be declared for you:

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

Bind thetextproperty of the first TextInput to thefirstnameproperty of theemployeeobject. Place an @ symbol in front of the binding expression to enable two-way binding. Bind the remaining 11 TextInput controls to the appropriateemployeeproperties.

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.

Step 7: Add Save and Cancel buttons.

Add a Button after the Scroller and set itsidto saveBtn, itslabelto Save, itsbottomconstraint to 0, its horizontalCenter (in code font) to negative half its width minus 10, and itsiconproperty to the a multiresolution bitmap with embedded images save160.png, save240.png, and save320.png.. Add a second Button after the Scroller and set itsidto cancelBtn, itslabelto Cancel, itsbottomconstraint to 0, its horizontalCenter (in code font) to half its width plus 10, and itsiconproperty to a multiresolution bitmap with embedded images cancel160.png, cancel240.png, and cancel320.png. Set the bottom constraint of the Scroller to the height of the Save button plus 10.

The buttons will be 10 pixels to the right and left of the horizontal center at the bottom of the application. Your code should appear as shown here:

Run the application and click the Add button. The buttons should be centered at the bottom of the application (see Figure 6).

Figure 6. Add Save and Cancel buttons.

Step 8: Submit data to the server.

In the Data/Services view, configure thecreateEmployee()operation and set its input type to Employee and its return type to int (see Figure 7). Drag thecreateEmployee()operation and drop it on the Save button. In the generated handler, passemployeeto 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.

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

Create aresulthandler 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.

Inside the handler, use the ViewNavigator's replaceView() method to remove the current view and 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.

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.

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.

Return to the employee list and locate your new employee (see Figure 11).

Figure 11. Locate the new employee in the employee list.

Step 11: Add cancel functionality.

Generate aclickhandler 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: