<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:breadcrumbs="com.flexicious.sample.breadcrumbs.*"
xmlns:controls="com.flexicious.controls.*"
xmlns:dashboard="com.flexicious.sample.dashboard.*"
xmlns:visualization="com.flexicious.components.visualization.*"
xmlns:gaugesupport="com.flexicious.components.visualization.gaugesupport.*"
xmlns:gauges="com.flexicious.sample.gauges.*"
xmlns:components="com.flexicious.components.*"
xmlns:tinycharts="com.flexicious.sample.tinycharts.*"
xmlns:charts="com.flexicious.sample.charts.*"
width="900" height="700" color="0x3f3f3f" viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import com.flexicious.sample.dashboard.IconRepository;
private var hitCt:Number=0;
private var totCt:Number=0;
protected function btnNext_clickHandler(event:MouseEvent):void
{
var startTime:Date=new Date;
cbxNav.selectedIndex++
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<fx:Style source="desktopstyles.css"/>
<s:layout>
<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" verticalAlign="middle" horizontalAlign="center" />
</s:layout>
<s:HGroup width="100%">
<controls:Button icon="{IconRepository.leftArrow}" skin="com.flexicious.sample.dashboard.customskins.PrevNextButtonSkin"
width="100" enabled="{cbxNav.selectedIndex>0}" height="22" label="Previous"
click="cbxNav.selectedIndex--" toolTip="Previous Sample: {cbxNav.dataProvider.getItemAt(cbxNav.selectedIndex-1).label}"/>
<s:Label text="Choose Sample:" height="21" verticalAlign="middle"/>
<s:DropDownList id="cbxNav" selectedIndex="0" width="100%" >
<s:layout>
<s:VerticalLayout gap="0"
horizontalAlign="contentJustify"
requestedRowCount="10" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:Object label="Dashboard with Vertical Zones - Default Skin"/>
<fx:Object label="Dashboard with Horizontal Zones - Custom Skin (smooth)"/>
<fx:Object label="Dashboard with Asymmetrical Zones - Custom Skin (colorful)"/>
<fx:Object label="Dashboard with Basic Layout and Scrollbars- Custom Skin (bright)"/>
<fx:Object label="Dashboard with Tile Layout - Custom Skin (tile) and with Flexicious Gauge Controls - NEW with 2.8"/>
<fx:Object label="Gauge Controls - NEW with 2.8"/>
<fx:Object label="Gauge Controls With Custom Skins- NEW with 2.8"/>
<fx:Object label="New Components - BreadCrumb, FieldSet, Extended Title Window - NEW with 2.8"/>
<fx:Object label="New Components - Tiny Charts - NEW with 2.9"/>
<fx:Object label="New Components - Tiny Charts In DataGrids - NEW with 2.9"/>
<fx:Object label="New Components - 3D Pie Chart - NEW with 3.0"/>
<fx:Object label="New Components - 3D ColumnChart - NEW with 3.0"/>
<fx:Object label="New Components - 3D BarChart - NEW with 3.0"/>
<fx:Object label="New Components - 3D Pyramid Chart - NEW with 3.0"/>
<fx:Object label="New Components - 3D Funnel Chart - NEW with 3.0"/>
<fx:Object label="New Components - Area Chart - NEW with 3.0"/>
<fx:Object label="New Components - Line Chart - NEW with 3.0"/>
<fx:Object label="New Components - Bubble Chart - NEW with 3.0"/>
<fx:Object label="New Components - Plot Chart - NEW with 3.0"/>
<fx:Object label="New Components - HLOC Chart - NEW with 3.0"/>
<fx:Object label="New Components - CandleStick Chart - NEW with 3.0"/>
<fx:Object label="New Components - Zoom Slider Chart - NEW with 3.0"/>
</s:ArrayList>
</s:dataProvider>
</s:DropDownList>
<controls:Button icon="{IconRepository.rightArrow}" skin="com.flexicious.sample.dashboard.customskins.PrevNextButtonSkin" width="100"
height="22" enabled="{cbxNav.selectedIndex<cbxNav.dataProvider.length-1}" label="Next"
labelPlacement="left" id="btnNext"
click="btnNext_clickHandler(event)" toolTip="Next Sample: {cbxNav.dataProvider.getItemAt(cbxNav.selectedIndex+1).label}"/>
</s:HGroup>
<s:Rect right="10" left="10" height="2" width="100%">
<s:fill>
<s:SolidColor color="0xCFCFCF"/>
</s:fill>
</s:Rect>
<mx:ViewStack width="100%" height="100%" id="viewStackMain" selectedIndex="{cbxNav.selectedIndex}">
<dashboard:DashboardZonesSample width="100%" height="100%" label="Dashboard with Vertical Zones - Default Skin"/>
<dashboard:HorizontalZonesSample width="100%" height="100%" label="Dashboard with Horizontal Zones - Custom Skin (smooth)"/>
<dashboard:AsymmetricalZonesSample width="100%" height="100%" label="Dashboard with Asymmetrical Zones - Custom Skin (colorful)"/>
<dashboard:DashboardBasicLayoutSample width="100%" height="100%" label="Dashboard with Basic Layout and Scrollbars- Custom Skin (bright)"/>
<dashboard:DashboardTileLayoutSample width="100%" height="550" label="Dashboard with Tile Layout - Custom Skin (tile) and with Flexicious Gauge Controls - NEW with 2.8"/>
<gauges:Gauges width="100%" height="100%" label="New Components - Gauge Controls - NEW with 2.8"/>
<gauges:GaugeSkins width="100%" height="100%" label="New Components - Gauge Controls With Custom Skins- NEW with 2.8"/>
<breadcrumbs:BreadCrumbMain width="100%" height="100%" label="New Components - BreadCrumb and FieldSet - NEW with 2.8"/>
<tinycharts:TinyCharts width="100%" height="500" label="New Components - Tiny Charts - NEW with 2.9"/>
<tinycharts:TinyChartsItemRenderers width="100%" height="500" label="New Components - Tiny Charts Within DataGrid- NEW with 2.9"/>
<charts:PieCharts width="100%" height="100%" label="New Components - 3D Pie Charts - NEW with 3.0"/>
<charts:ColumnCharts width="100%" height="100%" label="New Components - 3D Column Charts - NEW with 3.0"/>
<charts:BarCharts width="100%" height="100%" label="New Components - 3D Bar Charts - NEW with 3.0"/>
<charts:PyramidCharts width="100%" height="100%" label="New Components - 3D Pyramid Charts - NEW with 3.0"/>
<charts:FunnelCharts width="100%" height="100%" label="New Components - 3D Funnel Charts - NEW with 3.0"/>
<charts:AreaCharts width="100%" height="100%" label="New Components - Area Charts - NEW with 3.0"/>
<charts:LineCharts width="100%" height="100%" label="New Components - Line Charts - NEW with 3.0"/>
<charts:BubbleCharts width="100%" height="100%"/>
<charts:PlotCharts width="100%" height="100%"/>
<charts:HLOCCharts width="100%" height="100%"/>
<charts:CandleStickCharts width="100%" height="100%"/>
<charts:ZoomSlider width="100%" height="100%"/>
</mx:ViewStack>
</s:Application>