<?xml version="1.0" encoding="utf-8"?>
<s:Module 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:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:containers="containers.*"
xmlns:rating="ardisia.components.rating.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import ardisia.components.rating.themes.spark.skins.RatingSkin;
import components.rating.RatingSquareSkin;
import flashx.textLayout.conversion.TextConverter;
public function creationComplete():void
{
}
private function dataTipFormatFunction(value:Number):Object
{
return TextConverter.importToFlow(nf.format(value) + " <b>Renderers!</b>",
TextConverter.TEXT_FIELD_HTML_FORMAT);
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<s:NumberFormatter id="nf"
trailingZeros="false"/>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="Rating Description"
description="The Ardisia Rating Component enables users to select a rating by interacting with a series of item renderers. Fully skinnable and customizable. Included skins define item renderers that use a star pattern, but they can be re-skinned to any shape."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>Configuration</data:label>
<data:content>
<s:FormHeading label="Properties:"/>
<s:FormItem label="Value:">
<s:NumericStepper id="valueStepper"
width="100"
maximum="{maxValueStepper.maximum}"
minimum="0"
value="{rating.value}"
snapInterval="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The committed value for the rating. Typically selected via user interaction but can also be programmatically set."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Max Value:">
<s:NumericStepper id="maxValueStepper"
width="100"
maximum="20" minimum="1" value="5"
snapInterval="0.1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Max value and the total number of renderers."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Snap Interval:">
<s:HSlider id="snapValueStepper"
width="100"
minimum="0" maximum="1"
value="0.1"
snapInterval="0.1" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The numerical step size."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingBottom="6" paddingTop="6"/>
<s:FormHeading label="Layout:"/>
<s:FormItem label="Gap:" fontWeight="normal">
<s:HSlider id="gapStepper"
width="100"
maximum="20" minimum="-10"
value="2"
snapInterval="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Layout gap between renderers."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Layout Axis:">
<s:DropDownList id="layoutAxis"
width="100"
requireSelection="true"
selectedIndex="0"
change="directionFormItem.enabled=layoutAxis.selectedIndex==1;">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>horizontal</fx:String>
<fx:String>vertical</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The direction that the renderers are laid out. For vertical layouts, the direction can be set below."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="directionFormItem"
label="Direction:"
enabled="false">
<s:DropDownList id="vDirection"
width="100"
labelField="label"
requireSelection="true"
selectedIndex="0">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object label="top to bottom" data="ttb" />
<fx:Object label="bottom to top" data="btt" />
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
</s:FormItem>
<s:FormItem label="Explicit Size:">
<s:CheckBox id="explicitSelect"
selected="false"
change="widthFormItem.enabled=heightFormItem.enabled=alignmentFormItem.enabled=explicitSelect.selected;if (explicitSelect.selected) {rating.height=heightStepper.value;rating.width=widthStepper.value;} else {rating.explicitWidth=rating.explicitHeight=NaN;}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to set the component size explicitly. False to use measured dimensions."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="widthFormItem"
label="Width:"
enabled="{explicitSelect.selected}">
<s:HSlider id="widthStepper"
width="100"
maximum="500" minimum="150"
value="200"
snapInterval="1"
change="rating.width=widthStepper.value"/>
</s:FormItem>
<s:FormItem id="heightFormItem"
label="Height:"
enabled="{explicitSelect.selected}">
<s:HSlider id="heightStepper"
width="100"
maximum="500" minimum="50"
value="200"
snapInterval="1"
change="rating.height=heightStepper.value"/>
</s:FormItem>
<s:FormItem id="alignmentFormItem"
label="Alignment:"
enabled="false">
<s:DropDownList id="alignment"
width="100"
requireSelection="true"
selectedIndex="1">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>noJustify</fx:String>
<fx:String>justifyUsingGap</fx:String>
<fx:String>justifyUsingSpace</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="When explicitly sized, the renderers can be automatically laid out using the gaps or the entire available space."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Editable:">
<s:CheckBox id="editableSelect"
selected="true"
change="toolTipFormItem.enabled=formatFnFormItem.enabled=hideDelayFormItem.enabled=editableSelect.selected" />
</s:FormItem>
<separators:HSeparator width="100%"
paddingBottom="6" paddingTop="6"/>
<s:FormHeading label="Data Tip:"/>
<s:FormItem id="toolTipFormItem"
label="Data Tip:">
<s:CheckBox id="showTipSelect"
selected="true"/>
</s:FormItem>
<s:FormItem id="formatFnFormItem"
enabled="{showTipSelect.selected}"
label="Format Fn:">
<s:CheckBox id="formatFnSelect"
change="if(formatFnSelect.selected){rating.dataTipFormatFunction=dataTipFormatFunction}else{rating.dataTipFormatFunction=null;}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to use a custom format function for the data tip. This custom function returns the value in terms of the number of stars."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="hideDelayFormItem"
enabled="{showTipSelect.selected}"
label="Hide Delay:">
<s:HSlider id="hideDelaySelect"
snapInterval="1"
minimum="0" maximum="1000" value="350"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Delay before the data tip is hidden."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingBottom="6" paddingTop="6"/>
<s:FormHeading label="Skinning:"/>
<s:FormItem label="Star Skin:">
<s:RadioButton id="starSkinSelect"
groupName="shapeSkinSelect"
selected="true"
change="if (starSkinSelect.selected){rating.setStyle('skinClass', ardisia.components.rating.themes.spark.skins.RatingSkin);}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Default item renderer defined in the skins. Can be easily modified to new shapes or sizes."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Square Skin:">
<s:RadioButton id="squareSkinSelect"
groupName="shapeSkinSelect"
selected="false"
change="if (squareSkinSelect.selected){rating.setStyle('skinClass', components.rating.RatingSquareSkin);}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Modified item renderer. Designed to illustrate how simple it is to modify the shape."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Example</data:tabLabel>
<data:exampleDescription>Single Rating component using a star skin. Initially, ratings can be changed in increments of 0.1. Change the 'snapInterval' property to change the increment value. Supports keyboard interaction when focused.</data:exampleDescription>
<data:primaryContent>
<s:BorderContainer horizontalCenter="0" verticalCenter="0">
<rating:Rating id="rating"
top="17" right="17" bottom="17" left="17"
editable="{editableSelect.selected}"
gap="{gapStepper.value}"
layoutAxis="{layoutAxis.selectedItem}"
value="{valueStepper.value}"
maxValue="{maxValueStepper.value}"
snapInterval="{snapValueStepper.value}"
alignment="{alignment.selectedItem}"
showDataTip="{showTipSelect.selected}"
dataTipHideDelay="{hideDelaySelect.value}"
verticalLayoutDirection="{vDirection.selectedItem.data}" />
</s:BorderContainer>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>