http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..4b06e54 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml @@ -0,0 +1,170 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- Custom Spark Panel Skin created for Tour de Flex. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" + blendMode.disabled="layer"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Panel")] + ]]> + </fx:Metadata> + + <fx:Script> + /* Define the skin elements that should not be colorized. + For panel, border and title backround are skinned, but the content area and title text are not. */ + static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"]; + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ + static private const contentFill:Array = []; + + /** + * @inheritDoc + */ + override public function get contentItems():Array {return contentFill}; + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + <s:State name="normalWithControlBar" /> + <s:State name="disabledWithControlBar" /> + </s:states> + + <!-- drop shadow --> + <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" + angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> + + <!-- layer 1: border --> + <s:Rect left="0" right="0" top="0" bottom="0"> + <s:stroke> + <s:SolidColorStroke color="0" alpha="0.50" weight="1" /> + </s:stroke> + </s:Rect> + + + <!-- layer 2: background fill --> + <s:Rect left="0" right="0" bottom="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: contents --> + <!--- contains the vertical stack of titlebar content and controlbar --> + <s:Group left="1" right="1" top="1" bottom="1" > + <s:layout> + <s:VerticalLayout gap="0" horizontalAlign="justify" /> + </s:layout> + + <s:Group id="topGroup" > + <!-- layer 0: title bar fill --> + <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex --> + <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" > + <s:fill> + <s:SolidColor color="0x000000" /> + </s:fill> + </s:Rect> + + <!-- layer 1: title bar highlight --> + <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" > + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xEAEAEA" /> + <s:GradientEntry color="0xD9D9D9" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 2: title bar divider --> + <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"> + <s:fill> + <s:SolidColor color="0xC0C0C0" /> + </s:fill> + </s:Rect> + + <!-- layer 3: text --> + <!--- Defines the appearance of the PanelSkin class's title bar. --> + <!-- Note: The title text display has been slightly modified for Tour de Flex. --> + <s:Label id="titleDisplay" lineBreak="explicit" + left="9" top="1" bottom="0" minHeight="30" + verticalAlign="middle" fontWeight="bold" color="#E2E2E2"> + </s:Label> + </s:Group> + + <!-- + Note: setting the minimum size to 0 here so that changes to the host component's + size will not be thwarted by this skin part's minimum size. This is a compromise, + more about it here: http://bugs.adobe.com/jira/browse/SDK-21143 + --> + <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"> + </s:Group> + + <s:Group id="bottomGroup" minWidth="0" minHeight="0" + includeIn="normalWithControlBar, disabledWithControlBar" > + + <!-- layer 0: control bar background --> + <!-- Note: We are skinning this to be the gradient in case we do specify control + bar content, but it will only display if there's a controlBarContent + property specified.--> + <s:Rect left="0" right="0" bottom="0" top="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 1: control bar divider line --> + <s:Rect left="0" right="0" top="0" height="1" > + <s:fill> + <s:SolidColor color="0xCDCDCD" /> + </s:fill> + </s:Rect> + + <!-- layer 2: control bar --> + <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + </s:Group> + </s:Group> + </s:Group> +</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml new file mode 100644 index 0000000..8ba04d8 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<!-- BitmapGraphicExample.mxml --> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" + width="694" height="277"> + <s:Panel title="BitmapImage Sample" + width="100%" height="100%" + horizontalCenter="0" verticalCenter="0" skinClass="skins.TDFPanelSkin"> + <s:layout> + <s:HorizontalLayout paddingLeft="15" paddingRight="15" paddingTop="15" paddingBottom="15"/> + </s:layout> + <s:VGroup> + <s:ComboBox id="fillModes" selectedItem="repeat"> + <s:dataProvider> + <s:ArrayCollection> + <fx:String>scale</fx:String> + <fx:String>clip</fx:String> + <fx:String>repeat</fx:String> + </s:ArrayCollection> + </s:dataProvider> + </s:ComboBox> + <s:ComboBox id="blends" selectedItem="normal"> + <s:dataProvider> + <s:ArrayCollection> + <fx:String>add</fx:String> + <fx:String>alpha</fx:String> + <fx:String>difference</fx:String> + <fx:String>erase</fx:String> + <fx:String>hardlight</fx:String> + <fx:String>invert</fx:String> + <fx:String>layer</fx:String> + <fx:String>lighten</fx:String> + <fx:String>multiply</fx:String> + <fx:String>normal</fx:String> + <fx:String>overlay</fx:String> + <fx:String>screen</fx:String> + <fx:String>shader</fx:String> + <fx:String>subtract</fx:String> + </s:ArrayCollection> + </s:dataProvider> + </s:ComboBox> + <s:CheckBox id="cbSmooth" label="Smooth?"/> + </s:VGroup> + + <!-- Single image, scaled to fit specified dimensions. --> + <s:Graphic x="150" y="0"> + <s:BitmapImage id="bg2" source="@Embed('assets/AirIcon12x12.gif')" width="120" height="120" fillMode="{fillModes.selectedItem}" + smooth="{cbSmooth.selected}" blendMode="{blends.selectedItem}"/> + </s:Graphic> + + + <s:Label color="0x323232" width="200" text="A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file."/> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml new file mode 100644 index 0000000..0e89a7b --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml @@ -0,0 +1,46 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<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"> + + <s:Panel title="Ellipse Graphic Sample" skinClass="skins.TDFPanelSkin" + width="100%" height="100%"> + + <s:Graphic horizontalCenter="0" verticalCenter="0"> + <s:Ellipse height="100" width="250"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="5"/> + </s:stroke> + <s:fill> + <s:RadialGradient> + <s:entries> + <s:GradientEntry color="0x336699" ratio="0.33" alpha="0.8"/> + <s:GradientEntry color="0x339999" ratio="0.66" alpha="0.8"/> + <s:GradientEntry color="0x323232" ratio="0.99" alpha="0.8"/> + </s:entries> + </s:RadialGradient> + </s:fill> + </s:Ellipse> + </s:Graphic> + <s:Label right="25" top="10" width="270" color="0x323232" text="The Ellipse class is a filled graphic element that draws an ellipse. Graphic +objects are placed in a Graphic tag which defines the root of an FXG document."/> + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml new file mode 100644 index 0000000..9d5368a --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml @@ -0,0 +1,96 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<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"> + + + <s:Panel title="Line Graphic Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin"> + <s:Group left="133" top="100"> + + <s:Line xFrom="0" xTo="0" yFrom="0" yTo="100"> + <!-- Define the border color of the line. --> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="1" joints="miter"/> + </s:stroke> + </s:Line> + + <s:Line xFrom="6" xTo="6" yFrom="0" yTo="100" > + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="1" joints="miter"/> + </s:stroke> + </s:Line> + + <s:Line xFrom="12" xTo="12" yFrom="0" yTo="100"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="2" joints="miter"/> + </s:stroke> + </s:Line> + + <s:Line xFrom="20" xTo="20" yFrom="0" yTo="100"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="3" joints="miter"/> + </s:stroke> + </s:Line> + + <s:Line xFrom="30" xTo="30" yFrom="0" yTo="100"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="5" joints="miter"/> + </s:stroke> + </s:Line> + + <s:Line xFrom="43" xTo="43" yFrom="0" yTo="100"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="8" joints="miter"/> + </s:stroke> + </s:Line> + + <s:Line xFrom="58" xTo="58" yFrom="0" yTo="100"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="13" joints="miter"/> + </s:stroke> + </s:Line> + + <s:Line xFrom="84" xTo="84" yFrom="0" yTo="100"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="21" joints="miter"/> + </s:stroke> + </s:Line> + + <s:Line xFrom="123" xTo="123" yFrom="0" yTo="100" > + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="34" joints="bevel" /> + </s:stroke> + </s:Line> + <s:Line xFrom="168" xTo="168" yFrom="0" yTo="100" x="3" y="0"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="45"/> + </s:stroke> + </s:Line> + <s:Line xFrom="210" xTo="210" yFrom="0" yTo="100" x="19" y="0"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="60"/> + </s:stroke> + </s:Line> + </s:Group> + <s:Label color="0x323232" right="20" top="15" width="250" text="The Line class is a graphic element that draws a line between two points. +The default stroke for a line is undefined; therefore, if you do not specify the stroke, the line is invisible."/> + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml new file mode 100644 index 0000000..a131ac2 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml @@ -0,0 +1,87 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<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"> + <fx:Script> + <![CDATA[ + import skins.TDFPanelSkin; + ]]> + </fx:Script> + + <s:Panel title="Rect Graphic Sample" skinClass="skins.TDFPanelSkin" + width="100%" height="100%"> + + + <s:Group left="15" top="20"> + <s:Graphic x="0" y="0"> + <!-- Draw rectangle with square corners. --> + <s:Rect height="100" width="150"> + <s:stroke> + <s:SolidColorStroke color="0x000000" weight="2"/> + </s:stroke> + <s:fill> + <s:SolidColor color="0x336699"/> + </s:fill> + </s:Rect> + </s:Graphic> + + <s:Graphic x="250" y="0"> + <!-- Draw rectangle with rounded corners. --> + <s:Rect height="100" width="150" radiusX="25" radiusY="25"> + <s:stroke> + <s:SolidColorStroke color="0x336699" weight="2"/> + </s:stroke> + <s:fill> + <s:RadialGradient> + <s:entries> + <s:GradientEntry color="0x336699" alpha="0.5"/> + <s:GradientEntry color="0x323232" alpha="0.5"/> + <s:GradientEntry color="0xE2E2E2" alpha="0.5"/> + </s:entries> + </s:RadialGradient> + </s:fill> + </s:Rect> + </s:Graphic> + + <s:Graphic x="500" y="0"> + <s:Rect height="100" width="150"> + <s:stroke> + <s:LinearGradientStroke weight="6" rotation="90"> + <s:GradientEntry color="0x323232" alpha="0.8"/> + <s:GradientEntry color="0x336699" alpha="0.8"/> + </s:LinearGradientStroke> + </s:stroke> + <s:fill> + <s:RadialGradient> + <s:entries> + <s:GradientEntry color="0x336699"/> + <s:GradientEntry color="0x323232"/> + <s:GradientEntry color="0xE2E2E2"/> + </s:entries> + </s:RadialGradient> + </s:fill> + </s:Rect> + </s:Graphic> + + </s:Group> + <s:Label top="165" horizontalCenter="0" width="40%" text="The Rect class is a filled graphic element that draws a rectangle."/> + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml new file mode 100644 index 0000000..f7aacd3 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<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"> + + <s:Panel title="RichText Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin"> + <s:layout> + <s:HorizontalLayout paddingLeft="8" paddingRight="8" paddingTop="8"/> + </s:layout> + <s:Group left="10" right="10" top="10" bottom="10"> + <s:RichText x="0" y="0" width="75" fontFamily="Times" fontSize="15" textRotation="rotate90"> + <s:content>Hello World!</s:content> + </s:RichText> + + <s:Group x="100" y="0"> + <s:RichText width="100" textAlign="justify" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"> + <s:content>Hello World! This is a justified paragraph of text in a RichText control. It has a border around it drawn by a Rect inside a Group.</s:content> + </s:RichText> + <s:Rect width="100%" height="100%"> + <s:stroke> + <s:SolidColorStroke color="blue"/> + </s:stroke> + </s:Rect> + </s:Group> + + <s:Group x="225" y="0" > + <s:RichText width="140" height="120" columnCount="2" columnGap="10"> + <s:content><s:span fontWeight="bold">Hello World!</s:span> This is a paragraph of text in 2 columns. It is about 20 words long, which should be enough to cause a few line breaks.</s:content> + </s:RichText> + <s:Rect width="100%" height="100%"> + <s:stroke> + <s:SolidColorStroke color="blue"/> + </s:stroke> + </s:Rect> + </s:Group> + </s:Group> + <s:Label width="270" color="0x323232" text="RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images. For performance reasons, it does not support scrolling, selection, editing, clickable hyperlinks, or images loaded from URLs. If you need those capabilities, see the RichEditableText class."/> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..4b06e54 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml @@ -0,0 +1,170 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- Custom Spark Panel Skin created for Tour de Flex. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" + blendMode.disabled="layer"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Panel")] + ]]> + </fx:Metadata> + + <fx:Script> + /* Define the skin elements that should not be colorized. + For panel, border and title backround are skinned, but the content area and title text are not. */ + static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"]; + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ + static private const contentFill:Array = []; + + /** + * @inheritDoc + */ + override public function get contentItems():Array {return contentFill}; + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + <s:State name="normalWithControlBar" /> + <s:State name="disabledWithControlBar" /> + </s:states> + + <!-- drop shadow --> + <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" + angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> + + <!-- layer 1: border --> + <s:Rect left="0" right="0" top="0" bottom="0"> + <s:stroke> + <s:SolidColorStroke color="0" alpha="0.50" weight="1" /> + </s:stroke> + </s:Rect> + + + <!-- layer 2: background fill --> + <s:Rect left="0" right="0" bottom="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: contents --> + <!--- contains the vertical stack of titlebar content and controlbar --> + <s:Group left="1" right="1" top="1" bottom="1" > + <s:layout> + <s:VerticalLayout gap="0" horizontalAlign="justify" /> + </s:layout> + + <s:Group id="topGroup" > + <!-- layer 0: title bar fill --> + <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex --> + <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" > + <s:fill> + <s:SolidColor color="0x000000" /> + </s:fill> + </s:Rect> + + <!-- layer 1: title bar highlight --> + <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" > + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xEAEAEA" /> + <s:GradientEntry color="0xD9D9D9" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 2: title bar divider --> + <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"> + <s:fill> + <s:SolidColor color="0xC0C0C0" /> + </s:fill> + </s:Rect> + + <!-- layer 3: text --> + <!--- Defines the appearance of the PanelSkin class's title bar. --> + <!-- Note: The title text display has been slightly modified for Tour de Flex. --> + <s:Label id="titleDisplay" lineBreak="explicit" + left="9" top="1" bottom="0" minHeight="30" + verticalAlign="middle" fontWeight="bold" color="#E2E2E2"> + </s:Label> + </s:Group> + + <!-- + Note: setting the minimum size to 0 here so that changes to the host component's + size will not be thwarted by this skin part's minimum size. This is a compromise, + more about it here: http://bugs.adobe.com/jira/browse/SDK-21143 + --> + <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"> + </s:Group> + + <s:Group id="bottomGroup" minWidth="0" minHeight="0" + includeIn="normalWithControlBar, disabledWithControlBar" > + + <!-- layer 0: control bar background --> + <!-- Note: We are skinning this to be the gradient in case we do specify control + bar content, but it will only display if there's a controlBarContent + property specified.--> + <s:Rect left="0" right="0" bottom="0" top="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 1: control bar divider line --> + <s:Rect left="0" right="0" top="0" height="1" > + <s:fill> + <s:SolidColor color="0xCDCDCD" /> + </s:fill> + </s:Rect> + + <!-- layer 2: control bar --> + <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + </s:Group> + </s:Group> + </s:Group> +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml new file mode 100644 index 0000000..c83b860 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<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" + applicationComplete="srv.send()"> + + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + import mx.rpc.events.ResultEvent; + + import skins.TDFPanelSkin; + + [Bindable] + private var employees:ArrayCollection; + + private function resultHandler(event:ResultEvent):void + { + employees = event.result.list.employee as ArrayCollection; + } + + ]]> + </fx:Script> + + <fx:Declarations> + <s:HTTPService id="srv" url="./data/list.xml" result="resultHandler(event)"/> + </fx:Declarations> + + <s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin"> + <s:layout> + <s:HorizontalLayout paddingLeft="100" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + <s:DataGroup dataProvider="{employees}" width="300" itemRenderer="renderers.ImageRenderer1"> + <s:layout> + <s:TileLayout horizontalGap="0" verticalGap="0"/> + </s:layout> + </s:DataGroup> + <s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses the Spark Animate to scale the image +when hovered over each item. See the ImageRenderer1.mxml source for more information."/> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml new file mode 100644 index 0000000..f4c8548 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml @@ -0,0 +1,75 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<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" + applicationComplete="srv.send()"> + + <fx:Style> + + @namespace s "library://ns.adobe.com/flex/spark"; + @namespace mx "library://ns.adobe.com/flex/halo"; + + @font-face { + src: url("assets/MyriadPro-Semibold.otf"); + fontFamily: "main"; + } + + s|Application { + font-family: main; + font-size: 14; + } + + </fx:Style> + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + import mx.rpc.events.ResultEvent; + + [Bindable] + private var employees:ArrayCollection; + + private function resultHandler(event:ResultEvent):void + { + employees = event.result.list.employee as ArrayCollection; + } + + ]]> + </fx:Script> + + <fx:Declarations> + <s:HTTPService id="srv" url="./data/list.xml" result="resultHandler(event)"/> + </fx:Declarations> + <s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin"> + <s:layout> + <s:HorizontalLayout paddingTop="2" paddingLeft="50" paddingRight="8"/> + </s:layout> + + <s:DataGroup dataProvider="{employees}" width="440" itemRenderer="renderers.ImageRenderer2" horizontalCenter="0" verticalCenter="0"> + <s:layout> + <s:TileLayout /> + </s:layout> + </s:DataGroup> + <s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses effects to provide a +Spark 3D rotation effect when hovered over each item. See the ImageRenderer2.mxml source for more information. This sample also +shows the use of a special font for the text."/> + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/data/list.xml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/data/list.xml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/data/list.xml new file mode 100644 index 0000000..376bb2c --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/data/list.xml @@ -0,0 +1,96 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<list> + <employee employeeId="1"> + <firstName>Michael</firstName> + <lastName>Scott</lastName> + <image>assets/scott.jpg</image> + </employee> + <employee employeeId="2"> + <firstName>Pam</firstName> + <lastName>Beesly</lastName> + <image>assets/beesly.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Andy</firstName> + <lastName>Bernard</lastName> + <image>assets/bernard.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Creed</firstName> + <lastName>Bratton</lastName> + <image>assets/bratton.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Toby</firstName> + <lastName>Flenderson</lastName> + <image>assets/flenderson.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Jim</firstName> + <lastName>Halpert</lastName> + <image>assets/halpert.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Ryan</firstName> + <lastName>Howard</lastName> + <image>assets/howard.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Stanley</firstName> + <lastName>Hudson</lastName> + <image>assets/hudson.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Kelly</firstName> + <lastName>Kapoor</lastName> + <image>assets/kapoor.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Phyllis</firstName> + <lastName>Lapin</lastName> + <image>assets/lapin.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Kevin</firstName> + <lastName>Malone</lastName> + <image>assets/malone.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Angela</firstName> + <lastName>Martin</lastName> + <image>assets/martin.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Oscar</firstName> + <lastName>Martinez</lastName> + <image>assets/martinez.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Meredith</firstName> + <lastName>Palmer</lastName> + <image>assets/palmer.jpg</image> + </employee> + <employee employeeId="3"> + <firstName>Dwight</firstName> + <lastName>Schrute</lastName> + <image>assets/schrute.jpg</image> + </employee> +</list> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer1.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer1.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer1.mxml new file mode 100644 index 0000000..f6f1dd5 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer1.mxml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + autoDrawBackground="false" + depth="0" depth.hovered="1"> + + <s:states> + <s:State name="normal" /> + <s:State name="hovered" /> + </s:states> + + <s:postLayoutTransformOffsets> + <mx:TransformOffsets id="offsets" x.hovered="-40" y.hovered="-40" scaleX.hovered="2" scaleY.hovered="2" /> + </s:postLayoutTransformOffsets> + + <s:transitions> + <mx:Transition fromState="normal" toState="hovered" autoReverse="true"> + <s:Animate target="{offsets}" duration="200"> + <s:SimpleMotionPath property="scaleX" /> + <s:SimpleMotionPath property="scaleY" /> + <s:SimpleMotionPath property="x" /> + <s:SimpleMotionPath property="y" /> + </s:Animate> + </mx:Transition> + <mx:Transition fromState="hovered" toState="normal" autoReverse="true"> + <s:Animate target="{offsets}" duration="200"> + <s:SimpleMotionPath property="scaleX" /> + <s:SimpleMotionPath property="scaleY" /> + <s:SimpleMotionPath property="x" /> + <s:SimpleMotionPath property="y" /> + </s:Animate> + </mx:Transition> + </s:transitions> + + <mx:Image id="image" source="{data.image}" width="60" height="60" horizontalCenter="0" verticalCenter="0"/> + +</s:ItemRenderer> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer2.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer2.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer2.mxml new file mode 100644 index 0000000..2152cd3 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer2.mxml @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + autoDrawBackground="false" + depth="0" depth.hovered="1"> + + <s:states> + <s:State name="normal" /> + <s:State name="hovered" /> + </s:states> + + <s:transitions> + <s:Transition fromState="normal" toState="hovered" autoReverse="true"> + <s:Parallel> + <s:Rotate3D target="{image}" angleYFrom="0" angleYTo="360" autoCenterProjection="true" autoCenterTransform="true" duration="400"/> + <s:Fade target="{image}" startDelay="400" duration="200"/> + <s:Fade target="{group}" startDelay="400" duration="200"/> + </s:Parallel> + </s:Transition> + </s:transitions> + + <s:Rect id="rect" left="0" right="0" top="0" bottom="0"> + <s:fill> + <s:SolidColor color="black" alpha="0.7"/> + </s:fill> + </s:Rect> + + <s:Group id="group" left="0" right="0" top="0" bottom="0" visible.normal="false"> + <s:Label text="{data.firstName}" verticalCenter="-10" horizontalCenter="0" color="white"/> + <s:Label text="{data.lastName}" verticalCenter="10" horizontalCenter="0" color="white"/> + </s:Group> + + <mx:Image id="image" source="{data.image}" width="70" height="70" horizontalCenter="0" verticalCenter="0" visible.hovered="false"/> + +</s:ItemRenderer> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..4b06e54 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml @@ -0,0 +1,170 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- Custom Spark Panel Skin created for Tour de Flex. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" + blendMode.disabled="layer"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Panel")] + ]]> + </fx:Metadata> + + <fx:Script> + /* Define the skin elements that should not be colorized. + For panel, border and title backround are skinned, but the content area and title text are not. */ + static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"]; + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ + static private const contentFill:Array = []; + + /** + * @inheritDoc + */ + override public function get contentItems():Array {return contentFill}; + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + <s:State name="normalWithControlBar" /> + <s:State name="disabledWithControlBar" /> + </s:states> + + <!-- drop shadow --> + <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" + angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> + + <!-- layer 1: border --> + <s:Rect left="0" right="0" top="0" bottom="0"> + <s:stroke> + <s:SolidColorStroke color="0" alpha="0.50" weight="1" /> + </s:stroke> + </s:Rect> + + + <!-- layer 2: background fill --> + <s:Rect left="0" right="0" bottom="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: contents --> + <!--- contains the vertical stack of titlebar content and controlbar --> + <s:Group left="1" right="1" top="1" bottom="1" > + <s:layout> + <s:VerticalLayout gap="0" horizontalAlign="justify" /> + </s:layout> + + <s:Group id="topGroup" > + <!-- layer 0: title bar fill --> + <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex --> + <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" > + <s:fill> + <s:SolidColor color="0x000000" /> + </s:fill> + </s:Rect> + + <!-- layer 1: title bar highlight --> + <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" > + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xEAEAEA" /> + <s:GradientEntry color="0xD9D9D9" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 2: title bar divider --> + <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"> + <s:fill> + <s:SolidColor color="0xC0C0C0" /> + </s:fill> + </s:Rect> + + <!-- layer 3: text --> + <!--- Defines the appearance of the PanelSkin class's title bar. --> + <!-- Note: The title text display has been slightly modified for Tour de Flex. --> + <s:Label id="titleDisplay" lineBreak="explicit" + left="9" top="1" bottom="0" minHeight="30" + verticalAlign="middle" fontWeight="bold" color="#E2E2E2"> + </s:Label> + </s:Group> + + <!-- + Note: setting the minimum size to 0 here so that changes to the host component's + size will not be thwarted by this skin part's minimum size. This is a compromise, + more about it here: http://bugs.adobe.com/jira/browse/SDK-21143 + --> + <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"> + </s:Group> + + <s:Group id="bottomGroup" minWidth="0" minHeight="0" + includeIn="normalWithControlBar, disabledWithControlBar" > + + <!-- layer 0: control bar background --> + <!-- Note: We are skinning this to be the gradient in case we do specify control + bar content, but it will only display if there's a controlBarContent + property specified.--> + <s:Rect left="0" right="0" bottom="0" top="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 1: control bar divider line --> + <s:Rect left="0" right="0" top="0" height="1" > + <s:fill> + <s:SolidColor color="0xCDCDCD" /> + </s:fill> + </s:Rect> + + <!-- layer 2: control bar --> + <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + </s:Group> + </s:Group> + </s:Group> +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml new file mode 100644 index 0000000..9b89803 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml @@ -0,0 +1,106 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<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" + applicationComplete="srv.send()" xmlns:local="*" xmlns:layouts="layouts.*" + backgroundColor="0x323232" color="0xFFFFFF"> + + <fx:Style> + + @namespace s "library://ns.adobe.com/flex/spark"; + @namespace mx "library://ns.adobe.com/flex/mx"; + + + s|Application { + font-family: main; + font-size: 14; + } + + </fx:Style> + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + import mx.rpc.events.ResultEvent; + + [Bindable] + private var items:ArrayCollection; + + [Bindable] + private var filteredItems:ArrayCollection; + + [Bindable] + private var _maxPrice:Number = 1000; + + [Bindable] + private var _camera:Boolean = false; + + [Bindable] + private var _video:Boolean = false; + + [Bindable] + private var _triband:Boolean = false; + + + private function resultHandler(event:ResultEvent):void + { + items = event.result.catalog.product as ArrayCollection; + filteredItems = new ArrayCollection(items.source); + filteredItems.filterFunction = filter; + } + + private function selectionChange():void + { + filteredItems.refresh(); + filterLayout.filter(); + } + + private function filter(item:Object):Boolean + { + return (item.price <= _maxPrice) && + (!_camera || item.camera) && + (!_video || item.video) && + (!_triband || item.triband); + } + + ]]> + </fx:Script> + + <fx:Declarations> + <s:HTTPService id="srv" url="data/catalog.xml" result="resultHandler(event)"/> + </fx:Declarations> + + <s:HGroup verticalAlign="middle" paddingLeft="8" left="50" top="5"> + <s:Label text="Max Price:"/> + <s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/> + <mx:Spacer width="20"/> + <s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/> + <s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/> + <s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/> + </s:HGroup> + + <s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" top="50" left="0" right="0" horizontalCenter="0"> + <s:layout> + <layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" /> + </s:layout> + </s:DataGroup> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml new file mode 100644 index 0000000..5a0895e --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<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:my="*" minWidth="600" minHeight="350" + applicationComplete="requestPhotos()" backgroundColor="0x323232"> + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + import mx.rpc.events.ResultEvent; + + import spark.components.Group; + import spark.components.supportClasses.GroupBase; + import spark.effects.animation.MotionPath; + + [Bindable] + private var photoFeed:ArrayCollection; + + private function requestPhotos():void { + var params:Object = new Object(); + params.format = 'rss_200_enc'; + params.tags = searchTerms.text; + photoService.send(params); + } + + private function photoHandler(event:ResultEvent):void { + photoFeed = event.result.rss.channel.item as ArrayCollection; + } + ]]> + </fx:Script> + + <fx:Declarations> + <s:HTTPService id="photoService" + url="http://api.flickr.com/services/feeds/photos_public.gne"; + result="photoHandler(event)" /> + </fx:Declarations> + + <s:layout> + <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/> + </s:layout> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/> + <s:TextInput id="searchTerms" + enter="requestPhotos()" text="bugs" /> + <s:Button label="Search" + click="requestPhotos()" /> + <!-- The slider to control the axis angle --> + <s:HSlider id="axisSlider" minimum="-90" maximum="90" + value="10" liveDragging="true" width="300"/> + </s:HGroup> + + <s:List width="700" height="225" + dataProvider="{photoFeed}" + itemRenderer="FlickrThumbnail" + id="theList"> + + <s:layout> + <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/> + </s:layout> + </s:List> + + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml new file mode 100644 index 0000000..a3a6dab --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml @@ -0,0 +1,85 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<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/halo" + xmlns:my="*"> + + <s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" skinClass="skins.TDFPanelSkin"> + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingTop="10" gap="10"/> + </s:layout> + + <!-- The drop-down to select vertical alignment --> + <s:HGroup verticalAlign="middle"> + <s:Label text="Vertical align"/> + <s:DropDownList id="vAlign" requireSelection="true" color="0x000000"> + <s:ArrayCollection> + <fx:String>bottom</fx:String> + <fx:String>middle</fx:String> + <fx:String>top</fx:String> + </s:ArrayCollection> + </s:DropDownList> + </s:HGroup> + + <!-- The drop-down to select vertical alignment --> + <s:HGroup verticalAlign="middle"> + <s:Label text="Horizontal align"/> + <s:DropDownList id="hAlign" requireSelection="true"> + <s:ArrayCollection> + <fx:String>left</fx:String> + <fx:String>center</fx:String> + <fx:String>right</fx:String> + </s:ArrayCollection> + </s:DropDownList> + </s:HGroup> + + <!-- The slider to control the list width --> + <s:HGroup verticalAlign="bottom"> + <s:Label text="Container width"/> + <s:HSlider id="widthSlider" minimum="10" maximum="400" + value="200" liveDragging="true"/> + </s:HGroup> + + <!-- The slider to control the horizontal gap --> + <s:HGroup verticalAlign="bottom"> + <s:Label text="Horizontal gap"/> + <s:HSlider id="hGapSlider" minimum="0" maximum="50" + value="10" liveDragging="true"/> + </s:HGroup> + + <!-- A Spark List --> + <s:List id="list1" width="{widthSlider.value}" height="112" + selectedIndex="7" + dataProvider="{new ArrayCollection( + 'The quick fox jumped over the lazy sleepy\n\dog'.split(' '))}"> + + <!-- Configure the layout to be the FlowLayout --> + <s:layout> + <my:FlowLayout1 horizontalAlign="{hAlign.selectedItem}" + verticalAlign="{vAlign.selectedItem}" + horizontalGap="{hGapSlider.value}"/> + </s:layout> + </s:List> + </s:Panel> + +</s:Application> + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml new file mode 100644 index 0000000..23ec216 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml @@ -0,0 +1,118 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<!-- http://evtimmy.com/2010/02/extending-horizontallayout-to-support-baseline-align-to-text/ --> +<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:local="*"> + <fx:Script> + <![CDATA[ + import mx.events.FlexEvent; + + import skins.TDFPanelSkin; + + protected function update(event:Event):void + { + globalBaseline.top = theLayout.actualBaseline; + checkBoxBaseline.top = checkBox.y + checkBox.baselinePosition; + labelBaseline.top = label.y + label.baselinePosition; + labelBaseline.left = label.x; + buttonBaseline.top = button.y + button.baselinePosition; + buttonBaseline.left = button.x; + } + + ]]> + </fx:Script> + + <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="CustomLayout with HBaselineLayout"> + + <!-- Controls --> + <s:HGroup left="14" top="5"> + <s:VGroup> + <s:CheckBox label="Checkbox" id="showCheckBox" selected="true"/> + <s:CheckBox label="Label" id="showLabel" selected="true"/> + <s:CheckBox label="Button " id="showButton" selected="true"/> + <s:CheckBox label="Layout " id="showLayout" selected="true"/> + </s:VGroup> + + <s:TileGroup requestedColumnCount="2"> + <s:CheckBox id="baseline1Check" label="Offset Checkbox baseline" selected="true"/> + <s:HSlider id="baseline1Slider" minimum="-100" maximum="100" enabled="{baseline1Check.selected}" width="160"/> + <s:CheckBox id="baseline2Check" label="Offset Label baseline" selected="true"/> + <s:HSlider id="baseline2Slider" minimum="-100" maximum="100" enabled="{baseline2Check.selected}" width="160"/> + <s:CheckBox id="baseline3Check" label="Offset Button baseline" selected="true"/> + <s:HSlider id="baseline3Slider" minimum="-100" maximum="100" enabled="{baseline3Check.selected}" width="160"/> + <s:CheckBox id="baseline4Check" label="Offset Layout baseline"/> + <s:HSlider id="baseline4Slider" minimum="-100" maximum="100" enabled="{baseline4Check.selected}" width="160" value="15"/> + <s:CheckBox id="buttonHeightCheck" label="Override Button height" selected="true"/> + <s:HSlider id="buttonHeightSlider" minimum="21" maximum="150" enabled="{buttonHeightCheck.selected}" width="160" value="21"/> + </s:TileGroup> + </s:HGroup> + + + <s:Group id="container" updateComplete="update(event)" top="138" horizontalCenter="0"> + <s:layout> + <local:HBaselineLayout id="theLayout" verticalAlign="baseline" + globalBaseline="{baseline4Check.selected ? baseline4Slider.value : NaN}"/> + </s:layout> + <s:CheckBox id="checkBox" label="One check box" move="update(event)" + baseline="{baseline1Check.selected ? baseline1Slider.value : 0}"/> + <s:Label id="label" text="...and some random text..." move="update(event)" + baseline="{baseline2Check.selected ? baseline2Slider.value : 0}"/> + <s:Button id="button" label="and a Button!" move="update(event)" + height="{buttonHeightCheck.selected ? buttonHeightSlider.value : 21}" + baseline="{baseline3Check.selected ? baseline3Slider.value : 0}"/> + <!-- visual guides for the baselines --> + <s:Group includeInLayout="false"> + <s:Line width="{container.width}" id="globalBaseline" top="{theLayout.actualBaseline}" + visible="{showLayout.selected}"> + <s:stroke> + <s:SolidColorStroke color="0x00FF00" weight="2"/> + </s:stroke> + </s:Line> + + <s:Line width="{checkBox.width-1}" id="checkBoxBaseline" + visible="{showCheckBox.selected}"> + <s:stroke> + <s:SolidColorStroke color="0xFF0000" alpha="0.5" weight="2"/> + </s:stroke> + </s:Line> + + <s:Line width="{label.width-1}" id="labelBaseline" + visible="{showLabel.selected}"> + <s:stroke> + <s:SolidColorStroke color="0x0000FF" alpha="0.5" weight="2"/> + </s:stroke> + </s:Line> + + <s:Line width="{button.width-1}" id="buttonBaseline" + visible="{showButton.selected}"> + <s:stroke> + <s:SolidColorStroke color="0xFF00FF" alpha="0.5" weight="2"/> + </s:stroke> + </s:Line> + </s:Group> + </s:Group> + <s:Label right="14" top="7" color="0x323232" width="200" + text="This sample shows how you can create a custom layout to extend the HorizontalLayout to provide + baseline alignment functionality."/> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml new file mode 100644 index 0000000..8667a8f --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml @@ -0,0 +1,80 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" click="itemrenderer1_clickHandler(event)"> + + <fx:Script> + <![CDATA[ + import spark.components.supportClasses.GroupBase; + import spark.effects.Animate; + import spark.effects.animation.MotionPath; + import spark.effects.animation.SimpleMotionPath; + protected function itemrenderer1_clickHandler(event:MouseEvent):void + { + var g:GroupBase = parent as GroupBase; + var p:Point = g.layout.getScrollPositionDeltaToElement(this.itemIndex); + if (p) + { + var startX:Number = g.horizontalScrollPosition; + var startY:Number = g.verticalScrollPosition; + var anim:Animate = new Animate(); + anim.motionPaths = new <MotionPath>[ + new SimpleMotionPath("horizontalScrollPosition", startX, startX + p.x, 500), + new SimpleMotionPath("verticalScrollPosition", startY, startY + p.y, 500) + ]; + + var interpolator:NumberInterpolatorWrapping = new NumberInterpolatorWrapping(0, g.contentWidth - g.width); + var scrollLength:Number = interpolator.getLength(startX, startX + p.x); + anim.interpolator = interpolator; + anim.duration = Math.max(550, Math.min(2500, scrollLength * 2)); + + anim.play([g]); + } + } + ]]> + </fx:Script> + + + <s:states> + <s:State name="normal"/> + <s:State name="hovered"/> + <s:State name="selected"/> + </s:states> + + <s:Rect id="border" left="0" right="0" top="0" bottom="0"> + <s:fill> + <s:SolidColor color="0xDFDFDF" color.hovered="0xFF0000" color.selected="0x00FF00"/> + </s:fill> + </s:Rect> + + <s:Group left="1" right="1" top="1" bottom="1"> + <s:layout> + <s:VerticalLayout horizontalAlign="center"/> + </s:layout> + + <mx:Image + width="75" height="75" + source="{data.thumbnail.url}" /> + <s:Label text="{data.credit}" maxWidth="100" textAlign="center"/> + </s:Group> + +</s:ItemRenderer> + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/FlowLayout1.as ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlowLayout1.as b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlowLayout1.as new file mode 100644 index 0000000..9462285 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlowLayout1.as @@ -0,0 +1,195 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package +{ +import mx.core.ILayoutElement; + +import spark.components.supportClasses.GroupBase; +import spark.layouts.supportClasses.LayoutBase; + +public class FlowLayout1 extends LayoutBase +{ + + //--------------------------------------------------------------- + // + // Class properties + // + //--------------------------------------------------------------- + + //--------------------------------------------------------------- + // horizontalGap + //--------------------------------------------------------------- + + private var _horizontalGap:Number = 10; + + public function set horizontalGap(value:Number):void + { + _horizontalGap = value; + + // We must invalidate the layout + var layoutTarget:GroupBase = target; + if (layoutTarget) + layoutTarget.invalidateDisplayList(); + } + + //--------------------------------------------------------------- + // verticalAlign + //--------------------------------------------------------------- + + private var _verticalAlign:String = "bottom"; + + public function set verticalAlign(value:String):void + { + _verticalAlign = value; + + // We must invalidate the layout + var layoutTarget:GroupBase = target; + if (layoutTarget) + layoutTarget.invalidateDisplayList(); + } + + //--------------------------------------------------------------- + // horizontalAlign + //--------------------------------------------------------------- + + private var _horizontalAlign:String = "left"; // center, right + + public function set horizontalAlign(value:String):void + { + _horizontalAlign = value; + + // We must invalidate the layout + var layoutTarget:GroupBase = target; + if (layoutTarget) + layoutTarget.invalidateDisplayList(); + } + + //--------------------------------------------------------------- + // + // Class methods + // + //--------------------------------------------------------------- + + override public function updateDisplayList(containerWidth:Number, + containerHeight:Number):void + { + var element:ILayoutElement; + var layoutTarget:GroupBase = target; + var count:int = layoutTarget.numElements; + var hGap:Number = _horizontalGap; + + // The position for the current element + var x:Number = 0; + var y:Number = 0; + var elementWidth:Number; + var elementHeight:Number; + + var vAlign:Number = 0; + switch (_verticalAlign) + { + case "middle" : vAlign = 0.5; break; + case "bottom" : vAlign = 1; break; + } + + // Keep track of per-row height, maximum row width + var maxRowWidth:Number = 0; + + // loop through the elements + // while we can start a new row + var rowStart:int = 0; + while (rowStart < count) + { + // The row always contains the start element + element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowStart) : + layoutTarget.getElementAt(rowStart); + + var rowWidth:Number = element.getPreferredBoundsWidth(); + var rowHeight:Number = element.getPreferredBoundsHeight(); + + // Find the end of the current row + var rowEnd:int = rowStart; + while (rowEnd + 1 < count) + { + element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowEnd + 1) : + layoutTarget.getElementAt(rowEnd + 1); + + // Since we haven't resized the element just yet, get its preferred size + elementWidth = element.getPreferredBoundsWidth(); + elementHeight = element.getPreferredBoundsHeight(); + + // Can we add one more element to this row? + if (rowWidth + hGap + elementWidth > containerWidth) + break; + + rowWidth += hGap + elementWidth; + rowHeight = Math.max(rowHeight, elementHeight); + rowEnd++; + } + + x = 0; + switch (_horizontalAlign) + { + case "center" : x = Math.round(containerWidth - rowWidth) / 2; break; + case "right" : x = containerWidth - rowWidth; + } + + // Keep track of the maximum row width so that we can + // set the correct contentSize + maxRowWidth = Math.max(maxRowWidth, x + rowWidth); + + // Layout all the elements within the row + for (var i:int = rowStart; i <= rowEnd; i++) + { + element = useVirtualLayout ? layoutTarget.getVirtualElementAt(i) : + layoutTarget.getElementAt(i); + + // Resize the element to its preferred size by passing + // NaN for the width and height constraints + element.setLayoutBoundsSize(NaN, NaN); + + // Find out the element's dimensions sizes. + // We do this after the element has been already resized + // to its preferred size. + elementWidth = element.getLayoutBoundsWidth(); + elementHeight = element.getLayoutBoundsHeight(); + + // Calculate the position within the row + var elementY:Number = Math.round((rowHeight - elementHeight) * vAlign); + + // Position the element + element.setLayoutBoundsPosition(x, y + elementY); + + x += hGap + elementWidth; + } + + // Next row will start with the first element after the current row's end + rowStart = rowEnd + 1; + + // Update the position to the beginning of the row + x = 0; + y += rowHeight; + } + + // Set the content size which determines the scrolling limits + // and is used by the Scroller to calculate whether to show up + // the scrollbars when the the scroll policy is set to "auto" + layoutTarget.setContentSize(maxRowWidth, y); + } +} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/HBaselineLayout.as ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/HBaselineLayout.as b/TourDeFlex/TourDeFlex3/src/spark/layouts/HBaselineLayout.as new file mode 100644 index 0000000..5d87ce7 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/HBaselineLayout.as @@ -0,0 +1,199 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package { + +import mx.core.ILayoutElement; +import mx.events.PropertyChangeEvent; +import mx.formatters.NumberBase; + +import spark.components.supportClasses.GroupBase; +import spark.layouts.HorizontalLayout; + +public class HBaselineLayout extends HorizontalLayout +{ + public function HBaselineLayout() + { + super(); + } + + //---------------------------------- + // globalBaseline + //---------------------------------- + + [Inspectable(category="General")] + + private var _globalBaseline:Number = NaN; + public function get globalBaseline():Number + { + return _globalBaseline; + } + + public function set globalBaseline(value:Number):void + { + _globalBaseline = value; + var target:GroupBase = this.target; + if (target) + { + target.invalidateSize(); + target.invalidateDisplayList(); + } + } + + //---------------------------------- + // actualBaseline + //---------------------------------- + + private var _actualBaseline:Number; + + [Bindable("propertyChange")] + [Inspectable(category="General")] + + public function get actualBaseline():Number + { + return _actualBaseline; + } + + private function setActualBaseline(value:Number):void + { + if (value == _actualBaseline) + return; + + var oldValue:Number = _actualBaseline; + _actualBaseline = value; + dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, "actualBaseline", oldValue, value)); + } + + //---------------------------------- + // verticalAlign + //---------------------------------- + + [Inspectable(category="General", enumeration="top,bottom,middle,justify,contentJustify,baseline", defaultValue="top")] + override public function get verticalAlign():String + { + return super.verticalAlign; + } + + /** + * @private + */ + override public function measure():void + { + super.measure(); + + var target:GroupBase = this.target; + if (!target || verticalAlign != "baseline") + return; + + measureBaseline(true /*usePreferredSize*/); + if (!isNaN(_globalBaseline)) + measuredBaselineTop = _globalBaseline; + + // The measured height is the sum of the space above and below the baseline + if (isNaN(paddingTop)) + measuredBaselineTop += paddingTop; + if (isNaN(paddingBottom)) + measuredBaselineBottom += paddingBottom; + target.measuredHeight = Math.round(measuredBaselineTop + measuredBaselineBottom); + } + + /** + * @private + */ + override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void + { + super.updateDisplayList(unscaledWidth, unscaledHeight); + + var target:GroupBase = this.target; + if (!target || verticalAlign != "baseline") + return; + + measureBaseline(false /*usePreferredSize*/); + if (!isNaN(_globalBaseline)) + measuredBaselineTop = _globalBaseline; + + if (isNaN(paddingTop)) + measuredBaselineTop += paddingTop; + + // Adjust the position of the elements + var contentHeight:Number = 0; + var count:int = target.numElements; + for (var i:int = 0; i < count; i++) + { + var element:ILayoutElement = target.getElementAt(i); + if (!element || !element.includeInLayout) + continue; + + var elementBaseline:Number = element.baseline as Number; + if (isNaN(elementBaseline)) + elementBaseline = 0; + + var baselinePosition:Number = element.baselinePosition; + var y:Number = measuredBaselineTop + (elementBaseline - baselinePosition); + element.setLayoutBoundsPosition(element.getLayoutBoundsX(), y); + contentHeight = Math.max(contentHeight, element.getLayoutBoundsHeight() + y); + } + + // Adjust the content height + if (isNaN(paddingBottom)) + contentHeight += paddingBottom; + target.setContentSize(target.contentWidth, contentHeight); + + // Update the baseline + setActualBaseline(measuredBaselineTop); + } + + private var measuredBaselineTop:Number = 0; // How much space is needed above the baseline to fit all the elements + private var measuredBaselineBottom:Number = 0; // How much space is needed below the baseline to fit all the elements + + /** + * @private + */ + private function measureBaseline(usePreferredSize:Boolean):void + { + var elementBaseline:Number = 0; // The current element's explicit baseline constraint + var elementBaselineTop:Number = 0; // The portiono of the current element that's above the baseline + var elementBaselineBottom:Number = 0; // The portion of the current element that's below the baseline + + measuredBaselineTop = 0; + measuredBaselineBottom = 0; + + var count:int = target.numElements; + for (var i:int = 0; i < count; i++) + { + var element:ILayoutElement = target.getElementAt(i); + if (!element || !element.includeInLayout) + continue; + + var elementHeight:Number = usePreferredSize ? element.getPreferredBoundsHeight() : + element.getLayoutBoundsHeight(); + elementBaseline = element.baseline as Number; + if (isNaN(elementBaseline)) + elementBaseline = 0; + + var baselinePosition:Number = element.baselinePosition; + + elementBaselineTop = baselinePosition - elementBaseline; + elementBaselineBottom = elementHeight - elementBaselineTop; + + measuredBaselineTop = Math.max(elementBaselineTop, measuredBaselineTop); + measuredBaselineBottom = Math.max(elementBaselineBottom, measuredBaselineBottom); + } + } +} +} \ No newline at end of file
