<?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:viewStack="ardisia.components.viewStack.*"
xmlns:scroller="ardisia.components.scroller.*"
xmlns:pane="ardisia.components.pane.*"
xmlns:supportClasses="ardisia.supportClasses.*"
xmlns:textInput="ardisia.components.textInput.*"
xmlns:progressDisplay="ardisia.components.progressDisplay.*"
xmlns:browser="ardisia.browser.*"
applicationComplete="applicationCompleteHandler(event);" currentState="stockholm"
frameRate="60" pageTitle="Ardisia Labs Component Library Demo"
preloader="preloaders.BarPreloaderDemo" viewSourceURL="srcview/index.html"
backgroundColor.london="#878988"
backgroundColor.spark="#ABABAB"
backgroundColor.stockholm="#3F9AD8">
<fx:Style source="css/defaults.css" />
<fx:Script>
<![CDATA[
import mx.controls.DateField;
import mx.core.FlexGlobals;
import mx.core.UIComponent;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import mx.events.ModuleEvent;
import mx.events.StyleEvent;
import mx.graphics.ImageSnapshot;
import mx.managers.LayoutManager;
import mx.managers.PopUpManager;
import mx.managers.ToolTipManager;
import spark.collections.Sort;
import spark.collections.SortField;
import spark.components.DataGrid;
import spark.effects.Move;
import spark.events.IndexChangeEvent;
import spark.events.TextOperationEvent;
import spark.utils.DataItem;
import ardisia.components.progressDisplay.ProgressDisplayIndeterminate;
import ardisia.managers.cursorManager.CursorManager;
import ardisia.themes.london.itemRenderers.DefaultGridItemRendererSpark;
import panes.AboutPane;
import skins.WhiteButtonSkin;
protected var popup:PopUpManager;
protected var df:DateField;
protected var gridIR:ardisia.themes.london.itemRenderers.DefaultGridItemRendererSpark;
protected var grid:DataGrid;
protected var di:DataItem;
protected var imageSnapshot:ImageSnapshot;
protected var styleLoader:IEventDispatcher;
protected var la:String;
protected var animateDirection:String;
protected var selectedIndex:int = -1;
/**
* Called by the containers. Is called when the module is actually
* ready for display. Is more accurate than listening for the
* module's CREATION_COMPLETE event.
*/
public function creationComplete():void
{
callLater(callCC);
}
/**
* Load a new module.
*/
public function changeModule(moduleName:String,
displayLoadingPane:Boolean = true):void
{
if (displayLoadingPane)
loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, false, null, moduleFactory);
var len:int = componentsCollection.length;
for (var i:int = 0; i < len; i++)
{
var item:Object = componentsCollection[i];
if (item.label == moduleName)
{
selectedIndex = i;
break;
}
}
viewDemosSelect.enabled = reloadButton.enabled = true;
backCmpSelectButton.enabled = selectedIndex > 0;
forwardCmpSelectButton.enabled = selectedIndex < componentsCollection.length - 1;
CursorManager.removeAllCursors();
viewDemosSelect.label = moduleName;
aboutSelect.visible = aboutSelect.includeInLayout = true;
switch (moduleName)
{
case "Accordion":
moduleLoader.url = "modules/AccordionModule.swf";
break;
case "Animated Image":
moduleLoader.url = "modules/AnimatedImageModule.swf";
break;
case "Auto Complete ComboBox":
moduleLoader.url = "modules/AutoCompleteModule.swf";
break;
case "Auto Fitting Text":
moduleLoader.url = "modules/AutoFitTextModule.swf";
break;
case "Bar Code":
moduleLoader.url = "modules/BarCodeModule.swf";
break;
case "Bitmap Adjustments":
moduleLoader.url = "modules/BitmapAdjustmentsModule.swf";
break;
case "Button Bar":
moduleLoader.url = "modules/ButtonBarModule.swf";
break;
case "Calculator":
moduleLoader.url = "modules/CalculatorModule.swf";
break;
case "Calendar":
moduleLoader.url = "modules/CalendarModule.swf";
break;
case "CAPTCHA":
moduleLoader.url = "modules/CaptchaModule.swf";
break;
case "Carousel Layout":
moduleLoader.url = "modules/CarouselLayoutModule.swf";
break;
case "Carousel List":
moduleLoader.url = "modules/CarouselListModule.swf";
break;
case "Clocks":
moduleLoader.url = "modules/ClocksModule.swf";
break;
case "Colorizer":
moduleLoader.url = "modules/ColorizerModule.swf";
break;
case "ColorPicker":
moduleLoader.url = "modules/ColorPickerModule.swf";
break;
case "ColorSpace Picker":
moduleLoader.url = "modules/ColorSpacePickerModule.swf";
break;
case "Compass Container":
moduleLoader.url = "modules/CompassContainerModule.swf";
break;
case "Container Combination":
moduleLoader.url = "modules/ContainerCombination.swf";
break;
case "Coverflow Layout":
moduleLoader.url = "modules/CoverflowLayoutModule.swf";
break;
case "Coverflow List":
moduleLoader.url = "modules/CoverflowListModule.swf";
break;
case "Cursor Manager":
moduleLoader.url = "modules/CursorManagerModule.swf";
break;
case "DatePicker":
moduleLoader.url = "modules/DatePickerModule.swf";
break;
case "Docking Compass Container":
moduleLoader.url = "modules/DockingCompassContainerModule.swf";
break;
case "Donut Chart":
moduleLoader.url = "modules/DonutModule.swf";
break;
case "Expanding Container":
moduleLoader.url = "modules/ExpandingContainerModule.swf";
break;
case "FieldSet":
moduleLoader.url = "modules/FieldSetModule.swf";
break;
case "Filters":
moduleLoader.url = "modules/FiltersModule.swf";
break;
case "Flex ContextMenu":
moduleLoader.url = "modules/FlexContextMenuModule.swf";
break;
case "FloatPane ControlBar":
moduleLoader.url = "modules/FloatPaneControlBarModule.swf";
break;
case "Funnel Chart":
moduleLoader.url = "modules/FunnelModule.swf";
break;
case "Graphics Editor":
moduleLoader.url = "modules/GraphicsEditorModule.swf";
break;
case "Heatmap Chart":
moduleLoader.url = "modules/HeatmapModule.swf";
break;
case "HTML DragDrop":
aboutSelect.visible = aboutSelect.includeInLayout = false;
moduleLoader.url = "modules/HtmlDragDropModule.swf";
break;
case "HTML Frame":
aboutSelect.visible = aboutSelect.includeInLayout = false;
moduleLoader.url = "modules/HtmlFrameModule.swf";
break;
case "HTML Geolocation":
moduleLoader.url = "modules/HtmlGeolocationModule.swf";
break;
case "iCalendar Parser":
moduleLoader.url = "modules/iCalendarParserModule.swf";
break;
case "iCalendar Recurrence":
moduleLoader.url = "modules/iCalendarRecurrenceModule.swf";
break;
case "Icon Button":
moduleLoader.url = "modules/IconButtonModule.swf";
break;
case "Linear Gauges":
moduleLoader.url = "modules/LinearGaugesModule.swf";
break;
case "Magnifier":
moduleLoader.url = "modules/MagnifierModule.swf";
break;
case "Menu And MenuBar":
moduleLoader.url = "modules/MenuAndMenuBarModule.swf";
break;
case "Mini Viewport":
moduleLoader.url = "modules/MiniViewportModule.swf";
break;
case "Packed Layout":
moduleLoader.url = "modules/PackedLayoutModule.swf";
break;
case "Packed List":
moduleLoader.url = "modules/PackedListModule.swf";
break;
case "Pane":
moduleLoader.url = "modules/PaneModule.swf";
break;
case "Pane Navigators":
moduleLoader.url = "modules/PaneNavigatorsModule.swf";
break;
case "PopUp Button":
moduleLoader.url = "modules/PopUpButtonModule.swf";
break;
case "Progress Display":
moduleLoader.url = "modules/ProgressDisplayModule.swf";
break;
case "Radar Chart":
moduleLoader.url = "modules/RadarModule.swf";
break;
case "Radial Gauges":
moduleLoader.url = "modules/RadialGaugesModule.swf";
break;
case "Rating":
moduleLoader.url = "modules/RatingModule.swf";
break;
case "ReflectionContainer":
moduleLoader.url = "modules/ReflectionContainerModule.swf";
break;
case "RichText Editor":
moduleLoader.url = "modules/RichTextEditorModule.swf";
break;
case "Rotary Field":
moduleLoader.url = "modules/RotaryFieldModule.swf";
break;
case "Safari Mouse Wheel Fix":
moduleLoader.url = "modules/SafariMouseWheelFixModule.swf";
break;
case "Scroller":
moduleLoader.url = "modules/ScrollerModule.swf";
break;
case "Separators":
moduleLoader.url = "modules/SeparatorsModule.swf";
break;
case "Slider Field":
moduleLoader.url = "modules/SliderFieldModule.swf";
break;
case "Sparklines":
moduleLoader.url = "modules/SparklinesModule.swf";
break;
case "TextInput":
moduleLoader.url = "modules/TextInputModule.swf";
break;
case "Themes":
moduleLoader.url = "modules/ThemesModule.swf";
break;
case "Timebar Container":
moduleLoader.url = "modules/TimebarContainerModule.swf";
break;
case "Timeline":
moduleLoader.url = "modules/TimelineModule.swf";
break;
case "TimeMachine Layout":
moduleLoader.url = "modules/TimeMachineLayoutModule.swf";
break;
case "TimeMachine List":
moduleLoader.url = "modules/TimeMachineListModule.swf";
break;
case "TimePicker":
moduleLoader.url = "modules/TimePickerModule.swf";
break;
case "ToggleSwitch Desktop":
moduleLoader.url = "modules/ToggleSwitchDesktopModule.swf";
break;
case "Toolbar":
moduleLoader.url = "modules/ToolbarModule.swf";
break;
case "Transform Container":
moduleLoader.url = "modules/TransformContainerModule.swf";
break;
case "TreeMap Chart":
moduleLoader.url = "modules/TreeMapModule.swf";
break;
case "ViewStack":
moduleLoader.url = "modules/ViewStackModule.swf";
break;
case "WheelList":
moduleLoader.url = "modules/WheelListModule.swf";
break;
case "Timeline":
moduleLoader.url = "modules/TimelineModule.swf";
break;
}
viewstack.selectedIndex = 0;
}
/**
* Setup the animation.
*/
public function setupAnimation(direction:String):void
{
animateDirection = direction;
var bmd:BitmapData = new BitmapData(viewstack.width, viewstack.height, true, 0);
bmd.drawWithQuality(viewstack, null, null, null, null, false, StageQuality.BEST);
oldImage.visible = true;
oldImage.bitmapData = bmd;
oldImage.width = viewstack.width;
oldImage.height = viewstack.height;
oldImage.x = 0; oldImage.y = 40;
oldImage.validateNow();
viewstack.visible = false;
}
/**
* Called when a module should change.
*/
protected function callCC():void
{
loadingPane.closeFloatedPane();
if (moduleLoader && moduleLoader.child && UIComponent(moduleLoader.child).hasOwnProperty("creationComplete"))
Object(moduleLoader.child).creationComplete();
LayoutManager.getInstance().validateNow();
callLater(startAnimation);
}
/**
* Open the selection screen.
*/
protected function openSelectionScreen(skipAnimation:Boolean = false):void
{
if (moveEffect.isPlaying || parallelEffectA.isPlaying)
return;
viewDemosSelect.enabled = reloadButton.enabled = backCmpSelectButton.enabled = forwardCmpSelectButton.enabled = false;
if (!skipAnimation)
setupAnimation("zoom");
viewDemosSelect.label = 'Component Demos';
filterInput.setFocus();
moduleLoader.url = null;
viewstack.selectedIndex = 1;
selectedIndex = allCmpList.selectedIndex = featuredCmpSelect.selectedIndex = newCmpSelect.selectedIndex = -1;
viewstack.validateNow();
CursorManager.removeAllCursors();
aboutSelect.visible = aboutSelect.includeInLayout = true;
if (!skipAnimation)
callLater(startAnimation);
if (skipAnimation)
viewstack.visible = true;
}
/**
* Play the transition animation.
*/
protected function startAnimation():void
{
switch (animateDirection)
{
case "left":
case "right":
var bmd:BitmapData = new BitmapData(viewstack.width * 2, viewstack.height, true, 0);
bmd.copyPixels(oldImage.bitmapData, oldImage.bitmapData.rect, animateDirection == "right" ? new Point(0, 0) : new Point(viewstack.width, 0));
var newBmd:BitmapData = new BitmapData(viewstack.width, viewstack.height, true, 0);
newBmd.drawWithQuality(viewstack, null, null, null, null, false, StageQuality.BEST);
bmd.copyPixels(newBmd, newBmd.rect, animateDirection == "right" ? new Point(viewstack.width, 0) : new Point(0, 0));
oldImage.bitmapData = bmd;
oldImage.width = viewstack.width * 2;
oldImage.height = viewstack.height;
oldImage.x = animateDirection == "right" ? 0 : -viewstack.width;
oldImage.y = 40;
oldImage.validateNow();
moveEffect.xFrom = animateDirection == "right" ? 0 : -viewstack.width;
moveEffect.xTo = animateDirection == "right" ? -viewstack.width : 0;
moveEffect.play();
break;
case "zoom":
bmd = new BitmapData(viewstack.width, viewstack.height, true, 0);
bmd.drawWithQuality(viewstack, null, null, null, null, false, StageQuality.BEST);
newImage.visible = false;
newImage.bitmapData = bmd;
newImage.width = viewstack.width;
newImage.height = viewstack.height;
newImage.validateNow();
newImage.x = 0; newImage.y = 40;
parallelEffectA.play();
parallelEffectB.play();
break;
}
}
protected function applicationCompleteHandler(event:Event):void
{
ToolTipManager.showDelay = 0;
ToolTipManager.hideDelay = Number.POSITIVE_INFINITY;
styleLoader = styleManager.loadStyleDeclarations("themes/stockholm.swf", true, false, ApplicationDomain.currentDomain);
styleLoader.addEventListener(StyleEvent.COMPLETE, initialStyleLoadHandler);
styleLoader.addEventListener(StyleEvent.ERROR, initialStyleLoadHandler);
progressDisplay.label = "Loading Theme...";
progressDisplay.delayBeforeFloat = 400;
progressDisplay.show(this, true, moduleFactory);
PopUpManager.addPopUp(oldImage, this);
PopUpManager.addPopUp(newImage, this);
var len:int = componentsCollection.length;
var dp:ArrayCollection = new ArrayCollection();
for (var i:int = 0; i < len; i++)
{
if (componentsCollection[i].newCmp)
dp.addItem(componentsCollection[i])
}
var sort:Sort = new Sort();
sort.fields = [new SortField("newOrder", false)];
dp.sort = sort;
dp.refresh();
newCmpSelect.dataProvider = dp;
dp = new ArrayCollection();
for (i = 0; i < len; i++)
{
if (componentsCollection[i].featured)
dp.addItem(componentsCollection[i])
}
sort = new Sort();
sort.fields = [new SortField("featuredOrder", false)];
dp.sort = sort;
dp.refresh();
featuredCmpSelect.dataProvider = dp;
dp = new ArrayCollection();
for each (var cat:Object in categories)
{
dp.addItem(cat)
for (i = 0; i < len; i++)
{
if (componentsCollection[i].category == cat.category)
dp.addItem(componentsCollection[i]);
}
}
allCmpList.dataProvider = dp;
}
/**
* Handles loading new themes.
*/
protected function themeSelectHandler(event:IndexChangeEvent):void
{
var oldIndex:int = event.oldIndex;
var newIndex:int = event.newIndex;
viewstack.visible = false;
moduleLoader.url = null;
if (oldIndex == 0)
styleManager.unloadStyleDeclarations("themes/stockholm.swf", true);
if (oldIndex == 1)
styleManager.unloadStyleDeclarations("themes/london.swf", true);
switch (themeSelect.selectedIndex)
{
case 0:
styleLoader = styleManager.loadStyleDeclarations("themes/stockholm.swf", true, false, ApplicationDomain.currentDomain);
styleLoader.addEventListener(StyleEvent.COMPLETE, styleLoaderHandler);
styleLoader.addEventListener(StyleEvent.ERROR, styleLoaderHandler);
break;
case 1:
styleLoader = styleManager.loadStyleDeclarations("themes/london.swf", true, false, ApplicationDomain.currentDomain);
styleLoader.addEventListener(StyleEvent.COMPLETE, styleLoaderHandler);
styleLoader.addEventListener(StyleEvent.ERROR, styleLoaderHandler);
break;
case 2:
setCurrentState("spark");
if (selectedIndex > -1)
{
setupAnimation('zoom');
changeModule(componentsCollection[selectedIndex].label, false);
}
else
{
openSelectionScreen(true);
}
return;
break;
}
progressDisplay.label = "Loading Theme...";
progressDisplay.delayBeforeFloat = 400;
progressDisplay.show(this, true, moduleFactory);
}
/**
* Handles the initial theme load event.
*/
protected function initialStyleLoadHandler(event:StyleEvent):void
{
styleLoader.removeEventListener(StyleEvent.COMPLETE, initialStyleLoadHandler);
styleLoader.removeEventListener(StyleEvent.ERROR, initialStyleLoadHandler);
progressDisplay.close();
viewstack.visible = true;
}
/**
* Handles events for loading new themes.
*/
protected function styleLoaderHandler(event:StyleEvent):void
{
switch (event.type)
{
case StyleEvent.COMPLETE:
case StyleEvent.ERROR:
styleLoader.removeEventListener(StyleEvent.COMPLETE, styleLoaderHandler);
styleLoader.removeEventListener(StyleEvent.ERROR, styleLoaderHandler);
callLater(progressDisplay.close);
setCurrentState(themeSelect.selectedIndex == 0 ? "stockholm" : "london");
if (selectedIndex > -1)
{
setupAnimation('zoom');
changeModule(componentsCollection[selectedIndex].label, false);
}
else
{
openSelectionScreen(true);
}
break;
}
}
/**
* Handles events for newly loaded modules.
*/
protected function moduleHandler(event:Event):void
{
switch (event.type)
{
case ModuleEvent.READY:
CursorManager.removeAllCursors();
if (moduleLoader && moduleLoader.child)
UIComponent(moduleLoader.child).setCurrentState(currentState);
break;
}
}
/**
* Handles events the changing components buttons.
*/
protected function changeComponentHandler(event:Event):void
{
if (moveEffect.isPlaying || parallelEffectA.isPlaying)
return;
switch (event.currentTarget)
{
case backCmpSelectButton:
if (selectedIndex < 1)
return;
selectedIndex--;
setupAnimation("left");
break;
case forwardCmpSelectButton:
if (selectedIndex > componentsCollection.length - 1)
return;
selectedIndex++;
setupAnimation("right");
break;
}
changeModule(componentsCollection[selectedIndex].label);
}
/**
* Handles events for effects.
*/
protected function effectHandler(event:EffectEvent):void
{
oldImage.postLayoutTransformOffsets = newImage.postLayoutTransformOffsets = null;
oldImage.alpha = newImage.alpha = 1;
oldImage.visible = newImage.visible = false;
if (oldImage.bitmapData)
oldImage.bitmapData.dispose();
if (newImage.bitmapData)
newImage.bitmapData.dispose();
viewstack.visible = true;
animateDirection = "";
if (Object(moduleLoader.child).hasOwnProperty("animatedIn"))
Object(moduleLoader.child).animatedIn();
}
/**
* Handles filter events.
*/
protected function filterCmps(event:TextOperationEvent):void
{
function filterFn(item:Object):Boolean
{
if (item.label && String(item.label).toLowerCase().indexOf(needle.toLowerCase()) > -1)
return true;
return false;
}
var dp:ArrayCollection = allCmpList.dataProvider as ArrayCollection;
var needle:String = filterInput.text;
if (!needle || needle.length < 1)
{
dp.filterFunction = null;
}
else
{
dp.filterFunction = filterFn;
}
dp.refresh();
}
/**
* Handles keys for filtering.
*/
protected function filterInput_keyDownHandler(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.ENTER &&
allCmpList.dataProvider.length > 0 &&
!allCmpList.dataProvider[0].header)
{
setupAnimation('zoom');
changeModule(allCmpList.dataProvider[0].label);
}
}
]]>
</fx:Script>
<fx:Declarations>
<browser:SafariMouseWheelFix />
<fx:Array id="categories">
<fx:Object header="true" category="Charts" icon="@Embed(source='icons/open-iconic-master/graph-2x.png')" />
<fx:Object header="true" category="Containers" icon="@Embed(source='icons/open-iconic-master/vertical-align-center-2x.png')" />
<fx:Object header="true" category="Scheduling" icon="@Embed(source='icons/open-iconic-master/calendar-2x.png')" />
<fx:Object header="true" category="Chronology Visualization" icon="@Embed(source='icons/open-iconic-master/project-2x.png')" />
<fx:Object header="true" category="Graphics" icon="@Embed(source='icons/open-iconic-master/brush-2x.png')" />
<fx:Object header="true" category="HTML" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')" />
<fx:Object header="true" category="Indicators" icon="@Embed(source='icons/open-iconic-master/dashboard-2x.png')" />
<fx:Object header="true" category="Buttons" icon="@Embed(source='icons/open-iconic-master/play-circle-2x.png')" />
<fx:Object header="true" category="Text" icon="@Embed(source='icons/open-iconic-master/copywriting-2x.png')" />
<fx:Object header="true" category="Layouts, Lists" icon="@Embed(source='icons/open-iconic-master/list-2x.png')" />
<fx:Object header="true" category="Managers, Miscellaneous" icon="@Embed(source='icons/open-iconic-master/puzzle-piece-2x.png')" />
<fx:Object header="true" category="UI Controls" icon="@Embed(source='icons/open-iconic-master/check-2x.png')" />
</fx:Array>
<s:ArrayCollection id="componentsCollection">
<fx:Object label="Donut Chart" category="Charts" newCmp="true" newOrder="2" description="Displays data series in rings. Includes support for multiple rings." icon="@Embed(source='icons/open-iconic-master/pie-chart-4x.png')" />
<fx:Object label="Radar Chart" featured="true" featuredOrder="2" category="Charts" description="Also known as a polar, spider, or kiviat chart." icon="@Embed(source='icons/open-iconic-master/bar-chart-4x.png')"/>
<fx:Object label="TreeMap Chart" featured="true" featuredOrder="12" category="Charts" description="Displays hierarchical data." icon="@Embed(source='icons/open-iconic-master/fork-4x.png')" />
<fx:Object label="Funnel Chart" category="Charts" />
<fx:Object label="Sparklines" category="Charts"/>
<fx:Object label="Heatmap Chart" category="Charts"/>
<fx:Object label="Compass Container" category="Containers" featured="true" featuredOrder="8" description="Creates a container with North, South, East, West, and center regions." icon="@Embed(source='icons/open-iconic-master/vertical-align-center-4x.png')"/>
<fx:Object label="Docking Compass Container" category="Containers"/>
<fx:Object label="Pane" category="Containers"/>
<fx:Object label="Pane Navigators" category="Containers"/>
<fx:Object label="FloatPane ControlBar" category="Containers"/>
<fx:Object label="Container Combination" featured="true" featuredOrder="6" category="Containers" description="Rollup example of several Ardisia container components." icon="@Embed(source='icons/open-iconic-master/vertical-align-bottom-4x.png')"/>
<fx:Object label="Expanding Container" category="Containers"/>
<fx:Object label="ViewStack" category="Containers"/>
<fx:Object label="Accordion" category="Containers"/>
<fx:Object label="FieldSet" category="Containers"/>
<fx:Object label="Toolbar" category="Containers"/>
<fx:Object label="Transform Container" featured="true" featuredOrder="4" category="Containers" description="Enables dragging and transformations of child content." icon="@Embed(source='icons/open-iconic-master/layers-4x.png')"/>
<fx:Object label="Calendar" featured="true" featuredOrder="1" category="Scheduling" description="Full featured Calendar. Supports repeating events." icon="@Embed(source='icons/open-iconic-master/calendar-4x.png')"/>
<fx:Object label="DatePicker" category="Scheduling"/>
<fx:Object label="iCalendar Parser" category="Scheduling"/>
<fx:Object label="iCalendar Recurrence" category="Scheduling"/>
<fx:Object label="Timebar Container" category="Chronology Visualization"/>
<fx:Object label="Timeline" category="Chronology Visualization" featured="true" featuredOrder="11" description="Display events along a timebar." icon="@Embed(source='icons/open-iconic-master/project-4x.png')"/>
<fx:Object label="Graphics Editor" newCmp="true" newOrder="1" category="Graphics" description="Manipulate bitmap, vector, and text. Code is in an alpha state." icon="@Embed(source='icons/open-iconic-master/image-4x.png')"/>
<fx:Object label="Bitmap Adjustments" category="Graphics"/>
<fx:Object label="Filters" category="Graphics"/>
<fx:Object label="Animated Image" category="Graphics"/>
<fx:Object label="ReflectionContainer" category="Graphics"/>
<fx:Object label="Magnifier" category="Graphics"/>
<fx:Object label="Colorizer" category="Graphics"/>
<fx:Object label="HTML DragDrop" category="HTML"/>
<fx:Object label="HTML Frame" featured="true" featuredOrder="3" category="HTML" description="Display html content inside a Flex application." icon="@Embed(source='icons/open-iconic-master/browser-4x.png')"/>
<fx:Object label="HTML Geolocation" category="HTML"/>
<fx:Object label="Safari Mouse Wheel Fix" category="HTML" newCmp="true" newOrder="3" description="Adds mouse wheel support to applications running within the Safari Web Browser." icon="@Embed(source='icons/open-iconic-master/bug-4x.png')"/>
<fx:Object label="Progress Display" category="Indicators"/>
<fx:Object label="Clocks" category="Indicators"/>
<fx:Object label="Button Bar" category="Buttons"/>
<fx:Object label="Icon Button" category="Buttons"/>
<fx:Object label="PopUp Button" category="Buttons"/>
<fx:Object label="ToggleSwitch Desktop" category="Buttons"/>
<fx:Object label="RichText Editor" featured="true" featuredOrder="7" category="Text" description="Toolbar that manages Text Layout Framework based controls." icon="@Embed(source='icons/open-iconic-master/pencil-4x.png')"/>
<fx:Object label="Auto Fitting Text" category="Text"/>
<fx:Object label="Carousel Layout" category="Layouts, Lists"/>
<fx:Object label="Carousel List" category="Layouts, Lists" />
<fx:Object label="Coverflow Layout" category="Layouts, Lists"/>
<fx:Object label="Coverflow List" category="Layouts, Lists" featured="true" featuredOrder="10" description="List optimized for use with the CoverflowLayout class." icon="@Embed(source='icons/open-iconic-master/random-4x.png')"/>
<fx:Object label="TimeMachine Layout" category="Layouts, Lists"/>
<fx:Object label="TimeMachine List" category="Layouts, Lists"/>
<fx:Object label="Packed Layout" category="Layouts, Lists"/>
<fx:Object label="Packed List" category="Layouts, Lists"/>
<fx:Object label="WheelList" category="Layouts, Lists"/>
<fx:Object label="Cursor Manager" category="Managers, Miscellaneous" featured="true" featuredOrder="9" description="Empowers developers to add, remove, and manage mouse cursors." icon="@Embed(source='icons/open-iconic-master/location-4x.png')"/>
<fx:Object label="Scroller" category="Managers, Miscellaneous"/>
<fx:Object label="Bar Code" category="Managers, Miscellaneous"/>
<fx:Object label="Mini Viewport" category="Managers, Miscellaneous"/>
<fx:Object label="Separators" category="Managers, Miscellaneous"/>
<fx:Object label="Themes" category="Managers, Miscellaneous" featured="true" featuredOrder="5" description="Sample the included themes." icon="@Embed(source='icons/open-iconic-master/monitor-4x.png')"/>
<fx:Object label="ColorPicker" category="UI Controls"/>
<fx:Object label="ColorSpace Picker" category="UI Controls"/>
<fx:Object label="Auto Complete ComboBox" category="UI Controls"/>
<fx:Object label="Calculator" category="UI Controls"/>
<fx:Object label="Rating" category="UI Controls"/>
<fx:Object label="Flex ContextMenu" category="UI Controls"/>
<fx:Object label="Linear Gauges" category="UI Controls"/>
<fx:Object label="Radial Gauges" category="UI Controls"/>
<fx:Object label="Rotary Field" category="UI Controls"/>
<fx:Object label="Slider Field" category="UI Controls"/>
<fx:Object label="TimePicker" category="UI Controls"/>
<fx:Object label="Menu And MenuBar" category="UI Controls"/>
<fx:Object label="CAPTCHA" category="UI Controls"/>
<fx:Object label="TextInput" category="UI Controls"/>
</s:ArrayCollection>
<!--- progress indicator -->
<progressDisplay:ProgressDisplayIndeterminate id="progressDisplay" />
<!--- loading pane -->
<!--- progress display is choppy -->
<pane:Pane id="loadingPane"
width="300" height="120"
displayCloseButton="false"
title="Wait">
<s:Label text="Loading..."
horizontalCenter="0" verticalCenter="0"
fontWeight="bold"/>
</pane:Pane>
<!--- images used for slide animations -->
<supportClasses:BitmapImageLite id="oldImage"
visible="false"/>
<supportClasses:BitmapImageLite id="newImage"
visible="false"/>
<s:Move id="moveEffect"
applyChangesPostLayout="true"
duration="600"
easer="{moveEaser}"
target="{oldImage}"
effectEnd="effectHandler(event)"/>
<s:Power id="moveEaser"
easeInFraction="0.5"
exponent="5"/>
<s:Parallel id="parallelEffectA"
target="{oldImage}"
duration="600">
<s:Move3D id="scaleEffectA"
applyChangesPostLayout="true"
easer="{scaleEaser}"
zFrom="1" zTo="5000"/>
<s:Fade id="fadeEffectA"
easer="{scaleEaser}"
alphaFrom="1" alphaTo="0"/>
</s:Parallel>
<s:Parallel id="parallelEffectB"
target="{newImage}"
duration="600"
effectEnd="effectHandler(event);">
<s:Move3D id="scaleEffectB"
applyChangesPostLayout="true"
zFrom="-5000" zTo="1"
easer="{scaleEaser}"/>
<s:Fade id="fadeEffectB"
easer="{scaleEaser}"
alphaFrom="0" alphaTo="1"/>
</s:Parallel>
<s:Power id="scaleEaser"
easeInFraction="0.1"
exponent="4"/>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<!--- logo -->
<s:HGroup top="8" left="10"
width="119" height="25"
baselineShift="-1"
gap="0"
buttonMode="true"
verticalAlign="justify"
click="openSelectionScreen();">
<s:Group>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#3F9AD8" />
</s:fill>
</s:Rect>
<s:Label text="ARDISIA"
fontSize="21"
color="#FFFFFF"
paddingTop="3" paddingLeft="4" paddingRight="3"
trackingLeft="0" trackingRight="0" />
</s:Group>
<s:Group>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#000000" />
</s:fill>
</s:Rect>
<s:Label text="LABS"
fontSize="21"
color="#FFFFFF"
paddingTop="3" paddingLeft="3" paddingRight="3"
trackingLeft="0" trackingRight="0" />
</s:Group>
</s:HGroup>
<!--- component selection buttons -->
<s:HGroup top="8" left="170"
verticalAlign="middle"
gap="6">
<s:Button id="backCmpSelectButton"
enabled="false"
toolTip="Previous"
skinClass="skins.LeftWhiteArrow"
click="changeComponentHandler(event);" />
<s:Button id="viewDemosSelect"
enabled="false"
width="200"
baselineShift="-1"
styleName="toolbarButton"
label="Component Demos"
icon="@Embed(source='icons/open-iconic-master/grid-four-up-2x.png')"
skinClass="skins.BlackButtonSkin"
click="openSelectionScreen();" />
<s:Button id="forwardCmpSelectButton"
enabled="false"
toolTip="Next"
skinClass="skins.RightWhiteArrow"
click="changeComponentHandler(event);" />
</s:HGroup>
<!--- top buttons -->
<s:HGroup id="headerButtonWrapper"
top="8" right="5"
verticalAlign="middle"
gap="10">
<s:Button id="reloadButton"
enabled="false"
toolTip="Reload Demo"
skinClass="skins.ReloadButtonSkin"
click="moduleLoader.url=null;setupAnimation('zoom');changeModule(componentsCollection[selectedIndex].label, false);" />
<s:Button id="viewSource"
label="View Source"
toolTip="View Source"
skinClass="skins.WhiteButtonSkin"
click="navigateToURL(new URLRequest('srcview/index.html'), '_blank');"/>
<s:Button id="aboutSelect"
label="About"
baselineShift="-1"
click="new AboutPane().floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);"
skinClass="skins.WhiteButtonSkin"/>
<s:DropDownList id="themeSelect"
width="150"
baselineShift="-1"
requireSelection="true"
selectedIndex="0"
labelField="label"
change="themeSelectHandler(event);"
skinClass="skins.WhiteDropDownListSkin">
<s:ArrayCollection>
<fx:Object label="Stockholm Theme" />
<fx:Object label="London Theme" />
<fx:Object label="Spark Theme" />
</s:ArrayCollection>
</s:DropDownList>
</s:HGroup>
<viewStack:ViewStack id="viewstack"
visible="false"
top="40" right="0" bottom="0" left="0"
creationPolicy="all"
backgroundAlpha="0"
selectedIndex="1">
<!--- modules -->
<s:ModuleLoader id="moduleLoader"
top="0" right="0" bottom="0" left="0"
ready="moduleHandler(event)"/>
<!--- selection screen -->
<s:SkinnableContainer>
<s:HGroup top="40" right="40" bottom="40" left="40"
verticalAlign="justify"
gap="0">
<!--- new components -->
<s:Group width="320" height="100%">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#F2F2F2"/>
</s:fill>
</s:Rect>
<s:VGroup top="35" right="0" bottom="0" left="0"
horizontalAlign="justify"
gap="20">
<s:Label text="New"
fontSize="26"
paddingLeft="33"/>
<s:List id="newCmpSelect"
height="100%"
focusEnabled="false"
borderVisible="false"
contentBackgroundAlpha="0"
change="setupAnimation('zoom');changeModule(newCmpSelect.selectedItem.label);">
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
gap="6"
paddingLeft="20" paddingBottom="45" paddingRight="20"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer autoDrawBackground="false"
height="95">
<s:states>
<s:State name="normal" />
<s:State name="hovered" stateGroups="hoveredGroup"/>
<s:State name="selectedAndHovered" stateGroups="selectedGroup, hoveredGroup"/>
<s:State name="selected" stateGroups="selectedGroup"/>
</s:states>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0" alpha.hoveredGroup="1"
color="{outerDocument.getStyle('rollOverColor')}"/>
</s:fill>
</s:Rect>
<s:BitmapImage top="15" left="20"
source="{data.icon}" />
<s:VGroup top="15" left="65" right="10" bottom="10"
horizontalAlign="justify">
<s:Label id="labelDisplay"
width="100%"
color="#000000"
maxDisplayedLines="1"
fontSize="18"
text="{data.label}"/>
<s:Label id="description"
width="100%"
lineHeight="140%"
lineBreak="toFit"
color="#000000"
fontSize="12"
text="{data.description}"/>
</s:VGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:VGroup>
</s:Group>
<!--- all components -->
<s:Group width="320" height="100%">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>
<s:VGroup top="35" right="0" bottom="0" left="0"
horizontalAlign="justify"
gap="15">
<s:Label text="All Components"
fontSize="26"
paddingLeft="28"/>
<s:Group>
<textInput:TextInput id="filterInput"
left="28" right="20"
prompt="Filter..."
change="filterCmps(event)"
keyDown="filterInput_keyDownHandler(event)"/>
</s:Group>
<s:List id="allCmpList"
focusEnabled="false"
height="100%"
borderVisible="false"
changing="if(allCmpList.dataProvider[event.newIndex].header){event.preventDefault();}"
change="FlexGlobals.topLevelApplication.setupAnimation('zoom');FlexGlobals.topLevelApplication.changeModule(allCmpList.selectedItem.label);">
<s:layout>
<s:VerticalLayout gap="0"
horizontalAlign="justify"
paddingBottom="45"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer autoDrawBackground="false">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
img.source = value.header && value.icon ? value.icon : null;
labelDisplay.text = value.label ? String(value.label) : String(value.category);
labelDisplay.setStyle("fontWeight", value.header ? "bold" : "normal");
wrapper.left = value.header ? 13 : 29;
background.visible = !value.header;
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" stateGroups="hoveredGroup"/>
<s:State name="selectedAndHovered" stateGroups="selectedGroup, hoveredGroup"/>
<s:State name="selected" stateGroups="selectedGroup"/>
</s:states>
<s:Rect id="background"
top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0" alpha.hoveredGroup="1"
color.hovered="{outerDocument.getStyle('rollOverColor')}"/>
</s:fill>
</s:Rect>
<s:HGroup id="wrapper"
top="7" right="10" bottom="5"
verticalAlign="middle"
gap="8"
paddingLeft="20">
<s:BitmapImage id="img"/>
<s:Label id="labelDisplay"
maxDisplayedLines="1"
color="#000000"
fontSize="13"/>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:VGroup>
</s:Group>
<!--- featured components -->
<s:Group width="100%" height="100%"
minWidth="320">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#F2F2F2"/>
</s:fill>
</s:Rect>
<s:VGroup top="35" right="0" bottom="0" left="0"
horizontalAlign="justify"
gap="20">
<s:Label text="Featured"
fontSize="26"
paddingLeft="33" />
<s:List id="featuredCmpSelect"
width="100%" height="100%"
focusEnabled="false"
borderVisible="false"
contentBackgroundAlpha="0"
change="setupAnimation('zoom');changeModule(featuredCmpSelect.selectedItem.label);">
<s:layout>
<s:TileLayout requestedColumnCount="2"
horizontalAlign="justify"
horizontalGap="0" verticalGap="6"
columnAlign="justifyUsingWidth"
orientation="columns"
paddingRight="20" paddingLeft="20" paddingBottom="45"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100" height="95"
clipAndEnableScrolling="false">
<s:states>
<s:State name="normal" />
<s:State name="hovered" stateGroups="hoveredGroup"/>
<s:State name="selectedAndHovered" stateGroups="selectedGroup, hoveredGroup"/>
<s:State name="selected" stateGroups="selectedGroup"/>
</s:states>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0" alpha.hoveredGroup="1"
color="{outerDocument.getStyle('rollOverColor')}"/>
</s:fill>
</s:Rect>
<s:BitmapImage top="15" left="20"
source="{data.icon}"/>
<s:VGroup top="15" left="65" right="10" bottom="10"
horizontalAlign="justify">
<s:Label id="labelDisplay"
color="#000000"
maxDisplayedLines="1"
fontSize="18"
text="{data.label}"/>
<s:Label id="description"
lineHeight="140%"
lineBreak="toFit"
color="#000000"
maxDisplayedLines="3"
fontSize="12"
text="{data.description}"/>
</s:VGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:VGroup>
</s:Group>
</s:HGroup>
</s:SkinnableContainer>
</viewStack:ViewStack>
</s:Application>