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>
Related
I am trying to skin buttons in Flex, but after I skinned a button the icon that I had linked in it disappeared. I know I can add the icon into the skin, but that would mean I have to create lots of different skins.
Any EASY way to fix this?
mxml file:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ns1="*"
xmlns:packageservice="services.packageservice.*"
title="My Dish"
fontSize.Beef="10" textAlign.Beef="center">
<fx:Script>
<![CDATA[
import com.adobe.serializers.utility.TypeUtility;
import mx.events.FlexEvent;
protected function list_creationCompleteHandler(event:FlexEvent):void
{
my_get_beef_dishResult.token = packageService.my_get_beef_dish();
}
protected function list2_creationCompleteHandler(event:FlexEvent):void
{
my_get_pork_dishResult.token = packageService.my_get_pork_dish();
}
protected function list3_creationCompleteHandler(event:FlexEvent):void
{
my_get_chicken_dishResult.token = packageService.my_get_chicken_dish();
}
protected function list4_creationCompleteHandler(event:FlexEvent):void
{
my_get_fish_dishResult.token = packageService.my_get_fish_dish();
}
protected function list5_creationCompleteHandler(event:FlexEvent):void
{
my_get_vegetables_dishResult.token = packageService.my_get_vegetables_dish();
}
]]>
</fx:Script>
<s:states>
<s:State name="Beef"/>
<s:State name="Pork"/>
<s:State name="Chicken"/>
<s:State name="Fish"/>
<s:State name="Vegetables"/>
<s:State name="Other"/>
</s:states>
<s:navigationContent>
<s:Button label="Back" click="navigator.popView();"/>
</s:navigationContent>
<fx:Declarations>
<s:CallResponder id="my_get_beef_dishResult"/>
<packageservice:PackageService id="packageService"/>
<s:CallResponder id="my_get_pork_dishResult"/>
<s:CallResponder id="my_get_chicken_dishResult"/>
<s:CallResponder id="my_get_fish_dishResult"/>
<s:CallResponder id="my_get_vegetables_dishResult"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup x="0" y="0" width="245" height="364" contentBackgroundColor="#E6E6E6">
<s:List id="MyDishOther" includeIn="Other" width="245" height="364" contentBackgroundColor="#E6E6E6"></s:List>
<s:List id="list" includeIn="Beef" width="245" height="365"
creationComplete="list_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_beef_dishResult.lastResult}"/>
</s:List>
<s:List id="list2" includeIn="Pork" width="245" height="365"
creationComplete="list2_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_pork_dishResult.lastResult}"/>
</s:List>
<s:List id="list3" includeIn="Chicken" width="245" height="365"
creationComplete="list3_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_chicken_dishResult.lastResult}"/>
</s:List>
<s:List id="list4" includeIn="Fish" width="245" height="365"
creationComplete="list4_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_fish_dishResult.lastResult}"/>
</s:List>
<s:List id="list5" includeIn="Vegetables" width="245" height="365"
creationComplete="list5_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_vegetables_dishResult.lastResult}"/>
</s:List>
</s:VGroup>
...
<s:Button includeIn="Beef" width="70" icon="assets/beef.png" skinClass="components.Stab"/>
<s:Button includeIn="Beef" width="60" click="currentState='Chicken'" icon="assets/chicken.png"/>
<s:Button includeIn="Beef" width="60" click="currentState='Fish'" icon="assets/fish(1).png"/>
<s:Button includeIn="Beef" width="60" click="currentState='Pork'" icon="assets/porktest(1).png"/>
<s:Button includeIn="Beef" width="60" icon="assets/t_vegetables.png" click="currentState='Vegetables'"/>
.....
</s:VGroup>
</s:View>
SkinClass:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- layer 2: fill -->
<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.over="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.over="0x9FA0A1"
color.down="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="60" height="45" radiusX="2" radiusY="2">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.5625"
alpha.down="0.6375" />
<s:GradientEntry color="0x000000"
alpha="0.75"
alpha.down="0.85" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
</s:Skin>
As I could guess the problem is that your skin is not inherited from SparkButtonSkin.
Icon functionality is implemented in it and default button skin inherited SparkButtonSkin.
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.
How do I disable the rollover, selection & focus colors in a list? I tried setting them to "{null}" but that just makes them black:
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%"
backgroundColor="white"
>
<fx:Declarations>
<s:ArrayCollection id="myArray">
<fx:String>Item 0</fx:String>
<fx:String>Item 1</fx:String>
<fx:String>Item 2</fx:String>
<fx:String>Item 3</fx:String>
<fx:String>Item 4</fx:String>
</s:ArrayCollection>
</fx:Declarations>
<s:VGroup horizontalAlign="center">
<s:List dataProvider="{myArray}" width="200" height="200"
focusColor="{null}" selectionColor="{null}"
rollOverColor="{null}"
>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Label text="{data}" width="100%" left="5" top="7" bottom="5" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:VGroup>
</s:Application>
Try setting autoDrawBackground property in the itemRenderer to false.
<s:itemRenderer >
<fx:Component>
<s:ItemRenderer autoDrawBackground="false">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Label text="{data}" width="100%" left="5" top="7" bottom="5" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
Based on this I came up with this:
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<fx:Script>
<![CDATA[
override protected function get hovered():Boolean { return false; }
override protected function get down():Boolean { return false; }
override public function get selected():Boolean { return false; }
override public function get showsCaret():Boolean { return false; }
]]>
</fx:Script>
<s:Label text="{data}" width="100%" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
It still allows for the alternatingItemColors style, and also disables the selected, hover, and down colors.
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.
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>