by Adobe


3 May 2011

Note: Flex Test Drive requires Flex 4.5 SDK and Flash Builder 4.5; download a 60-day trial version of Flash Builder 4.5 before continuing if you haven't already.

Create "pages"



<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:employeeservice="services.employeeservice.*" xmlns:valueObjects="valueObjects.*" …> <fx:Script> <![CDATA[ (…) protected function deptDg_creationCompleteHandler(event:FlexEvent):void { getDepartmentsResult.token = employeeService.getDepartments(); } ]]> </fx:Script> <s:states> <s:State name="Employees"/> <s:State name="Departments"/> <s:State name="EmployeeDetails"/> </s:states> <fx:Declarations> (…) <s:CallResponder id="getDepartmentsResult"/> <valueObjects:Employee id="employee"/> </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" enabled.EmployeeDetails="false" enabled.Employees="false"/> <s:Button id="deptBtn" x="140" y="100" label="Departments" enabled.Departments="false"/> <s:DataGrid id="empDg" includeIn="EmployeeDetails,Employees" …/> <s:DataGrid id="deptDg" includeIn="Departments" x="50" y="130" creationComplete="deptDg_creationCompleteHandler(event)" requestedRowCount="4" width="650"> <s:columns> <s:ArrayList> <s:GridColumn width="150" dataField="name" headerText="Name"></s:GridColumn> <s:GridColumn width="100" dataField="id" headerText="ID"></s:GridColumn> <s:GridColumn width="150" dataField="manager" headerText="Manager"></s:GridColumn> <s:GridColumn width="100" dataField="budget" headerText="Budget"></s:GridColumn> <s:GridColumn width="100" dataField="actualexpenses" headerText="Expenses"></s:GridColumn> </s:ArrayList> </s:columns> <s:typicalItem> <fx:Object id="id2" actualcontractors="actualcontractors1" actualexpenses="actualexpenses1" actualsalary="actualsalary1" actualsupplies="actualsupplies1" actualtravel="actualtravel1" budget="budget1" businessunit="businessunit1" costcenter="costcenter1" estcontractors="estcontractors1" estsalary="estsalary1" estsupplies="estsupplies1" esttravel="esttravel1" hrrep="hrrep1" locationcity="locationcity1" locationstate="locationstate1" locationstreet="locationstreet1" locationzipcode="locationzipcode1" manager="manager1" name="name1"></fx:Object> </s:typicalItem> <s:AsyncListView list="{getDepartmentsResult.lastResult}"/> </s:DataGrid> <s:Form includeIn="EmployeeDetails" x="36" y="310"> <s:FormItem label="Last Name"> <s:Label id="lastnameLabel" text="{employee.lastname}"/> </s:FormItem> <s:FormItem label="First Name"> <s:Label id="firstnameLabel" text="{employee.firstname}"/> </s:FormItem> <s:FormItem label="Title"> <s:Label id="titleLabel" text="{employee.title}"/> </s:FormItem> <s:FormItem label="Department ID"> <s:Label id="departmentidLabel" text="{employee.departmentid}"/> </s:FormItem> <s:FormItem label="Cell Phone"> <s:Label id="cellphoneLabel" text="{employee.cellphone}"/> </s:FormItem> <s:FormItem label="Office Phone"> <s:Label id="officephoneLabel" text="{employee.officephone}"/> </s:FormItem> <s:FormItem label="Email"> <s:Label id="emailLabel" text="{}"/> </s:FormItem> </s:Form> <s:Form includeIn="EmployeeDetails" x="323" y="310"> <s:FormItem label="Office"> <s:Label id="officeLabel" text="{}"/> </s:FormItem> <s:FormItem label="Street"> <s:Label id="streetLabel" text="{employee.street}"/> </s:FormItem> <s:FormItem label="City"> <s:Label id="cityLabel" text="{}"/> </s:FormItem> <s:FormItem label="State"> <s:Label id="stateLabel" text="{employee.state}"/> </s:FormItem> <s:FormItem label="Zipcode"> <s:Label id="zipcodeLabel" text="{employee.zipcode}"/> </s:FormItem> <s:FormItem label="Photo File"> <s:Label id="photofileLabel" text="{employee.photofile}"/> </s:FormItem> </s:Form> <s:TextInput id="searchTxt" includeIn="EmployeeDetails,Employees" x="494" y="100" prompt="Last Name"/> <s:Button id="searchBtn" includeIn="EmployeeDetails,Employees" x="630" y="100" label="Search"/> <s:Button id="updateBtn" includeIn="EmployeeDetails" x="476" y="268" label="Update"/> <s:Button id="deleteBtn" includeIn="EmployeeDetails" x="554" y="268" label="Delete"/> <s:Button id="addBtn" includeIn="EmployeeDetails,Employees" x="630" y="268" label="Add"/> </s:Application>


In this tutorial, you create different "pages" in your application. HTML applications use pages as screens, but in Flex, you use a related but different concept called states. As you’ll see, unlike HTML, states do not necessarily appear in separate files.
You are going to create three states. The first is the interface you already built that appears when the application starts. The other two states will be Departments and EmployeeDetails, which will appear when a user clicks the Departments button or selects a row in the DataGrid, respectively.

Step 1: Create Employees and Departments states.

In Design mode, use the States view to create a new state called Departments based on the existing state, <State1>. In Departments, delete the existing DataGrid and add a new DataGrid called deptDg and a Button. Rename <State1> to Employees (see Figure 1).
Create Departments and Employees states.

Figure 1. Create Departments and Employees states.

Unlike in HTML pages, in Flex applications the same component can be part of more than one state. The XYZ Label and the Employees and Departments buttons are included in both the Employees and Departments states.
Take a look at the generated code. You will see the two states defined; the Application states property is set equal to an array of State objects for which you assign names:
<s:states> <s:State name="Employees"/> <s:State name="Departments"/> </s:states>
The first DataGrid now has a property, includeIn, set to Employees, the only state for which it should be displayed:
<s:DataGrid id="empDg" x="50" y="130" width="650" creationComplete="empDg_creationCompleteHandler(event)" requestedRowCount="4" includeIn="Employees">
Similarly, the second DataGrid is only included in the Departments state. Components without an includeIn property (or an excludeFrom property) are included in all states. Multiple states can be specified by using a comma-delimited list.

Step 2: Retrieve and display department data in the Departments DataGrid.

Bind the Departments DataGrid to the getDepartments() service operation and configure the return type to be an array of new Department objects. Use the Configure Columns wizard to customize the DataGrid (see Figure 2). Change the id property of the new DataGrid's typicalItem object from id1 (which was used for the empDg DataGrid) to id2.
Configure the Departments DataGrid as shown here.

Figure 2. Configure the Departments DataGrid as shown here.

Take a look at the generated code. All the code should look familiar. The generated typicalItem object though, was assigned the same id as that used in the empDg DataGrid, so give it another name, like id2.
<s:DataGrid id="deptDg" ...> (...) <s:typicalItem> <fx:Object id="id2" actualcontractors="actualcontractors1" ...></fx:Object> </s:typicalItem> </s:DataGrid>

Step 3: Change property values in different states.

In Design mode, set the Employees Button's enabled property to false in the Employees state and the Departments Button's enabled property to false in the Departments state (see Figure 3).
Disable the Departments button in the Departments state.

Figure 3. Disable the Departments button in the Departments state.

Switch to Source mode. The enabled property of each Button has been set to false for a single state:
<s:Button id="empBtn" x="50" y="100" label="Employees" enabled.Employees="false"/> <s:Button id="deptBtn" x="140" y="100" label="Departments" enabled.Departments="false"/>

Step 4: Change a property or style value in all states.

In Design mode, change the color of the Label and then switch to the other state; the color is changed for only the selected state. Apply the new color to all states by selecting Apply Current Properties to All States from the Label's context menu (see Figure 4).
When you first set the color in Design mode, some state is selected so you get the code color.somestate=somevalue. When you select to apply current properties to all states, this becomes color=somevalue instead and will be the value for all of the states that you have specified to include this component in.
Apply property changes to all states.

Figure 4. Apply property changes to all states.

Step 5: Create a new EmployeeDetails state.

Base the new EmployeeDetails state on the Employees state. In Design mode for the new state, drag out a Form container from the Layout section of the Components view and place it below the DataGrid (see Figure 5).
Add a Form container to the EmployeeDetails state.

Figure 5. Add a Form container to the EmployeeDetails state.

Step 6: Use a Form to display employee details.

From the Data/Service view, drag out the getEmployees() operation and drop it on the Form container. Using the wizard, create a noneditable form that uses the existing getEmployeesResult call (see Figure 6). Arrange the layout as shown in Figure 7 by dragging out a second Form container, dragging FormItem controls from one Form to another, and setting FormItem labels.
Generate a form for the employee data.

Figure 6. Generate a form for the employee data.

In Flex applications, a Form is simply a container that makes it easier to align your controls. Unlike HTML, it is not used to group data for submitting data to the server.
Here, you are not making a service call to retrieve the details for a specific employee because you already have all the details for every employee on the client. When getEmployees() is initially called to populate the DataGrid, all the employee data is retrieved. Thus, you only need to show the data for the selected employee in the form, which you will start in the next step. If you have lots of records with lots of fields, you initially may want to retrieve only the properties of the employees you are going to display in the grid and then make a service call to getEmployeesByID() to retrieve all the data for a specific employee to be displayed in the form.
Lay out the forms as shown here.

Figure 7. Lay out the forms as shown here.

Switch to Source mode and look at the generated code. You will see your new EmployeeDetails state defined in the states tag and you will see two new Form tags. Note that the text property of all the Label controls in the FormItem tags are bound to a property of an employee object:
<s:Form includeIn="EmployeeDetails" x="36" y="310"> <s:FormItem label="Last Name"> <s:Label id="lastnameLabel" text="{employee.lastname}"/> </s:FormItem>
Look in the Declarations section. You will see the employee object defined as an instance of the Employee class:
<valueObjects:Employee id="employee"/>

Step 7: Display the details for the selected employee.

Below the Declarations block, create a Binding tag and set its source  property to the selectedItem property of the empDg DataGrid cast as an Employee object and set the destination property to the employee object.
<fx:Binding source="empDg.selectedItem as Employee" destination="employee"/>
The as keyword must be used to cast the selectedItem to an Employee because the selectedItem property is defined as a general object but the employee must be an Employee object.

Step 8: Add objects to specific states.

Add four Buttons (updateBtn, deleteBtn, addBtn, searchBtn) and a TextInput (searchTxt) to the EmployeeDetails state (see Figure 8). Give the TextInput a prompt value of "Last Name". Switch to the Employees state; you will not see the new components. Return to the EmployeeDetails state, select the Add Button and in the Property view, specify to also include the Button in the Employees state (see Figure 9). Repeat for searchTxt and searchBtn and then run the application (see Figure 10).
Add new components to EmployeeDetails.

Figure 8. Add new components to EmployeeDetails.

 Specify the states to include an object in.

Figure 9. Specify the states to include an object in.

 Run the application and see only the Employees state.

Figure 10. Run the application and see only the Employees state.

Select an employee in the DataGrid; nothing happens. You have now created three states representing "pages" in your application. You will write event handlers to switch between the states, populate the details form, and search the employees in the next tutorial. You will wire up the Update, Delete, and Add Buttons in Module 2: Modify the database.

Learn more

Refer to the following resources to learn more about this topic:
Documentation: Using Flex 4.5
Flex Developer Center
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.