<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="100%" height="100%"
backgroundColor="#000000"
viewSourceURL="srcview/index.html">
<mx:Style>
.doubleBorder
{
borderSkin: ClassReference();
borderTopThickness: 3;
borderTopColor: #3ad2ed;
borderRightThickness: 3;
borderRightColor: #3399CC;
borderBottomThickness: 3;
borderBottomColor: #FF6600;
borderLeftThickness: 3;
borderLeftColor: #99CC00;
backgroundColor: #FFFFFF;
backgroundAlpha: 90;
}
.formH1,
{
fontWeight: bold;
fontSize: 15;
}
.formH2
{
fontWeight: bold;
fontSize: 12;
}
LinkButton
{
fontSize: 20;
color: #FFFFFF;
rollOverColor: #ffffff;
textRollOverColor: #000000;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.events.NumericStepperEvent;
import mx.events.ColorPickerEvent;
private const DEFAULT_THICKNESS : uint = 3;
private const MIN_THICKNESS: uint = 1;
private const MAX_THICKNESS: uint = 10;
private function showDoubleBorderHandler(event: ItemClickEvent):void
{
switch(event.currentTarget.selectedValue)
{
case 1:
standardCanvas.setStyle("doubleBorder", false);
standardVBox.setStyle("doubleBorder", false);
standardHBox.setStyle("doubleBorder", false);
standardForm.setStyle("doubleBorder", false);
break;
case 2:
standardCanvas.setStyle("doubleBorder", true);
standardVBox.setStyle("doubleBorder", true);
standardHBox.setStyle("doubleBorder", true);
standardForm.setStyle("doubleBorder", true);
break;
}
}
private function showBorderHandler(event: Event):void
{
switch(event.target)
{
case cb_borderTop:
ns_borderTop.enabled
= cp_borderTop.enabled
= cb_borderTop.selected
if (cb_borderTop.selected)
{
standardCanvas.setStyle("borderTopThickness", ns_borderTop.value);
standardVBox.setStyle("borderTopThickness", ns_borderTop.value);
standardHBox.setStyle("borderTopThickness", ns_borderTop.value);
standardForm.setStyle("borderTopThickness", ns_borderTop.value);
}
else
{
standardCanvas.setStyle("borderTopThickness", 0);
standardVBox.setStyle("borderTopThickness", 0);
standardHBox.setStyle("borderTopThickness", 0);
standardForm.setStyle("borderTopThickness", 0);
}
break;
case cb_borderRight:
ns_borderRight.enabled
= cp_borderRight.enabled
= cb_borderRight.selected
if (cb_borderRight.selected)
{
standardCanvas.setStyle("borderRightThickness", ns_borderRight.value);
standardVBox.setStyle("borderRightThickness", ns_borderRight.value);
standardHBox.setStyle("borderRightThickness", ns_borderRight.value);
standardForm.setStyle("borderRightThickness", ns_borderRight.value);
}
else
{
standardCanvas.setStyle("borderRightThickness", 0);
standardVBox.setStyle("borderRightThickness", 0);
standardHBox.setStyle("borderRightThickness", 0);
standardForm.setStyle("borderRightThickness", 0);
}
break;
case cb_borderBottom:
ns_borderBottom.enabled
= cp_borderBottom.enabled
= cb_borderBottom.selected
if (cb_borderBottom.selected)
{
standardCanvas.setStyle("borderBottomThickness", ns_borderBottom.value);
standardVBox.setStyle("borderBottomThickness", ns_borderBottom.value);
standardHBox.setStyle("borderBottomThickness", ns_borderBottom.value);
standardForm.setStyle("borderBottomThickness", ns_borderBottom.value);
}
else
{
standardCanvas.setStyle("borderBottomThickness", 0);
standardVBox.setStyle("borderBottomThickness", 0);
standardHBox.setStyle("borderBottomThickness", 0);
standardForm.setStyle("borderBottomThickness", 0);
}
break;
case cb_borderLeft:
ns_borderLeft.enabled
= cp_borderLeft.enabled
= cb_borderLeft.selected
if (cb_borderLeft.selected)
{
standardCanvas.setStyle("borderLeftThickness", ns_borderLeft.value);
standardVBox.setStyle("borderLeftThickness", ns_borderLeft.value);
standardHBox.setStyle("borderLeftThickness", ns_borderLeft.value);
standardForm.setStyle("borderLeftThickness", ns_borderLeft.value);
}
else
{
standardCanvas.setStyle("borderLeftThickness", 0);
standardVBox.setStyle("borderLeftThickness", 0);
standardHBox.setStyle("borderLeftThickness", 0);
standardForm.setStyle("borderLeftThickness", 0);
}
break;
default:
}
}
private function borderThicknessHandler (event: NumericStepperEvent): void
{
var thickness: uint = event.target.value;
switch(event.target)
{
case ns_borderTop:
standardCanvas.setStyle("borderTopThickness", thickness);
standardVBox.setStyle("borderTopThickness", thickness);
standardHBox.setStyle("borderTopThickness", thickness);
standardForm.setStyle("borderTopThickness", thickness);
break;
case ns_borderRight:
standardCanvas.setStyle("borderRightThickness", thickness);
standardVBox.setStyle("borderRightThickness", thickness);
standardHBox.setStyle("borderRightThickness", thickness);
standardForm.setStyle("borderRightThickness", thickness);
break;
case ns_borderBottom:
standardCanvas.setStyle("borderBottomThickness", thickness);
standardVBox.setStyle("borderBottomThickness", thickness);
standardHBox.setStyle("borderBottomThickness", thickness);
standardForm.setStyle("borderBottomThickness", thickness);
break;
case ns_borderLeft:
standardCanvas.setStyle("borderLeftThickness", thickness);
standardVBox.setStyle("borderLeftThickness", thickness);
standardHBox.setStyle("borderLeftThickness", thickness);
standardForm.setStyle("borderLeftThickness", thickness);
break;
default:
}
}
private function changeColor (event: ColorPickerEvent): void
{
var color: uint = ColorPicker(event.target).selectedColor;
switch(event.target)
{
case cp_borderTop:
standardCanvas.setStyle("borderTopColor", color);
standardVBox.setStyle("borderTopColor", color);
standardHBox.setStyle("borderTopColor", color);
standardForm.setStyle("borderTopColor", color);
break;
case cp_borderRight:
standardCanvas.setStyle("borderRightColor", color);
standardVBox.setStyle("borderRightColor", color);
standardHBox.setStyle("borderRightColor", color);
standardForm.setStyle("borderRightColor", color);
break;
case cp_borderBottom:
standardCanvas.setStyle("borderBottomColor", color);
standardVBox.setStyle("borderBottomColor", color);
standardHBox.setStyle("borderBottomColor", color);
standardForm.setStyle("borderBottomColor", color);
break;
case cp_borderLeft:
standardCanvas.setStyle("borderLeftColor", color);
standardVBox.setStyle("borderLeftColor", color);
standardHBox.setStyle("borderLeftColor", color);
standardForm.setStyle("borderLeftColor", color);
break;
default:
}
}
private function gotoWSBlog( ):void
{
var url:URLRequest = new URLRequest( "http://www.websector.de/blog/" );
navigateToURL(url);
}
]]>
</mx:Script>
<mx:states>
<mx:State name="addVBox">
<mx:SetProperty target="{secondVBoxContent}" name="label" value="Remove Content" />
<mx:AddChild relativeTo="{standardVBox}" position="firstChild">
<mx:Text id="thirdVBoxContent"
text="Content within a VBox" />
</mx:AddChild>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="addVBox">
<mx:Sequence>
<mx:RemoveChildAction />
<mx:Resize target="{standardVBox}"/>
<mx:AddChildAction />
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="addVBox" toState="*">
<mx:Sequence>
<mx:RemoveChildAction />
<mx:Resize target="{standardVBox}"/>
<mx:AddChildAction />
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:HBox width="100%" horizontalGap="20"
paddingTop="20" paddingRight="20" paddingBottom="20" paddingLeft="20">
<mx:Form id="standardForm"
width="250" styleName="doubleBorder" verticalGap="10"
paddingTop="30" paddingRight="40" paddingBottom="40" paddingLeft="35">
<mx:Text text="Border properties"
styleName="formH1" />
<mx:RadioButtonGroup id="borderProps" itemClick="showDoubleBorderHandler(event)"/>
<mx:RadioButton id="rb_simpleBorder"
value="1" groupName="borderProps"
label="Single Border" />
<mx:RadioButton id="rb_doubleBorder"
value="2" groupName="borderProps" selected="true"
label="Double Border" />
<mx:Text text="Border top"
styleName="formH2" />
<mx:CheckBox id="cb_borderTop"
label="enabled" selected="true"
change="showBorderHandler(event)" />
<mx:FormItem id="fi_borderTop"
label="Thickness"
paddingLeft="10">
<mx:NumericStepper id="ns_borderTop"
value="{DEFAULT_THICKNESS}" stepSize="1" minimum="{MIN_THICKNESS}" maximum="{MAX_THICKNESS}"
change="borderThicknessHandler(event)"/>
</mx:FormItem>
<mx:FormItem id="fi_borderTopColor"
label="Color"
paddingLeft="10">
<mx:ColorPicker id="cp_borderTop"
labelField="Color" selectedColor="0x3ad2ed"
change="changeColor(event)" />
</mx:FormItem>
<mx:Text text="Border right"
styleName="formH2" />
<mx:CheckBox id="cb_borderRight"
label="enabled" selected="true"
change="showBorderHandler(event)" />
<mx:FormItem id="fi_borderRight"
label="Thickness"
paddingLeft="10">
<mx:NumericStepper id="ns_borderRight"
value="{DEFAULT_THICKNESS}" stepSize="1" minimum="{MIN_THICKNESS}" maximum="{MAX_THICKNESS}"
change="borderThicknessHandler(event)"/>
</mx:FormItem>
<mx:FormItem id="fi_borderRightColor"
label="Color"
paddingLeft="10">
<mx:ColorPicker id="cp_borderRight"
labelField="Color" selectedColor="0x3399CC"
change="changeColor(event)" />
</mx:FormItem>
<mx:Text text="Border bottom"
styleName="formH2" />
<mx:CheckBox id="cb_borderBottom"
label="enabled" selected="true"
change="showBorderHandler(event)" />
<mx:FormItem id="fi_borderBottom"
label="Thickness"
paddingLeft="10">
<mx:NumericStepper id="ns_borderBottom"
value="{DEFAULT_THICKNESS}" stepSize="1" minimum="{MIN_THICKNESS}" maximum="{MAX_THICKNESS}"
change="borderThicknessHandler(event)"/>
</mx:FormItem>
<mx:FormItem id="fi_borderBottomColor"
label="Color"
paddingLeft="10">
<mx:ColorPicker id="cp_borderBottom"
labelField="Color" selectedColor="0xFF6600"
change="changeColor(event)" />
</mx:FormItem>
<mx:Text text="Border left"
styleName="formH2" />
<mx:CheckBox id="cb_borderLeft"
label="enabled" selected="true"
change="showBorderHandler(event)" />
<mx:FormItem id="fi_borderLeft"
label="Thickness"
paddingLeft="10">
<mx:NumericStepper id="ns_borderLeft"
value="{DEFAULT_THICKNESS}" stepSize="1" minimum="{MIN_THICKNESS}" maximum="{MAX_THICKNESS}"
change="borderThicknessHandler(event)"/>
</mx:FormItem>
<mx:FormItem id="fi_borderLeftColor"
label="Color"
paddingLeft="10">
<mx:ColorPicker id="cp_borderLeft"
labelField="Color" selectedColor="0x99CC00"
change="changeColor(event)" />
</mx:FormItem>
</mx:Form>
<mx:VBox width="100%" height="100%" horizontalAlign="center" verticalGap="20">
<mx:LinkButton
label="Skinning Flex containers using WSDoubleBorderSkin"
height="50"
click="gotoWSBlog()"/>
<mx:Canvas id="standardCanvas"
styleName="doubleBorder"
width="400" height="150">
<mx:Text text="Content within a Canvas"
horizontalCenter="0" verticalCenter="0" />
</mx:Canvas>
<mx:VBox id="standardVBox"
styleName="doubleBorder"
width="200" verticalAlign="middle" horizontalAlign="center" verticalGap="50" paddingTop="50" paddingBottom="50">
<mx:Text id="firstVBoxContent"
text="Content within a VBox" />
<mx:Button id="secondVBoxContent"
click="currentState= (currentState=='addVBox') ? '' : 'addVBox';"
label="Add Content" height="50"/>
</mx:VBox>
<mx:HBox id="standardHBox"
styleName="doubleBorder"
width="600" height="150" verticalAlign="middle" horizontalAlign="center" horizontalGap="50">
<mx:Text text="Content within a HBox" />
<mx:Text text="Content within a HBox" />
<mx:Text text="Content within a HBox" />
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Application>