http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml new file mode 100644 index 0000000..c5f8b5a --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml @@ -0,0 +1,100 @@ +<?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 spark.events.TextOperationEvent; + import spark.components.RichEditableText; + + private function txtChangeHandler(event:TextOperationEvent):void + { + var textInput:TextInput = event.target as TextInput; + textInput.clearStyle("color"); + } + + + protected function changeHandler(event:MouseEvent):void + { + txt.maxChars = this.maxChars.value; + txt.restrict = this.restrictStr.text; + RichEditableText(txt.textDisplay).textFlow.textAlign = alignVal.selectedItem; + RichEditableText(txt.textDisplay).textFlow.direction = direction.selectedItem; + } + + ]]> + </fx:Script> + + <s:Panel skinClass="skins.TDFPanelSkin" + width="100%" height="100%" + title="TextInput Sample"> + + <s:VGroup top="20" width="100%" height="100%" left="200"> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify Max Character Input:"/> + <s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify Text Alignment:"/> + <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)"> + <s:dataProvider> + <mx:ArrayList> + <fx:String>left</fx:String> + <fx:String>right</fx:String> + <fx:String>center</fx:String> + <fx:String>justify</fx:String> + <fx:String>start</fx:String> + <fx:String>end</fx:String> + </mx:ArrayList> + </s:dataProvider> + </s:DropDownList> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Direction:"/> + <s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)"> + <s:dataProvider> + <mx:ArrayList> + <fx:String>rtl</fx:String> + <fx:String>ltr</fx:String> + </mx:ArrayList> + </s:dataProvider> + </s:DropDownList> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify characters to restrict (use - for range):"/> + <s:TextInput id="restrictStr" change="this.changeHandler(null)"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Text Input:"/> + <s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150" + change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/> + </s:HGroup> + <mx:Spacer height="10"/> + <s:Label width="85%" horizontalCenter="0" color="#323232" + text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text. +This Spark version of TextInput makes use of the Text Layout Framework (TLF). Numerous properties are available to be set using the +textFlow object from the TLF framework. Uses of some are shown above."/> + </s:VGroup> + + </s:Panel> + + +</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml new file mode 100644 index 0000000..77c1737 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml @@ -0,0 +1,165 @@ +<?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" minWidth="955" minHeight="600" + xmlns:local="*" creationComplete="init()"> + + <!-- Based on original code from here and updated and enhanced for Flex 4: + http://www.adobe.com/devnet/flex/articles/text_layout_framework_04.html + --> + + <fx:Script> + <![CDATA[ + import flashx.textLayout.container.ContainerController; + import flashx.textLayout.conversion.ITextImporter; + import flashx.textLayout.conversion.TextConverter; + import flashx.textLayout.edit.EditManager; + import flashx.textLayout.edit.ISelectionManager; + import flashx.textLayout.edit.SelectionState; + import flashx.textLayout.elements.InlineGraphicElement; + import flashx.textLayout.elements.ParagraphElement; + import flashx.textLayout.elements.TextFlow; + import flashx.textLayout.events.SelectionEvent; + import flashx.textLayout.events.StatusChangeEvent; + import flashx.textLayout.formats.Direction; + import flashx.textLayout.formats.TextLayoutFormat; + import flashx.undo.UndoManager; + + import mx.collections.ArrayCollection; + import mx.controls.CheckBox; + import mx.events.FlexEvent; + import mx.events.SliderEvent; + + import skins.TDFPanelSkin; + + import spark.components.Group; + import spark.core.SpriteVisualElement; + + [Bindable] + public var directions:ArrayCollection = new ArrayCollection( + [ + {label:"Left-to-Right", data:Direction.LTR}, + {label:"Right-to-Left", data:Direction.RTL} + ] + ); + + [Embed(source="assets/ApacheFlexLogo.png")] + [Bindable] + static public var imgClass:Class; + + private var _textContainer:SpriteVisualElement = null; + + private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008";> + <div> + <p><span>The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. + Some benefits provided by this framework include: 1) rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens + 2) cut, copy, paste, undo and standard keyboard and mouse gestures for editing 3) selection, editing and flowing text across multiple columns and linked containers + 4) bidirectional text, vertical text and over 30 writing scripts including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, Vietnamese, and others + 5) vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography. Try editing this text and playing with the options below! Notice an inline image is also included.</span></p> + </div> + </TextFlow>; + + private var _textFlow:TextFlow; + + private function init():void { + + _textContainer = new SpriteVisualElement(); + + canvas.addElement(_textContainer); + var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT); + importer.throwOnError = true; // will throw exception if parsing error occurs on import + + _textFlow = importer.importToFlow(textInput); + _textFlow.flowComposer.addController(new ContainerController(_textContainer, canvas.width-40, canvas.height)); + + // add the graphic + var p:ParagraphElement = new ParagraphElement(); + var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement(); + inlineGraphicElement.source = imgClass; + inlineGraphicElement.width=32; + inlineGraphicElement.height=32; + p.addChild(inlineGraphicElement); + _textFlow.addChild(p); + + //adding Select/Edit/Copy/Paste/Undo features + _textFlow.interactionManager = new EditManager(new UndoManager()); + + // initialize with a selection before the first character + _textFlow.interactionManager.selectRange(0,0); + _textFlow.flowComposer.updateAllControllers(); + } + + private function changeFontSize(event:Event):void { + _textFlow.fontSize = fontSize.value; + _textFlow.direction = direction.selectedItem.data; + _textFlow.flowComposer.updateAllControllers(); + } + + private function changeNoColumns(event:Event):void { + var tlf:TextLayoutFormat = new TextLayoutFormat(); + tlf.columnCount = cols.value; + tlf.columnGap = 15; + tlf.direction = direction.selectedItem.data; + _textFlow.format = tlf; + _textFlow.flowComposer.updateAllControllers(); + } + + private function changeTextDirection(event:Event):void { + _textFlow.direction = (event.target as DropDownList).selectedItem.data; + _textFlow.flowComposer.updateAllControllers(); + } + + protected function undo_clickHandler(event:MouseEvent):void + { + var em:EditManager = _textFlow.interactionManager as EditManager; + trace("Can undo " + em.undoManager.canUndo() + " can redo " + em.undoManager.canRedo()); + em.undoManager.undo(); + } + protected function redo_clickHandler(event:MouseEvent):void + { + var em:EditManager = _textFlow.interactionManager as EditManager; + em.undoManager.redo(); + } + + ]]> + </fx:Script> + <s:Panel skinClass="skins.TDFPanelSkin" title="Text Layout Framework Sample" width="100%" height="100%"> + <s:layout> + <s:VerticalLayout paddingTop="8" paddingLeft="8"/> + </s:layout> + + <s:VGroup> + <s:Group id="canvas" width="600" height="200" /> + <s:HGroup width="100%" verticalAlign="middle"> + <s:Label text="Font Size:"/> + <s:NumericStepper id="fontSize" minimum="6" maximum="22" snapInterval="1" change="changeFontSize(event)" value="12" /> + <s:Label text="# Columns:"/> + <s:NumericStepper id="cols" minimum="1" maximum="20" snapInterval="1" change="changeNoColumns(event)" /> + <s:Label text="Text Direction:"/> + <s:DropDownList id="direction" change="changeTextDirection(event)" dataProvider="{directions}" + selectedItem="{directions.getItemAt(0)}"/> + <s:Button label="Undo" click="undo_clickHandler(event)"/> + <s:Button label="Redo" click="redo_clickHandler(event)"/> + </s:HGroup> + </s:VGroup> + </s:Panel> + +</s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml new file mode 100644 index 0000000..a5ccfd4 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml @@ -0,0 +1,135 @@ +<?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" maxWidth="690" maxHeight="300" + creationComplete="init()"> + +<!-- This sample is based on this page: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/WS0d70b2a8565d75766ba6608d121cc29f375-8000.html --> + + <fx:Script> + <![CDATA[ + import flash.display.StageAlign; + import flash.display.StageScaleMode; + import flash.events.Event; + import flash.geom.Rectangle; + + import flashx.textLayout.compose.StandardFlowComposer; + import flashx.textLayout.container.ContainerController; + import flashx.textLayout.container.ScrollPolicy; + import flashx.textLayout.conversion.TextConverter; + import flashx.textLayout.elements.TextFlow; + import flashx.textLayout.formats.TextLayoutFormat; + + import spark.core.SpriteVisualElement; + + private var hTextFlow:TextFlow; + private var headContainer:SpriteVisualElement; + private var headlineController:ContainerController; + private var hContainerFormat:TextLayoutFormat; + + private var bTextFlow:TextFlow; + private var bodyTextContainer:SpriteVisualElement; + private var bodyController:ContainerController; + private var bodyTextContainerFormat:TextLayoutFormat; + + private const headlineMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008'><flow:p textAlign='center'><flow:span fontFamily='Helvetica' fontSize='18'>TLF News Layout Example</flow:span><flow:br/><flow:span fontFamily='Helvetica' fontSize='14'>This example formats text like a newspaper page with a headline, a subtitle, and multiple columns</flow:span></flow:p></flow:TextFlow>"; + + private const bodyMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008' fontSize='12' textIndent='10' marginBottom='15' paddingTop='4' paddingLeft='4'><flow:p marginBottom='inherit'><flow:span>There are many </flow:span><flow:span fontStyle='italic'>such</flow:span><flow:span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</flow:span></flow:p><flow:p marginBottom='inherit'><flow:span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole.</flow:span></flow:p></flow:TextFlow>"; + + public function init():void + { + // Headline text flow and flow composer + hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); + hTextFlow.flowComposer = new StandardFlowComposer(); + + // initialize the headline container and controller objects + headContainer = new SpriteVisualElement(); + headlineController = new ContainerController(headContainer); + headlineController.verticalScrollPolicy = ScrollPolicy.OFF; + hContainerFormat = new TextLayoutFormat(); + hContainerFormat.paddingTop = 4; + hContainerFormat.paddingRight = 4; + hContainerFormat.paddingBottom = 4; + hContainerFormat.paddingLeft = 4; + + headlineController.format = hContainerFormat; + hTextFlow.flowComposer.addController(headlineController); + addElement(headContainer); + this.addEventListener(flash.events.Event.RESIZE, resizeHandler); + + // Body text TextFlow and flow composer + bTextFlow = TextConverter.importToFlow(bodyMarkup, TextConverter.TEXT_LAYOUT_FORMAT); + bTextFlow.flowComposer = new StandardFlowComposer(); + + // The body text container is below, and has three columns + bodyTextContainer = new SpriteVisualElement(); + bodyController = new ContainerController(bodyTextContainer); + bodyTextContainerFormat = new TextLayoutFormat(); + bodyTextContainerFormat.columnCount = 4; + bodyTextContainerFormat.columnGap = 30; + + bodyController.format = bodyTextContainerFormat; + bTextFlow.flowComposer.addController(bodyController); + addElement(bodyTextContainer); + resizeHandler(null); + } + + private function resizeHandler(event:Event):void + { + trace("Resizing!"); + const verticalGap:Number = 25; + const stagePadding:Number = 16; + var stageWidth:Number = this.width - stagePadding; + var stageHeight:Number = this.height - stagePadding; + var headlineWidth:Number = stageWidth; + var headlineContainerHeight:Number = stageHeight; + + // Initial compose to get height of headline after resize + headlineController.setCompositionSize(headlineWidth, headlineContainerHeight); + hTextFlow.flowComposer.compose(); + var rect:Rectangle = headlineController.getContentBounds(); + headlineContainerHeight = rect.height; + + // Initial compose to get height of headline after resize + headlineController.setCompositionSize(headlineWidth, headlineContainerHeight); + hTextFlow.flowComposer.compose(); + rect = headlineController.getContentBounds(); + headlineContainerHeight = rect.height; + + // Resize and place headline text container + // Call setCompositionSize() again with updated headline height + headlineController.setCompositionSize(headlineWidth, headlineContainerHeight ); + headlineController.container.x = stagePadding / 2; + headlineController.container.y = stagePadding / 2; + hTextFlow.flowComposer.updateAllControllers(); + + // Resize and place body text container + var bodyContainerHeight:Number = (stageHeight - verticalGap - headlineContainerHeight); + bodyController.format = bodyTextContainerFormat; + bodyController.setCompositionSize(stageWidth, bodyContainerHeight ); + bodyController.container.x = (stagePadding/2); + bodyController.container.y = (stagePadding/2) + headlineContainerHeight + verticalGap; + bTextFlow.flowComposer.updateAllControllers(); + } + ]]> + </fx:Script> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml new file mode 100644 index 0000000..09f544b --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml @@ -0,0 +1,90 @@ +<?xml version="1.0"?> +<!-- + + 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:mx="library://ns.adobe.com/flex/mx" + xmlns:s="library://ns.adobe.com/flex/spark" + creationComplete="init()"> + + <fx:Declarations> + <fx:XML id="textFlowAsXML" source="MyTextFlow.xml" /> + </fx:Declarations> + + <fx:Style> + @namespace "library://ns.adobe.com/flex/spark"; + Label { + baseColor: #000000; + fontFamily: "Verdana"; + fontSize: "12"; + advancedAntiAliasing: true; + } + + </fx:Style> + <fx:Script><![CDATA[ + import flashx.textLayout.conversion.TextConverter; + import flashx.textLayout.elements.TextFlow; + import spark.components.RichEditableText; + import spark.utils.TextFlowUtil; + + XML.ignoreWhitespace = false; + + private function init():void { + // Creates a TextFlow by importing a String containing the markup language used by the Text Layout Framework. + // If you specify it, don't forget the namespace -> xmlns="http://ns.adobe.com/textLayout/2008"; + var markup:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'><p fontFamily='Arial'>This is TLF markup with paragraphs.</p><p color='0x663399'>The root TextFlow tag is inlcuded.</p></TextFlow>"; + rt1.textFlow = TextFlowUtil.importFromString(markup); + + // This next string shows that if the root TextFlow tag is omitted, it will be added for you. + markup = "<p color='0xCE267D'>This is TLF markup with paragraphs.</p><p fontSize='10' fontWeight='bold' fontFamily='Arial'>The root TextFlow tag is omitted and therefore created automatically.</p>"; + rt2.textFlow = TextFlowUtil.importFromString(markup); + + // This line shows how you would import plain text with no paragraph spacing + var autoMarkup:String = "This is just a plain old string that has no markup within it."; + RichEditableText(rt3.textDisplay).textFlow = TextFlowUtil.importFromString(autoMarkup); + + // This example shows how you can use the TextConverter class from TLF to import HTML formatted text + // See the docs for the subset of HTML that is supported: + // http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/conversion/TextConverter.html#TEXT_FIELD_HTML_FORMAT + var myHTML:String = "<p>This is <i>HTML</i> markup.<br><b>Hello Tour de Flex Users!</b></p>"; + rt4.textFlow = TextConverter.importToFlow(myHTML,TextConverter.TEXT_FIELD_HTML_FORMAT); + } + ]]></fx:Script> + + <s:Panel skinClass="skins.TDFPanelSkin" title="Importing Text using TLF and Flex 4" width="100%" height="100%"> + <s:layout> + <s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/> + </s:layout> + + <s:VGroup> + <s:RichText id="rt1" width="200"/> + <s:TextArea id="rt2" width="300" height="50"/> + <s:TextInput id="rt3" width="260"/> + <s:RichEditableText id="rt4" width="200"/> + + <s:RichText id="rt5" width="280" + textFlow="{TextFlowUtil.importFromXML(textFlowAsXML)}" + horizontalCenter="0" verticalCenter="0" /> + </s:VGroup> + <s:Label width="200" color="0x323232" verticalAlign="justify" text="This sample shows how you can use different types of text markup within +the Flex 4 components that are based on TLF through an import. This can be especially useful for dynamically loading text +that is returned from an HTTPService call at runtime for instance."/> + + </s:Panel> +</s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml new file mode 100644 index 0000000..50af0d4 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml @@ -0,0 +1,77 @@ +<?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. + +--> +<!-- Sample derived from: http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS02f7d8d4857b1677-165a04e1126951a2d98-7ff8.html --> +<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 flashx.textLayout.conversion.TextConverter; + + XML.ignoreWhitespace = false; + ]]> + </fx:Script> + <fx:Style> + @namespace "library://ns.adobe.com/flex/spark"; + Label { + baseColor: #000000; + fontFamily: "Verdana"; + fontSize: "12"; + advancedAntiAliasing: true; + } + </fx:Style> + <fx:Declarations> + <!-- Define a String to use with HTML and plain text format. --> + <fx:String id="htmlTextAsHTML"><![CDATA[<p>Text containing <b>HTML</b> markup</p>]]></fx:String> + + <!-- Define an XML object to use with TLF format. --> + <fx:XML id="tfTextAsTextFlow"> + <TextFlow xmlns="http://ns.adobe.com/textLayout/2008";> + <p>Text Using <span fontWeight="bold">Text Layout Framework</span> Markup</p> + </TextFlow> + </fx:XML> + </fx:Declarations> + + <s:Panel skinClass="skins.TDFPanelSkin" title="Text Import Format Types Sample" width="100%" height="100%"> + <s:layout> + <s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/> + </s:layout> + + <s:Label verticalAlign="justify" width="200" text="This example shows how you can use different format types for importing text +and what the result will be in the Flex 4 component shown."/> + <s:VGroup> + <s:TextArea id="txt1" width="200" height="50" + textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.TEXT_FIELD_HTML_FORMAT)}" + horizontalCenter="0" verticalCenter="0" /> + + <s:Label text="Same marked up text with plain format specified:"/> + <s:TextArea id="txt2" height="50" width="200" + textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.PLAIN_TEXT_FORMAT)}" + horizontalCenter="0" verticalCenter="0" /> + + <s:TextArea id="txt3" width="200" height="50" + textFlow="{TextConverter.importToFlow(tfTextAsTextFlow, TextConverter.TEXT_LAYOUT_FORMAT)}" + horizontalCenter="0" verticalCenter="0" /> + </s:VGroup> + + </s:Panel> + +</s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml new file mode 100644 index 0000000..0877ab6 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.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: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" + skinClass="TDFGradientBackgroundSkin"> + + <fx:Script> + <![CDATA[ + import flash.geom.Point; + + import mx.containers.TitleWindow; + import mx.managers.PopUpManager; + + import spark.components.TitleWindow; + + private var point1:Point = new Point(); + + // Open the TitleWindow container. + // Cast the return value of the createPopUp() method + // to SimpleTitleWindowExample, the name of the + // component containing the TitleWindow container. + private function showWindow():void { + var login:SimpleTitleWindowExample=SimpleTitleWindowExample(PopUpManager.createPopUp( + this, SimpleTitleWindowExample , true) as spark.components.TitleWindow); + + // Calculate position of TitleWindow in Application's coordinates. + point1.x=myButton.x; + point1.y=myButton.y; + point1=myButton.localToGlobal(point1); + login.x=point1.x+25; + login.y=point1.y+25; + + // Pass a reference to the TextInput control + // to the TitleWindow container so that the + // TitleWindow container can return data to the main application. + login.loginName=returnedName; + } + ]]> + </fx:Script> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" /> + </s:layout> + + <s:Panel title="TitleWindow Container" color="0x000000" + borderAlpha="0.15" + width="600"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Button id="myButton" color="0x323232" height="32" label="Click to open the TitleWindow container" + click="showWindow();"/> + + <s:RichText id="returnedName" width="100%" color="0x323232" text="Waiting..."/> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml new file mode 100644 index 0000000..721d16b --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml @@ -0,0 +1,146 @@ +<?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" + currentState="hide"> + + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + + [Bindable] + public var items:ArrayCollection = new ArrayCollection([ + {label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"}, + {label:"Small Red Polo", itemNum:2022144432, price:"$40.00"}, + {label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]); + + protected function myBtn_clickHandler(event:MouseEvent):void + { + if (showBtn.selected) + this.currentState="show"; + else this.currentState="hide"; + } + ]]> + </fx:Script> + <fx:Style> + @namespace "library://ns.adobe.com/flex/spark"; + + ToggleButton:upAndSelected, + ToggleButton:overAndSelected { + baseColor: #000000; + color: #FFFFFF; + } + ToggleButton:downAndSelected { + baseColor: #336699; + color: #FFFFFF; + } + ToggleButton:disabledAndSelected { + baseColor: #E2E2E2; + color: #212799; + } + ToggleButton:up { + baseColor: #C0C0C0; + color: #323232; + } + ToggleButton:over { + baseColor: #FFFFFF; + color: #000000; + } + ToggleButton:down { + baseColor: #014f9f; + color: #FFFFFF; + } + </fx:Style> + <s:states> + <s:State name="show"/> + <s:State name="hide"/> + </s:states> + + <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the + source tabs for each sample. --> + <s:Panel width="100%" height="100%" + horizontalCenter="0" + title="ToggleButton Sample" + skinClass="skins.TDFPanelSkin"> + + <s:HGroup left="5" top="5" width="100%" height="100%"> + <s:VGroup color="0x000000"> + <s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/> + <s:Label text="Order Number: 904234113441-2342"/> + <s:VGroup width="80%" horizontalCenter="0"> + <s:Label text="Purchaser: Anna Thomas"/> + <s:Label text="Date: 7/20/2009"/> + <s:Label text="Order Total: $114.00"/> + <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details" + click="myBtn_clickHandler(event)"/> + </s:VGroup> + </s:VGroup> + <s:HGroup right="50" top="5"> + <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170" + color="#FFFFFF" includeIn="show"> + <mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/> + </s:Panel> + </s:HGroup> + </s:HGroup> + <s:HGroup horizontalCenter="0" bottom="15" verticalAlign="middle" width="88%"> + <s:Label fontSize="13" color="0x323232" verticalAlign="justify" width="100%" + text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click +the button again to toggle it back to the up state."/> + </s:HGroup> + </s:Panel> + + + <!-- + <s:Group width="100%" height="100%"> + <s:Rect left="0" right="0" bottom="0" top="0"> + <s:fill> + <s:LinearGradient rotation="90" > + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + <s:VGroup left="15" top="5" color="0x000000"> + <s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/> + <s:Label text="Order Number: 904234113441-2342"/> + <s:VGroup width="80%" horizontalCenter="0"> + <s:Label text="Purchaser: Anna Thomas"/> + <s:Label text="Date: 7/20/2009"/> + <s:Label text="Order Total: $114.00"/> + <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details" + click="myBtn_clickHandler(event)"/> + <mx:Spacer height="40"/> + <s:Label color="#FFFFFF" width="199" + verticalAlign="justify" + text="Clicking the button toggles it between the up and an down states. If you click the button while it is in the up state, it toggles to the down state. You must click the button again to toggle it back to the up state."/> + </s:VGroup> + </s:VGroup> + <s:HGroup right="50" top="5"> + <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="200" + color="#FFFFFF" includeIn="show" baseColor="#000000"> + <mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/> + </s:Panel> + </s:HGroup> + + </s:Group>--> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml new file mode 100644 index 0000000..422a185 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml @@ -0,0 +1,71 @@ +<?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" + skinClass="TDFGradientBackgroundSkin"> + + <fx:Script> + <![CDATA[ + + import mx.events.ItemClickEvent; + + // Event handler function to print a message + // describing the selected Button control. + private function clickHandler(event:ItemClickEvent):void { + tgPanel.title = "ToggleButtonBar: " + event.label; + myTA.text="Selected button index: " + String(event.index) + + "\n" + "Selected button label: " + event.label; + } + ]]> + </fx:Script> + + <fx:Declarations> + + <fx:Array id="dp"> + <fx:String>Flex</fx:String> + <fx:String>Flex JS</fx:String> + <fx:String>Falcon</fx:String> + <fx:String>Falcon JX</fx:String> + </fx:Array> + + </fx:Declarations> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:ToggleButtonBar color="0x323232" horizontalGap="5" itemClick="clickHandler(event);" dataProvider="{dp}" /> + + <s:Label width="100%" textAlign="center" color="0x323232" + text="Select a button in the ToggleButtonBar control."/> + + <s:TextArea color="0x323232" id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/> + + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml new file mode 100644 index 0000000..d1ca0ca --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonExample.mxml @@ -0,0 +1,111 @@ +<?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" + currentState="hide" viewSourceURL="srcview/index.html"> + + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + + [Bindable] + public var items:ArrayCollection = new ArrayCollection([ + {label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"}, + {label:"Small Red Polo", itemNum:2022144432, price:"$40.00"}, + {label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]); + + protected function myBtn_clickHandler(event:MouseEvent):void + { + if (showBtn.selected) + this.currentState="show"; + else this.currentState="hide"; + } + ]]> + </fx:Script> + <fx:Style> + @namespace "library://ns.adobe.com/flex/spark"; + + ToggleButton:upAndSelected, + ToggleButton:overAndSelected { + baseColor: #000000; + color: #FFFFFF; + } + ToggleButton:downAndSelected { + baseColor: #336699; + color: #FFFFFF; + } + ToggleButton:disabledAndSelected { + baseColor: #E2E2E2; + color: #212799; + } + ToggleButton:up { + baseColor: #C0C0C0; + color: #323232; + } + ToggleButton:over { + baseColor: #FFFFFF; + color: #000000; + } + ToggleButton:down { + baseColor: #014f9f; + color: #FFFFFF; + } + </fx:Style> + <s:states> + <s:State name="show"/> + <s:State name="hide"/> + </s:states> + + <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the + source tabs for each sample. --> + <s:Panel width="100%" height="100%" + horizontalCenter="0" + title="ToggleButton Sample" + skinClass="skins.TDFPanelSkin"> + + + <s:HGroup left="5" top="5" width="100%" height="100%"> + <s:VGroup color="0x000000"> + <s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/> + <s:Label text="Order Number: 904234113441-2342"/> + <s:VGroup width="80%" horizontalCenter="0"> + <s:Label text="Purchaser: Anna Thomas"/> + <s:Label text="Date: 7/20/2009"/> + <s:Label text="Order Total: $114.00"/> + <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details" + click="myBtn_clickHandler(event)"/> + </s:VGroup> + </s:VGroup> + <s:HGroup right="50" top="5"> + <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170" + color="#FFFFFF" includeIn="show"> + <mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/> + </s:Panel> + </s:HGroup> + </s:HGroup> + <s:HGroup horizontalCenter="0" bottom="15" verticalAlign="middle" clipAndEnableScrolling="true" width="88%"> + <s:Label fontSize="13" color="0x323232" verticalAlign="justify" width="100%" + text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click +the button again to toggle it back to the up state."/> + </s:HGroup> + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml new file mode 100644 index 0000000..899f6df --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToolTipExample.mxml @@ -0,0 +1,59 @@ +<?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" + skinClass="TDFGradientBackgroundSkin"> + + <fx:Style> + @namespace mx "library://ns.adobe.com/flex/mx"; + + mx|ToolTip + { + fontFamily: "Arial"; + fontSize: 12; + fontStyle: "italic"; + color: #000000; + backgroundColor: #FCEA1E; + } + </fx:Style> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:Panel title="ToolTip Samples" + width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Button label="Roll over me!" toolTip="This button doesn't do anything This tip could provide more instructions" /> + <s:TextInput toolTip="Enter some data here"/> + + </s:Panel> + +</s:Application> + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml new file mode 100644 index 0000000..47f98d5 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TreeExample.mxml @@ -0,0 +1,81 @@ +<?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" + skinClass="TDFGradientBackgroundSkin"> + + <fx:Script> + <![CDATA[ + + [Bindable] + public var selectedNode:XML; + + // Event handler for the Tree control change event. + public function treeChanged(event:Event):void { + selectedNode=Tree(event.target).selectedItem as XML; + } + ]]> + </fx:Script> + + <fx:Declarations> + <fx:XMLList id="treeData"> + <node label="Mail Box"> + <node label="Inbox"> + <node label="Marketing"/> + <node label="Product Management"/> + <node label="Personal"/> + </node> + <node label="Outbox"> + <node label="Professional"/> + <node label="Personal"/> + </node> + <node label="Spam"/> + <node label="Sent"/> + </node> + </fx:XMLList> + </fx:Declarations> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" /> + </s:layout> + + <s:Panel title="Tree Control" color="0x000000" + borderAlpha="0.15" + width="600"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" color="0x323232" + text="Select a node in the Tree control."/> + + <mx:HDividedBox width="100%" height="100%" color="0x323232"> + <mx:Tree id="myTree" width="50%" height="100%" labelField="@label" + showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/> + <s:TextArea height="100%" width="50%" + text="Selected Item: {selectedNode.@label}"/> + </mx:HDividedBox> + + </s:Panel> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml new file mode 100644 index 0000000..91a9212 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoDisplayExample.mxml @@ -0,0 +1,64 @@ +<?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" + skinClass="TDFGradientBackgroundSkin" + initialize="init(event)"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" /> + </s:layout> + + <fx:Script> + <![CDATA[ + import flashx.textLayout.conversion.TextConverter; + + import mx.events.FlexEvent; + + import org.osmf.utils.OSMFSettings; + + protected function init(event:FlexEvent):void { + OSMFSettings.enableStageVideo = false; + } + ]]> + </fx:Script> + + <fx:Declarations> + <fx:String id="TitleText"><![CDATA[<b>VideoDisplay Control:</b><br />Use the buttons to control the video.]]></fx:String> + </fx:Declarations> + + <s:VGroup width="600" horizontalAlign="center" paddingTop="10"> + + <s:RichText width="75%" color="0xffffff" textAlign="center" + textFlow="{TextConverter.importToFlow(TitleText, TextConverter.TEXT_FIELD_HTML_FORMAT)}" + horizontalCenter="0" verticalCenter="0" /> + + <s:VideoDisplay id="myVid" height="146" width="220" source="assets/FlexInstaller.mp4" autoPlay="false"/> + + <s:HGroup> + <s:Button label="Play" color="0x00000" click="myVid.play();"/> + <s:Button label="Pause" color="0x00000" click="myVid.pause();"/> + <s:Button label="Stop" color="0x00000" click="myVid.stop();"/> + </s:HGroup> + + </s:VGroup> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml new file mode 100644 index 0000000..963cc2b --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/VideoPlayerExample.mxml @@ -0,0 +1,77 @@ +<?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" + initialize="init(event)"> + + <fx:Script> + <![CDATA[ + import flashx.textLayout.conversion.TextConverter; + + import mx.events.ItemClickEvent; + import mx.events.FlexEvent; + import mx.collections.ArrayCollection; + + import org.osmf.utils.OSMFSettings; + + protected function init(event:FlexEvent):void { + OSMFSettings.enableStageVideo = false; + } + + private function playPauseChange(event:Event):void + { + videoPlayer.playPauseButton.enabled = checkPlay.selected; + } + ]]> + </fx:Script> + + <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the + source tabs for each sample. --> + <s:Panel title="VideoPlayer Sample" + width="100%" height="100%" + skinClass="skins.TDFPanelSkin"> + <s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232" + text="The VideoPlayer control lets you play progressively downloaded or streaming +video, live or recorded video. It supports multi-bit rate streaming when used with a server that supports +multi-bit rate streaming, such as Flash Media Server 3.5. The VideoPlayer control contains a full UI +to let users control playback of video. It contains a play/pause toggle button; a scrub bar to let +users seek through video; a volume bar; a timer; and a button to toggle in and out of fullscreen mode."/> + + <!-- note: source can point to a server location or URL --> + <s:VGroup left="10"> + <s:HGroup width="35%"> + <s:CheckBox id="checkRewind" + label="Auto-Rewind" + selected="true" /> + <s:CheckBox id="checkPlay" + label="Play/Pause Button" + selected="true" + change="playPauseChange(event)" /> + </s:HGroup> + <s:VideoPlayer id="videoPlayer" + horizontalCenter="-2" y="50" + source="assets/FlexInstaller.mp4" + autoPlay="false" + autoRewind="{checkRewind.selected}"/> + </s:VGroup> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml new file mode 100644 index 0000000..59b6f27 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ViewStackExample.mxml @@ -0,0 +1,112 @@ +<?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" + skinClass="TDFGradientBackgroundSkin"> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:Panel title="ViewStack Container" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" color="0x323232" textAlign="center" + text="Use the Button controls to change panels of the ViewStack container."/> + + <s:BorderContainer borderStyle="solid" width="100%" color="0x323232"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" + paddingTop="5" paddingLeft="5" + paddingRight="5" paddingBottom="5" /> + </s:layout> + + <s:Button id="searchButton" label="Search Panel" + click="myViewStack.selectedChild=search;"/> + <s:Button id="cInfoButton" label="Customer Info Panel" + click="myViewStack.selectedChild=custInfo;"/> + <s:Button id="aInfoButton" label="Account Panel" + click="myViewStack.selectedChild=accountInfo;"/> + </s:BorderContainer> + + <!-- Define the ViewStack and the three child containers and have it + resize up to the size of the container for the buttons. --> + <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" color="0x323232"> + + <s:NavigatorContent id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" > + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingTop="5" paddingLeft="5" + paddingRight="5" paddingBottom="5" /> + </s:layout> + + <s:Label text="Search Panel" /> + <s:HGroup > + <s:TextInput id="Searchtxt" width="200" /> + <mx:Button label="search" click="Searchtxt.text=''" /> + </s:HGroup> + </s:NavigatorContent> + + <s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC" + width="100%" height="100%" fontWeight="bold" > + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingTop="5" paddingLeft="5" + paddingRight="5" paddingBottom="5" /> + </s:layout> + + <s:Label text="Customer Info" /> + <s:HGroup> + <s:Label text="Email Address"/> + <s:TextInput id="email" width="200"/> + <s:Button label="Submit" click="email.text='';" /> + </s:HGroup> + </s:NavigatorContent> + + <s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" > + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingTop="5" paddingLeft="5" + paddingRight="5" paddingBottom="5" /> + </s:layout> + + <s:Label text="Account Info" /> + <s:HGroup> + <s:Button label="Purchases" /> + <s:Button label="Sales" /> + <s:Button label="Reports" /> + </s:HGroup> + </s:NavigatorContent> + + </mx:ViewStack> + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/assets/ApacheFlexLogo.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/ApacheFlexLogo.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/ApacheFlexLogo.png new file mode 100644 index 0000000..4ff037f Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/ApacheFlexLogo.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/assets/FlexInstaller.mp4 ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/FlexInstaller.mp4 b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/FlexInstaller.mp4 new file mode 100644 index 0000000..8c877c4 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/FlexInstaller.mp4 differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/assets/arrow_icon.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/arrow_icon.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/arrow_icon.png new file mode 100644 index 0000000..9ac6331 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/arrow_icon.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/assets/arrow_icon_sm.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/arrow_icon_sm.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/arrow_icon_sm.png new file mode 100644 index 0000000..33debc8 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/arrow_icon_sm.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png new file mode 100644 index 0000000..ec61099 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_pause_blue.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png new file mode 100644 index 0000000..f8c8ec6 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_play_blue.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png new file mode 100644 index 0000000..e6f75d2 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/control_stop_blue.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png new file mode 100644 index 0000000..bf9be79 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/assets/icon_close.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif b/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif new file mode 100644 index 0000000..9bcda93 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/iconclose.gif differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif b/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif new file mode 100644 index 0000000..fb181ab Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/iconinfo.gif differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/images/arrow_icon_sm.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/images/arrow_icon_sm.png b/TourDeFlex/TourDeFlex3/src/spark/controls/images/arrow_icon_sm.png new file mode 100644 index 0000000..33debc8 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/controls/images/arrow_icon_sm.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml new file mode 100644 index 0000000..23b529e --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/CloseButtonSkin.mxml @@ -0,0 +1,184 @@ +<?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. + +--> +<!-- +@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" + minWidth="21" minHeight="21" + alpha.disabled="0.5"> + + <!-- host component --> + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Button")] + ]]> + </fx:Metadata> + + <fx:Script> + <![CDATA[ + /* Define the skin elements that should not be colorized. + For button, the graphics are colorized but the label is not. */ + static private const exclusions:Array = ["labelDisplay"]; + + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + ]]> + + </fx:Script> + + <!-- states --> + <s:states> + <s:State name="up" /> + <s:State name="over" /> + <s:State name="down" /> + <s:State name="disabled" /> + </s:states> + + <!-- layer 1: shadow --> + <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.01" + alpha.down="0" /> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.07" + alpha.down="0.5" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 2: fill --> + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xFFFFFF" + color.over="0xBBBDBD" + color.down="0xAAAAAA" + alpha="0.85" /> + <s:GradientEntry color="0xD8D8D8" + color.over="0x9FA0A1" + color.down="0x929496" + alpha="0.85" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: fill lowlight --> + <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" alpha="0.0099" /> + <s:GradientEntry color="0x000000" alpha="0.0627" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 4: fill highlight --> + <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2"> + <s:fill> + <s:SolidColor color="0xFFFFFF" + alpha="0.33" + alpha.over="0.22" + alpha.down="0.12" /> + </s:fill> + </s:Rect> + + + <!-- layer 5: highlight stroke (all states except down) --> + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" /> + <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + + <!-- layer 6: highlight stroke (down state only) --> + <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect left="2" top="1" right="2" height="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.25" /> + </s:fill> + </s:Rect> + + <s:Rect left="1" top="2" right="1" height="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.09" /> + </s:fill> + </s:Rect> + + <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 --> + <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0x000000" + alpha="0.5625" + alpha.down="0.6375" /> + <s:GradientEntry color="0x000000" + alpha="0.75" + alpha.down="0.85" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 8: text --> + <!--- + @copy spark.components.supportClasses.ButtonBase#labelDisplay + --> + <s:Rect left="0" top="0" right="0" bottom="0" > + <s:fill> + <s:BitmapFill source="@Embed('../iconclose.gif')"/> + </s:fill> + </s:Rect> + + <s:Label id="labelDisplay" + textAlign="center" + verticalAlign="middle" + maxDisplayedLines="1" + horizontalCenter="0" verticalCenter="1" + left="10" right="10" top="2" bottom="2"> + </s:Label> +</s:SparkSkin> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml new file mode 100644 index 0000000..edd44e5 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/MyPanelSkin.mxml @@ -0,0 +1,101 @@ +<?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. + +--> + + +<!--- The default skin class for a Spark Panel container. + +@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="normal"> + + <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" stateGroups="withControls" /> + <s:State name="disabledWithControlBar" stateGroups="withControls" /> + </s:states> + + <!-- background fill --> + <s:Rect left="0" right="0" bottom="0" top="0" > + <s:fill> + <s:LinearGradient rotation="90" > + <s:GradientEntry color="0xFFFFFF" /> + <s:GradientEntry color="0x1a1919" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + <!-- title bar fill --> + <s:Rect left="0" right="0" top="0" height="30"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" /> + <s:GradientEntry color="0xC0C0C0" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + + <!-- text layer --> + <!--- Defines the appearance of the PanelSkin class's title bar. --> + <s:Label id="titleDisplay" lineBreak="explicit" + right="4" top="2" height="30" + verticalAlign="middle" fontWeight="bold" + color="0xE2E2E2"> + </s:Label> + + <!-- + 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" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0"/> + +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..f9151dc --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml @@ -0,0 +1,171 @@ +<?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 --> + <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. --> + <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/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml new file mode 100644 index 0000000..db20ea3 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml @@ -0,0 +1,74 @@ +<?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:Style> + @namespace s "library://ns.adobe.com/flex/spark"; + @namespace mx "library://ns.adobe.com/flex/mx"; + + s|ButtonBar s|ToggleButton:upAndSelected, + s|ButtonBar s|ToggleButton:overAndSelected, + s|ButtonBar s|ToggleButton:downAndSelected, + + s|ButtonBar s|ToggleButton:disabledAndSelected { + baseColor: #FF6633; + color: #FFFFCC; + } + + s|ButtonBar { + baseColor: #FFFFCC; + } + + s|Button { + baseColor: #000000; + color: #269d6c; + } + + s|VGroup s|Label { + fontWeight: "bold"; + color: #336699; + } + + s|VGroup mx|Text { + color: #0A436B; + fontWeight: "bold"; + } + </fx:Style> + + <s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%" skinClass="skins.TDFPanelSkin"> + <s:Group width="50%" height="50%"> + <s:ButtonBar id="viewMenu" requireSelection="true" x="10" y="10"> + <s:dataProvider> + <mx:ArrayCollection source="['Home', 'Events', 'Rooms', 'Dining']" /> + </s:dataProvider> + </s:ButtonBar> + <s:Button label="Click Me!" x="12" y="48"/> + <s:Label x="10" y="90" text="Only text in the VGroup below has bold content." /> + <s:VGroup x="10" y="109"> + <s:Label text="This text component has the style setting referring to the Spark Label component." /> + <mx:Text text="This text component has a style setting with a reference to a Halo Text component."/> + </s:VGroup> + </s:Group> + <s:Label width="200" color="0x323232" text="Descendant selectors can be used to specifically qualify the component you +want to style via the namespace and component. See the Style settings in the code for reference." x="440" y="10"/> + </s:Panel> +</s:Application>
