by Adobe
Adobe logo

Created

20 June 2011

Create views

 
 

Code

FlexMobileTestDriveHomeView.mxml
 
<?xml version="1.0" encoding="utf-8"?> <s:View title="HomeView" …> <fx:Script> <![CDATA[ (…) protected function empList_changeHandler(event:IndexChangeEvent):void { navigator.pushView(DetailView,empList.selectedItem.id); } ]]> </fx:Script> (…) <s:List id="empList" left="0" right="0" top="0" bottom="0" creationComplete="empList_creationCompleteHandler(event)" change="empList_changeHandler(event)" …/> (…) </s:View>
DetailView.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:employeeservice="services.employeeservice.*" title="{getEmployeesByIDResult.lastResult.firstname} {getEmployeesByIDResult.lastResult.lastname}" viewActivate="view1_viewActivateHandler(event)"> <fx:Script> <![CDATA[ import spark.events.ViewNavigatorEvent; protected function getEmployeesByID(itemID:int):void { getEmployeesByIDResult.token = employeeService.getEmployeesByID(itemID); } protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void { getEmployeesByID(data as int); } ]]> </fx:Script> <fx:Declarations> <s:CallResponder id="getEmployeesByIDResult"/> <employeeservice:EmployeeService id="employeeService"/> </fx:Declarations> <s:actionContent> <s:Button id="editBtn"> <s:icon> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/edit160.png')" source240dpi="@Embed('assets/edit240.png')" source320dpi="@Embed('assets/edit320.png')"/> </s:icon> </s:Button> <s:Button id="deleteBtn"> <s:icon> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/delete160.png')" source240dpi="@Embed('assets/delete240.png')" source320dpi="@Embed('assets/delete320.png')"/> </s:icon> </s:Button> </s:actionContent> <s:Image x="10" y="10" height="100" width="100" source="http://localhost/TestDrive/photos/{getEmployeesByIDResult.lastResult.photofile}"/> <s:Scroller height="100%" width="100%"> <s:VGroup height="100%" width="100%" gap="10" paddingLeft="120"> <s:Label fontWeight="bold" paddingTop="10" text="Title"/> <s:Label text="{getEmployeesByIDResult.lastResult.title}"/> <s:Label fontWeight="bold" paddingTop="10" text="Cell Phone"/> <s:Label text="{getEmployeesByIDResult.lastResult.cellphone}"/> <s:Label fontWeight="bold" paddingTop="10" text="Office Phone"/> <s:Label text="{getEmployeesByIDResult.lastResult.officephone}"/> <s:Label fontWeight="bold" paddingTop="10" text="Email"/> <s:Label text="{getEmployeesByIDResult.lastResult.email}"/> <s:Label fontWeight="bold" paddingTop="10" text="Office"/> <s:Label text="{getEmployeesByIDResult.lastResult.office}"/> </s:VGroup> </s:Scroller> </s:View>

Tutorial

In this tutorial, you create an additional application view to display employee details. This view will be displayed when the user selects an employee in the home view.
 
Because of the smaller screen sizes typical on mobile devices, mobile applications follow very different design patterns from web and desktop applications. When developing for mobile applications, you typically break down the content to a series of views that can be displayed on the mobile device. Each view should contain components focused on a single task or set of information. The user typically "drills down" from one view to another for details, using a back button or touch swipe to return to the more general information.
 

 
Step 1: Create a new view.

Right-click the views folder in the Package Explorer and select New > MXML Component. Create a new MXML component called DetailView that extends the View class (see Figure 1).
 
Create a DetailView component.
Figure 1. Create a DetailView component.
By default, the title of the view is set to the name of the class, DetailView.
 
<s:View title="DetailView" ...>
You will set the title dynamically to the name of the selected employee later in the tutorial.
 

 
Step 2: Display DetailView when an employee is selected.

In FlexMobileTestDriveHomeView.mxml, add a change handler for the List control. Inside the function, navigate to the new view using the pushView() method of the view's ViewNavigator instance, navigator . Pass to the view the id of the selected employee.
 
You can generate the change handler in Source mode using Content Assist or in Design mode from the Properties view or the context menu of the List control.
 
<s:List id="empList" left="0" right="0" top="0" bottom="0" change="empList_changeHandler(event)" creationComplete="empList_creationCompleteHandler(event)">
The View class has a property navigator which is an instance of the ViewNavigator class. You use the ViewNavigator's pushView() and popView() methods to "push" and "pop" views on and off the navigation view stack. Use Content Assist or look up the ViewNavigator API to see what values you need to pass to the pushView() method (see Figure 2).
 
Determine what needs to be passed to the pushView() method.
Figure 2. Determine what needs to be passed to the pushView() method.
You must pass to the method the view to display, DetailView, and optionally, any data you want to pass to the view. You want to pass the id of the selected employee, empList.selectedItem.id . When you pass a second argument to this method, the data property of the View class created (in this case DetailView) is populated with that value.
 
protected function empList_changeHandler(event:IndexChangeEvent):void { navigator.pushView(DetailView,empList.selectedItem.id); }
You are passing just the id and not the entire selected employee object ( empList.selectedItem ) because the getEmployeesSummary() and getEmployeesSummaryByName() methods return only some of the employee properties ( id , firstname , lastname , title , photofile ). You want the DetailView to display many more of the employee properties ( cellphone , email , office , and more) so the application will need to make another call to the server to retrieve all the fields for the selected employee from the database.
 
Run the application and click an employee. The new DetailView is displayed but it does not display any data yet (see Figure 3). That is what you'll do next.
 
Navigate to the DetailView.
Figure 3. Navigate to the DetailView.
In the ADL, select Device > Back to simulate using the device's back button and return to the home view.
 

 
Step 3: Retrieve all the data for the selected employee.

In DetailView.mxml, right-click getEmployeesByID() in the Data/Services view and configure the input type to be an int and the return type to be an Employee. For PHP and ColdFusion, you need to auto-detect the return type from sample data: enter a value of 1, and choose to use an existing data type of Employee (see Figure 4). Right-click getEmployeesByID() and generate a service call (see Figure 5).
 
The getEmployeesByID() method returns additional employee properties than those returned by the getEmployeesSummary() method used earlier. For ColdFusion and PHP, you need to configure the return type by auto-detecting the data again so the additional properties will be added to the existing Employee ActionScript class.
 
For PHP and ColdFusion, add new properties to the Employee class.
Figure 4: For PHP and ColdFusion, add new properties to the Employee class.
Use the Data/Services view to generate a service call.
Figure 5. Use the Data/Services view to generate a service call.
Look at the generated code. An EmployeeService object and a CallResponder object are created:
 
<fx:Declarations> <s:CallResponder id="getEmployeesByIDResult"/> <employeeservice:EmployeeService id="employeeService"/> </fx:Declarations>
... and a function getEmployeesByID() is created to call the getEmployeesByID() method of data service.
 
protected function getEmployeesByID(itemID:int):void { getEmployeesByIDResult.token = employeeService.getEmployeesByID(itemID); }
Next, you need to call this method when the view is activated, on its viewActivate event.
 

 
Step 4: Retrieve data for the selected employee from the server.

In DetailView.mxml, create a viewActivate handler for the View instance. Inside the function, call the getEmployeesByID() method and pass to it the id of the selected employee held in the view's data property.
 
You can generate the viewActivate handler in Source mode using Content Assist or in Design mode from the Alphabetical or Category views of the Properties view.
 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:employeeservice="services.employeeservice.*" title="DetailView" viewActivate="view1_viewActivateHandler(event)">
Inside the handler, call the getEmployeesByID() method and pass to it the id of the selected employee. Remember the data property of the view was populated when it was pushed to the view stack with the id of the selected employee. Because the data property is typed as a general Object, you need to cast it to an int, which getEmployeesByID() is expecting.
 
protected function view1_viewActivateHandler(event:FlexEvent):void { getEmployeesByID(data as int); }
Note: If you want, add the code to display a busy indicator as you did in the last tutorial.
 

 
Step 5: Set the view's title to the name of the selected employee.

In DetailView.mxml, bind the title property of the View to the firstname and lastname properties of the lastResult property of the getEmployeesByIDResult CallResponder.
 
<s:View title="{getEmployeesByIDResult.lastResult.firstname} {getEmployeesByIDResult.lastResult.lastname}" ... >
Run the application and select an employee. You should see the selected employee's name displayed in the DetailView (see Figure 6).
 
See the name of the selected employee in the DetailView.
Figure 6. See the name of the selected employee in the DetailView.

 
Step 6: Add an image to display the employee photo.

Add an Image to the content area of the View and set its height and width properties to 100 and its x and y properties to 10. Bind its source property to the URL of the photo on your server using the photofile property of the return data.
 
Be sure to use the appropriate path to photos on your specific application server.
 
<s:Image x="10" y="10" width="100" height="100" source="http://localhost/TestDrive/photos/ {getEmployeesByIDResult.lastResult.photofile}"/>
Run the application and select an employee. You should see the selected employee's photo displayed.
 

 
Step 7: Add Labels to display employee details in a VGroup container.

Add a VGroup container to the content area and remove its x and y values and set its height and width to 100%, its gap to 10, and its paddingLeft to 120. Add ten Labels to the VGroup. Make the first, third, fifth, seventh, and ninth Labels bold and with a paddingTop of 10 (see Figure 7). Set the text of those five Labels to Title, Cell Phone, Office Phone, Email, and Office (see Figure 8). Set the other five Labels to display the corresponding dynamic value for the selected employee.
 
In Design mode, you can Shift-click to select the five Labels and use the Properties view to set all of them to bold with a top padding of 10 at once (see Figure 7).
 
Use Design mode to set properties of multiple objects.
Figure 7. Use Design mode to set properties of multiple objects.
Assign text for the Labels.
Figure 8. Assign text for the Labels.
Bind the remaining Labels to the appropiate fields of the return data, held in the lastResult property of the getEmployeesByIDResult CallResponder object.
 
<s:VGroup width="100%" height="100%" gap="10" paddingLeft="120"> <s:Label fontWeight="bold" paddingTop="10" text="Title"/> <s:Label text="{getEmployeesByIDResult.lastResult.title}"/> <s:Label fontWeight="bold" paddingTop="10" text="Cell Phone"/> <s:Label text="{getEmployeesByIDResult.lastResult.cellphone}"/> <s:Label fontWeight="bold" paddingTop="10" text="Office Phone"/> <s:Label text="{getEmployeesByIDResult.lastResult.officephone}"/> <s:Label fontWeight="bold" paddingTop="10" text="Email"/> <s:Label text="{getEmployeesByIDResult.lastResult.email}"/> <s:Label fontWeight="bold" paddingTop="10" text="Office"/> <s:Label text="{getEmployeesByIDResult.lastResult.office}"/> </s:VGroup>
Note: Instead of binding to getEmployeesByIDResult.lastResult over and over again as you are doing here, you could instead define, populate, and bind to a property of the class. You would need to declare a variable of type Employee, create a result handler for the CallResponder object, and inside the result handler, populate the variable. Then you could just bind to the variable, for example, employee.cellphone .
 
Run the application and select an employee. You should now see the details for the selected employee (see Figure 9).
 
See the details for the selected employee in the DetailView.
Figure 9. See the details for the selected employee in the DetailView.
In the ADL, select Device > Rotate Left. Depending upon what device you are using in the emulator, some of the data will probably be cut off and you cannot scroll it (see Figure 10).
 
Rotate the device and see the data is cut off and not scrollable.
Figure 10. Rotate the device and see the data is cut off and not scrollable.

 
Step 8: Add scrolling capabilities to the VGroup.

Using Design mode or Source mode, place the VGroup inside a Scroller component. Set the Scroller's height and width properties to 100%. Run the application, simulate device rotation, and scroll the employee details.
 
<s:Scroller width="100%" height="100%"> <s:VGroup width="100%" height="100%" gap="10" paddingLeft="120"> <s:Label fontWeight="bold" paddingTop="10" text="Title"/> <s:Label text="{getEmployeesByIDResult.lastResult.title}"/> <s:Label fontWeight="bold" paddingTop="10" text="Cell Phone"/> <s:Label text="{getEmployeesByIDResult.lastResult.cellphone}"/> <s:Label fontWeight="bold" paddingTop="10" text="Office Phone"/> <s:Label text="{getEmployeesByIDResult.lastResult.officephone}"/> <s:Label fontWeight="bold" paddingTop="10" text="Email"/> <s:Label text="{getEmployeesByIDResult.lastResult.email}"/> <s:Label fontWeight="bold" paddingTop="10" text="Office"/> <s:Label text="{getEmployeesByIDResult.lastResult.office}"/> </s:VGroup> </s:Scroller>
Run the application and simulate device rotation. Select an employee and then simulate device scrolling by using your mouse scroll wheel or clicking and dragging. You should now be able to scroll and view all the content (see Figure 11).
 
Rotate the device and successfully scroll the contents.
Figure 11. Rotate the device and successfully scroll the contents.

 
Step 9: Add buttons to the action area of the ActionBar.

Using the Components view, add two Button instances to the action area ( actionContent ) of the ActionBar. Assign the first Button an id of editBtn, delete the label, and set its icon property to a multiresolution bitmap with embedded images edit160.png, edit240.png, edit320.png located in the assets folder. Assign the second button an id of deleteBtn, delete the label, and set its icon property to a multiresolution bitmap with embedded images delete160.png, delete240.png, delete320.png.
 
Your code should appear as shown here:
 
<s:actionContent> <s:Button id="editBtn"> <s:icon> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/edit160.png')" source240dpi="@Embed('assets/edit240.png')" source320dpi="@Embed('assets/edit320.png')"/> </s:icon> </s:Button> <s:Button id="deleteBtn"> <s:icon> <s:MultiDPIBitmapSource source160dpi="@Embed('assets/delete160.png')" source240dpi="@Embed('assets/delete240.png')" source320dpi="@Embed('assets/delete320.png')"/> </s:icon> </s:Button> </s:actionContent>
Run the application and select an employee. You should see your new Buttons (see Figure 12). You will wire up these Buttons, adding functionality to edit and delete records in the database in a later module.
 
Figure 12. View the new Buttons in the DetailView.
Figure 12. View the new Buttons in the DetailView.
Note: If you are developing for iOS devices, which do not have back buttons, you may want to also add a back button to the navigator area of the action bar. Another option is to create a listener for the gestureSwipe event. Gesture events cannot be tested in the desktop emulator so will not be added until a later tutorial.
 
In this tutorial, you created an additional application view to display employee details and ran the application in the ADL desktop simulator. In the next tutorial, you run the application on an actual mobile device.
 

 
Learn more

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