updates, new images Signed-off-by: OmPrakash Muppirala <[email protected]>
Project: http://git-wip-us.apache.org/repos/asf/flex-examples/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-examples/commit/1f0cce99 Tree: http://git-wip-us.apache.org/repos/asf/flex-examples/tree/1f0cce99 Diff: http://git-wip-us.apache.org/repos/asf/flex-examples/diff/1f0cce99 Branch: refs/heads/develop Commit: 1f0cce9905c6d60d9d555852ea981941dd1be6b9 Parents: 015a690 Author: nasha001 <[email protected]> Authored: Tue Nov 4 12:58:33 2014 -0500 Committer: OmPrakash Muppirala <[email protected]> Committed: Tue Nov 4 11:07:39 2014 -0800 ---------------------------------------------------------------------- .../src/LayoutViews/AccordionLayoutView.mxml | 96 ++-- .../src/LayoutViews/CarouselLayoutView.mxml | 101 +++- .../src/LayoutViews/CoverFlowLayoutView.mxml | 113 +++-- .../src/LayoutViews/HorizontalLayoutView.mxml | 101 +++- .../src/LayoutViews/RolodexLayoutView.mxml | 98 ++-- .../src/LayoutViews/StackLayoutView.mxml | 99 ++-- .../src/LayoutViews/TileLayoutView.mxml | 110 +++-- .../src/LayoutViews/TimeMachineLayoutView.mxml | 100 ++-- .../src/LayoutViews/VerticalLayoutView.mxml | 101 +++- tourdeflexmobile/src/UIViews/ButtonBarView.mxml | 61 +-- .../src/UIViews/CalloutButtonView.mxml | 86 ++-- tourdeflexmobile/src/UIViews/CheckboxView.mxml | 52 ++- .../src/UIViews/DateSpinnerView.mxml | 48 +- tourdeflexmobile/src/UIViews/HscrubberView.mxml | 71 +++ tourdeflexmobile/src/UIViews/ListView.mxml | 44 +- .../src/UIViews/MobileGridView.mxml | 122 ++--- .../src/UIViews/RadiobuttonView.mxml | 50 +- .../src/UIViews/SpinnerListView.mxml | 143 +++--- tourdeflexmobile/src/UIViews/TextInputView.mxml | 76 ++- .../src/UIViews/ToggleSwitchView.mxml | 54 ++- .../src/assets/font/Roboto-Bold.ttf | Bin 0 -> 84924 bytes .../src/assets/font/Roboto-BoldItalic.ttf | Bin 0 -> 88104 bytes .../src/assets/font/Roboto-Italic.ttf | Bin 0 -> 87680 bytes .../src/assets/font/Roboto-Regular.ttf | Bin 0 -> 84564 bytes tourdeflexmobile/src/assets/icons/160/1.png | Bin 0 -> 12581 bytes tourdeflexmobile/src/assets/icons/160/2.png | Bin 0 -> 11322 bytes tourdeflexmobile/src/assets/icons/160/3.png | Bin 0 -> 12013 bytes tourdeflexmobile/src/assets/icons/160/about.png | Bin 1333 -> 465 bytes tourdeflexmobile/src/assets/icons/160/add.png | Bin 1090 -> 186 bytes tourdeflexmobile/src/assets/icons/160/dock.png | Bin 1129 -> 252 bytes tourdeflexmobile/src/assets/icons/160/icon.png | Bin 0 -> 1735 bytes tourdeflexmobile/src/assets/icons/160/icon1.png | Bin 0 -> 1708 bytes tourdeflexmobile/src/assets/icons/240/1.png | Bin 0 -> 20085 bytes tourdeflexmobile/src/assets/icons/240/2.png | Bin 0 -> 16937 bytes tourdeflexmobile/src/assets/icons/240/3.png | Bin 0 -> 18607 bytes tourdeflexmobile/src/assets/icons/240/about.png | Bin 1629 -> 683 bytes tourdeflexmobile/src/assets/icons/240/add.png | Bin 1142 -> 278 bytes tourdeflexmobile/src/assets/icons/240/dock.png | Bin 1211 -> 289 bytes tourdeflexmobile/src/assets/icons/240/icon.png | Bin 0 -> 2898 bytes tourdeflexmobile/src/assets/icons/240/icon1.png | Bin 0 -> 2901 bytes tourdeflexmobile/src/assets/icons/320/1.png | Bin 0 -> 27846 bytes tourdeflexmobile/src/assets/icons/320/2.png | Bin 0 -> 22973 bytes tourdeflexmobile/src/assets/icons/320/3.png | Bin 0 -> 28158 bytes tourdeflexmobile/src/assets/icons/320/about.png | Bin 2040 -> 860 bytes tourdeflexmobile/src/assets/icons/320/add.png | Bin 1221 -> 250 bytes tourdeflexmobile/src/assets/icons/320/dock.png | Bin 1337 -> 350 bytes tourdeflexmobile/src/assets/icons/320/icon.png | Bin 0 -> 4106 bytes tourdeflexmobile/src/assets/icons/320/icon1.png | Bin 0 -> 4125 bytes tourdeflexmobile/src/assets/icons/480/1.png | Bin 0 -> 56962 bytes tourdeflexmobile/src/assets/icons/480/2.png | Bin 0 -> 51977 bytes tourdeflexmobile/src/assets/icons/480/3.png | Bin 0 -> 58282 bytes tourdeflexmobile/src/assets/icons/480/about.png | Bin 0 -> 1409 bytes tourdeflexmobile/src/assets/icons/480/add.png | Bin 0 -> 305 bytes tourdeflexmobile/src/assets/icons/480/dock.png | Bin 0 -> 432 bytes tourdeflexmobile/src/assets/icons/480/icon.png | Bin 0 -> 7092 bytes tourdeflexmobile/src/assets/icons/480/icon1.png | Bin 0 -> 7141 bytes tourdeflexmobile/src/assets/icons/640/icon.png | Bin 0 -> 10109 bytes tourdeflexmobile/src/assets/icons/640/icon1.png | Bin 0 -> 10235 bytes tourdeflexmobile/src/assets/icons/icon1024.png | Bin 0 -> 481460 bytes tourdeflexmobile/src/assets/icons/icon144.png | Bin 0 -> 28472 bytes tourdeflexmobile/src/assets/icons/icon192.png | Bin 0 -> 42041 bytes tourdeflexmobile/src/assets/icons/icon48.png | Bin 0 -> 8203 bytes tourdeflexmobile/src/assets/icons/icon512.png | Bin 0 -> 137395 bytes tourdeflexmobile/src/assets/icons/icon72.png | Bin 0 -> 12525 bytes tourdeflexmobile/src/assets/icons/icon96.png | Bin 0 -> 17331 bytes tourdeflexmobile/src/assets/images/bg.png | Bin 2848 -> 0 bytes .../src/assets/images/logo_01_fullcolor.png | Bin 0 -> 69140 bytes .../src/assets/images/logo_01_fullcolor_wb.png | Bin 0 -> 134721 bytes .../src/assets/images/poweredby.png | Bin 0 -> 165477 bytes .../src/renderers/AccordionElement.mxml | 14 + .../src/renderers/MenuRenderer.mxml | 34 +- tourdeflexmobile/src/styles.css | 460 +++++++++++++++++-- tourdeflexmobile/src/views/BlogView.mxml | 26 +- tourdeflexmobile/src/views/HttpServiceView.mxml | 42 +- 74 files changed, 1648 insertions(+), 654 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml index 35f7e78..87f344f 100644 --- a/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml +++ b/tourdeflexmobile/src/LayoutViews/AccordionLayoutView.mxml @@ -18,40 +18,84 @@ limitations under the License. --> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:s="library://ns.adobe.com/flex/spark" title="AccordionLayout" xmlns:ns="http://flex.apache.org/experimental/ns";> + xmlns:s="library://ns.adobe.com/flex/spark" + title="AccordionLayout" + xmlns:ns="http://flex.apache.org/experimental/ns"; xmlns:renderers="renderers.*"> <fx:Script> <![CDATA[ import spark.primitives.BitmapImage; + import spark.skins.spark.DefaultComplexItemRenderer; + protected function buttonHandler(event:MouseEvent):void { - var random:Number = Math.ceil(Math.random()*3); - - var bitmapImage:BitmapImage = new BitmapImage(); - bitmapImage.width = 150; - bitmapImage.height = bitmapImage.width; - bitmapImage.source = "assets/images/box"+random+".png"; - group.addElement(bitmapImage); - - group.verticalScrollPosition = group.contentHeight; + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } } ]]> </fx:Script> - - + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" + source240dpi="@Embed('assets/icons/240/1.png')" + source320dpi="@Embed('assets/icons/320/1.png')" + source480dpi="@Embed('assets/icons/480/1.png" id="box1"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" + source240dpi="@Embed('assets/icons/240/2.png')" + source320dpi="@Embed('assets/icons/320/2.png')" + source480dpi="@Embed('assets/icons/480/2.png" id="box2"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" + source240dpi="@Embed('assets/icons/240/3.png')" + source320dpi="@Embed('assets/icons/320/3.png')" + source480dpi="@Embed('assets/icons/480/3.png" id="box3"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> <s:actionContent> - <s:Button click="buttonHandler(event)"> - <s:icon> - <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" /> - </s:icon> - </s:Button> - </s:actionContent> - - <s:Scroller id="scroller" width="200" height="200" horizontalCenter="0" verticalCenter="0"> - <s:Group id="group"> - <s:layout> - <ns:AccordionLayout useVirtualLayout="true" /> - </s:layout> - </s:Group> - </s:Scroller> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> + + <s:List id="list" includeIn="DemoState" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" pageScrollingEnabled="true"> + <s:layout> + <ns:AccordionLayout + useScrollBarForNavigation="true" + scrollBarDirection="horizontal" + duration="500" + direction="horizontal"/> + </s:layout> + <s:dataProvider> + <s:ArrayList> + <renderers:AccordionElement/> + <renderers:AccordionElement/> + <renderers:AccordionElement/> + <renderers:AccordionElement/> + <renderers:AccordionElement/> + <renderers:AccordionElement/> + <renderers:AccordionElement/> + <renderers:AccordionElement/> + <renderers:AccordionElement/> + <renderers:AccordionElement/> + </s:ArrayList> + </s:dataProvider> + </s:List> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="An AccordionLayout class arranges the layout elements in a vertical or horizontal sequence, with one of them at a time fully visible. + 
 
The position of the elements is determined by arranging them in a sequence, top to bottom or left to right depending on the value or duration. + 
 
If the target of the layout implements ISelectable list, a ButtonBarBase can be set using the buttonBar property and the layout will connect the target and ButtonBarBase together so that the ButtonBarBase can be used to navigate through the elements. + "/> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml index d87f7e4..46c0ab8 100644 --- a/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml +++ b/tourdeflexmobile/src/LayoutViews/CarouselLayoutView.mxml @@ -18,40 +18,91 @@ limitations under the License. --> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:s="library://ns.adobe.com/flex/spark" title="CarouselLayout" xmlns:ns="http://flex.apache.org/experimental/ns";> + xmlns:s="library://ns.adobe.com/flex/spark" title="CarouselLayout" xmlns:ns="http://flex.apache.org/experimental/ns"; xmlns:renderers="renderers.*"> <fx:Script> <![CDATA[ import spark.primitives.BitmapImage; + import spark.skins.spark.DefaultComplexItemRenderer; + + protected function buttonHandler(event:MouseEvent):void { - var random:Number = Math.ceil(Math.random()*3); - - var bitmapImage:BitmapImage = new BitmapImage(); - bitmapImage.width = Math.ceil(Math.random()*150); - bitmapImage.height = bitmapImage.width; - bitmapImage.source = "assets/images/box"+random+".png"; - group.addElement(bitmapImage); - - group.verticalScrollPosition = group.contentHeight; + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } } ]]> </fx:Script> + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" + source240dpi="@Embed('assets/icons/240/1.png')" + source320dpi="@Embed('assets/icons/320/1.png')" + source480dpi="@Embed('assets/icons/480/1.png" id="box1"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" + source240dpi="@Embed('assets/icons/240/2.png')" + source320dpi="@Embed('assets/icons/320/2.png')" + source480dpi="@Embed('assets/icons/480/2.png" id="box2"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" + source240dpi="@Embed('assets/icons/240/3.png')" + source320dpi="@Embed('assets/icons/320/3.png')" + source480dpi="@Embed('assets/icons/480/3.png" id="box3"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> + <s:actionContent> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> + <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" + pageScrollingEnabled="true" includeIn="DemoState"> + <s:layout> + <ns:CarouselLayout useScrollBarForNavigation="true" + scrollBarDirection="horizontal" + angle="40" + depthColor="1" + depthColorAlpha="0.5" + fieldOfView="90" + focalLength="600" + duration="250" + radiusY="100" + radiusZ="2000" + radiusX="570" /> + </s:layout> + <s:dataProvider> + <s:ArrayList> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + </s:ArrayList> + </s:dataProvider> + </s:List> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text=" CarouselLayout class arranges the layout elements in a sequence along an arc, with one of them at a time selected. + + 
 
The position of the elements is determined by the radii radiusX, radiusY and radiusZ. These can be properties can be set the negative values to produce a ring of elements surrounding the view point. + + 
 
The rotation of the elements is determined by the rotationX and rotationY properties."/> - <s:actionContent> - <s:Button click="buttonHandler(event)"> - <s:icon> - <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" /> - </s:icon> - </s:Button> - </s:actionContent> - - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group id="group"> - <s:layout> - <ns:CarouselLayout verticalAlign="middle" useVirtualLayout="true" /> - </s:layout> - </s:Group> - </s:Scroller> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml index 116831d..f24fc3c 100644 --- a/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml +++ b/tourdeflexmobile/src/LayoutViews/CoverFlowLayoutView.mxml @@ -18,40 +18,101 @@ limitations under the License. --> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:s="library://ns.adobe.com/flex/spark" title="CoverFlowLayout" xmlns:ns="http://flex.apache.org/experimental/ns";> + xmlns:s="library://ns.adobe.com/flex/spark" + title="CoverFlowLayout" + xmlns:ns="http://flex.apache.org/experimental/ns";> <fx:Script> <![CDATA[ import spark.primitives.BitmapImage; + protected function buttonHandler(event:MouseEvent):void { - var random:Number = Math.ceil(Math.random()*3); - - var bitmapImage:BitmapImage = new BitmapImage(); - bitmapImage.width = Math.ceil(Math.random()*150); - bitmapImage.height = bitmapImage.width; - bitmapImage.source = "assets/images/box"+random+".png"; - group.addElement(bitmapImage); - - group.verticalScrollPosition = group.contentHeight; + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } } ]]> </fx:Script> - - + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" + source240dpi="@Embed('assets/icons/240/1.png')" + source320dpi="@Embed('assets/icons/320/1.png')" + source480dpi="@Embed('assets/icons/480/1.png" id="box1"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" + source240dpi="@Embed('assets/icons/240/2.png')" + source320dpi="@Embed('assets/icons/320/2.png')" + source480dpi="@Embed('assets/icons/480/2.png" id="box2"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" + source240dpi="@Embed('assets/icons/240/3.png')" + source320dpi="@Embed('assets/icons/320/3.png')" + source480dpi="@Embed('assets/icons/480/3.png" id="box3"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> <s:actionContent> - <s:Button click="buttonHandler(event)"> - <s:icon> - <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" /> - </s:icon> - </s:Button> - </s:actionContent> - - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group id="group"> - <s:layout> - <ns:CoverflowLayout verticalAlign="middle" duration="500" useVirtualLayout="true" /> - </s:layout> - </s:Group> - </s:Scroller> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> + <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" + pageScrollingEnabled="true" includeIn="DemoState"> + <s:layout> + <ns:CoverflowLayout verticalAlign="middle" + duration="200" + id="coverFlowLayoutID" + useScrollBarForNavigation="true" + scrollBarDirection="horizontal" + selectedHorizontalDisplacement="100" + horizontalDisplacement="100" + selectedVerticalDisplacement="0" + verticalDisplacement="0" + horizontalScrollPosition="320" + fieldOfView="40" + focalLength="660" + maximumZ="50"/> + </s:layout> + <s:dataProvider> + <s:ArrayList> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + </s:ArrayList> + </s:dataProvider> + </s:List> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="A CoverflowLayout class arranges the layout elements in a linear along with unselected items having a different z and rotation. + + 
 
The horizontal position of the elements is determined by the combined result of horizontalAlign, horizontalDisplacement, horizontalAlignOffset or horizontalAlignOffsetPercent, elementHorizontalAlign and selectedHorizontalDisplacement. + + 
 
The horizontal position of the elements is determined by the combined result of verticalAlign, verticalDisplacement, verticalAlignOffset or verticalAlignOffsetPercent, elementVerticalAlign and selectedVerticalDisplacement. + + 
 
The z position of unselected elements is determined by the maximumZ property. + + 
 
The rotation of the elements is determined by the rotationX, rotationY and rotationZ properties. + + 
 
The color of unselected elements is determined by the depthColor and depthColorAlpha properties. + + 
 
If depthColor has a value of -1, no color transform is applied. + + 
 
The number elements or elements rendered is determined by the numUnselectedElements property. If numUnselectedElements has a value of -1 and useVirtualLayout has a value of true, only the elements that fit within the bound of the target are rendered, If numUnselectedElements has a value of -1 and useVirtualLayout has a value of false, all elements are rendered."/> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml index 0caf89d..d7c1b2f 100644 --- a/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml +++ b/tourdeflexmobile/src/LayoutViews/HorizontalLayoutView.mxml @@ -23,35 +23,86 @@ limitations under the License. <fx:Script> <![CDATA[ import spark.primitives.BitmapImage; + import spark.skins.spark.DefaultComplexItemRenderer; + protected function buttonHandler(event:MouseEvent):void { - var random:Number = Math.ceil(Math.random()*3); - - var bitmapImage:BitmapImage = new BitmapImage(); - bitmapImage.width = Math.ceil(Math.random()*150); - bitmapImage.height = bitmapImage.width; - bitmapImage.source = "assets/images/box"+random+".png"; - group.addElement(bitmapImage); - - group.horizontalScrollPosition = group.contentWidth; + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } } ]]> </fx:Script> - - + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" + source240dpi="@Embed('assets/icons/240/1.png')" + source320dpi="@Embed('assets/icons/320/1.png')" + source480dpi="@Embed('assets/icons/480/1.png" id="box1"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" + source240dpi="@Embed('assets/icons/240/2.png')" + source320dpi="@Embed('assets/icons/320/2.png')" + source480dpi="@Embed('assets/icons/480/2.png" id="box2"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" + source240dpi="@Embed('assets/icons/240/3.png')" + source320dpi="@Embed('assets/icons/320/3.png')" + source480dpi="@Embed('assets/icons/480/3.png" id="box3"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> <s:actionContent> - <s:Button click="buttonHandler(event)"> - <s:icon> - <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" /> - </s:icon> - </s:Button> - </s:actionContent> - - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group id="group"> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" useVirtualLayout="true" /> - </s:layout> - </s:Group> - </s:Scroller> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> + <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" includeIn="DemoState" verticalScrollPolicy="off"> + <s:layout> + <s:HorizontalLayout verticalAlign="middle" useVirtualLayout="true" /> + </s:layout> + <s:dataProvider> + <s:ArrayList> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + </s:ArrayList> + </s:dataProvider> + </s:List> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="The HorizontalLayout class arranges the layout elements in a horizontal sequence, left to right, with optional gaps between the elements and optional padding around the elements. + 
 
The horizontal position of the elements is determined by arranging them in a horizontal sequence, left to right, taking into account the padding before the first element and the gaps between the elements. + 
 
The vertical position of the elements is determined by the layout's verticalAlign property. + 
 
During the execution of the measure() method, the default size of the container is calculated by accumulating the preferred sizes of the elements, including gaps and padding. When the requestedColumnCount property is set to a value other than -1, only the space for that many elements is measured, starting from the first element. + 
 
During the execution of the updateDisplayList() method, the width of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum width and maximum width are always respected): + 
 
- If variableColumnWidth is false, then set the element's width to the value of the columnWidth property. + 
 
- If the element's percentWidth is set, then calculate the element's width by distributing the available container width between all elements with percentWidth setting. The available container width is equal to the container width minus the gaps, the padding and the space occupied by the rest of the elements. The element's precentWidth property is ignored when the layout is virtualized. + 
 
- Set the element's width to its preferred width. + 
 
The height of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum height and maximum height are always respected): + 
 
- If the verticalAlign property is 'justify', then set the element's height to the container height. + 
 
- If the verticalAlign property is 'contentJustify', then set the element's height to the maximum between the container's height and all elements' preferred height. + 
 
- If the element's percentHeight property is set, then calculate the element's height as a percentage of the container's height. + 
 
- Set the element's height to its preferred height. "/> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml index 8934ec6..c6f675e 100644 --- a/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml +++ b/tourdeflexmobile/src/LayoutViews/RolodexLayoutView.mxml @@ -18,40 +18,86 @@ limitations under the License. --> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:s="library://ns.adobe.com/flex/spark" title="RolodexLayout" xmlns:ns="http://flex.apache.org/experimental/ns";> + xmlns:s="library://ns.adobe.com/flex/spark" + title="RolodexLayout" + xmlns:ns="http://flex.apache.org/experimental/ns";> <fx:Script> <![CDATA[ import spark.primitives.BitmapImage; + protected function buttonHandler(event:MouseEvent):void { - var random:Number = Math.ceil(Math.random()*3); - - var bitmapImage:BitmapImage = new BitmapImage(); - bitmapImage.width = Math.ceil(Math.random()*150); - bitmapImage.height = bitmapImage.width; - bitmapImage.source = "assets/images/box"+random+".png"; - group.addElement(bitmapImage); - - group.verticalScrollPosition = group.contentHeight; + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } } ]]> </fx:Script> - - + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" + source240dpi="@Embed('assets/icons/240/1.png')" + source320dpi="@Embed('assets/icons/320/1.png')" + source480dpi="@Embed('assets/icons/480/1.png" id="box1"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" + source240dpi="@Embed('assets/icons/240/2.png')" + source320dpi="@Embed('assets/icons/320/2.png')" + source480dpi="@Embed('assets/icons/480/2.png" id="box2"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" + source240dpi="@Embed('assets/icons/240/3.png')" + source320dpi="@Embed('assets/icons/320/3.png')" + source480dpi="@Embed('assets/icons/480/3.png" id="box3"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> <s:actionContent> - <s:Button click="buttonHandler(event)"> - <s:icon> - <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" /> - </s:icon> - </s:Button> - </s:actionContent> - - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group id="group"> - <s:layout> - <ns:RolodexLayout horizontalAlign="center" useVirtualLayout="true" /> - </s:layout> - </s:Group> - </s:Scroller> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> + <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" + pageScrollingEnabled="true" includeIn="DemoState"> + <s:layout> + <ns:RolodexLayout useScrollBarForNavigation="true" + scrollBarDirection="vertical" + duration="200" + fieldOfView="30" + focalLength="870" + horizontalDisplacement="0" + verticalDisplacement="180" + maximumZ="2000" + rotationAnchor="top"/> + </s:layout> + <s:dataProvider> + <s:ArrayList> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + </s:ArrayList> + </s:dataProvider> + </s:List> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="The RolodexLayout class arranges the layout elements in a depth sequence, front to back, with optional depths between the elements and optional aligment of the sequence of elements. + 
 
When moving between elements the first element is rotated by 270 degrees, with the transform point anchored on the side of the element specified with rotationAnchor to transition the element in and out of view. + 
 
The vertical position of the elements is determined by a combination of the verticalAlign, verticalOffset, verticalDisplacement and the number of indices the element is from the selectedIndex property. First the element is aligned using the verticalAlign property and then the verticalOffset is applied. The value of verticalDisplacement is then multiplied of the number of elements the element is from the selected element. + 
 
The horizontal position of the elements is determined by a combination of the horizontalAlign, horizontalOffset, horizontalDisplacement and the number of indices the element is from the selectedIndex property. First the element is aligned using the horizontalAlign property and then the determined is applied. The value of horizontalDisplacement is then multiplied of the number of elements the element is from the selected element."/> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml index 3e556ac..f3a4ee0 100644 --- a/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml +++ b/tourdeflexmobile/src/LayoutViews/StackLayoutView.mxml @@ -18,40 +18,87 @@ limitations under the License. --> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:s="library://ns.adobe.com/flex/spark" title="StackLayout" xmlns:ns="http://flex.apache.org/experimental/ns";> + xmlns:s="library://ns.adobe.com/flex/spark" + title="StackLayout" + xmlns:ns="http://flex.apache.org/experimental/ns";> <fx:Script> <![CDATA[ import spark.primitives.BitmapImage; + protected function buttonHandler(event:MouseEvent):void { - var random:Number = Math.ceil(Math.random()*3); - - var bitmapImage:BitmapImage = new BitmapImage(); - bitmapImage.width = Math.ceil(Math.random()*150); - bitmapImage.height = bitmapImage.width; - bitmapImage.source = "assets/images/box"+random+".png"; - group.addElement(bitmapImage); - - group.verticalScrollPosition = group.contentHeight; + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } } ]]> </fx:Script> - - + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" + source240dpi="@Embed('assets/icons/240/1.png')" + source320dpi="@Embed('assets/icons/320/1.png')" + source480dpi="@Embed('assets/icons/480/1.png" id="box1"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" + source240dpi="@Embed('assets/icons/240/2.png')" + source320dpi="@Embed('assets/icons/320/2.png')" + source480dpi="@Embed('assets/icons/480/2.png" id="box2"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" + source240dpi="@Embed('assets/icons/240/3.png')" + source320dpi="@Embed('assets/icons/320/3.png')" + source480dpi="@Embed('assets/icons/480/3.png" id="box3"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> <s:actionContent> - <s:Button click="buttonHandler(event)"> - <s:icon> - <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" /> - </s:icon> - </s:Button> - </s:actionContent> - - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group id="group"> - <s:layout> - <ns:StackLayout verticalAlign="middle" useVirtualLayout="true" /> - </s:layout> - </s:Group> - </s:Scroller> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> + <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" + pageScrollingEnabled="true" includeIn="DemoState"> + <s:layout> + <ns:StackLayout horizontalAlign="justify" verticalAlign="justify" scrollBarDirection="horizontal"/> + </s:layout> + <s:dataProvider> + <s:ArrayList> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + </s:ArrayList> + </s:dataProvider> + </s:List> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="An StackLayout class shows a single element at a time.. + 
 
The horizontal position of the shown element is determined by the layout's horizontalAlign property. + 
 
The vertical position of the shown element is determined by the layout's verticalAlign property. + 
 
The width of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum width and maximum width are always respected): + 
 
- If horizontalAlign is 'justify', then set the element's width to the container width. + 
 
- If horizontalAlign is 'contentJustify', then set the element's width to the maximum between the container's width and all elements' preferred width. + 
 
- If the element's percentWidth is set, then calculate the element's width as a percentage of the container's width. + 
 
- Set the element's width to its preferred width. + 
 
The height of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum height and maximum height are always respected): + 
 
- If the verticalAlign property is 'justify', then set the element's height to the container height. + 
 
- If the verticalAlign property is 'contentJustify', then set the element's height to the maximum between the container's height and all elements' preferred height + 
 
- If the element's percentHeight property is set, then calculate the element's height as a percentage of the container's height. + 
 
- Set the element's height to its preferred height."/> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml index 059817f..6dc48eb 100644 --- a/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml +++ b/tourdeflexmobile/src/LayoutViews/TileLayoutView.mxml @@ -23,38 +23,92 @@ limitations under the License. <fx:Script> <![CDATA[ import spark.primitives.BitmapImage; + import spark.skins.spark.DefaultComplexItemRenderer; + protected function buttonHandler(event:MouseEvent):void { - var random:Number = Math.ceil(Math.random()*3); - - var miniGroup:Group = new Group(); - group.addElement(miniGroup); - - var bitmapImage:BitmapImage = new BitmapImage(); - bitmapImage.width = Math.ceil(Math.random()*100); - bitmapImage.height = bitmapImage.width; - bitmapImage.source = "assets/images/box"+random+".png"; - miniGroup.addElement(bitmapImage); - - //group.verticalScrollPosition = group.contentHeight; + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } } ]]> </fx:Script> - - + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" + source240dpi="@Embed('assets/icons/240/1.png')" + source320dpi="@Embed('assets/icons/320/1.png')" + source480dpi="@Embed('assets/icons/480/1.png" id="box1"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" + source240dpi="@Embed('assets/icons/240/2.png')" + source320dpi="@Embed('assets/icons/320/2.png')" + source480dpi="@Embed('assets/icons/480/2.png" id="box2"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" + source240dpi="@Embed('assets/icons/240/3.png')" + source320dpi="@Embed('assets/icons/320/3.png')" + source480dpi="@Embed('assets/icons/480/3.png" id="box3"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> <s:actionContent> - <s:Button click="buttonHandler(event)"> - <s:icon> - <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" /> - </s:icon> - </s:Button> - </s:actionContent> - - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group id="group"> - <s:layout> - <s:TileLayout orientation="rows" columnWidth="100" rowHeight="100" useVirtualLayout="true" /> - </s:layout> - </s:Group> - </s:Scroller> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> + <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" includeIn="DemoState"> + <s:layout> + <s:TileLayout columnAlign="justifyUsingWidth" + columnWidth="NaN" + verticalAlign="middle" + horizontalAlign="center" + horizontalGap="6" + orientation="rows" + rowAlign="top" + verticalGap="6"/> + </s:layout> + <s:dataProvider> + <s:ArrayList> + <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box1}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box2}" scaleX=".7" scaleY=".7"/> + <s:BitmapImage source="{box3}" scaleX=".7" scaleY=".7"/> + </s:ArrayList> + </s:dataProvider> + </s:List> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="The TileLayout class arranges layout elements in columns and rows of equally-sized cells. The TileLayout class uses a number of properties that control orientation, count, size, gap and justification of the columns and the rows as well as element alignment within the cells. + 
 
Per-element supported constraints are percentWidth and percentHeight. Element's minimum and maximum sizes are always be respected and where possible, an element's size is limited to less then or equal of the cell size. + 
 
When not explicitly set, the columnWidth property is calculated as the maximum preferred bounds width of all elements and the columnHeight property is calculated as the maximum preferred bounds height of all elements. + 
 
When not explicitly set, the columnCount and rowCount properties are calculated from any explicit width and height settings for the layout target, and columnWidth and columnHeight. In case none is specified, the columnCount and rowCount values are picked so that the resulting pixel area is as square as possible + 
 
The measured size is calculated from the columnCount, rowCount, columnWidth, rowHeight properties and the gap sizes. + 
 
The default measured size, when no properties were explicitly set, is as square as possible area and is large enough to fit all elements. + 
 
In other cases the measured size may not be big enough to fit all elements. For example, when both columnCount and rowCount are explicitly set to values such that columnCount * rowCount less than element count. + 
 
The minimum measured size is calculated the same way as the measured size but it's guaranteed to encompass enough rows and columns along the minor axis to fit all elements. + "/> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml index 5a4bc42..d3f644c 100644 --- a/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml +++ b/tourdeflexmobile/src/LayoutViews/TimeMachineLayoutView.mxml @@ -18,40 +18,88 @@ limitations under the License. --> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:s="library://ns.adobe.com/flex/spark" title="TimeMachineLayout" xmlns:ns="http://flex.apache.org/experimental/ns";> + xmlns:s="library://ns.adobe.com/flex/spark" + title="TimeMachineLayout" + xmlns:ns="http://flex.apache.org/experimental/ns";> <fx:Script> <![CDATA[ import spark.primitives.BitmapImage; + protected function buttonHandler(event:MouseEvent):void { - var random:Number = Math.ceil(Math.random()*3); - - var bitmapImage:BitmapImage = new BitmapImage(); - bitmapImage.width = Math.ceil(Math.random()*150); - bitmapImage.height = bitmapImage.width; - bitmapImage.source = "assets/images/box"+random+".png"; - group.addElement(bitmapImage); - - group.verticalScrollPosition = group.contentHeight; + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } } ]]> </fx:Script> - - + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" + source240dpi="@Embed('assets/icons/240/1.png')" + source320dpi="@Embed('assets/icons/320/1.png')" + source480dpi="@Embed('assets/icons/480/1.png" id="box1"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" + source240dpi="@Embed('assets/icons/240/2.png')" + source320dpi="@Embed('assets/icons/320/2.png')" + source480dpi="@Embed('assets/icons/480/2.png" id="box2"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" + source240dpi="@Embed('assets/icons/240/3.png')" + source320dpi="@Embed('assets/icons/320/3.png')" + source480dpi="@Embed('assets/icons/480/3.png" id="box3"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> <s:actionContent> - <s:Button click="buttonHandler(event)"> - <s:icon> - <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" /> - </s:icon> - </s:Button> - </s:actionContent> - - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group id="group"> - <s:layout> - <ns:TimeMachineLayout verticalAlign="middle" useVirtualLayout="true" /> - </s:layout> - </s:Group> - </s:Scroller> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> + <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" + pageScrollingEnabled="true" includeIn="DemoState"> + <s:layout> + <ns:TimeMachineLayout useScrollBarForNavigation="true" + scrollBarDirection="vertical" + duration="200" + fieldOfView="30" + focalLength="870" + horizontalDisplacement="0" + verticalDisplacement="0" + maximumZ="3000"/> + </s:layout> + <s:dataProvider> + <s:ArrayList> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + </s:ArrayList> + </s:dataProvider> + </s:List> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="The TimeMachineLayout class arranges the layout elements in a depth sequence, front to back, with optional depths between the elements and optional aligment the sequence of elements. + 
 
The vertical position of the elements is determined by a combination of the verticalAlign, verticalOffset, verticalDisplacement and the number of indices the element is from the selectedIndex property. First the element is aligned using the verticalAlign property and then the verticalOffset is applied. The value of verticalDisplacement is then multiplied of the number of elements the element is from the selected element. + 
 
The horizontal position of the elements is determined by a combination of the horizontalAlign, horizontalOffset, horizontalDisplacement and the number of indices the element is from the selectedIndex property. First the element is aligned using the horizontalAlign property and then the determined is applied. The value of horizontalDisplacement is then multiplied of the number of elements the element is from the selected element. + "/> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml b/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml index 2d2d81b..3df28e8 100644 --- a/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml +++ b/tourdeflexmobile/src/LayoutViews/VerticalLayoutView.mxml @@ -23,35 +23,86 @@ limitations under the License. <fx:Script> <![CDATA[ import spark.primitives.BitmapImage; + import spark.skins.spark.DefaultComplexItemRenderer; + protected function buttonHandler(event:MouseEvent):void { - var random:Number = Math.ceil(Math.random()*3); - - var bitmapImage:BitmapImage = new BitmapImage(); - bitmapImage.width = Math.ceil(Math.random()*150); - bitmapImage.height = bitmapImage.width; - bitmapImage.source = "assets/images/box"+random+".png"; - group.addElement(bitmapImage); - - group.verticalScrollPosition = group.contentHeight; + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } } ]]> </fx:Script> - - + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/1.png')" + source240dpi="@Embed('assets/icons/240/1.png')" + source320dpi="@Embed('assets/icons/320/1.png')" + source480dpi="@Embed('assets/icons/480/1.png" id="box1"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/2.png')" + source240dpi="@Embed('assets/icons/240/2.png')" + source320dpi="@Embed('assets/icons/320/2.png')" + source480dpi="@Embed('assets/icons/480/2.png" id="box2"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/3.png')" + source240dpi="@Embed('assets/icons/240/3.png')" + source320dpi="@Embed('assets/icons/320/3.png')" + source480dpi="@Embed('assets/icons/480/3.png" id="box3"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/about.png')" id="aboutIcon" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/dock.png')" id="demoIcon" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> <s:actionContent> - <s:Button click="buttonHandler(event)"> - <s:icon> - <s:MultiDPIBitmapSource source160dpi="@Embed('assets/icons/160/add.png')" source240dpi="@Embed('assets/icons/240/add.png')" source320dpi="@Embed('assets/icons/320/add.png')" /> - </s:icon> - </s:Button> - </s:actionContent> - - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group id="group"> - <s:layout> - <s:VerticalLayout horizontalAlign="center" useVirtualLayout="true" /> - </s:layout> - </s:Group> - </s:Scroller> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> + <s:List id="list" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" includeIn="DemoState"> + <s:layout> + <s:VerticalLayout useVirtualLayout="true" horizontalAlign="center" /> + </s:layout> + <s:dataProvider> + <s:ArrayList> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + <s:BitmapImage source="{box1}" /> + <s:BitmapImage source="{box2}" /> + <s:BitmapImage source="{box3}" /> + </s:ArrayList> + </s:dataProvider> + </s:List> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="VerticalLayout class arranges the layout elements in a vertical sequence, top to bottom, with optional gaps between the elements and optional padding around the sequence of elements. + 
 
The vertical position of the elements is determined by arranging them in a vertical sequence, top to bottom, taking into account the padding before the first element and the gaps between the elements. + 
 
The horizontal position of the elements is determined by the layout's horizontalAlign property. + 
 
During the execution of the measure() method, the default size of the container is calculated by accumulating the preferred sizes of the elements, including gaps and padding. When requestedRowCount is set, only the space for that many elements is measured, starting from the first element. + 
 
During the execution of the updateDisplayList() method, the height of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum height and maximum height are always respected): + 
 
- If variableRowHeight is false, then set the element's height to the value of the rowHeight property. + 
 
- If the element's percentHeight is set, then calculate the element's height by distributing the available container height between all elements with a percentHeight setting. The available container height is equal to the container height minus the gaps, the padding and the space occupied by the rest of the elements. The element's precentHeight property is ignored when the layout is virtualized. + 
 
- Set the element's height to its preferred height. + 
 
The width of each element is calculated according to the following rules, listed in their respective order of precedence (element's minimum width and maximum width are always respected): + 
 
- If horizontalAlign is 'justify', then set the element's width to the container width. + 
 
- If horizontalAlign is 'contentJustify', then set the element's width to the maximum between the container's width and all elements' preferred width. + 
 
- Set the element's width to its preferred width. + "/> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/ButtonBarView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/UIViews/ButtonBarView.mxml b/tourdeflexmobile/src/UIViews/ButtonBarView.mxml index 54814f2..a28e7db 100644 --- a/tourdeflexmobile/src/UIViews/ButtonBarView.mxml +++ b/tourdeflexmobile/src/UIViews/ButtonBarView.mxml @@ -23,7 +23,6 @@ limitations under the License. <fx:Script> <![CDATA[ import spark.events.IndexChangeEvent; - import spark.skins.mobile.TextAreaSkin; protected function buttonbarHandler(event:IndexChangeEvent):void { @@ -32,47 +31,51 @@ limitations under the License. protected function buttonHandler(event:MouseEvent):void { - if(currentState == "DemoState"){ + if(currentState == "DemoState") + { currentState = "InfoState"; - }else if(currentState == "InfoState"){ + } + else if(currentState == "InfoState") + { currentState = "DemoState"; } } ]]> </fx:Script> - <s:states> <s:State name="DemoState"/> <s:State name="InfoState"/> </s:states> - <fx:Declarations> - <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/> - <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/> + <s:MultiDPIBitmapSource id="aboutIcon" + source160dpi="@Embed('assets/icons/160/about.png')" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource id="demoIcon" + source160dpi="@Embed('assets/icons/160/dock.png')" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> </fx:Declarations> - - <s:ButtonBar id="buttonbar" includeIn="DemoState" change="buttonbarHandler(event)" left="5" right="5" top="5"> - <s:ArrayList> - <fx:Object label="Button 1"/> - <fx:Object label="Button 2"/> - <fx:Object label="Button 3"/> - </s:ArrayList> - </s:ButtonBar> - - <s:Label id="label" includeIn="DemoState" horizontalCenter="0" textAlign="center" bottom="20"/> - - <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The ButtonBar control defines a horizontal group of logically related buttons with a common look and navigation. - 
 
The typical use for a button bar is for grouping a set of related buttons together, which gives them a common look and navigation, and handling the logic for the change event in a single place. - - 
 
The ButtonBar control creates Button controls based on the value of its dataProvider property. Use methods such as addItem() and removeItem() to manipulate the dataProvider property to add and remove data items. The ButtonBar control automatically adds or removes the necessary children based on changes to the dataProvider property. - - 
 
To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers. - - 
 
For non-mobile projects, you can use the ButtonBar control to set the active child of a ViewStack container, as the following example shows: - - 
 
Note: The Spark list-based controls (the Spark ListBase class and its subclasses such as ButtonBar, ComboBox, DropDownList, List, and TabBar) do not support the BasicLayout class as the value of the layout property. Do not use BasicLayout with the Spark list-based controls."/> - + <s:VGroup width="100%" height="100%" includeIn="DemoState" horizontalAlign="center" verticalAlign="middle"> + <s:ButtonBar id="buttonbar" change="buttonbarHandler(event)"> + <s:ArrayList> + <fx:Object label="Button 1"/> + <fx:Object label="Button 2"/> + <fx:Object label="Button 3"/> + </s:ArrayList> + </s:ButtonBar> + <s:Spacer height="10"/> + <s:Label id="label" horizontalCenter="0" textAlign="center"/> + </s:VGroup> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" text="The ButtonBar control defines a horizontal group of logically related buttons with a common look and navigation. + 
 
The typical use for a button bar is for grouping a set of related buttons together, which gives them a common look and navigation, and handling the logic for the change event in a single place. + 
 
The ButtonBar control creates Button controls based on the value of its dataProvider property. Use methods such as addItem() and removeItem() to manipulate the dataProvider property to add and remove data items. The ButtonBar control automatically adds or removes the necessary children based on changes to the dataProvider property. + 
 
To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers. + 
 
For non-mobile projects, you can use the ButtonBar control to set the active child of a ViewStack container, as the following example shows: + 
 
Note: The Spark list-based controls (the Spark ListBase class and its subclasses such as ButtonBar, ComboBox, DropDownList, List, and TabBar) do not support the BasicLayout class as the value of the layout property. Do not use BasicLayout with the Spark list-based controls."/> <s:actionContent> <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> </s:actionContent> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml b/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml index eec4a8c..61e52dc 100644 --- a/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml +++ b/tourdeflexmobile/src/UIViews/CalloutButtonView.mxml @@ -18,55 +18,75 @@ limitations under the License. --> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:s="library://ns.adobe.com/flex/spark" title="CalloutButton"> + xmlns:s="library://ns.adobe.com/flex/spark" + title="CalloutButton"> <fx:Script> <![CDATA[ - import spark.skins.mobile.TextAreaSkin; + protected function buttonHandler(event:MouseEvent):void { - if(currentState == "DemoState"){ + if(currentState == "DemoState") + { currentState = "InfoState"; - }else if(currentState == "InfoState"){ + } + else if(currentState == "InfoState") + { currentState = "DemoState"; } } + ]]> - </fx:Script> - + </fx:Script> <s:states> <s:State name="DemoState"/> <s:State name="InfoState"/> - </s:states> - + </s:states> <fx:Declarations> - <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/> - <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/> + <s:MultiDPIBitmapSource id="aboutIcon" + source160dpi="@Embed('assets/icons/160/about.png')" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource id="demoIcon" + source160dpi="@Embed('assets/icons/160/dock.png')" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> </fx:Declarations> - - <s:CalloutButton label="CalloutButton" horizontalCenter="0" y="10"> - <s:List> - <s:ArrayList> - <fx:Object label="Item 1"/> - <fx:Object label="Item 2"/> - <fx:Object label="Item 3"/> - <fx:Object label="Item 4"/> - <fx:Object label="Item 5"/> - </s:ArrayList> - </s:List> - </s:CalloutButton> - - <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The CalloutButton control is a drop down component that defines a button to open and close a Callout container. The CalloutButton specifies the layout and child components of the Callout container. - - 
 
The CalloutButton control uses the spark.components.supportClasses.DropDownController class to manage the Callout container. You can access the DropDownController by using the protected CalloutButton.dropDownController property. - - 
 
When the callout is open: - + <s:VGroup includeIn="DemoState" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"> + <s:CalloutButton label="Callout List" horizontalCenter="0"> + <s:List> + <s:ArrayList> + <fx:Object label="Item 1"/> + <fx:Object label="Item 2"/> + <fx:Object label="Item 3"/> + <fx:Object label="Item 4"/> + <fx:Object label="Item 5"/> + </s:ArrayList> + </s:List> + </s:CalloutButton> + <s:Spacer height="10"/> + <s:CalloutButton label="Callout Spinner" horizontalCenter="0"> + <s:DateSpinner displayMode="dateAndTime" id="spinnerDate"/> + </s:CalloutButton> + <s:Spacer height="10"/> + <s:CalloutButton label="Callout Check Boxes" horizontalCenter="0" > + <s:VGroup includeIn="DemoState" horizontalAlign="center" width="100%" height="100%" + paddingLeft="5" paddingRight="10" paddingTop="5" paddingBottom="5"> + <s:CheckBox label="CheckBox 1" /> + <s:CheckBox label="CheckBox 2" /> + <s:CheckBox label="CheckBox 3" /> + </s:VGroup> + </s:CalloutButton> + </s:VGroup> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="The CalloutButton control is a drop down component that defines a button to open and close a Callout container. The CalloutButton specifies the layout and child components of the Callout container. + 
 
The CalloutButton control uses the spark.components.supportClasses.DropDownController class to manage the Callout container. You can access the DropDownController by using the protected CalloutButton.dropDownController property. + 
 
When the callout is open: 
 
Clicking the button closes the callout - 
 
Clicking outside of the callout closes the callout."/> - + 
 
Clicking outside of the callout closes the callout."/> <s:actionContent> <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> - </s:actionContent> - + </s:actionContent> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/CheckboxView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/UIViews/CheckboxView.mxml b/tourdeflexmobile/src/UIViews/CheckboxView.mxml index ff9dbc6..ed8a18a 100644 --- a/tourdeflexmobile/src/UIViews/CheckboxView.mxml +++ b/tourdeflexmobile/src/UIViews/CheckboxView.mxml @@ -18,11 +18,12 @@ limitations under the License. --> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:s="library://ns.adobe.com/flex/spark" title="CheckBox"> + xmlns:s="library://ns.adobe.com/flex/spark" + title="CheckBox"> <fx:Script> <![CDATA[ - import spark.skins.mobile.TextAreaSkin; + protected function checkboxHandler(event:Event):void { label.text = event.target.label + " toggled: " + event.target.selected as String; @@ -30,40 +31,45 @@ limitations under the License. protected function buttonHandler(event:MouseEvent):void { - if(currentState == "DemoState"){ + if(currentState == "DemoState") + { currentState = "InfoState"; - }else if(currentState == "InfoState"){ + } + else if(currentState == "InfoState") + { currentState = "DemoState"; } } ]]> - </fx:Script> - + </fx:Script> <s:states> <s:State name="DemoState"/> <s:State name="InfoState"/> - </s:states> - + </s:states> <fx:Declarations> - <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/> - <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/> - </fx:Declarations> - - <s:VGroup includeIn="DemoState" horizontalCenter="0" y="20"> + <s:MultiDPIBitmapSource id="aboutIcon" + source160dpi="@Embed('assets/icons/160/about.png')" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource id="demoIcon" + source160dpi="@Embed('assets/icons/160/dock.png')" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> + <s:VGroup includeIn="DemoState" horizontalAlign="center" width="100%" height="100%" verticalAlign="middle"> <s:CheckBox change="checkboxHandler(event)" label="CheckBox 1" /> <s:CheckBox change="checkboxHandler(event)" label="CheckBox 2" /> <s:CheckBox change="checkboxHandler(event)" label="CheckBox 3" /> - </s:VGroup> - - <s:Label includeIn="DemoState" id="label" horizontalCenter="0" bottom="20" textAlign="center"/> - - <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The CheckBox component consists of an optional label and a small box that can contain a check mark or not. - 
 
When a user clicks a CheckBox component or its associated text, the CheckBox component sets its selected property to true for checked, and to false for unchecked. - + <s:Spacer height="10"/> + <s:Label id="label" horizontalCenter="0" bottom="20" textAlign="center"/> + </s:VGroup> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="The CheckBox component consists of an optional label and a small box that can contain a check mark or not. + 
 
When a user clicks a CheckBox component or its associated text, the CheckBox component sets its selected property to true for checked, and to false for unchecked. 
 
To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers."/> - <s:actionContent> <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> - </s:actionContent> - + </s:actionContent> </s:View> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml b/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml index 0cb738f..c3e0cde 100644 --- a/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml +++ b/tourdeflexmobile/src/UIViews/DateSpinnerView.mxml @@ -21,38 +21,48 @@ limitations under the License. xmlns:s="library://ns.adobe.com/flex/spark" title="DateSpinnerView"> <fx:Script> <![CDATA[ - import spark.skins.mobile.TextAreaSkin; + protected function buttonHandler(event:MouseEvent):void { - if(currentState == "DemoState"){ + if(currentState == "DemoState") + { currentState = "InfoState"; - }else if(currentState == "InfoState"){ + } + else if(currentState == "InfoState") + { currentState = "DemoState"; } } ]]> - </fx:Script> - + </fx:Script> <s:states> <s:State name="DemoState"/> <s:State name="InfoState"/> - </s:states> - + </s:states> <fx:Declarations> - <s:MultiDPIBitmapSource id="aboutIcon" source160dpi="@Embed('assets/icons/160/about.png')" source240dpi="@Embed('assets/icons/240/about.png')" source320dpi="@Embed('assets/icons/320/about.png')"/> - <s:MultiDPIBitmapSource id="demoIcon" source160dpi="@Embed('assets/icons/160/dock.png')" source240dpi="@Embed('assets/icons/240/dock.png')" source320dpi="@Embed('assets/icons/320/dock.png')"/> + <s:MultiDPIBitmapSource id="aboutIcon" + source160dpi="@Embed('assets/icons/160/about.png')" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource id="demoIcon" + source160dpi="@Embed('assets/icons/160/dock.png')" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + <s:DateTimeFormatter dateStyle="medium" timeStyle="medium" id="dateTimeFormatter"/> </fx:Declarations> - - <s:DateSpinner includeIn="DemoState" displayMode="dateAndTime" verticalCenter="0" horizontalCenter="0"/> - - <s:TextArea includeIn="InfoState" skinClass="spark.skins.mobile.TextAreaSkin" left="10" right="10" top="10" bottom="10" editable="false" text="The DateSpinner control presents an interface for picking a particular date or time. - 

The DateSpinner control can display the date, the time, or the date and time, based on the value of the displayMode property. - - 

The UI for the control is made up of a series of SpinnerList controls wrapped inside a SpinnerListContainer that show the currently-selected date. Through touch or mouse interaction, users can adjust the selected date. - - 

The DateSpinnerSkin only defines some sizing properties. To change the appearance of the DateSpinner control, you typically reskin the underlying SpinnerListSkin or SpinnerListContainerSkin."/> - + <s:VGroup includeIn="DemoState" horizontalAlign="center" verticalAlign="middle" width="100%" height="100%"> + <s:DateSpinner displayMode="dateAndTime" id="spinnerDate"/> + <s:Spacer height="10"/> + <s:Label id="label" textAlign="center" text="{dateTimeFormatter.format(spinnerDate.selectedDate)}"/> + </s:VGroup> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" borderVisible="false" + text="The DateSpinner control presents an interface for picking a particular date or time. + 

The DateSpinner control can display the date, the time, or the date and time, based on the value of the displayMode property. + 

The UI for the control is made up of a series of SpinnerList controls wrapped inside a SpinnerListContainer that show the currently-selected date. Through touch or mouse interaction, users can adjust the selected date. + 

The DateSpinnerSkin only defines some sizing properties. To change the appearance of the DateSpinner control, you typically reskin the underlying SpinnerListSkin or SpinnerListContainerSkin."/> <s:actionContent> <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> </s:actionContent> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/1f0cce99/tourdeflexmobile/src/UIViews/HscrubberView.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmobile/src/UIViews/HscrubberView.mxml b/tourdeflexmobile/src/UIViews/HscrubberView.mxml new file mode 100644 index 0000000..96d605f --- /dev/null +++ b/tourdeflexmobile/src/UIViews/HscrubberView.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:View xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" title="HSlider"> + <fx:Script> + <![CDATA[ + + protected function buttonHandler(event:MouseEvent):void + { + if(currentState == "DemoState") + { + currentState = "InfoState"; + } + else if(currentState == "InfoState") + { + currentState = "DemoState"; + } + } + + private function submitText():void + { + label.text = HSlider.value.toString(); + } + + ]]> + </fx:Script> + <s:states> + <s:State name="DemoState"/> + <s:State name="InfoState"/> + </s:states> + <fx:Declarations> + <s:MultiDPIBitmapSource id="aboutIcon" + source160dpi="@Embed('assets/icons/160/about.png')" + source240dpi="@Embed('assets/icons/240/about.png')" + source320dpi="@Embed('assets/icons/320/about.png')" + source480dpi="@Embed('assets/icons/480/about.png')"/> + <s:MultiDPIBitmapSource id="demoIcon" + source160dpi="@Embed('assets/icons/160/dock.png')" + source240dpi="@Embed('assets/icons/240/dock.png')" + source320dpi="@Embed('assets/icons/320/dock.png')" + source480dpi="@Embed('assets/icons/480/dock.png')"/> + </fx:Declarations> + <s:VGroup includeIn="DemoState" horizontalAlign="center" verticalAlign="middle" width="100%" height="100%"> + <s:HSlider id="HSlider" left="20" right="20" minimum="0" maximum="100"/> + <s:Spacer height="10"/> + <s:Label id="label" horizontalCenter="0" textAlign="center" text="{HSlider.value.toString()}"/> + </s:VGroup> + <s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" + text="The HSlider (horizontal slider) control lets users select a value by moving a slider thumb between the end points of the slider track. The HSlider control has a horizontal direction. The slider track stretches from left to right. The current value of the slider is determined by the relative location of the thumb between the end points of the slider, corresponding to the slider's minimum and maximum values. + 
 
The slider can allow a continuous range of values between its minimum and maximum values or it can be restricted to values at specific intervals between the minimum and maximum value. The slider can contain a data tip to show its current value."/> + <s:actionContent> + <s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/> + </s:actionContent> +</s:View>
