I'm trying to change the background color and or text color of a BorderContainer in flex 4 using Action Script, but have not idea how to.
The Border Container component doesn't seem to have any properties like:
idname.color = "#333333";
idname.backgroundcolor = "#333333";
How might I go about doing this?
thanks!
You can set styles (which are different from properties) in ActionScript like so:
idname.setStyle("backgroundColor", 0xff0000);
Not sure if this is the only way to do it, but by creating a css style your able to change the background, text color, and other style attributes and call the style's name in Action Script.
idname.styleName = "css-stylename";
Related
I have a simple form with three fields. In it there is an email validation, which should change the text background color when the email to invalid.
However, the background color no change. The code changes the background color of the label, not the text background.
Is there any way to resolve this with just JavaScript?
Fiddle
You need to make 2 small changes to a single line
Ext.get('txtUsuEmail').setStyle('background-color','#DC143C'); //change this as per below
1) Target specifically the <input> textbox using Ext.get('txtUsuEmail-inputEl').
2) Change the background property not the background-color.
So the final would look like:
Ext.get('txtUsuEmail-inputEl').setStyle('background','#DC143C');
This should work.
You could give an id to the textfield and simply use the below setStyle:
Ext.get('YourTextFieldId').setStyle('background', '#ABCDEF');
Is it possible? Or do I need to use Skin architecture? in I can't found the property border color, so I think I need to create a entire skin customized? Or are there the property accessible by css?
Create a custom Skin based on the default spark ButtonSkin.
You'll notice a Rect named "border".
The border is actually a gradient, I suggest you to replace it by a SolidColorStroke for now.
Set an id to this stroke
In the updateDisplayList method, add :
strokeId.color = getStyle("borderColor");
now you can use a borderColor property in your CSS file ;)
I think to change the border color is to create a custom skin, and set up the color of rectangles that draw the component. I haven't found accessors or property to set the color of the spark button border directly.
Is there an easy way to change the background color of a Flex 4 spark Button without messing with skins?
UPDATE: ok, figured it out, simply set the chromeColor attribute of the Button mxml.
For spark components, you can use chromeColor style:
<s:Button chromeColor="0xff0000" label="chrome red"/>
You can change the color style of the button. You can also have a bitmap fill.
Update: The above methods do not change the background.
Easiest way to change the background, you can use - opaqueBackground property.
Here is another way to change the background of a button without changing its skin -
1. Create a group with a rectangle and your button.
2. Set opaqueBackground of your button to null.
3. Make width and height of rectangle to 100%
4. whatever color you fill the rectangle with is the background of your button.
This can also be done via code like :-
btnID.addEventListener(MouseEvent.MOUSE_OVER, textChange);
btnID.addEventListener(MouseEvent.MOUSE_OUT, textChangeback);
private function textChange(event:MouseEvent):void
{
btnLinkDelete.setStyle("color", 0xFFFFFF)
btnLinkDelete.setStyle("chromeColor", 0x535151)
}
private function textChangeback(event:MouseEvent):void
{
btnLinkDelete.setStyle("color", 0x000000)
btnLinkDelete.setStyle("chromeColor", 0xfcffff)
}
I am posting it, if anyone want to change background color on mouse hover.
There are styles for over and clicked but no up state.
Is it possible?
You can use the upSkin style or the skin style to define the background of a button
So, instead of referencing the downSkin, or overSkin, or disabledSkin, you would just reference 'skin' or upSkin.
I believe you'll need an actual skin, and not an image to accomplish this, though.
http://www.adobe.com/devnet/flex/articles/skins_styles.html
I have a form that I would like to style. specifcally I would like to chnage the background color of the form item's label. (the backgorundColor attribute changes both the label and the inputs background color)
i.e.
<mx:Form>
<mx:FormItem label="username:">
<mx:TextInput />
</mx:FormItem>
</mx:Form>
I would like to make the label with 'username:' have a different background color, but have the text input still be the default background color.
is this possible with a FormItem ?
A formitem has an object it uses to display the label called the FormItemLabel, this objects purpose is so you can style the label of a form item.
In flex 2 to change the style you can try:
FormItemLabel {
}
However I looked over the flex 2 lang ref and it doesn't seem like you can change the background color of the label. Click here for lang ref link
If you are using flex 3 the desired way to change the label of the FormItem is through the formitems labelStyleName
FormItem {
labelStyleName: newStyle;
}
However once again I don't believe they added the ability to change the background color of the label itself. Click here for lang ref link
Best choice of action if this is required would be to extend the formitem class, unless anyone else has any ideas.
Hope this helps...
As I see problem "hangs unanswered" for two years... and I need exactly the same functionality - different background color for label side.
I am using Flex3. I tried Form background - that changes whole form. Then tried FormItem - if you have only text entry - it does cover background, but if you have few buttons, gap between them is also of the same color. You then need extra HBox with another background. And also there is no gap between Label background and input control.
I do not want to rewrite FormItem control.
Seems I will need to use my ancestors style: Grid instead of forms and GridItem instead of FormItem. Then you can style each cell in whatever color. :o(
Try using the flex style explorers to create your desired style:
Flex 3 Style Explorer
Flex 2 Style Explorer
I used the TextArea in the style explorer and formatted the background color which gave the following css output:
TextArea {
backgroundColor: #0000ff;
}
You can change this to the following to include in you stylesheet:
.formLabel {
backgroundColor: #0000ff;
}
Then in the FormItem tag:
<FormItem label="Label" styleName="formLabel" />
More info on Flex Style Sheets:
Flex Style Sheets
These examples will show that you can declare styles within the mxml Style tags rather than an external style sheet if you would like.