To date, in our series on Surfing Stats, we have covered the intent, directory structure, data sets and the main application file.
(download the code using the download link at the bottom of the the Intro to Surfing Stats post). Now we examine ChartToggle.mxml.
ChartToggle.mxml
Visually, ChartToggle makes up the large content area below our TabBar. You can see the navigational choices on the left hand side, and a display section on the right containing a Table, Bar Chart or Pie Chart as appropriate.
I designed the application with a dataset (Blog Totals) that does not display well in either Bar Chart or Pie Chart format. While Surfing Stats is an academically simple application designed to teach the basic Flex concepts, I wanted to raise it a tiny bit above Fisher Price. Try it for yourself. Choose the Blog Totals tab, then choose the Bar Chart layout option.
States
States, simply put, are different modes for a component. For example, when you click a button with your mouse, the button depresses giving visual feedback.
The button can be said to have an up state (raised) and a down state (depressed).
In our application, ChartToggle has a normal (base) state, where all views are allowed and a nochart state, where table view is allowed but chart view is blocked.
Reading the states code above, the nochart state removes the ViewStack containing the various views, then adds a box with a button and message.
selectedDataset and selectedDatasetAC
The selectedDataset is an object that refers to the chosen set of data. A dataset has a source, a nicely formatted title and an allowChart property. The selectedDatasetAC is an ArrayCollection containing the data from that dataset.
Remember our bound selectedDataset and selectedDatasetAC attributes in the ChartToggle configuration? In ChartToggle, the use of selectedDatasetAC is pretty straightforward. When the data inside selectedDatasetAC is changed, update the reference across our application. When the selectedDataset changes however, we gotta check to see if we can show charts. If charts are not allowed for this dataset, we need to set the nochart state. This logical intersection was a great place to show a very useful language feature of ActionScript, implicit getters and setters for properties.
[Bindable] public var selectedDatasetAC:ArrayCollection;
private var _selectedDataset:Dataset;
//Logic for getting/setting the dataset object
[Bindable]
public function get selectedDataset():Dataset{
return _selectedDataset;
}
public function set selectedDataset(ds:Dataset):void{
setDisplay( ds.allowChart );
this._selectedDataset=ds;
}
See the private definition for _selectedDataset? The value of the property selectedDataset is actually held there. We expose a public property selectedDataset using implicit getter/setter syntax to run logic when the public property selectedDataset is either retrieved or set. In this case, when the selectedDataset property is set, we run the setDisplay() method. We marked the public property as [Bindable] so the data will be updated should it change. (Mark either the get or the set portion as [Bindable], not both. Marking both causes an error.)
Chart Navigation
We can select a Table view, a Bar Chart or a Pie Chart. The navigation container ToggleButtonBar holds our options and is configured using mxml. We could easily have configured this using ActionScript, but we already showed how to do that for ChartConfig in Main.mxml. Note the configuration:
In ActionScript, generic Objects are like structs or associative arrays. Our configured objects have a toolTip, an icon (embedded higher up in the file) and a basedOn property. Menu options that request a chart are basedOn=”chart”. Astute readers noticed basedOn being is used in setDisplay() to drive the proper state choice.
Display Option ViewStack
Each Navigational choice has a corresponding view. The view is contained in a ViewStack. A ViewStack contains views which are accessed by ordinal. Think of a card deck. Ask for a certain card, that card is flipped over and is now visible. The ordinal of the Button clicked by the user corresponds with a specific view in the ViewStack. Click the second (BarChart) choice, you get shown the second item in the ViewStack.
private function clickHandler(event:ItemClickEvent):void {
setDisplay( selectedDataset.allowChart );
views.selectedIndex = event.index;
}
Each value in the ViewStack is a custom component. Each component gets a height, width, id, and the selectedDatasetAC. Both charts also get a reference to an effect for events showData and hideData. The effect is a very simple SeriesSlide used to add a little snazz. Simple doesn’t have to mean boring, does it? 😉
After this point, you should have learned a little about states, implicit getters/setters, navigational elements and ViewStacks. In the next series, we’ll discuss the 3 display components, TableView, BarChart and PieChart.