Dynamic skinning of Spark button?

I wish to use Spark Button for my video player's play / pause button. I thought I would create 2 different skin files and dynamically assign them to the play / pause button in the ActionScript function but found that Spark Button's skin property is read-only! Any suggestions on how this can be done (without creating 2 different buttons)?

To answer my own question (thanks to Deepa Subramaniam of Adobe), you can use the new Flex 4 style to dynamically apply a skin to a component, as follows:
playPause.setStyle("skinClass", PlayButtonSkin);
or
playPause.setStyle("skinClass", PauseButtonSkin);

Similar Messages

How to intercept style changes in skin for spark Button?

How to intercept style changes in skin for spark Button?
Thank you.

How to intercept style changes in skin for spark Button?
Thank you.

Default skin for spark button class

Hi, where in the spark button class or superclasses does it specify its default skin?

Spark components like Button.as don't define thier default skins internally. If you want a skinnable component to have a default skin so that you don't have to manually specify the skin every time you have two options. The preferred method, and the one used in the flex sdk, is to use a css file to specify the skin for the component. If you don't want to do that, then the other option is to call setStyle("skinClass", YourSkinClass) inside the constructor of the actionscript component.

Errors when using Spark Buttons in dynamically loaded modules loaded by dynamically loaded modules

Ok ... I have to admit this issue is rather special ;-)
I have a flex application that loads a list of modules after the user logs in, depending on the permissions of the user.
One of these modules contains a component, that allows the user to configure settings for different types of objects.
For each object type (can be extended) there exists one module swf.
The strange problem I am having now is that as soon as a Spark Button (or anything derived from one ... CheckBox) inside the settings-module. I get the following error (unfortunately in german ... but I'll try to translate).
This error happens when using a spark CheckBox (Which is derived from Spark Button):
ArgumentError: Error #2004: Einer der Parameter ist ungültig.
at flash.display::Graphics/drawRect()
at mx.graphics::RectangularDropShadow/drawShadow()[E:\dev\4.x\frameworks\projects\framework\ src\mx\graphics\RectangularDropShadow.as:575]
at mx.skins.spark::BorderSkin/updateDisplayList()[E:\dev\4.x\frameworks\projects\sparkskins\ src\mx\skins\spark\BorderSkin.mxml:174]
at mx.core::UIComponent/validateDisplayList()[E:\dev\4.x\frameworks\projects\framework\src\m x\core\UIComponent.as:8709]
at mx.managers::LayoutManager/validateDisplayList()[E:\dev\4.x\frameworks\projects\framework \src\mx\managers\LayoutManager.as:663]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.x\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:718]
at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.x\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1072]
When having a look at the problem the cause is that width and height are not set (NaN).
If I use a plain Button I get the same error in "drawRoundRect".
As soon as I change back to a mx-Button/Checkbox, everything is fine.
In my current Case I wanted to use a custom TreeItemRenderer to display a CheckBox in the tree. This tree Item renderer is included in a custom Lib that is used by all modules.
I have one Second Level module using this renderer. I have one Third Level Module thas uses the exact same tree definition. If I use the MX CheckBox I get CheckBoxes in the Second- and Third-Level Module. If I use the Spark-CheckBox I get a CheckBox in my Second Level Module and the above Error in the Third Level Module.
To make everything even stranger: I have a custom component loading my modules and I use this in the Top Level Module to load the Second Level Modules and in my Second Level Module to load my Third Level Modules (So I would guess If my loader is broken, then the Second Level Modules should not work either).
Help is greatly appreciated :-)
Regards,
Chris

Ok, I managed to find out what was going wrong and to get my stuff working again. I have to admit that I have no idea why my application / flex was showing this behaviour. The only way I could track this down was by undoing the Subversion checkins one by one. Finding out what was happening using common sense seems to be out of the question with this issue.
My application is built up of a main application swf that loads module swfs and a library swc that contains common stuff and is used in the main application and the modules.
I now had some custom TreeItemRenderers in my modules. The problem was caused by moving a custom TreeItemRenderer from one module to the library-swc. I could successfully reproduce this. If I add only one class extending TreeItemRenderer to my library (I don't even have to use it), the entire flex system goes haywire. As soon as I remove that class, everything is ok. I checked, if there might be a problem with third party libs containing flex core classes which might be used instead of the sdk ones, but after looking at the catalogs of the third party swcs I couldn't find a reference to TreeItemRenderer.
Any Ideas? I sort of dislike the idea of being able to run into such strange problems. Is there a tool that allows me to check for class compatibility issues?

Add icon on spark button skin

Hello all I am trying to add different icon on different buttons. I have my skin file ready but not sure if I have to create different skin class for different button. It sounds inefficient. Any suggestions? Thanks for the reply...
<s:Button id="pass"
      width="110"
      height="35"
      fontWeight="bold"
          fontSize="12"
      fontFamily="arial"
      label="Past Track"
     click="pass_clickHandler(event)" skinClass="skins.CustomSkin"/>
<s:Button id="future"
      width="110"
      height="20"
      fontWeight="bold"
      fontSize="12"
      fontFamily="arial"
      label="Future Plan"
          click="future_clickHandler(event)"
          skinClass="skins.CustomSkin"/>
Skin.....
   
    
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#304fd7"
                             color.over="#4b6bf6"
                             color.down="0xAAAAAA"
                             alpha="0.85" />
            <s:GradientEntry color="#1f38a3"
                             color.over="#3653cf"
                             color.down="0x929496"
                             alpha="0.85" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>
 // I could add my icon here but that would make me to create
                  //different icon image for different button

so you could do something like this even though it doesn't have to be a required item.
    public class ImageButton extends Button
         * The skin part that defines the area where
         * the user may drag to resize the window.
        [SkinPart(required="true")]
        public var buttonImage:Object
Then , in your skin you would have an mxml image with the same name ( buttonImage ) that you would position in the skin. In the mxml where you use the class you could just do
<custom:ImageButton id="ib" buttonImage="assets/myButton.jpg" />
I must warn you though , skinning is not my specialty.
If this post was helpful please mark it as such.
Sincerely ,
Ubu

How to align label text to the left in Spark Button (no "textAlign" style)?

Hi all,
"textAlign" style is excluded for Spark Button, and probably for a good reason.
[Exclude(name="textAlign", kind="style")]
If I want to align Spark Button text label to the left, should I create custom skin to accomplish that?
Something e.g:
<?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"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
<s:Label
        id="labelDisplay"
        textAlign="left"
        left="2" right="2" top="2" bottom="2"/>
</s:Skin>

    Right, I though about this approach vith setStyle too, but this is not that convenient.
    I looked into source code and find out that spark.components.Button class adds to the spark.components.supportClasses.ButtonBase only one public property "emphasized".
Because I do not need this property in my project, I've extended my custom LinkButton component from ButtonBase to allow setting "textAlign" style in MXML for this component.
import spark.components.supportClasses.ButtonBase;
public class LinkButton extends ButtonBase {
   Also, inside custom Skin from my Button component I do not set explicitly "textAlign" style value to the button label, I let button label to inherit style value specified in MXML for the style textAlign of my ListButton component.
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <fx:Metadata>
        [HostComponent("component.LinkButton")]
    </fx:Metadata>
<s:Label
        id="labelDisplay"
        textDecoration="underline"
        maxDisplayedLines="1"
        verticalAlign="middle"
        color="{getStyle('color')}"
        color.over="{getStyle('textRollOverColor')}"
        color.down="{getStyle('textSelectedColor')}"
        left="10" right="10" top="2" bottom="2"/>
</s:Skin>

Dynamic Skinning in Flash

Hello, I have a question. I am a designer by trade, but
recently I have been toying more and more with code as a creative
medium. This is my first attept to play with an API, and this is
basically what I'd like to accomplish:
I need to load the RSS feed into Flash, and then isolate the
hex values and apply them to cretain objects in the flash movie.
Basically dynamically "skin" the page with kuler themes, if that
makes sense. I'm using AS2 and Flash CS3.
I've been scouring the internet for examples but I havn't
been able to find anything specific to my needs. I need to know how
to load the RSS, and how to extract certain data I need (theme
name, hex values, etc.) and finally how to apply them to objects,
to color buttons, header background, etc. I'm not asking for anyone
to write the code for me but any examples or point-me-in-the-right
direction type advice would be hugely appreciated. I'm new to this
and I have the concept all layed out in my head, I just need to
know the syntax to start experimenting.
Thanks in advance for any help you can provide.
Chris

I have made a very simple way to use the kuler API but it
requires as3. Is there a reason for not using a newer version of
action script??
Any ways the klib-as3 framework can be found at
http://code.google.com/p/klib-as3/
if you have any questions, feel free to ask and I see what I
can do.
heres a example of my framework

Spark Button Label with mixed font styles

I have a spark button, with a custom skin.
I would like to use italicised text mixed with normal text for the label.
Is there any way to do that?
A crucial aspect of my problem is that I am extending the Button component because I want to keep its accessibility features. I'm finding it very hard to find any info on how I might consider customising the button text.
I have got as far as setting the text component in my button skin to be a RichText component. But how could I assign rich text to it within the button?

Thanks for your reply, I'll check that out and see if I can get
it working.

Spark button event record.

Hi,
I've the issue about record event in automation framework. A mouse events (double click, click, mouseDown) do not recording method which listen the event, i.e. automationManager.addEventListener(AutomationRecordEvent.RECORD, recordHandler, false, 0, true) but events from keyboard such as SPACE or ENTER is successfull recorded.
This is snippet of xml environment files with event for spark button:
<ClassInfo Name="SparkButton" Extends="SparkButtonBase" SupportsTabularData="false">
        <Implementation class="spark.components::Button"/>
        <Events>
            <Event Name="Click"   >
            <Implementation class="flash.events::MouseEvent" Type="click"/>
                <Property Name="triggerEvent" DefaultValue="1">
                    <PropertyType Type="Enumeration" Codec="event"/>
                </Property>
                <Property Name="ctrlKey" DefaultValue="false">
                  <PropertyType Type="Boolean"/>
                </Property>
                <Property Name="altKey" DefaultValue="false">
                  <PropertyType Type="Boolean"/>
                </Property>
                <Property Name="shiftKey" DefaultValue="false">
                  <PropertyType Type="Boolean"/>
                </Property>
            </Event>
            <Event Name="TypeSpark" >
                <Implementation class="flash.events::KeyboardEvent" Type="keyPress"/>
                <Property Name="keyCode" >
                    <PropertyType Type="String" Codec="keyCode" DefaultValue="ENTER"/>
                </Property>
            </Event>
      </Events>
</ClassInfo>
In what may be the cause?
Thanks.

The Spark button in this case is not itself toggleable. You will need to use a ToggleButton. Spark controls are not the swiss army knives that Flex 3 components were (in order to keep things a bit lighter).
The new Spark skinnable components control their own state internally and the components themselves in turn set the currentState of their associated skin at runtime. The current state of the component is not (in general) directly controllable via 'currentState'.
Regards,
Corey

Can't set the text color of a Spark Button

I'm pretty new to Flex and working on a project with a more senior developer - who's out for a few days. I hope this is a simple question!
I've got a CTA button that I want red with white text. This is how I'm doing it:
in fx:Style ...
.startButton {
fontFamily: "MyriadPro";
    fontSize: 24;
    chromeColor: #e41937;
    color: #ffffff;
    cornerRadius:7;
the button ...
<s:Button styleName="startButton" label="Start" click="currentState=PracticeState'" height="40" width="100" />
All of the properties from the style apply except for the color property. Any ideas why it wouldn't? There may be a master style that I'm not aware of, but shouldn't addin the style property here override?
Thanks!

Fixed it!
There was a global style for s|Label and since the Spark button uses one of these for the text, that was it.

RH7 - Custom WebHelp Pro skin custom "Print" button does NOT display in version published to RH Server 8

I customized a WebHelp Pro skin using the Omega skin as the basis. Everything works fine except the Print button, which I added using the same Action as shown in the BeautifulVista skin's Print button.
Local Version (C: drive)
When I generate my help project and view it locally from my C: drive after I accept the warning about viewing locally, I see the Print button.
However, it does NOT work. I've attached a graphic that shows the local version and the skin dialog where I set up the action for the Print button.
RH Server 8 version
When I view the same project after I publish it to the server, the Print button does NOT display.
QUESTIONS ARE:
How do I get the Print button to function properly (active printer dialog)?
If it can't work until it is published that fine but then how do I get it display when I view from server?

Hi there
Have you tried editing your Window Definition?
Click View > Pods > Project Setup
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

Dynamic table with radio buttons

I need to load a dynamic table with radio buttons that allow
the user to select an item in the table. I need to have it add a
radio button with a unique identifier for each table item.
For example: the table will load all of the seminars
locations available in a certain state, the radio button will allow
the user to select the city in which they would like to attend and
that value will get passed to the registration page. The value of
each radio button would be equal to the location_id in the database
for each of the locations in the table (The table includes the
date, day, venue, address, hotel info, etc. details for each city.)
When I add dynamic radio buttons and set the value to the
location_id in the database, it allows the user to select multiple
radio buttons. I cannot find any information on how to
resolve.....??
Any help is appreciated.

beanieboo wrote:
> I need to load a dynamic table with radio buttons that
allow the user to select
> an item in the table. I need to have it add a radio
button with a unique
> identifier for each table item.
>
> For example: the table will load all of the seminars
locations available in a
> certain state, the radio button will allow the user to
select the city in which
> they would like to attend and that value will get passed
to the registration
> page. The value of each radio button would be equal to
the location_id in the
> database for each of the locations in the table (The
table includes the date,
> day, venue, address, hotel info, etc. details for each
city.)
>
> When I add dynamic radio buttons and set the value to
the location_id in the
> database, it allows the user to select multiple radio
buttons. I cannot find
> any information on how to resolve.....??
> Any help is appreciated.
Give each radio button the same name
<input type="radio" name=theLocation" value="<?php
$recordset['location_id'] ?>">
Mick

Skin w/ Back Button

Hello,
My FlashHelp will be opening without the Browser toolbar. Is
there any way to add a back and foward button to the navigation bar
without using flash? Or does anyone have a skin with these buttons
they would like to kindly share?
Thanks in advance for any comments or suggestions!

Welcome to the forums. I don't think there's a way to have
back and forward buttons in the skin itself without tweaking the
skin files. A couple of things you could do instead:
1. Create a browse sequence, though the back/forward buttons
that this adds to the skin don't do the same thing as the browser
buttons. They would move the user forward or backward along the
browse sequence.
2. Add some JavaScript to back and forward images in each
help topic. Do a Web search for "JavaScript back forward buttons"
and you'll get a lot of results for how to make it work. If you
already have topics, you would probably want to use a find and
replace tool to add the code to each topic if you don't want to
manually go into the code of each topic to make the changes.
Hope this helps,
Ben

Why can access the dynamic textField inside a Button?

yep, I have another problem
I create a button in the library, it has a background graphic
on a layer and a textField, the textField has a instance name
defined in the properties panels and some text. I manually place
some instance of the button on stage, I give them different
instance names and voilà a new problem arise
when with actionscript I try to assign a new text to the
textField inside a button it throws me error 1119. A quick look at
the menu option debug ->list objects, shows me that the instance
name of the textField inside the button it is not what I defined
but it was replaced with some random name like "instance66"
I did a test with a movieclip instead of a button and I can
correctly access my textField with the instance name that I
manually defined.
Why that can be the same with the button? And if for some
arcane reason cant be possible to access a manually defined
instance inside a button WHY flash give me the possibility to give
an instance name to a dynamic textField inside a button?

Buttons simply do not have the same properties and methods
that movieclips have. Anytime you want to create a button that has
anything beyond the simple 3 states of activity, use a movieclip.
I can't answer why flash allows you to give an instance name
to the textfield, but in any case, it won't allow you to use
it.

Glow effect on touch event on spark button flex mobile 4.5

hi,
i want to create a glow effect not on all the spark button when i touch it but only on the touch area.
can it be done on mobile? how?

anyone? glow effect when touching a button?

Dynamic skinning of Spark button?

Similar Messages

Maybe you are looking for