I'm trying to copy/modify the spark skin for the default button, but not sure how to find that skin. When I hover over <s:Button and Ctrl + Click it, it takes me to the Button class, but there isn't any skin information there.
The default button skin is in spark/skins/spark/ButtonSkin and subclasses Skin.
Not sure why you would want to edit that way.
You can make a Skin Class out of a mxml file and reference it with the skinClass
<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"
minWidth="21" minHeight="21">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="1"/>
</s:stroke>
</s:Rect>
<s:Label id="labelDisplay"
alpha.up="1"
alpha.down=".5"
alpha.over=".25"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:Skin>
and in your main application
<s:Button label="Alpha Change" skinClass="mySkins.AlphaButtonSkin"/>
Related
I have a small issue related to my web App developed in Flex 4.6.
I have an app which has 800 x 600 px and in some screens, not all the content is shown and no scroll appear in the browser.
How can I setup the app to be able to show the y-scroll in the browser?
Regards.
I had similar problem - with a card game as Flex 4 web app 700 x 525 px - played mostly by older folks and they often have fonts/webpage zoomed (for example by using CTRL and + keys in browser) - which caused the UI be offset (like PopUpWindow not centered) etc.
My solution has been to use a custom app skin.
Here some excerpts of my code:
MyApp.mxml:
<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"
width="700" height="525"
initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL"
skinClass="MySkin">
...
MySkin.mxml: (even works in full screen mode)
<?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"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Application")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
....
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>
<s:Group id="mainGroup" x="0" y="0" width="700" height="525">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="contentGroup" width="700" height="100%" minWidth="0" minHeight="0" />
<s:Group id="topGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<s:Rect left="1" right="1" top="1" bottom="1" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#66BBEE" />
<s:GradientEntry color="#3399CC" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect left="2" right="2" bottom="0" height="1" alpha="0.5">
<s:fill>
<s:SolidColor color="#333333" />
</s:fill>
</s:Rect>
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="6" paddingRight="6" paddingTop="6" paddingBottom="6" gap="10" />
</s:layout>
</s:Group>
</s:Group>
</s:Group>
</s:Skin>
You need to add an Scroller to the components that you want to scroll and make sure you have set verticalScrollPolicy to "auto".
http://help.adobe.com/en_US/flex/using/WSb04c7610c3432839-13869d09121418556f1-7ffc.html
I have a Windowed application with a custom skin and the skin contains Title bar which too uses a custom skin. Now the problem is that I need to hide the minimize and maximize button dynamically if the window is set to full-screen. Please help...
my title bar skin code
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
minHeight="24">
<fx:Metadata>
[HostComponent("spark.components.windowClasses.TitleBar")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalAndMaximized" stateGroups="maximizedGroup" />
<s:State name="disabledAndMaximized" stateGroups="maximizedGroup" />
</s:states>
<!-- fill -->
<!--- Defines the background color of the skin. -->
<s:Rect id="background"
left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="#2ecbd8"/>
<s:GradientEntry color="white" ratio="0.45"/>
<s:GradientEntry color="white" ratio="0.55"/>
<s:GradientEntry color="#2ecbd8"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Group
id="contentGroup"
minHeight="24"
width="100%"
height="100%"
left="10"
right="10" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" gap="5" />
</s:layout>
<s:BitmapImage id="titleIconImage" minWidth="0" fillMode="clip"/>
<s:Label id="titleText" text="{hostComponent.title}" minWidth="0" fontSize="9" color="#585858" maxDisplayedLines="1" width="100%" />
<s:Button id="minimizeButton"
skinClass="spark.skins.spark.windowChrome.MinimizeButtonSkin"
top="2" bottom="2" verticalCenter="0"
/>
<s:Button id="maximizeButton"
skinClass="spark.skins.spark.windowChrome.MaximizeButtonSkin"
top="2" bottom="2" verticalCenter="0"
/>
<s:Button id="closeButton"
skinClass="spark.skins.spark.windowChrome.CloseButtonSkin"
verticalCenter="0" />
<fx:Script>
<![CDATA[
import spark.skins.spark.windowChrome.MaximizeButtonSkin;
]]>
</fx:Script>
</s:Group>
</s:SparkSkin>
my windowed application skin code
<?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"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:ui="com.youspin.components.ui.*"
depth="-10">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.WindowedApplication")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabledAndInactive" />
<s:State name="normalAndInactive" />
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<s:TitleBar left="0" right="0" top="1"
title="YouSpin"
height="{0.067*height}"
skinClass="skins.titleSkin"/>
<s:Group id="contentGroup" left="0" top="0" right="0" bottom="0" />
</s:Skin>
this is my application
<?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"
applicationComplete="fullScreen()"
width="910" height="728"
skinClass="skins.uiskin">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
public function fullscreen():void{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
//hide button from here but how??
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:WindowedApplication>
try making a bindable boolean somewhere, where you store the fullscreenstate. then minimizebutton should have attributes includeinLayout and visible binded to it. (and maximize would be the opposite:
<s:Button id="minimizeButton"
skinClass="spark.skins.spark.windowChrome.MinimizeButtonSkin"
top="2" bottom="2" verticalCenter="0"
visible="{!isFullScreen}"
/>
I have a skinnableContainer that acts as a container for other drag and droppable items. This container's drop functionality is added from it's parent at the same moment the container is added.
This all works fine until I add a skin class to the skinnableContainer, now none of the draggable items can drop into the container as it did before.
I assume that the Group component wrapping the content from within the skin is acting as a block somehow, but I'm not sure how to allow the drop functionality through it?
Any ideas?
EDIT skin code below:
<?xml version="1.0" encoding="utf-8"?>
<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" alpha.disabled="0.5">
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!-- layer 1: border -->
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
<s:stroke>
<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
</s:stroke>
</s:Rect>
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" >
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:Group>
</s:Skin>
Your custom skin has no background fill, hence it's completely transparent except for the border. Because of this there is no "hitzone" to drop your items on (right now you will probably be able to drop them if you target exactly that 1px border).
The solution - obviously - is to give it a fill. No worries, if you want it to look transparent, just set its alpha to 0.
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
<s:fill>
<s:SolidColor alpha="0" />
</s:fill>
<s:stroke>
<s:SolidColorStroke alpha="0.50" />
</s:stroke>
</s:Rect>
I have implemented a chromeless windowedapplication in flex 4. But doing so i noticed that all the maximize, minimize and even the ability to drag the window around is gone. I need the ability to drag the window around. I have done a lot of googling and have been unable to come up with anything. Could somebody plz point me in the right direction.
Thanks in advance.
You'll have to create a custom skin for your WindowedApplication. If you look in the code of WindowedApplication, you'll find this:
[SkinPart (required="false")]
public var titleBar:TitleBar;
which means you can add a TitleBar to the skin, but you don't have to. As a matter of fact the default WindowedApplicationSkin doesn't have a titleBar.
Including a TitleBar in the custom skin will automatically give you the dragging behavior you're after. The default TitleBarSkin comes with the regular window buttons (minimize, maximize, close), so you may want to create a custom skin here too. One without the buttons if you don't need them.
Here's a stripped down example.
The custom skin for WindowedApplication (just a white background and a TitleBar):
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Metadata>[HostComponent("Object")]</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalAndInactive" />
<s:State name="disabledAndInactive" />
</s:states>
<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
<s:fill>
<s:SolidColor id="backgroundFill" color="0xffffff" />
</s:fill>
</s:Rect>
<s:TitleBar left="0" right="0" top="0" height="24"
skinClass="skin.TitleBarSkin" />
<s:Group id="contentGroup" left="0" right="0" top="25" bottom="0" />
</s:Skin>
The custom skin for your TitleBar (just a gradient background and a close button):
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minHeight="24" >
<fx:Metadata>
[HostComponent("spark.components.windowClasses.TitleBar")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalAndMaximized" />
<s:State name="disabledAndMaximized" />
</s:states>
<s:Rect id="background" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF" />
<s:GradientEntry color="0xBABABA" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Button id="closeButton" label="close" right="0" verticalCenter="0" />
</s:Skin>
Apparently, the 'closeButton' is required, so you'll have to include it in the skin. But if you still want to get rid of it, just set its 'visible' and 'includeInLayout' properties to 'false'.
I need to round at only the top or bottom of a border container not all four corners, is their some CSS that I can use or do I have to create two new skins. I was reading their used to be a property for this for HBox back in the old days, is their not a property for BorderContainer now?
With BorderContainer you can't. However, the visual effect you want to achieve can easily be created with SkinnableContainer and a custom skin. In fact BorderContainer is just a specific form of SkinnableContainer.
So instead of BorferContainer create a SkinnableContainer with property 'skinClass':
<s:SkinnableContainer left="0" right="0" top="0" bottom="0"
skinClass="my.app.skins.TopRoundedCornerSkin">
<!--- your components go here --->
</s:SkinnableContainer>
Then create the skin class TopRoundedCornerSkin.mxml like so:
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:Rect id="background" left="0" right="0" top="0" bottom="0"
topLeftRadiusX="10" topLeftRadiusY="10"
topRightRadiusX="10" topRightRadiusY="10">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x000000" />
</s:stroke>
</s:Rect>
<s:Group id="contentGroup" left="10" right="10" top="10" bottom="10"
minWidth="0" minHeight="0" />
</s:Skin>
On the background rectangle, we set 4 radius properties to create the rounded corner you need.