JSF button & skinning

Hi!
I am using skinning to change to look-and-feel of my application. The GUI designers require that I create two different types of buttons, with different colors. I have created two sets of images to have server-generated buttons.
Is it possible to specify (for example using styleclass) which icon set to use for a button? Or is it only possible to have one set of images for just one button type?
Jeroen van Veldhuizen

You can also do the same thing with buttons, since you can define special styleclasses with your needs and requirements. But, applying background-image property alone, is not enough, since images appear only in FF and not in IE; So along with the background-image, you have to apply also the background property having the same value.
<af:commandButton styleClass="ButtonStyle"/>
.ButtonStyle
background-image:url(image_path);
background:url(image_path);
.ButtonStyle:hover
background-image:url(image_path);
background:url(image_path);
}

Similar Messages

Custom button skin with scaleGrid 9 slice image does not appear in Design Mode

So in a custom button skin I have a nine sliced image, and then throw that onto an MXML page. In design view, I cannot get the component to show the image that I've thrown on it. Unless I do a hack on the MXML page by adding the image in it's scaleGrid form to the page somewhere. Then it seems to act as like a preloader for the image so it actually displays. But I don't want to do this hack on every page that uses this component. Is there a work around?
Here's the button skin:
<?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"
                    width.disabled="296" height.disabled="73">

<fx:Metadata>
                    [HostComponent("spark.components.Button")]
                    [Embed('assets/art/shared/[email protected]', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)]
</fx:Metadata>

<s:states>
                    <s:State name="disabled" />
                    <s:State name="down" />
                    <s:State name="over" />
                    <s:State name="up" />
</s:states>
          <s:Group width="100%" height="100%" >
<s:Image width="100%" height="100%" smooth="true" source="@Embed('assets/art/shared/[email protected]', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)"/>
</s:Group>

          <s:Label id="labelDisplay" left="10" right="10" top="2" bottom="2" horizontalCenter="0"
                               maxDisplayedLines="1" textAlign="center" verticalAlign="middle" verticalCenter="1"
                               color="#FFFFFF" >
<s:filters>
                              <s:DropShadowFilter distance="0" angle="90" color="0x000000" alpha="1" blurX="2" blurY="2" strength="16" quality="3" />
</s:filters>
</s:Label>
</s:Skin>
And then I throw that button into an MXML page. The image doesn't show up in design view.
<s:Button x="330" y="94" width="134" height="57" label="Button" skinClass="features.shared.NineSliceButtonSkin" />
This hack, fixes the button! And all other buttons that use that skin.
<s:Image width="100%" height="100%" smooth="true" source="@Embed('assets/art/shared/[email protected]', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)"/>
<s:Button x="330" y="94" width="134" height="57" label="Button" skinClass="features.shared.NineSliceButtonSkin" />

Looking for an answer too!

How do I change button skin with function arguments?

Hi guys, I am building a map witch I represent with buttons grid 40*26, now I wont to create a function in action script that will get a string that contains the folder name where I am storing the buttons skin data for example:
[Embed("maps/grass/upSkin.jpg")]
private var _upSkin:Class;
[Embed("maps/grass/overSkin.jpg")]
private var _overSkin:Class;
[Embed("maps/grass/downSkin.jpg")]
private var _downSkin:Class;
private function changeMap():void
     slot:Button=new Button();
     slot.setStyle("upSkin",test);
     slot.setStyle("overSkin",_overSkin);
     slot.setStyle("downSkin",_downSkin);
This is what I managed to do up to now, what I would like to do is to send to changeMap() a string with the path name, but some how I can't embed a variables, I will be glade if you could find a solution for that.
This is the link for my site, so you can see what I am talking about. I am not always online but you can try.
http://gazmanwars.zapto.org/
*Best view under 1280*960 rez

in this case StyleManager.loadStyleDeclarations(currentTheme + ".swf"); can come handy.This satement will load new style Declarations for your application on runtime whenever you want.
currentTheme will be your css file containing styles compiled into swf by flex builder you can do that by right clicking on css file and selecting
Compile Css To Swf
for more information on style Manager see following link
http://livedocs.adobe.com/flex/3/html/help.html?content=styles_07.html

Image with button skin

Hi,
    I have a image control which is embed with button skin from swf. The effect is not getting affected in it. Only the image is getting loaded.
Why is it behaving like this.
Regards,
Jayagopal.

Hi Jayagopal,
You need to apply various skins for the Button to see the effects....
.myButton
     upSkin:"assets/buttonUp.png";
     downSkin:"assets/buttonDown.png"
     overSkin:"assets/buttonOver.png"
Thanks,
Bhasker Chari

[svn] 3278: Fix min size for button skin to be 23, 23 and make default size 70,23

Revision: 3278
Author: [email protected]
Date: 2008-09-19 16:49:01 -0700 (Fri, 19 Sep 2008)
Log Message:
Fix min size for button skin to be 23, 23 and make default size 70,23
Modified Paths:
flex/sdk/trunk/frameworks/projects/flex4/src/flex/skin/ButtonSkin.mxml

Revision: 3278
Author: [email protected]
Date: 2008-09-19 16:49:01 -0700 (Fri, 19 Sep 2008)
Log Message:
Fix min size for button skin to be 23, 23 and make default size 70,23
Modified Paths:
flex/sdk/trunk/frameworks/projects/flex4/src/flex/skin/ButtonSkin.mxml

MediaController Play Pause button skin change?

Iam using MediaController.MediaController.associateDisplay(MediaDisplay). when i click the ButtonXX, MediaController.click() method called threw. It is fine But MediaController Play Pause button skin does not change? it is allways show play symbol. how can i change Play Pause button skin?

Hi Chris,
Most of the content I create is deployed through a LMS which
has its own flash based controls used to navigate through the
content.
This means that i do not use any of the captivate toolbar
controls, but rather build the navigation buttons into the
captivate screen itself.
This has elliminated the issues you are discussing and seems
to result in a more polished end result . . . something to consider
perhaps?
Cheers,
Matt.

ComboBox inheriting button skin - how to override

Using Flex Builder 3.
I have set up a Button style in the stylesheet so all buttons pick up the up, over, and down skins.
The problem is no matter what I do I cannot get the ComboBox to not use the skins defined for Button.
Is there a way of overriding the skins to not use a skin. I've set up a specific style for the ComboBox, but it still picks up the button skins. I've tried both using ComboBox for the style descriptor and set a specific style name like myComboBox and set the style on the combo box in the mxml.
What is strange is that from the documentation it doesn't look like ComboBox inherits any styles from Button. So this makes no sense.
Any ideas?
Thanks,
Cindy

Button in stylesheet:
Button
corner-radius: 3;
font-size: 11;
font-weight: normal;
color: #0860AB;
up-skin: Embed(source="../images/bttn-bg-off2.gif",scaleGridLeft="5",scaleGridTop="5",scaleGridRight="17",scaleGridBottom="11");
over-skin: Embed(source="../images/newBlueButtonOver2.png",scaleGridLeft="3",scaleGridTop="4",scaleGridRight="22",scaleGridBottom="13");
down-skin: Embed(source="../images/newBlueButtonDown.png",scaleGridLeft="3",scaleGridTop="4",scaleGridRight="22",scaleGridBottom="13");
padding-top: 0;
padding-bottom: 0;
padding-left: 5;
padding-right: 5;
style set up for combo box in mxml: dropdownStyleName="myDropDown"
.myDropDown {
corner-radius: 0;
fill-colors: #FFFFFF, #FFFFFF;
fill-alphas: 1.0, 1.0;
border-color: #C0C0C0;
theme-color: #C0C0C0;
roll-over-color: #d2e1ea;
selection-color: #A6CAE1;
font-size: 11;}
I even tried just setting the styleName property in the mxml, but it didn't do anything either.
-Cindy

Executing AJAX with a JSF Button

Is there a way to get a JSF Button to fire off an AJAX event, which could call a Page Bean method?
I'm thinking something like a DropDown's valueChangeListenerExpression...you can assign a method to it and, when the DropDown is changed, it fires off method without submitting the page.
actionListenerExpression does not seem to do this.
Any ideas?

I'm using Woodstock components.
I don't necessarily think its a component library issue, though. I simply want to be able to fire off an AJAX event with any component I want, whether its changing a pulldown or clicking a link/button.
For example, a workaround for this would be to have the button modify the value of a hidden field. This would then fire off the processValueChange method of the component via AJAX and then I could put my code in there. It just doesn't make sense to me why I wouldn't be able to do this directly.

Button Skin: How to add button properties (over, down,up)

Hi all,
     I made a custom button "skin" because I want my buttons to be images with NO box or border around it and it works great, but I don't know how to add the button functionality. ex. In "over" state buttons tend to light up and in "down" state they tend to get darker. Anyone know how to apply this to an image??? below is my code. Thanks guys!!
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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="64" height="64">
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <s:states>
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="up" />
        <s:State name="disabled" />
    </s:states>
    <mx:Image source="@Embed(source='assets/images/lightbulb.png')"/>
</s:SparkSkin>

You could try something like this:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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="64" height="64">
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <s:states>
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="up" />
        <s:State name="disabled" />
    </s:states>
    <mx:Image source="@Embed('assets/images/lightbulb.png')"
              source.over="@Embed('assets/images/lightbulb_lit.png')"
              source.down="@Embed('assets/images/lightbulb_dark.png')"
              source.disabled="@Embed('assets/images/candle.png')" />
</s:SparkSkin>
Peter

Button skin locations help please

When I created my first project I used a blank slide
presentation to create eaxh slide. When I did a preview I was able
to see the entire screen including button skins and quiz response
buttons.
On my second project, a recorded demo, in the preview I must
scoll down to see button screens and quiz buttons. Did I do
something wrong. How can I see the whole screen in my demo?
Thanks.

Hi Fluffy11
You probably recorded the project too large. Remember it has
to typically play back to the user in the browser. So if you
recorded at full screen and are using a skin, the playback controls
are pushed off the visible area and you have to scroll to see them.
Try reducing the overall size of the area you are recording.
Cheers... Rick

Problem using images in a button skin

So, I have a weird problem. I need to be able to see a button in design mode. My button is a custom component (a ButtonBase) with a skin. So, I left is a tiny bit of the default skin so that you can see what it looked like in design mode. Now, the paths to the images that will be used for the various states of the button are binded to strings passed from another subcomponent. There was no other way to get what we needed done, so it stays messy. Anyway, I don't get things to display correctly. Here's the code, and after an image for what I'm getting:
[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"
                         minWidth="21" minHeight="21" alpha.disabled="0.5"
                         preinitialize="initImageVars()" creationComplete="init()">
    
    <fx:Metadata>
        <![CDATA[
        [HostComponent("customComponents.ToggleButtonCustom")]
        ]]>
    </fx:Metadata>
    
    <s:states>
        <s:State name="up" />
        <s:State name="down" />
        <s:State name="selected" />
        <s:State name="disabled" />
        <s:State name="over" />
    </s:states>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            /* First thing's first: we need to initialize our global and accessable components. */
            [Bindable]
            public var upButtonPath:String = "";
            [Bindable]
            public var downButtonPath:String = "";
            [Bindable]
            public var activeButtonPath:String = "";
            [Bindable]
            public var disabledButtonPath:String = "";
            [Bindable]
            protected var label:String = "";
            private function initImageVars():void
                upButtonPath = "assets/" + this.hostComponent.upButtonPath;
                downButtonPath = "assets/" + this.hostComponent.downButtonPath;
                activeButtonPath = "assets/" + this.hostComponent.activeButtonPath;
                disabledButtonPath = "assets/" + this.hostComponent.disabledButtonPath;
            private function init():void
                /* Give values to public variables */
                //upButtonPath = "Up.png";
                //downButtonPath = "Down.png";
                //activeButtonPath = "Active.png";
                label = this.hostComponent.label;
            /* Define the skin elements that should not be colorized. For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
            override public function get colorizeExclusions():Array {return exclusions;}
            override protected function initializationComplete():void
                useChromeColor = true;
                super.initializationComplete();
            private var cornerRadius:Number = 2;
        ]]>
    </fx:Script>
    
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                                 color.down="0xAAAAAA"
                                                 color.selected="0xBBBDBD"
                                                 alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8"
                                                 color.down="0x929496"
                                                 color.selected="0x9FA0A1"
                                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <mx:ViewStack id="buttonImage" x="0" y="0"
                                selectedIndex="0" selectedIndex.down="1" selectedIndex.selected="2"    selectedIndex.disabled="3">
        <s:NavigatorContent id="upState">
            <mx:Image source="{upButtonPath}" width="500" height="500" />
        </s:NavigatorContent>
        <s:NavigatorContent id="downState">
            <mx:Image source="{downButtonPath}" />
        </s:NavigatorContent>
        <s:NavigatorContent id="activeSate">
            <mx:Image source="{activeButtonPath}" />
        </s:NavigatorContent>
        <s:NavigatorContent id="disabledState">
            <mx:Image source="{disabledButtonPath}" />
        </s:NavigatorContent>
    </mx:ViewStack>
    <s:Label id="labelDisplay" text="{label}"
                     textAlign="center"
                     verticalAlign="middle"
                     maxDisplayedLines="3"
                     horizontalCenter="0" verticalCenter="1"
                     left="10" right="10" top="2" bottom="2">
    </s:Label>
</s:SparkSkin>
[/CODE]
That gives me this image:
And if I use the following code to resize it, I get this:
[CODE]
/* From the component, called from init(), which is called on creationComplete */
private function resizeEverything():void
var dummyImage:Image = new Image();
var pathToDummy:String = "assets" + upButtonPath;
dummyImage.source = pathToDummy;
thisBtn.height = dummyImage.height;
thisBtn.width = dummyImage.width;
dummyImage = null;
[/CODE]
If you have any idea what to do with this, let me know. I set the buttons to the exact height and width of the images I'm using when I first call them. I don't know how else to manage this. I want the faded white to be an exact mirror of the image, so that designers (not me) can move them around on design mode. Thank you!

Figured it out. The images I was given had large amounts of padding, and when I tried to auto-resize the buttons, Flash could never grab the image and therefore couldn't size off it, so the size of the component was forced to 0,0. It's all good now.

Animated movie clips in button skin states

Hello to gurus out there,
i am trying to attach flash animated skins to my button in a Flex application. Can somebody help me?
Works fine but don't animate the movieclip (timeline animation) on up, over and down states.
Thnaks!
CSS file:
.flashButton
    up-skin: Embed("/../libs/assets.swf#upSkin");
    over-skin: Embed("/../libs/assets.swf#overSkin");
    down-skin: Embed("/../libs/assets.swf#downSkin");
FlashButtonSkin
[other code]
<s:BitmapImage id="icon"
                   source="{hostComponent.getStyle('upSkin')}"
                   left="0" right="0" top="0" bottom="0" />
Main.mxml
<s:Button styleName="flashButton" skinClass="skins.FlashButtonSkin"/>

flv's are video files, not movieclips.
they can be imported into your main (or, any other ) timeline but that's not recommended because of possible audio/video sync problems.
it's better to play your videos in an flvplayback component (window>component panel).
can you add an flvplayback component to your stage? if so, in the properties panel assign an instance name (eg, flv_pb). if you can do that successfully, open the actions panel (window>actions) and paste,
flv_pb.source = "thenameofyourflvfile.flv";   //<- use the correct path/name. if you save your fla and flv in the same directory and use the default publish settings, no path is needed.
and test. any problem?
if not, you're one step away from completing your project. if yes, what problem?

Color Picker has the Button skin

Hey guys,
I'm using some Color Pickers in my application. I also use mx buttons in some places so I've created a css style for these which includes some bitmap
graphics as well. The problem is that the color picker has the skin of my mx button even though I didnt define a style for it anywhere.
It looks weird so I would definetely prefer the default skin.
Am I missing something here?

and by the way, the css for the mx button is this
mx|Button
disabled: Embed(source="hpSkins/ButtonSkins/MXButton/Button_disabled.png");
downSkin: Embed(source="hpSkins/ButtonSkins/MXButton/Button_downSkin.png");
overSkin: Embed(source="hpSkins/ButtonSkins/MXButton/Button_overSkin.png");
upSkin: Embed(source="hpSkins/ButtonSkins/MXButton/Button_upSkin.png");
fontFamily: svenings;
color: #FFFFFF;
textRollOverColor: #FFFFFF;
textSelectedColor: #FFFFFF;
fontWeight: normal;
fontLookup: embeddedCFF;

Losing AS function after a button skin is applied

I am charged with skinning an existing Flex app that works...
prior to my application of skins. I am a novice at this, so please
forgive code that is sloppy.
There are two types of buttons and they require different
skins. I have put one skin in the button class, and one in the
styleName "bSearch". When skinned with Embedded jpgs, the buttons
(both Button class and bSearch) appear properly skinned, and they
change appropriately up, over, down, etc. I know, therefore, that
the app is accessing the image files and applying them correctly.
However, the application stops and does not call the function
for either the button class or the bSearch styled buttons when the
button is clicked. It works fine with a css that does not use a
style name, only button class.
Does anyone have any idea why skinning will interfere with
functionality?
please help.
Respectfully,
Blake

"Podzol" <[email protected]> wrote in
message
news:ghoodi$2ct$[email protected]..
> Hi Amy, Thanks.
> I wish I could do that, but the project is a
discombobulated assembly of
> things that our programmer made and hasn't sorted yet. I
am a graphics
> person,
> so I am limited in my abilities to work with the code. I
did just install
> the
> Flex 3.2 update last night and now a more specific error
comes up. Perhaps
> this
> will be more informative?
>
> ArgumentError: Error #2004: One of the parameters is
invalid.
> at flash.display::Graphics/drawRect()
> at
> mx.skins.halo::HaloBorder/
http://www.adobe.com/2006/flex/mx/internal::drawBorder
> ()
> at mx.skins.halo::HaloBorder/updateDisplayList()
> at mx.skins::ProgrammaticSkin/validateDisplayList()
> at mx.managers::LayoutManager/validateDisplayList()
> at mx.managers::LayoutManager/doPhasedInstantiation()
> at Function/
http://adobe.com/AS3/2006/builtin::apply()
> at mx.core::UIComponent/callLaterDispatcher2()
> at mx.core::UIComponent/callLaterDispatcher()
Try making a small basic example that exhibits the problem. A
lot of times,
in the process of doing so you'll also find the answer.

Animated Flash Component Scaling when used as Button Skin

I am trying to skin the overSkin of a Flex Button component with an animated Flash .swc component. (Actually, an Accordion Header, but for all practical purposes the same.)
All works completely fine, in most cases. The problem I run into is when I have any objects in the Flash animation moving on and off stage. When this happens, although the objects cannot be seen when moved off-stage, the viewable area of the Flash animation scales down in either direction, or both, to make room in the button for the objects off stage.
If I play the animation directly in the application, or a Canvas, everything works fine and no scaling occurs. But for a Button, where I really need it, I get the constant scaling back and forth as the Flash movie runs. This can be REALLY annoying when trying to click on a button! (Or you find that you are no longer "over" the button (because it scaled down) so you get flicker back and forth between the Up and Over states.)
Any ideas on how I can keep this from happening, either on the Flash or Flex side would be much appreciated.
Pertinent Code:
[Bindable]
[Embed(source="assets//btn_StaticHollywood.jpg")]
private var Film:Class;
[Bindable]
[Embed(skinClass="fc.HollywoodWithSearchlights")]
private var FilmOver:Class;
animatedButton.setStyle("upSkin", Film);
animatedButton.setStyle("overSkin", FilmOver);
<mx:Button id="animatedButton" cornerRadius="0" />
Note: I tried all assortments of setting dimensions I believe.
Remember, the Flash component has objects that move in and off the stage from both directions, and this is the cause of the automatic resizing of the Button when it runs.

I am assuming that you are using Flex 4 and this does not work. In Flex 4, the default theme used is the "Spark" theme. In Flex 3, we used the "Halo" theme. The Halo theme supports styles like borderStyle, but, the Spark theme does not.
If you want to use these styles, you will need to compile with the Halo theme. You can do this by adding an additional compiler argument -theme=<SDK_DIR>/frameworks/themes/Halo/halo.swc (point to the halo.swc in your SDK installation)
Joan

JSF button & skinning

Similar Messages

Maybe you are looking for