| Now that you have seen how to lay out an application with Design mode, you can look a little more deeply at the code and create your second application using Source mode. In this next exercise, you will lay out the Dashboard application, which is designed to give the FlexGrocer executives a quick high-level view of how sales are going for their company. 1. | Open the Dashboard.mxml file created in the previous lesson.
Alternately, you can open Dashboard.mxml from Lesson03/start and save it in your flexGrocer directory.
| 2. | Switch FlexBuilder 2 to be in Source mode.
FlexBuilder 2 has buttons on top to switch between Design mode and Source mode.
| | | 3. | In Source mode, add an <mx:ApplicationControlBar> tag, and set the dock property to TRue. Add four <mx:LinkButton> tags as children to the ApplicationControlBar container, with labels reading "All", "Sales", "Categories", and "Comparison", respectively.
A bit later in this exercise, you will add code to use these links to toggle between the different states. The completed code should read as follows:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"> <mx:ApplicationControlBar dock="true"> <mx:LinkButton label="All"/> <mx:LinkButton label="Sales"/> <mx:LinkButton label="Categories"/> <mx:LinkButton label="Comparison"/> </mx:ApplicationControlBar> </mx:Application>
Remember, you want the <mx:ApplicationControlBar> tag to be the first visible child of the <mx:Application> tag, so that it will be docked to the top of the application.
| 4. | After the </mx:ApplicationControlBar> tag, add a Panel container with an id of sales, a title of Sales Chart, and a height and width of 100%.
By setting the height and width to 100%, this view will use all available space within the application. This will become particularly important as you add states to the application. By setting the height and width of the other items in the Application to 0, the Panel container will use all the space.
<mx:Panel width="100%" height="100%" title="Sales Chart"> </mx:Panel>
| 5. | Between the open and close <mx:Panel> tags, add a ControlBar container. All you need to do is create an opening and closing <mx:ControlBar> tag.
The Dashboard will continue to be a work in progress for the next several lessons. In the next lesson, you will add buttons to the control bar. Later, you will add a DataGrid control to view the data for that panel; much later, you will use the graphing controls to show a visual representation of that data.
<mx:Panel width="100%" height="100%" title="Sales Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel>
| | | 6. | After the closing tag for the Panel container, add a VBox container with an id of rightCharts, and width and height each set to 100%. All this requires is the addition of an <mx:VBox width="100%" height="100%"> </mx:VBox> tag.
<mx:Panel width="100%" height="100%" title="Sales Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> <mx:VBox width="100%" height="100%"> </mx:VBox>
A VBox container is added so that two items can be shown on the right of the application, one above the other. Because the VBox container is also set to use 100% for its height and width, it will use any space inside the Application not used by the other sales Panel container.
Note  | Flex enables you to assign more than 100 percent total width for a container. In the previous code, you assigned 100 percent width of the bodyBox to both the sales view and the rightCharts VBox container. Clearly, an HBox container doesn't have 200 percent width to allocate. The Flex Layout Manager takes this into account and divides the space proportionally based on the requested percentages. Because two times more space was requested than is available, each request for a relative width is divided by 2, so they are each allocated 50 percent. If any elements were assigned a fixed width (that is, a number of pixels instead of a percentage), the fixed size requests will be subtracted from the available space before any relative size requests are allocated. |
| | | 7. | Inside the VBox container add a Panel container with an id of type, a title of Category Chart, and a height and width each of 100%. Add an empty ControlBar container to that view. After the type Panel, but still in the VBox container, add a second Panel container with an ID of comp, a title of Comparison Chart, and a height and width each set to 100%.
You now have containers for all the charts that will get added in Lesson 18, "Charting Data."
<mx:VBox width="100%" height="100%" > <mx:Panel width="100%" height="100%" title="Category Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> <mx:Panel width="100%" height="100%" title="Comparison Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> </mx:VBox>
| 8. | Save and test the application.
You should see the views laid out properly. The next steps are to add states to the application and the ability for users to navigate between the states.
|
 Adding and Controlling View States with MXML In Flex, states are defined in an <mx:states> block. Each state is represented by an <mx:State> tag, with attributes indicating the name of the state as well as any other state it might be based on. For example, review the states in the e-commerce layouts earlier in this lesson: <mx:states> <mx:State name="cartView"> <mx:SetProperty target="{products}" name="width" value="0"/> <mx:SetProperty target="{products}" name="height" value="0"/> <mx:SetProperty target="{cartBox}" name="width" value="100%"/> <mx:AddChild relativeTo="{cartBox}" position="lastChild"> <mx:DataGrid width="100%"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid> </mx:AddChild> <mx:AddChild relativeTo="{cartBox}" position="lastChild"> <mx:LinkButton label="Continue Shopping" click="this.currentState=''"/> </mx:AddChild> <mx:RemoveChild target="{linkbutton1}"/> </mx:State> </mx:states>
First, you defined the cartView state that uses the <mx:SetProperty> tag four times: once to set the height of the products container to 0; once to set its width to 0; once to set the height of cartBox to 100%; and once more to set the width of cartBox to 100%. The <mx:AddChild> tag is then used to add a DataGrid and link, and the <mx:RemoveChild> tag is used to remove a link. Tip  | When using the <mx:AddChild> tag, specify the relativeTo and position attributes. The target attribute is the container to which the child will be added; position indicates where in that container the child will be added. Possible values are "before", "after", "firstChild", and "lastChild". The default value is "lastChild". The child to be added is most often specified between the open and closing <mx:AddChild> tags. |
1. | Open the Dashboard.mxml file that you used in the previous exercise.
Alternately, you can open Dashboard_layout.mxml from the Lesson03/intermediate and save it in your FlexGrocer directory as Dashboard.mxml.
| 2. | After the closing <mx:ApplicationControlBar> tag, but before the <mx:Panel . . . > tag, add an <mx:states> tag pair.
Because the <mx:states> tag doesn't represent a visual element in the application, they could really be defined anywhere in the application.
| 3. | Between the open and close <mx:states> tags, add an <mx:State> tag to define a new state named fullSales. Because this will be based on the base view state, there is no need to specify a basedOn attribute.
<mx:states> <mx:State name="fullSales"> </mx:State> </mx:states>
| 4. | Use the <mx:SetProperty> tag to define the fullSales state to set the height and width of the rightCharts VBox container to 0.
The body of the Application has only two children, both of which initially requested 100% width. By setting the other child (rightCharts) to use 0 pixels for its width, the first child (the sales view) will expand to fill 100% of the space.
<mx:states> <mx:State name="fullSales"> <mx:SetProperty target="{rightCharts}" name="width" value="0"/> <mx:SetProperty target="{rightCharts}" name="height" value="0"/> </mx:State> </mx:states>
Tip | Remember that the target needs to be specified as a binding; that is, it needs to be the name of the component placed within curly brackets. |
| | | 5. | Define a second state named fullType after the end tag for the fullSales state. The fullType state should use the <mx:SetProperty> tag to set the height and width of sales to 0, and the height and width of comp to 0.
When the Dashboard shows the type chart fully, the sales chart and comparison charts both need to be minimized; hence, for the fullType state, you are setting 0 for the height and width of both of the other charts. Because all three charts were initially set up to take 100% for both height and width, when the other two charts no longer use any space, the type chart is free to use the whole screen.
<mx:State name="fullType"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{comp}" name="width" value="0"/> <mx:SetProperty target="{comp}" name="height" value="0"/> </mx:State>
| 6. | Define a third state named fullComp, which sets the height and width of both sales and type to be 0 pixels.
This directly mirrors the work you did for the fullType state, so that to show the comparison chart fully, you will set the sales and type charts to take up 0 pixels for their height and width. The new fullComp state block should read like this:
<mx:State name="fullComp"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{type}" name="width" value="0"/> <mx:SetProperty target="{type}" name="height" value="0"/> </mx:State>
| | | 7. | Add click events for the LinkButton controls in the <mx:ApplicationControlBar> tag to toggle the currentState property.
<mx:ApplicationControlBar dock="true"> <mx:LinkButton label="All" click="this.currentState=''"/> <mx:LinkButton label="Sales" click="this.currentState='fullSales'"/> <mx:LinkButton label="Categories" click="this.currentState='fullType'"/> <mx:LinkButton label="Comparison" click="this.currentState='fullComp'"/> </mx:ApplicationControlBar>
| 8. | Save and test the Dashboard. You should be able to control the states from the top links.
You can now navigate and see each of the panels use the full stage to display.
 |
|
