<mx:Button id="callButton" x="35" y="6" width="202" height="45" label="Call" alpha="1.0"
borderColor="#FFF600" click="callOneClick(event)"
fillAlphas="[0.94, 1.0, 0.47, 0.47]" fillColors="[#FEDC00, #FEBC00]" fontSize="16"/>
This is the button I'm using in my mxml file. How can I set .png background image to my button and still have button label?
Flex 3 mx buttons allow you to set an image as the background for a button by setting the skin attributes in MXML. You can set different states using the up/over/down values. Your label will appear above the images you set but fillColours and fillAlphas will no longer have any effect.
<mx:Button id="callButton"
label="Call"
overSkin="#Embed(source='../assets/over_skin.png')"
upSkin="#Embed(source='../assets/up_skin.png')"
downSkin="#Embed(source='../assets/down_skin.png')"/>
http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_3.html
You could also assign them using styles in your CSS and setting the styleName property of the button. Your CSS would look like this:
.myButtonStyle {
upSkin: ClassReference("../assets/up_skin.png");
overSkin: ClassReference("../assets/over_skin.png");
downSkin: ClassReference("../assets/down_skin.png");
}
Related
<s:Button id="btn1" label="1" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn2" label="2" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn3" label="3" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id="bigButton" label="bigButton" width="72" includeInLayout="false" visible="false" />
private function onSmallBtnClick():void {
hideBtn(btn1);
hideBtn(btn2);
hideBtn(btn3);
showBtn(bigButton);
}
private function showBtn(button:Button):void {
button.visible = true;
button.includeInLayout = true;
}
private function hideBtn(button:Button):void {
button.visible = false;
button.includeInLayout = false;
}
Hi all, in the Flex code above, I have 4 four buttons on my interface. The interface should begin with small buttons 1,2,3 visible and the bigButton invisible. When either of the small buttons are clicked, the bigButton appears in place of the 3 small buttons. The widths of the small buttons are set at 18, while the bigButton width is set at 72.
My question is, shouldn't the width of the bigButton be 54, as 18x3 = 54? Or is there some padding within the buttons that I should know of? In this live docs page, it says..
By default, Flex stretches the Button control width to fit the size of
its label, any icon, plus 6 pixels of padding around the icon. You can
override this default width by explicitly setting the width property
of the Button control to a specific value or to a percentage of its
parent container. If you specify a percentage value, the button
resizes between its minimum and maximum widths as the size of its
parent container changes.
Could this be the problem? Since I have 3 buttons and the padding around the icons take up 6x3 = 18 pixels. The buttons don't seem to have any gap between them. So I am curious to know where does the extra 18 pixels come from.
Thanks.
As soon as I don't see any x or left things set for buttons, I guess you use something like HGroup or any other container with HorizontalLayout.
It has a property named gap, and this property is 6 by default.
But it will not add 18px, it will add 12px...
Try to set minWidth to 0 for all buttons.
in flex my button appears in the line below a formitem. is there any other way of adding in a button so that it will appear on the same level as the rest of the formitem? There does not seem to be a button property on the formitem code. Attached is an example of a formitem and the code for a button underneath. Any suggestions most welcome, thank you.
<ch:FormItem label="Gym Dosier Type:" >
<pss:dossierFinder id="gymOriginFinder" displayLabel="true"
allowMultipleSelection="false"
autoContactServer="true"
initialAccountClass="{AccountClassConstants.gym}"
accountClassEnabled="false"
initialMultigym="{gymInterdossierchinder.model.selectedItem.code}"
initialgymsource="{gymsource.model.selectedItem.internalCode}"/>
<mx:Button id = "addLineButton" icon="{addIcon}" toolTip="Add new gym member" click="{addPack(event)}" enabled="true"/>
</ch:FormItem>
I am not clear if the <ch:FormItem/> is your own separate component or just extends mx:FormItem, but in latter case, uou can set the direction parameter of the FormItem component to horizontal.
How do I get corner radius on my TextInput component in Flex 4.
<s:TextInput prompt="username" width="150" maxChars="100" id="txt_username"
color="#000000"/>
Create a custom skin (possibly by copying spark TextInputSkin) and add a border graphic with rounded corners, like this:
<!-- border -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0"
radiusX="10" radiusY="10">
<s:stroke>
<s:SolidColorStroke id="borderStroke" weight="1" />
</s:stroke>
</s:Rect>
If you want more special rounded corners you can also use these attributes:
topLeftRadiusX="4" topLeftRadiusY="8"
bottomLeftRadiusX="2" bottomRightRadiusY="10"
The default TextInputSkin does not allow for rounded corners, so there is no style that you could set on your TextInput to do it. So, no, there's no other way than creating a custom skin class.
You could take it a step further and make it dynamic. Create a custom TextInputSkin based on spark TextInputSkin and in the updateDisplayList method add this code above the super.updateDisplayList() call.
In YourTextInputSkin.mxml,
// in updateDisplayList()
if (getStyle("cornerRadius")!==undefined) {
border.radiusX = border.radiusY = getStyle("cornerRadius");
background.radiusX = background.radiusY = getStyle("cornerRadius");
}
That's it. You're done!
Now to use it add a CSS class selector to add a cornerRadius style like so:
/* set the Textinput.styleName to this style */
s|TextInput.roundedInput
{
contentBackgroundAlpha: .4;
contentBackgroundColor: #000000;
cornerRadius: 10;
skinClass: ClassReference("view.skins.TextInputRoundedSkin");
}
And set your instance to the class,
<s:TextInput styleName="roundedInput"/>
Unfortunately, you can't set the cornerRadius style on TextInput component instance in MXML. Should Flex support a styles tag for this type of thing like HTML tags do? Should styles declared in the Skin be proxied to the component using them? Currently the Flex compiler would throw an error if you declared a style in the Skin and tried to use it on the component instance even though it's valid to declare that style and any other style in the CSS. What about if UIComponents had a style proxy object that let you set styles? Anyway, I digress.
If you want to make that style available on the TextInput instance in addition to the previous methods you can do that by extending TextInput and adding the cornerRadius style metadata to it. You can also set the skinClass (inline or in a defaults.css file in the library) while you're at it.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<s:TextInput xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
skinClass="TextInputRoundedSkin" >
<fx:Metadata>
[Style(name="cornerRadius", inherit="no", type="uint")]
</fx:Metadata>
</s:TextInput>
To use,
<local:MyExtendedTextInput cornderRadius="8" />
In the future you won't have to declare the CSS.
I have a linechart and dots showing the places where a datatip pops up. I can change the line to any color I want and I can set the inside color of the dot. But the border color still stays orange (from the default color). Someone knows how I can set this property easy?
this is the code:
<mx:LineSeries id="dayEnergieLineSeries"
yField="number"
showDataEffect="{slideIn}" hideDataEffect="{slideOut}">
<mx:lineStroke>
<mx:Stroke color="#d3ce01" />
</mx:lineStroke>
<mx:itemRenderer>
<mx:Component>
<mx:CircleItemRenderer />
</mx:Component>
</mx:itemRenderer>
</mx:LineSeries>
From the docs:
It renders its area on screen using the fill and stroke styles of its associated series.
So you'll have to assign a stroke to the dayEnergieLineSeries series.
[Bindable] private var _stroke:Stroke = new Stroke(...);
<mx:LineSeries id="dayEnergieLineSeries" stroke="{_stroke}"/>
or if you don't need the data binding, just set it as a style.
PS: There is a good chart explorer available here: http://demo.quietlyscheming.com/ChartSampler/app.html
I found a nice looking app made by Kap Lab. I like the components on the left, especially the grey background with rounded corners. It feels like one solid piece of GUI, despite it's made of four different components. I tried to put VBox, make its background grey, round corners and put other components with sligtly less width on the top of it, but it doesn't seem to work. The corners are not rounded and whole thing looks rather ugly :)
It looks like a panel with a tab navigator inside it. CSS for the panel like this:
Panel {
borderStyle: solid;
borderColor: #d2d2d2;
borderThickness: 1;
roundedBottomCorners: true;
backgroundColor: #e1e1e1;
dropShadowEnabled: false;
}
I used Flex 3 Style Explorer to generate that. You could try messing around with it to get the styles you want.
If you mean the box titled "LAYOUT", then it must be a Panel component, which can be easily customized using styles to look that way:
<mx:Style>
.panelTitle
{
font-weight: bold;
color: #ffffff;
}
</mx:Style>
<mx:Panel x="300" title="LAYOUT" headerHeight="20" backgroundColor="#CCCCCC" titleStyleName="panelTitle"
headerColors="[#333333, #333333]" highlightAlphas="[0, 0]"
borderThicknessLeft="3" borderThicknessRight="3" borderThicknessBottom="3" borderThicknessTop="3">
<mx:VBox height="300" width="200" backgroundColor="#FFFFFF" />
</mx:Panel>
Top component is just a VBox.
Inside it, you first have a TabNavigator then a DataGrid and the last component is also a VBox which contains a Hbox with a simple Label and an Accordion
Vbox
TabNavigator
DataGrid
VBox
Hbox
Label
Accordion