http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/PagedList.as ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/PagedList.as b/tourdeflexmodules/src/spark/controls/PagedList.as new file mode 100644 index 0000000..19e87df --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/PagedList.as @@ -0,0 +1,510 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 flash.events.Event; + import flash.events.EventDispatcher; + + import mx.collections.IList; + import mx.collections.errors.ItemPendingError; + import mx.events.CollectionEvent; + import mx.events.CollectionEventKind; + import mx.events.PropertyChangeEvent; + import mx.events.PropertyChangeEventKind; + import mx.resources.IResourceManager; + import mx.resources.ResourceManager; + import mx.rpc.IResponder; + + [Event(name="collectionChange", type="mx.events.CollectionEvent")] + + /** + * An IList whose items are fetched asynchronously by a user provided function. The + * loadItemsFunction initiates an asynchronous request for a pageSize block items, typically + * from a web service. When the request sucessfully completes, the storeItemsAt() method + * must be called. If the request fails, then failItemsAt(). + * + * <p>PagedList divides its <code>length</code> items into <code>pageSize</code> blocks or + * "pages". It tracks which items exist locally, typically because they've been stored with + * storeItemsAt(). When an item that does not exist locally is requested with getItemAt(), + * the loadItemsFunction is called and then an IPE is thrown. When the loadItemsFunction + * either completes or fails, it must call storeItemsAt() or failItemsAt() which causes + * the IPE's responders to run and a "replace" CollectionEvent to be dispatched for the + * updated page. The failItemsAt() method resets the corresponding items to undefined, + * which means that subsequent calls to getItemAt() will cause an IPE to be thrown.</p> + * + * <p>Unlike some other IList implementations, the only method here that can thrown an + * IPE is getItemAt(). Methods like getItemIndex() and toArray() just report items + * that aren't local as null.</p> + * + * <p>This class is intended to be used as the "list" source for an ASyncListView.</p> + */ + public class PagedList extends EventDispatcher implements IList + { + /** + * @private + */ + private static function get resourceManager():IResourceManager + { + return ResourceManager.getInstance(); + } + + /** + * @private + */ + private static function checkItemIndex(index:int, listLength:int):void + { + if (index < 0 || (index >= listLength)) + { + const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]); + throw new RangeError(message); + } + } + + /** + * @private + * The IList's items. + */ + private const data:Vector.<*> = new Vector.<*>(); + + /** + * Construct a PagedList with the specified length and pageSize. + */ + public function PagedList(length:int=1000, pageSize:int=10) + { + this.data.length = length; + this.pageSize = pageSize; + + for (var i:int = 0; i < data.length; i++) + data[i] = undefined; + } + + //---------------------------------- + // loadItemsFunction + //---------------------------------- + + private var _loadItemsFunction:Function = null; + + /** + * The value of this property must be a function that loads a contiguous + * block of items and then calls <code>storeItemsAt()</code> or + * <code>failItemsAt()</code>. A loadItemsFunction must be defined as follows: + * <pre> + * myLoadItems(list:PagedList, index:int, count:int):void + * </pre> + * + * <p>Typically the loadItemsFunction will make one or more network requests + * to retrieve the items. It must do all of its work asynchronously to avoid + * blocking the application's GUI. + * + */ + public function get loadItemsFunction():Function + { + return _loadItemsFunction; + } + + /** + * @private + */ + public function set loadItemsFunction(value:Function):void + { + _loadItemsFunction = value; + } + + //---------------------------------- + // length + //---------------------------------- + + [Bindable("collectionChange")] + + /** + * The number of items in the list. + * + * <p>The length of the list can be changed directly however the "-1" indeterminate + * length value is not supported.</p> + */ + public function get length():int + { + return data.length; + } + + /** + * @private + */ + public function set length(value:int):void + { + const oldLength:int = data.length; + const newLength:int = value; + + if (oldLength == newLength) + return; + + var ce:CollectionEvent = null; + if (hasEventListener(CollectionEvent.COLLECTION_CHANGE)) + ce = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE); + + if (oldLength < newLength) + { + if (ce) + { + ce.location = Math.max(oldLength - 1, 0); + ce.kind = CollectionEventKind.ADD; + const itemsLength:int = newLength - oldLength; + for (var i:int = 0; i < itemsLength; i++) + ce.items.push(undefined); + } + + data.length = newLength; + for (var newIndex:int = Math.max(oldLength - 1, 0); newIndex < newLength; newIndex++) + data[newIndex] = undefined; + } + else // oldLength > newLength + { + if (ce) + { + ce.location = Math.max(newLength - 1, 0); + ce.kind = CollectionEventKind.REMOVE; + for (var oldIndex:int = Math.max(newLength - 1, 0); oldIndex < oldLength; oldIndex++) + ce.items.push(data[oldIndex]); + } + + data.length = newLength; + } + + if (ce) + dispatchEvent(ce); + } + + //---------------------------------- + // pageSize + //---------------------------------- + + private var _pageSize:int = 10; + + /** + * Items are loaded in contiguous pageSize blocks. The value of this property should be greater than + * zero, smaller than the PageList's length, and a reasonable working size for the loadItemsFunction. + */ + public function get pageSize():int + { + return _pageSize; + } + + /** + * @private + */ + public function set pageSize(value:int):void + { + _pageSize = value; + } + + /** + * Resets the entire list to its initial state. All local and pending items are + * cleared. + */ + public function clearItems():void + { + var index:int = 0; + for each (var item:Object in data) + data[index++] = undefined; + + if (hasEventListener(CollectionEvent.COLLECTION_CHANGE)) + { + var ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE); + ce.kind = CollectionEventKind.RESET; + dispatchEvent(ce); + } + } + + /** + * @private + */ + private static function createUpdatePCE(itemIndex:Object, oldValue:Object, newValue:Object):PropertyChangeEvent + { + const pce:PropertyChangeEvent = new PropertyChangeEvent(PropertyChangeEvent.PROPERTY_CHANGE); + pce.kind = PropertyChangeEventKind.UPDATE; + pce.property = itemIndex; + pce.oldValue = oldValue; + pce.newValue = newValue; + return pce; + } + + /** + * @private + */ + private static function createCE(kind:String, location:int, item:Object):CollectionEvent + { + const ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE); + ce.kind = kind; + ce.location = location; + + if (item is Array) + ce.items = item as Array; + else + ce.items.push(item); + + return ce; + } + + /** + * This method must be called by the loadItemsFunction after a block of requested + * items have been successfully retrieved. It stores the specified items in the + * internal data vector and clears the "pending" state associated with the original + * request. + */ + public function storeItemsAt(items:Vector.<Object>, index:int):void + { + if (index < 0 || (index + items.length) > length) + { + const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]); + throw new RangeError(message); + } + + var item:Object; + var itemIndex:int; + var pce:PropertyChangeEvent; + + // copy the new items into the internal items vector and run the IPE responders + + itemIndex = index; + for each (item in items) + { + var ipe:ItemPendingError = data[itemIndex] as ItemPendingError; + if (ipe && ipe.responders) + { + for each (var responder:IResponder in ipe.responders) + responder.result(null); + } + + data[itemIndex++] = item; + } + + // dispatch collection and property change events + + const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE); + const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE); + var propertyChangeEvents:Array = new Array(); // Array of PropertyChangeEvents; + + if (hasCollectionListener || hasPropertyListener) + { + itemIndex = index; + for each (item in items) + propertyChangeEvents.push(createUpdatePCE(itemIndex++, null, item)); + } + + if (hasCollectionListener) + dispatchEvent(createCE(CollectionEventKind.REPLACE, index, propertyChangeEvents)); + + if (hasPropertyListener) + { + for each (pce in propertyChangeEvents) + dispatchEvent(pce); + } + } + + public function failItemsAt(index:int, count:int):void + { + if (index < 0 || (index + count) > length) + { + const message:String = resourceManager.getString("collections", "outOfBounds", [ index ]); + throw new RangeError(message); + } + + for (var i:int = 0; i < count; i++) + { + var itemIndex:int = i + index; + var ipe:ItemPendingError = data[itemIndex] as ItemPendingError; + if (ipe && ipe.responders) + { + for each (var responder:IResponder in ipe.responders) + responder.fault(null); + } + data[itemIndex] = undefined; + } + + + + } + + //-------------------------------------------------------------------------- + // + // IList Implementation (length appears above) + // + //-------------------------------------------------------------------------- + + /** + * @inheritDoc + */ + public function addItem(item:Object):void + { + addItemAt(item, length); + } + + /** + * @inheritDoc + */ + public function addItemAt(item:Object, index:int):void + { + checkItemIndex(index, length + 1); + data.splice(index, index, item); + + if (hasEventListener(CollectionEvent.COLLECTION_CHANGE)) + dispatchEvent(createCE(CollectionEventKind.ADD, index, item)); + } + + /** + * @inheritDoc + */ + public function getItemAt(index:int, prefetch:int=0):Object + { + checkItemIndex(index, length); + + var item:* = data[index]; + if (item is ItemPendingError) + { + throw item as ItemPendingError; + } + else if (item === undefined) + { + const ipe:ItemPendingError = new ItemPendingError(String(index)); + const pageStartIndex:int = Math.floor(index / pageSize) * pageSize; + const count:int = Math.min(pageSize, data.length - pageStartIndex); + + for (var i:int = 0; i < count; i++) + data[pageStartIndex + i] = ipe; + + if (loadItemsFunction !== null) + loadItemsFunction(this, pageStartIndex, count); + + // Allow for the possibility that loadItemsFunction has synchronously + // loaded the requested data item. + + if (data[index] == ipe) + throw ipe; + else + item = data[index]; + } + + return item; + } + + /** + * Return the index of of the specified item, if it currently exists in the list. + * This method does not cause additional items to be loaded. + */ + public function getItemIndex(item:Object):int + { + return data.indexOf(item); + } + + /** + * @inheritDoc + */ + public function itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void + { + const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE); + const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE); + var pce:PropertyChangeEvent = null; + + if (hasCollectionListener || hasPropertyListener) + pce = createUpdatePCE(property, oldValue, newValue); + + if (hasCollectionListener) + dispatchEvent(createCE(CollectionEventKind.UPDATE, -1, pce)); + + if (hasPropertyListener) + dispatchEvent(pce); + } + + /** + * @inheritDoc + */ + public function removeAll():void + { + length = 0; + + if (hasEventListener(CollectionEvent.COLLECTION_CHANGE)) + { + const ce:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE); + ce.kind = CollectionEventKind.RESET; + dispatchEvent(ce); + } + } + + /** + * @inheritDoc + */ + public function removeItemAt(index:int):Object + { + checkItemIndex(index, length); + + const item:Object = data[index]; + + data.splice(index, 1); + if (hasEventListener(CollectionEvent.COLLECTION_CHANGE)) + dispatchEvent(createCE(CollectionEventKind.REMOVE, index, item)); + + return item; + } + + /** + * @inheritDoc + */ + public function setItemAt(item:Object, index:int):Object + { + checkItemIndex(index, length); + + const oldItem:Object = data[index]; + + if (item !== oldItem) + { + const hasCollectionListener:Boolean = hasEventListener(CollectionEvent.COLLECTION_CHANGE); + const hasPropertyListener:Boolean = hasEventListener(PropertyChangeEvent.PROPERTY_CHANGE); + var pce:PropertyChangeEvent = null; + + if (hasCollectionListener || hasPropertyListener) + pce = createUpdatePCE(index, oldItem, item); + + if (hasCollectionListener) + dispatchEvent(createCE(CollectionEventKind.REPLACE, index, pce)); + + if (hasPropertyListener) + dispatchEvent(pce); + } + + return oldItem; + } + + /** + * Returns an array with the same length as this list, that contains all of + * the items successfully loaded so far. + * + * <p>Calling this method does not force additional items to be loaded.</p> + */ + public function toArray():Array + { + const rv:Array = new Array(data.length); + + var index:int = 0; + for each (var item:* in data) + rv[index++] = (item is ItemPendingError) ? undefined : item; + + return rv; + } + } +}
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/PopUpAnchor1Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/PopUpAnchor1Example.mxml b/tourdeflexmodules/src/spark/controls/PopUpAnchor1Example.mxml new file mode 100644 index 0000000..da653cf --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/PopUpAnchor1Example.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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + + <fx:Script> + <![CDATA[ + import mx.controls.Alert; + protected function handleClose(event:MouseEvent):void + { + Alert.show("TEST"); + this.currentState="normal"; + } + ]]> + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="infoOpen" /> + </s:states> + + <s:transitions> + <mx:Transition fromState="*" toState="*"> + <mx:Sequence> + <s:Fade target="{infoPopUp.popUp}" duration="1500"/> + </mx:Sequence> + </mx:Transition> + </s:transitions> + + <fx:Declarations> + <s:LinearGradient rotation="90" id="fill1"> + <s:GradientEntry color="0xFFFFFF" /> + <s:GradientEntry color="0x336699" /> + </s:LinearGradient> + </fx:Declarations> + + <s:Panel title="PopUpAnchor Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:VGroup top="0"> + <s:Label width="200" height="200" + text="The PopUpAnchor control displays a pop-up component in a layout. It has + no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/> + <s:Label text=" Click the Information icon to see the PopUpAnchor in action."/> + <mx:Spacer width="60"/> + </s:VGroup> + <s:VGroup> + <mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/> + <s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below" + includeIn="infoOpen" displayPopUp.normal="false" + displayPopUp.infoOpen="true"> + <s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180" + dropShadowVisible="true"> + <s:Label horizontalCenter="0" top="20" width="170" height="155" + text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/> + + <s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/> + </s:BorderContainer> + </s:PopUpAnchor> + </s:VGroup> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/PopUpAnchor2Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/PopUpAnchor2Example.mxml b/tourdeflexmodules/src/spark/controls/PopUpAnchor2Example.mxml new file mode 100644 index 0000000..9878c45 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/PopUpAnchor2Example.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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:states> + <s:State name="normal" /> + <s:State name="emailOpen" /> + <s:State name="aboutOpen" /> + <s:State name="infoOpen" /> + </s:states> + + <s:transitions> + <mx:Transition fromState="*" toState="*"> + <mx:Sequence> + <s:Fade target="{emailPopUp.popUp}" duration="1000"/> + </mx:Sequence> + </mx:Transition> + </s:transitions> + + <s:Panel title="PopUpAnchor with Form" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:HGroup> + <mx:LinkButton label="Home" color="0x336699" click="currentState = 'normal'"/> + <mx:LinkButton label="About" color="0x336699" click="currentState = 'aboutOpen'"/> + <mx:LinkButton label="Information" color="0x336699" click="currentState = 'infoOpen'"/> + <mx:LinkButton label="Contact Us" color="0x336699" click="currentState = 'emailOpen'"/> + </s:HGroup> + <s:BorderContainer id="border1" excludeFrom="emailOpen" width="290" height="200" + backgroundColor="0x000000" color="0xFFFFFF" cornerRadius="7"> + <s:Label width="200" height="200" top="20" left="5" + text.normal="Welcome to Tour de Flex!" + text.aboutOpen="Tour de Flex is constantly being updated with more cool samples!" + text.infoOpen="Check back for more Flex 4 samples weekly!"/> + </s:BorderContainer> + <s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below" + includeIn="emailOpen" displayPopUp.normal="false" displayPopUp.emailOpen="true"> + <mx:Form id="form1" backgroundColor="0x000000" color="0xFFFFFF"> + <mx:FormItem label="From :"> + <s:TextInput/> + </mx:FormItem> + <mx:FormItem label="To :"> + <s:TextInput/> + </mx:FormItem> + <mx:FormItem label="Subject :"> + <s:TextInput/> + </mx:FormItem> + <mx:FormItem label="Message :"> + <s:TextArea width="100%" height="60" maxChars="60"/> + </mx:FormItem> + <mx:FormItem direction="horizontal"> + <s:Button label="Send" click="currentState = 'normal'" color="0x000000"/> + <s:Button label="Cancel" click="currentState = 'normal'" color="0x000000"/> + </mx:FormItem> + </mx:Form> + </s:PopUpAnchor> + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/PopupButtonExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/PopupButtonExample.mxml b/tourdeflexmodules/src/spark/controls/PopupButtonExample.mxml new file mode 100644 index 0000000..a8bbe24 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/PopupButtonExample.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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.controls.*; + import mx.events.*; + import mx.controls.Alert; + + private var myMenu:Menu; + + // Initialize the Menu control, and specify it as the pop up object + // of the PopUpButton control. + private function initMenu():void { + myMenu = new Menu(); + var dp:Object = [{label: "New Folder"}, {label: "Sent Items"}, {label: "Inbox"}]; + myMenu.dataProvider = dp; + myMenu.selectedIndex = 0; + myMenu.addEventListener("itemClick", itemClickHandler); + popB.popUp = myMenu; + popB.label = "Put in: " + myMenu.dataProvider[myMenu.selectedIndex].label; + } + + // Define the event listener for the Menu control's itemClick event. + private function itemClickHandler(event:MenuEvent):void { + var label:String = event.item.label; + popTypeB.text=String("Moved to " + label); + popB.label = "Put in: " + label; + popB.close(); + myMenu.selectedIndex = event.index; + } + + ]]> + </fx:Script> + + <s:Panel title="PopUpButton Control" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" + text="Button label contains the name of the last selected menu item." /> + <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu()" width="140" click="{Alert.show('Action: ' + popB.label);}" /> + + <mx:Spacer height="65" /> + + <s:TextInput id="popTypeB" text="...waiting" /> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ProgressBarExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/ProgressBarExample.mxml b/tourdeflexmodules/src/spark/controls/ProgressBarExample.mxml new file mode 100644 index 0000000..1b714f2 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/ProgressBarExample.mxml @@ -0,0 +1,62 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + private var j:uint=10; + + // Event handler function to set the value of the + // ProgressBar control. + private function runit():void + { + if(j<=100) + { + bar.setProgress(j,100); + bar.label= "CurrentProgress" + " " + j + "%"; + j+=10; + } + if(j>100) + { + j=0; + } + } + ]]> + </fx:Script> + + <s:Panel title="ProgressBar Control" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" + text="Click the button to increment the progress bar." /> + <s:Button id="Speed" label="Run" click="runit()"/> + + <mx:ProgressBar id="bar" labelPlacement="bottom" minimum="0" visible="true" maximum="100" + label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/RadioButtonExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/RadioButtonExample.mxml b/tourdeflexmodules/src/spark/controls/RadioButtonExample.mxml new file mode 100644 index 0000000..aca4e33 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/RadioButtonExample.mxml @@ -0,0 +1,94 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + protected function scoreClickHandler(event:MouseEvent):void + { + var score:Number = 0.0; + + if (group1.selectedValue=="True") + score=33.34; + if (group2.selectedValue=="South Africa") + score=score+33.34; + if (group3.selectedValue=="False") + score=score+33.34; + scoreText.text = "You scored " + numberFormatter.format(score).toString()+"%"; + } + ]]> + </fx:Script> + <fx:Declarations> + <s:RadioButtonGroup id="group1"/> + <s:RadioButtonGroup id="group2"/> + <s:RadioButtonGroup id="group3"/> + <mx:NumberFormatter id="numberFormatter" + precision="0" + rounding="nearest"/> + </fx:Declarations> + <fx:Style> + @namespace "library://ns.adobe.com/flex/spark"; + + RadioButton{ + baseColor: #FFFFFF; + } + + </fx:Style> + + <s:Panel title="RadioButton Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:HGroup> + <s:VGroup> + <s:Label text="1) The sky is blue:"/> + <s:RadioButton id="trueRadioBtn" label="True" groupName="group1"/> + <s:RadioButton id="falseRadioBtn" label="False" groupName="group1"/> + </s:VGroup> + <s:VGroup paddingLeft="20"> + <s:Label text="2) Which of the following is not a continent?"/> + <s:RadioButton id="multiRadioBtnA" label="North America" groupName="group2"/> + <s:RadioButton id="multiRadioBtnB" label="Europe" groupName="group2"/> + <s:RadioButton id="multiRadioBtnC" label="Asia" groupName="group2"/> + <s:RadioButton id="multiRadioBtnD" label="South Africa" groupName="group2"/> + </s:VGroup> + <s:VGroup paddingLeft="20"> + <s:Label text="3) Tallahasee is the capital of Alabama:"/> + <s:RadioButton id="trueRadioBtn3" label="True" groupName="group3" /> + <s:RadioButton id="falseRadioBtn3" label="False" groupName="group3"/> + </s:VGroup> + <s:VGroup horizontalAlign="contentJustify"> + <s:Button id="scoreBtn" label="Score Me!" click="scoreClickHandler(event)"/> + <s:Label id="scoreText"/> + </s:VGroup> + </s:HGroup> + + <s:Label width="100%" verticalAlign="justify" + text="The RadioButton control is a single choice in a set of mutually +exclusive choices. A RadioButton group is composed of two or more RadioButton controls with +the same group name. Only one member of the group can be selected at any given time." /> + </s:Panel> + + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/RichEditableTextExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/RichEditableTextExample.mxml b/tourdeflexmodules/src/spark/controls/RichEditableTextExample.mxml new file mode 100644 index 0000000..9b0ac38 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/RichEditableTextExample.mxml @@ -0,0 +1,95 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + preinitialize="init()"> + + <!-- Based on samples from Peter DeHaan's blog: http://blog.flexexamples.com/ --> + + <fx:Script> + import flashx.textLayout.elements.Configuration; + import flashx.textLayout.elements.TextFlow; + import flashx.textLayout.formats.TextDecoration; + import flashx.textLayout.formats.TextLayoutFormat; + + import spark.events.TextOperationEvent; + + [Bindable] + protected static var lineCount:uint = 0; + + protected function richEdTxt_changeHandler(evt:TextOperationEvent):void { + lineCount = richEdTxt.mx_internal::textContainerManager.numLines; + lineCnt.text = lineCount.toString(); + } + + protected function init():void { + var cfg:Configuration = TextFlow.defaultConfiguration; + + var normalTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkNormalFormat); + normalTLF.color = 0xFF0000; + + var hoverTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkHoverFormat); + hoverTLF.color = 0xFF00FF; + hoverTLF.textDecoration = TextDecoration.NONE; + + var activeTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkActiveFormat); + activeTLF.color = 0x00FF00; + + cfg.defaultLinkNormalFormat = normalTLF; + cfg.defaultLinkHoverFormat = hoverTLF; + cfg.defaultLinkActiveFormat = activeTLF; + TextFlow.defaultConfiguration = cfg; + } + </fx:Script> + + <s:Panel title="RichEditableText Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:VGroup id="vgrp" width="100%" height="100%" top="10" left="15"> + <s:HGroup> + <s:Label text="Uneditable text with formatted link:"/> + <s:RichEditableText editable="false"> + <s:content> + <s:p>The quick brown <s:a href="http://www.adobe.com/";>fox</s:a> jumps over the lazy dog.</s:p> + </s:content> + </s:RichEditableText> + </s:HGroup> + <s:HGroup> + <s:Label text="Editable text:"/> + <s:RichEditableText id="richEdTxt" widthInChars="20" heightInLines="10" + change="richEdTxt_changeHandler(event)" backgroundColor="0xCCCCCC" text="Hello world!"> + </s:RichEditableText> + </s:HGroup> + <s:HGroup> + <s:Label text="Line Count of editable text:"/> + <s:Label id="lineCnt"/> + </s:HGroup> + + </s:VGroup> + <s:Label width="266" height="180" right="10" top="38" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text. +The rich text can contain clickable hyperlinks and inline graphics that are either embedded or loaded from URLs. RichEditableText does not have scrollbars, but it implements +the IViewport interface for programmatic scrolling so that it can be controlled by a Scroller, which does provide scrollbars. It also supports vertical scrolling with the mouse wheel." /> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/SWFLoaderExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/SWFLoaderExample.mxml b/tourdeflexmodules/src/spark/controls/SWFLoaderExample.mxml new file mode 100644 index 0000000..769e703 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/SWFLoaderExample.mxml @@ -0,0 +1,47 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + creationComplete="init()"> + + <fx:Script> + <![CDATA[ + private function init():void{ + swfObj.content.addEventListener("SWF_EVENT",ballHandler); + } + private function ballHandler(ev:Event):void{ + txt.text = "Flash content embedded at compile time | " + ev.target.ballCnt + " gumballs left"; + } + ]]> + </fx:Script> + + <s:Panel title="SWFLoader Control" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label id="txt" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" /> + + <mx:SWFLoader id="swfObj" source="@Embed('assets/swf_sample.swf')" /> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/SampleHelpFormExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/SampleHelpFormExample.mxml b/tourdeflexmodules/src/spark/controls/SampleHelpFormExample.mxml new file mode 100644 index 0000000..7449c5d --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/SampleHelpFormExample.mxml @@ -0,0 +1,51 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="Form Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form> + <s:FormItem label="Enter some text"> + <s:TextInput/> + <s:helpContent> + <s:Label text="I've fallen and I can't get up!"/> + </s:helpContent> + </s:FormItem> + <s:FormItem label="Check a box"> + <s:CheckBox label="option 1"/> + <s:CheckBox label="option 2"/> + <s:helpContent> + <s:Label text="What does it mean?"/> + <s:Button label="?" width="30" x="120"/> + </s:helpContent> + </s:FormItem> + <s:FormItem> + <s:Button label="Submit!"/> + </s:FormItem> + </s:Form> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/SampleSequenceFormExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/SampleSequenceFormExample.mxml b/tourdeflexmodules/src/spark/controls/SampleSequenceFormExample.mxml new file mode 100644 index 0000000..a38aee1 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/SampleSequenceFormExample.mxml @@ -0,0 +1,44 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="Form Sequence Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form> + <s:FormItem sequenceLabel="1." label="Enter some text"> + <s:TextInput/> + </s:FormItem> + <s:FormItem sequenceLabel="2." label="Check a box"> + <s:CheckBox label="option 1"/> + <s:CheckBox label="option 2"/> + </s:FormItem> + <s:FormItem> + <s:Button label="Submit it!"/> + </s:FormItem> + </s:Form> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/SampleSimpleFormExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/SampleSimpleFormExample.mxml b/tourdeflexmodules/src/spark/controls/SampleSimpleFormExample.mxml new file mode 100644 index 0000000..c2c8965 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/SampleSimpleFormExample.mxml @@ -0,0 +1,44 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="Form Simple Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form> + <s:FormItem label="Enter some text"> + <s:TextInput/> + </s:FormItem> + <s:FormItem label="Check a box"> + <s:CheckBox label="option 1"/> + <s:CheckBox label="option 2"/> + </s:FormItem> + <s:FormItem> + <s:Button label="Submit it!"/> + </s:FormItem> + </s:Form> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/SampleStackedFormExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/SampleStackedFormExample.mxml b/tourdeflexmodules/src/spark/controls/SampleStackedFormExample.mxml new file mode 100644 index 0000000..fa0702e --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/SampleStackedFormExample.mxml @@ -0,0 +1,45 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="Form Stacked Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form skinClass="spark.skins.spark.StackedFormSkin" horizontalCenter="0"> + <s:FormHeading label="Do some data entry" skinClass="spark.skins.spark.StackedFormHeadingSkin"/> + <s:FormItem label="Enter some text" skinClass="spark.skins.spark.StackedFormItemSkin"> + <s:TextInput/> + </s:FormItem> + <s:FormItem label="Check a box" skinClass="spark.skins.spark.StackedFormItemSkin"> + <s:CheckBox label="option 1"/> + <s:CheckBox label="option 2"/> + </s:FormItem> + <s:FormItem skinClass="spark.skins.spark.StackedFormItemSkin"> + <s:Button label="Submit it!"/> + </s:FormItem> + </s:Form> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ScrollBarExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/ScrollBarExample.mxml b/tourdeflexmodules/src/spark/controls/ScrollBarExample.mxml new file mode 100644 index 0000000..2877fa4 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/ScrollBarExample.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:Module + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:s="library://ns.adobe.com/flex/spark"> + + <s:Panel title="ScrollBar Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:Box borderStyle="solid"> + <s:HGroup> + <s:DataGroup id="vertView" left="10" top="20" + clipAndEnableScrolling="true" + itemRenderer="spark.skins.spark.DefaultItemRenderer"> + <s:layout> + <s:VerticalLayout requestedRowCount="3"/> + </s:layout> + <s:dataProvider> + <s:ArrayCollection> + <fx:String>Flex</fx:String> + <fx:String>Flex JS</fx:String> + <fx:String>Falcon</fx:String> + <fx:String>Falcon FX</fx:String> + </s:ArrayCollection> + </s:dataProvider> + </s:DataGroup> + <s:VScrollBar viewport="{vertView}" + top="10" + left="{vertView.x + vertView.width + 10}" + height="{vertView.height}"/> + </s:HGroup> + </mx:Box> + <mx:Box borderStyle="solid"> + <s:HGroup> + <s:DataGroup id="horizView" right="200" top="10" + clipAndEnableScrolling="true" + itemRenderer="spark.skins.spark.DefaultItemRenderer"> + <s:layout> + <s:HorizontalLayout requestedColumnCount="3"/> + </s:layout> + <s:dataProvider> + <s:ArrayCollection> + <fx:String>Flex</fx:String> + <fx:String>Flex JS</fx:String> + <fx:String>Falcon</fx:String> + <fx:String>Falcon FX</fx:String> + </s:ArrayCollection> + </s:dataProvider> + </s:DataGroup> + + </s:HGroup> + <s:HScrollBar viewport="{horizView}" width ="{horizView.width}"/> + </mx:Box> + + <s:Label paddingLeft="15" width="199" verticalAlign="justify" + text="You can add scrollbars to any component to give scrolling capability. This sample shows +how you can use both a vertical and horizontal ScrollBar. Also see the Scroller sample for more information."/> + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/Scroller1Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/Scroller1Example.mxml b/tourdeflexmodules/src/spark/controls/Scroller1Example.mxml new file mode 100644 index 0000000..f999d4a --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/Scroller1Example.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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + + <s:Panel title="Scroller Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:VGroup horizontalCenter="0"> + <s:HGroup> + <s:Label text="Min Viewport Inset:"/> + <s:HSlider id="slider1" + maximum="50" + liveDragging="true" /> + <s:Label text="Viewport Width:"/> + <s:HSlider id="slider2" + minimum="100" + maximum="550" + value="300" + liveDragging="true" /> + <s:Label text="Viewport Height:"/> + <s:HSlider id="slider3" + minimum="100" + maximum="550" + value="200" + liveDragging="true" /> + </s:HGroup> + <s:HGroup> + <s:Scroller id="scroller" + minViewportInset="{slider1.value}" + width="300" height="200"> + <s:Group> + <s:Rect id="rect" + width="{slider2.value}" + height="{slider3.value}"> + <s:fill> + <s:LinearGradient rotation="45"> + <s:GradientEntry color="red" /> + <s:GradientEntry color="yellow" /> + <s:GradientEntry color="haloBlue" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + </s:Group> + </s:Scroller> + <s:Label textAlign="justify" width="280" verticalAlign="justify" + text="The Scroller control contains a pair of scroll bars and a viewport. A viewport displays a rectangular subset of the area of +a component, rather than displaying the entire component. You can use the Scroller control to make any container that implements the IViewport interface, +such as Group, scrollable. The Scroller's horizontal and vertical scroll policies are set to auto which indicates that scroll bars are displayed when the +content within a viewport is larger than the actual size of the viewport."/> + </s:HGroup> + </s:VGroup> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/Scroller2Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/Scroller2Example.mxml b/tourdeflexmodules/src/spark/controls/Scroller2Example.mxml new file mode 100644 index 0000000..bbd1771 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/Scroller2Example.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. + +--> +<!-- Also see http://blog.flexexamples.com/2009/07/29/enabling-tabbing-on-spark-scroller-children/ --> +<s:Module name="Spark_Scroller_hasFocusableChildren_test" + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:s="library://ns.adobe.com/flex/spark"> + + + <fx:Script> + <![CDATA[ + import spark.events.TextOperationEvent; + + private function txtChangeHandler(event:TextOperationEvent):void + { + if (event.target is TextInput) + { + var textInput:TextInput = event.target as TextInput; + textInput.clearStyle("color"); + } + } + ]]> + </fx:Script> + <!-- you want to mark the children of the viewport as focusable so you're able to tab to them, + but if you don't want the container itself to be focusable then you must turn tabEnabled off on it --> + + <s:Panel title="Scrollers and Tabbing" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <!-- The fields are tab-able within the VGroup container --> + <s:VGroup left="0" horizontalAlign="center" width="20%"> + <s:BitmapImage id="img" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/> + <s:Label text="Item For Sale"/> + </s:VGroup> + <s:Scroller tabEnabled="true" hasFocusableChildren="true"> + <s:VGroup> + <s:Label text="First Name:"/> + <s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/> + <s:Label text="Last Name:"/> + <s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/> + <s:Label text="Email:"/> + <s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/> + </s:VGroup> + </s:Scroller> + + <!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for + containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' --> + + <s:Scroller hasFocusableChildren="true" tabEnabled="false"> + <s:VGroup width="200" height="200"> + <s:Label text="Enter item name:"/> + <s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/> + <s:Label text="Enter description of your item:"/> + <s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/> + </s:VGroup> + </s:Scroller> + <s:Label right="10" width="180" verticalAlign="justify" + text="If you have items within a Scroller that need to be tabbed to, you can +need to set hasFocusableChildren to true. If you do not want the container itself to be tab enabled, +then you must set tabEnabled to false, such as shown here."/> + </s:Panel> +</s:Module> + http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/SimpleTitleWindowExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/SimpleTitleWindowExample.mxml b/tourdeflexmodules/src/spark/controls/SimpleTitleWindowExample.mxml new file mode 100644 index 0000000..23ca3f3 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/SimpleTitleWindowExample.mxml @@ -0,0 +1,62 @@ +<?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. + +--> +<!-- Simple custom MXML TitleWindow component. + The TitleWindowApp application displays this component. + You cannot run it independently. --> + +<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + title="Title Window" + close="PopUpManager.removePopUp(this)" > + + <fx:Script> + <![CDATA[ + import mx.managers.PopUpManager; + + import spark.components.RichText; + + // A reference to the TextInput control in which to put the result. + public var loginName:RichText; + + // Event handler for the OK button. + private function returnName():void { + loginName.text="Name entered: " + userName.text; + PopUpManager.removePopUp(this); + } + ]]> + </fx:Script> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" /> + </s:layout> + + <s:HGroup> + <s:Label text="Enter Name: "/> + <s:TextInput id="userName" width="100%"/> + </s:HGroup> + + <s:HGroup> + <s:Button label="OK" click="returnName()"/> + <s:Button label="Cancel" click="PopUpManager.removePopUp(this)"/> + </s:HGroup> + +</s:TitleWindow> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/SliderExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/SliderExample.mxml b/tourdeflexmodules/src/spark/controls/SliderExample.mxml new file mode 100644 index 0000000..a80fa8a --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/SliderExample.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. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="HSlider/VSlider Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + + <s:HGroup> + <s:Label text="Width:"/> + <s:HSlider id="slider2" + minimum="50" + maximum="250" + value="200" + liveDragging="true" /> + + </s:HGroup> + + <s:HGroup> + <s:VGroup> + <s:Label text="Height:"/> + <s:VSlider id="slider3" + minimum="50" + maximum="180" + value="160" + liveDragging="true"/> + </s:VGroup> + + <s:Group width="200"> + <s:Ellipse id="rect" + width="{slider2.value}" + height="{slider3.value}"> + <s:fill> + <s:LinearGradient rotation="45"> + <s:GradientEntry color="0x5008f3" /> + <s:GradientEntry color="0x7a2a84" /> + <s:GradientEntry color="0xfe08a4" /> + </s:LinearGradient> + </s:fill> + </s:Ellipse> + </s:Group> + </s:HGroup> + + <s:Label verticalAlign="justify" + text="The slider controls can be used to select a value by moving a slider thumb between +the end points of the slider track. The current value of the slider is determined by the relative location +of the thumb between the end points of the slider. The slider end points correspond to the sliderâs minimum and maximum values."/> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/SpinnerExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/SpinnerExample.mxml b/tourdeflexmodules/src/spark/controls/SpinnerExample.mxml new file mode 100644 index 0000000..0ad792d --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/SpinnerExample.mxml @@ -0,0 +1,52 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="Spinner Control Example" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:HGroup> + <mx:Text text="Use the arrows to change tabs:"/> + <s:Spinner id="mySpinner" maximum="3"/> + </s:HGroup> + + <!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value --> + <mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}"> + <mx:HBox label="Tab 1"> + <mx:Text text="Text on Tab 1 " fontSize="14" color="red"/> + </mx:HBox> + <mx:HBox label="Tab 2"> + <mx:Text text="Text on Tab 2" fontSize="16"/> + </mx:HBox> + <mx:HBox label="Tab 3"> + <mx:Text text="Text on Tab 3" fontSize="18" color="green"/> + </mx:HBox> + <mx:HBox label="Tab 4"> + <mx:Text text="Text on Tab 4" fontSize="20" color="purple"/> + </mx:HBox> + </mx:TabNavigator> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/TDFGradientBackgroundSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/TDFGradientBackgroundSkin.mxml b/tourdeflexmodules/src/spark/controls/TDFGradientBackgroundSkin.mxml new file mode 100644 index 0000000..fe2a943 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/TDFGradientBackgroundSkin.mxml @@ -0,0 +1,49 @@ +<?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:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:s="library://ns.adobe.com/flex/spark"> + + <fx:Metadata> + [HostComponent("spark.components.Application")] + </fx:Metadata> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + </s:states> + + <s:layout> + <s:BasicLayout /> + </s:layout> + + <s:Rect id="bg" width="100%" height="100%"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:entries> + <s:GradientEntry color="0x000000" ratio="0.00" /> + <s:GradientEntry color="0x323232" ratio="1.0" /> + </s:entries> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" /> +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/TabNavigatorExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/TabNavigatorExample.mxml b/tourdeflexmodules/src/spark/controls/TabNavigatorExample.mxml new file mode 100644 index 0000000..9e168be --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/TabNavigatorExample.mxml @@ -0,0 +1,60 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="TabNavigator Container" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" fontWeight="bold" + text="Select the tabs to change the panel."/> + + <mx:TabNavigator id="tn" width="100%" height="100%"> + <!-- Define each panel using a VBox container. --> + + <s:NavigatorContent label="Panel 1"> + <s:Label text="TabNavigator container panel 1"/> + </s:NavigatorContent> + + <s:NavigatorContent label="Panel 2"> + <s:Label text="TabNavigator container panel 2"/> + </s:NavigatorContent> + + <s:NavigatorContent label="Panel 3"> + <s:Label text="TabNavigator container panel 3"/> + </s:NavigatorContent> + </mx:TabNavigator> + + <s:Label width="100%" + text="Programmatically select the panel using a Button control."/> + + <s:HGroup> + <s:Button label="Select Tab 1" click="tn.selectedIndex=0" color="0x545454" /> + <s:Button label="Select Tab 2" click="tn.selectedIndex=1" color="0x545454" /> + <s:Button label="Select Tab 3" click="tn.selectedIndex=2" color="0x545454" /> + </s:HGroup> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/TextAreaExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/TextAreaExample.mxml b/tourdeflexmodules/src/spark/controls/TextAreaExample.mxml new file mode 100644 index 0000000..4048b37 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/TextAreaExample.mxml @@ -0,0 +1,89 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + <fx:Script> + <![CDATA[ + protected function changeHandler():void + { + txt.maxChars = this.maxChars.value; + txt.restrict = this.restrictStr.text; + txt.textFlow.textAlign = alignVal.selectedItem; + txt.textFlow.direction = direction.selectedItem; + } + ]]> + </fx:Script> + + <s:Panel title="TextArea Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:VGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify Max Character Input:"/> + <s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify Text Alignment:"/> + <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()"> + <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()"> + <s:dataProvider> + <mx:ArrayList> + <fx:String>ltr</fx:String> + <fx:String>rtl</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()" text="a-z 1-9"/> + </s:HGroup> + <s:VGroup> + <s:Label text="Text:"/> + <s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9" + change="this.changeHandler()"/> + </s:VGroup> + </s:VGroup> + <s:Label width="200" top="20" right="80" + text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text. +It can display horizontal and vertical scrollbars for scrolling through the text and supports vertical scrolling with the mouse wheel. This sample also shows +how you can restrict character input on the text area. The default when this is run will not allow the number 0 or caps based on the restrict range shown. The +sample also shows how you can specify a direction on the text."/> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/TextInputExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/TextInputExample.mxml b/tourdeflexmodules/src/spark/controls/TextInputExample.mxml new file mode 100644 index 0000000..0da6911 --- /dev/null +++ b/tourdeflexmodules/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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + <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 title="TextInput Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <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" + 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:Panel> + + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/TextLayout1Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/TextLayout1Example.mxml b/tourdeflexmodules/src/spark/controls/TextLayout1Example.mxml new file mode 100644 index 0000000..e0ea3b4 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/TextLayout1Example.mxml @@ -0,0 +1,163 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns: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 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 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:Module>
