Flex 3 dashboard

The dashboard, built by WASI, is a demo application which displays data using draggable drill down charts, forms, DataGrids, and links in a pod layout. You can modify layouts by dragging and dropping pods to a different location and minimizing, maximizing, and restoring pod windows. Layout changes are saved using a LocalSharedObject. Layout data is loaded from /data/pods.xml with values in pod.xml indicating which data files to load for a particular pod. You will need the datavisualization.swc to run this application.

• Experience the application

To download and view the full source, right-click the Flex application and select View Source from the context menu.

File and folder descriptions

• main.mxml - The main application file.
• /assets/ - Contains assets which are embedded into the application.
• /com/ - Contains ActionScript and MXML components.
• /data/ - Contains the XML data file.
• /qs/ - Contains ActionScript classes from www.quietlyscheming.com for chart effects.

Setting up the project in Flex Builder 3

Download the source code and import the ZIP file as a new Flex Builder project.

Deploying the application

To deploy the project on a Web server, select Project > Export Release Build from the main menu. By default, Flex Builder will export the project files to a /bin-release/ directory inside of your Flex project folder. If you want to include a source code in your published application, check the Enable view source check box and Flex Builder will generate separate HTML versions files for each of the files in your Flex project. If you only want to include certain source files, click the Choose Source Files button and you can toggle individual files/directories in the Publish Application Source dialog box. Once finished, click the Finish button in the Export Release Build dialog box to finish generating the release version of the project. Finally, upload the files from the /bin-release/ folder to your Web server.

Flex framework features

The layout of the different pods in the dashboard is implemented using a custom layout manager (which in this case does not extend the Flex LayoutManager). Effects are used as pods change their position and are resized. The contents of the pod use standard controls like Charts and List controls.

Note: You may use the sample code in your products, commercial or not.