A sample app where the scroller does not show up. Is there any sane way of using a scroller in a constrain based layout?
<?xml version="1.0" encoding="utf-8"?>
<s:HGroup left="0" right="0" top="0" bottom="0">
<s:Scroller left="0" right="0" top="0" bottom="0">
<s:VGroup>
<s:BorderContainer borderColor="0" width="500" height="500"/>
<s:BorderContainer borderColor="0" width="500" height="500"/>
<s:BorderContainer borderColor="0" width="500" height="500"/>
</s:VGroup>
</s:Scroller>
</s:HGroup>
Found the solution after "brute forcing" every possible combination of left/right/widt/height etc
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="500" height="400"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:HGroup left="0" right="0" top="0" bottom="0" >
<s:Scroller width="100%" height="100%">
<s:VGroup >
<s:BorderContainer borderColor="0" width="500" height="500"/>
<s:BorderContainer borderColor="0" width="500" height="500"/>
<s:BorderContainer borderColor="0" width="500" height="500"/>
</s:VGroup>
</s:Scroller>
</s:HGroup>
</s:WindowedApplication>
Related
I have a TabNavigator and before that a ViewStack with TabBar that would not clip it's contents. It over flows the border or appears under other components positioned further down the screen. Has anyone run into this before?
Here is my code:
<mx:VDividedBox width="300" height="100%">
<mx:TabNavigator id="firstViewStack"
borderStyle="solid"
width="100%"
height="100%"
clipContent="true">
<s:NavigatorContent id="content1"
label="ITEMS">
<views:Items height="550" width="100%" />
</s:NavigatorContent>
<s:NavigatorContent id="eventsContent" label="ITEMS 2">
<views:Items height="880" width="100%"/>
</s:NavigatorContent>
</mx:TabNavigator>
</mx:VDividedBox>
UPDATE
I've included a animated gif of me resizing the tab content. As you can see the mask appears to be sized to the content rather than the available area??? Notice the border of the tab navigator along the size is being overlapped when resizing.
I set the minimum height on all of the content to lower values and height to 100% on all the content so it is not as high but you can see the content is still not getting clipped.
I also tried with a VGroup rather than a VDividedBox and it doesn't matter.
Here is another code example:
<s:VGroup top="50" left="50" width="400">
<mx:TabNavigator width="100%" height="300">
<s:NavigatorContent label="TAB">
<s:Group width="100%" height="400">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#ff0000"/>
</s:fill>
</s:Rect>
</s:Group>
</s:NavigatorContent>
<s:NavigatorContent label="TAB">
<s:Group width="100%" height="400">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#0000ff"/>
</s:fill>
</s:Rect>
</s:Group>
</s:NavigatorContent>
</mx:TabNavigator>
<s:Button width="100%" label="HELLO WORLD"/>
<s:Button width="100%" label="HELLO WORLD"/>
</s:VGroup>
I have implemented 2 approaches - one with a Scroller and another with autosize.
Here is an example
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<s:HGroup width="100%" height="100%" left="50" top="50">
<!-- Using Scroller-->
<s:VGroup width="400">
<mx:TabNavigator width="100%" height="300">
<s:NavigatorContent label="TAB" width="100%" height="100%">
<s:Scroller width="100%" height="100%">
<s:Group>
<s:Group width="100%" height="400">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#ff0000"/>
</s:fill>
</s:Rect>
</s:Group>
</s:Group>
</s:Scroller>
</s:NavigatorContent>
<s:NavigatorContent label="TAB" width="100%" height="100%">
<s:Scroller width="100%" height="100%">
<s:Group>
<s:Group width="100%" height="600">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#0000ff"/>
</s:fill>
</s:Rect>
</s:Group>
</s:Group>
</s:Scroller>
</s:NavigatorContent>
</mx:TabNavigator>
<s:Button width="100%" label="HELLO WORLD"/>
<s:Button width="100%" label="HELLO WORLD"/>
</s:VGroup>
<s:Spacer width="60"/>
<!-- Using Autosize-->
<s:VGroup top="50" left="50" width="400">
<mx:TabNavigator width="100%" minHeight="300" resizeToContent="true" >
<s:NavigatorContent label="TAB" width="100%" height="100%">
<s:Group width="100%" height="400">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#ff0000"/>
</s:fill>
</s:Rect>
</s:Group>
</s:NavigatorContent>
<s:NavigatorContent label="TAB" width="100%" height="100%">
<s:Group width="100%" height="500">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#0000ff"/>
</s:fill>
</s:Rect>
</s:Group>
</s:NavigatorContent>
</mx:TabNavigator>
<s:Button width="100%" label="HELLO WORLD"/>
<s:Button width="100%" label="HELLO WORLD"/>
</s:VGroup>
</s:HGroup>
</s:Application>
I want to change the alpha of Rect when list item is clicked but I could not solve that. And I don't know how exactly do this as I'm doing it on Rectangle inside item renderer, is there any suggestion?
CODE:
<s:List id="list" labelField="name" dataProvider="{items}" top="20" bottom="20" left="20" right="20"
contentBackgroundAlpha="0"
change="list_changeHandler(event)">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="200" autoDrawBackground="false" contentBackgroundAlpha="0">
<s:Group width="100%" height="100%">
<s:Rect id="rect" left="0" right="0" top="0" bottom="0" alpha="0.3">
<s:fill>
<s:SolidColor color="#FFFFFF"
/>
</s:fill>
</s:Rect>
<s:Image source="{data.icon}" top="30" horizontalCenter="0"/>
<s:Label text="{data.name}" top="100" horizontalCenter="0" color="#101010" fontWeight="bold" fontSize="16"/>
<s:Label text="{data.line1}" top="130" horizontalCenter="0" color="#343434" fontSize="14"/>
<s:Label text="{data.line2}" top="150" horizontalCenter="0" color="#343434" fontSize="14"/>
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:TileLayout requestedColumnCount="3" requestedColumnCount.landscape="4" columnAlign="justifyUsingWidth"/>
</s:layout>
</s:List>
You can use the ItemRenderer's states for this. Add these states to your ItemRenderer:
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color.normal="0x0000ff"
color.hovered="0x00ff00"
color.selected="0xff0000" />
</s:fill>
</s:Rect>
With this code your renderer will be blue by default; it will turn green when you hover over it; and red when you select it. The same can of course be done with the alpha value.
I'm building a user interface and I have two panels which I need to move and resize. They have to look as a single panel. It works fine when I move or resize only one. But when one moves and the other resizes at the same time... an intermittent line appears between the two.
How can I avoid this?
Here is a working example of the problem:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:components="components.*"
frameRate="30" height="400" width="200" >
<s:states>
<s:State name="minimized" />
<s:State name="maximized" />
</s:states>
<s:transitions>
<s:Transition>
<s:Parallel duration="4000" targets="{[one, two]}">
<s:Move target="{two}" />
<s:Resize target="{one}" />
</s:Parallel>
</s:Transition>
</s:transitions>
<s:Group id="one"
width="200"
height.minimized="20" height.maximized="200"
y="0">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:Group id="two"
width="200"
height="200"
y.minimized="20" y.maximized="200">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:Button click="currentState=(currentState=='minimized'? 'maximized' : 'minimized')" label="{currentState}" />
</s:WindowedApplication>
Thanks in advance!
Updated: Here's a version with VGroup:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:components="components.*"
frameRate="30" height="400" width="400" >
<s:states>
<s:State name="minimized" />
<s:State name="maximized" />
</s:states>
<s:transitions>
<s:Transition>
<s:Parallel duration="4000" targets="{[one, two, three]}">
<s:Move target="{two}" />
<s:Resize target="{one, three}" />
</s:Parallel>
</s:Transition>
</s:transitions>
<s:Group id="one"
width="200"
height.minimized="20" height.maximized="200"
y="0">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:Group id="two"
width="200"
height="200"
y.minimized="20" y.maximized="200">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:VGroup gap="0" left="200">
<s:Group id="three"
width="200"
height.minimized="20" height.maximized="200"
y="0">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:Group id="four"
width="200"
height="200">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
</s:VGroup>
<s:Button click="currentState=(currentState=='minimized'? 'maximized' : 'minimized')" label="{currentState}" />
</s:WindowedApplication>
Place both in the same VGroup and change the height of the first panel only.
I have a SkinnableContainer that I would like to add a border to. I have already created a skin class that creates a 1 pixel border around all four sides of the container successfully, however, I would like the border to only be for the top and bottom of the container, not the sides (left, right). How can I achieve such a thing? I have attached my current skin class. Please help! Thanks in advance.
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\mySkins\MyBorderSkin.mxml -->
<s:Skin 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.SkinnableContainer")]
</fx:Metadata>
<!-- Define the skin states. -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!-- Define a Rect to fill the area of the skin. -->
<s:Rect x="0" y="0"
height="100%" width="100%">
<s:stroke>
<s:LinearGradientStroke weight="1"/>
</s:stroke>
</s:Rect>
<!-- Define the content area of the container. -->
<s:Group id="contentGroup"
left="5" right="5" top="2" bottom="2">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:Group>
</s:Skin>
Use something like:
<s:Line left="0" top="0" right="0">
<s:stroke>
<s:LinearGradientStroke weight="1"/>
</s:stroke>
</s:Line>
<s:Line left="0" bottom="0" right="0">
<s:stroke>
<s:LinearGradientStroke weight="1"/>
</s:stroke>
</s:Line>
instead of your Rect declaration.
I am trying to create a login page with minHeight=600 and minWidth=800. If a user resizes to smaller resolution, only then add scrollbars. I followed tutorial.
Code:
Main.xml
<?xml version="1.0"?>
<!-- containers\application\AppSparkScroll.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="800" minHeight="600"
width="100%" height="100%"
backgroundColor="#292929"
skinClass="skins.CustomApplicationSkin">
<s:Panel title="Login" id="loginPanel" verticalCenter="0" horizontalCenter="0">
<mx:Form>
<mx:FormItem label="Username" width="100%">
<s:TextInput width="100%" id="username" />
</mx:FormItem>
<mx:FormItem label="Password" width="100%">
<s:TextInput width="100%" displayAsPassword="true" id="password" />
</mx:FormItem>
<mx:FormItem>
<s:Button label="Login" id="loginButton" />
</mx:FormItem>
</mx:Form>
</s:Panel>
skins.CustomApplicationSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\application\mySkins\MyAppSkin.mxml -->
<s:Skin 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>
<!-- fill -->
<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Scroller height="100%" width="100%">
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
</s:Scroller>
</s:Skin>
Same issue to me, I followed the same tutorial either. Could see the scrollers if I add the horizontalScrollPolicy="on" verticalScrollPolicy="on" to the scroller, but they just don't work even if the browser size is smaller than the content size.
In index.html file, within style declaration, paste following code,
html, body {height:100%; width:100%; min-width:800px; min-height:600px; overflow:auto; position:absolute;}
i hope it should works.Scroll bar should appear if screen size less than 800X600.