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.
Related
I have a drop down list for selecting the titles for a person, I want to employ smooth drop down when i select the drop down menu, i am new to flex, can some please help me.
Thanks and Regards,
Ravi.
You will have to use a resize transition in the place of the fade transition in the following code:
<s:DropDownList id="dropDownList"
dataProvider="{arrList}"
requiresSelection="true"
skinClass="skins.CustomDropDownListSkin"
horizontalCenter="0"
top="20" />
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/28/setting-a-fade-transition-on-a-spark-dropdownlist-component-in-flex-gumbo/ -->
<s:SparkSkin name="CustomDropDownListSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">
<s:states>
<s:State name="normal" />
<s:State name="open" />
<s:State name="disabled" />
</s:states>
<s:transitions>
<s:Transition fromState="normal" toState="open">
<s:Fade target="{popup}" duration="3000" />
</s:Transition>
</s:transitions>
<!-- host component -->
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.DropDownList")]
]]>
</fx:Metadata>
<!--- Defines the appearance of the DropDownList component's drop down area. -->
<s:PopUp id="popup"
open.normal="false" open.open="true"
includeIn="open"
left="0" right="0" top="0" bottom="0"
visible.open="true" visible.normal="false"
placement="below">
<s:Group id="dropDown"
maxHeight="134" minHeight="22"
visible.open="true" visible.normal="false">
<!-- border -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="0x686868" weight="1"/>
</s:stroke>
</s:Rect>
<!--- fill --->
<s:Rect id="background" left="1" right="1" top="1" bottom="1" >
<s:fill>
<s:SolidColor id="bgFill" color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Scroller left="1" top="1" right="1" bottom="1" >
<s:DataGroup id="dataGroup" itemRenderer="spark.skins.default.DefaultItemRenderer">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
<s:filters>
<s:DropShadowFilter blurX="20" blurY="20" distance="5" angle="90" alpha="0.6" />
</s:filters>
</s:Group>
</s:PopUp>
<s:Button id="button" left="0" right="0" top="0" bottom="0" focusEnabled="false"
skinClass="spark.skins.default.DropDownListButtonSkin" />
<s:SimpleText id="labelElement" verticalAlign="middle"
left="7" right="30" top="2" bottom="2" verticalCenter="1" />
</s:SparkSkin>
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.
CustomAppSkin Class
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<!-- fill -->
<s:BitmapImage id="img" fillMode="clip" horizontalCenter="0" verticalCenter="0"
source="#Embed('assets/images/bg_with_Steps.png')"
smooth="true"
left="0" right="0"
top="0" bottom="0" />
</s:Skin>
How can i align center the background image. This code is in my Skin class. My Main class....
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Application_skinClass_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
skinClass="CustomAppSkin">
<s:layout>
<s:VerticalLayout
horizontalAlign="center"
verticalAlign="middle"/>
</s:layout>
</s:Application>
Try updating your CustomAppSkin to:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<!-- fill -->
<s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:BitmapImage id="img" fillMode="clip" horizontalCenter="0" verticalCenter="0"
source="#Embed('assets/images/bg_with_Steps.png')"
smooth="true"
left="0" right="0"
top="0" bottom="0" />
</s:HGroup>
</s:Skin>
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>