Use Flex 4.5.1 and when add icons to the button is so curve effect of scaling.
Prompt how to make a proportional scaling icons?
<s:Button width="100%" height="50" label="Create new map" click="button3_clickHandler(event)"
fontSize="22" icon="#Embed('icons/001-folder.png')">
try to create custom skin for button and do the same in commitProperties
override protected function commitProperties():void
{
super.commitProperties();
if(iconDisplay){
iconDisplay.scaleMode = BitmapScaleMode.LETTERBOX;
}
}
try add creation complete handler and set btn.iconDisplay.scaleMode to BitmapScaleMode.LETTERBOX
protected function creationCompleteHandler(event:FlexEvent):void
{
btn.iconDisplay.scaleMode = BitmapScaleMode.LETTERBOX
}
<s:Button id="btn" creationComplete="creationCompleteHandler(event)" width="100%" height="50" label="Create new map" click="button3_clickHandler(event)"
fontSize="22" icon="#Embed('icons/001-folder.png')">
Related
I have created a custom component that I am using, more conveniently, as a SkinnablePopUpContainer and I want to use the same function that calls and receives data from it for several Buttons in the UI. What is the best way to achieve this without having to create a new function for each button?
<fx:Script>
<![CDATA[
import spark.events.PopUpEvent;
protected function button1_clickHandler(event:MouseEvent):void
{
popup.addEventListener(PopUpEvent.CLOSE, onPopUpEventClose1, false, 0, true);
popup.open(this);
}
private function onPopUpEventClose1(event:PopUpEvent):void {
popup.removeEventListener(PopUpEvent.CLOSE, onPopUpEventClose1);
trace(event.commit);
trace(event.data);
button1.label=event.data;
}
protected function button2_clickHandler(event:MouseEvent):void
{
popup.addEventListener(PopUpEvent.CLOSE, onPopUpEventClose2, false, 0, true);
popup.open(this);
}
private function onPopUpEventClose2(event:PopUpEvent):void {
popup.removeEventListener(PopUpEvent.CLOSE, onPopUpEventClose2);
trace(event.commit);
trace(event.data);
button2.label=event.data;
}
]]>
</fx:Script>
<s:Button id="button1" x="102" y="103" label="Button 1 Numbers"
click="button1_clickHandler(event)"/>
<s:Button id="button2" x="102" y="200" label="Button 2 Numbers"
click="button2_clickHandler(event)"/>
You can see how I would rather have one set of functions that can handle all of this rather than manually coding each function.
Is there a way to get the id of the component that calls the function? What's the best way to solve this?
EDIT: SOLUTION
I have been able to replace all of that code with the trimmer following:
private var buttonPick:Button;
public function button_clickHandler(button:Button):void
{
switch (button) {
case button1: popup.addEventListener(PopUpEvent.CLOSE, onPopUpEventClose, false, 0, true);
popup.open(button);
break;
case button2: popup.addEventListener(PopUpEvent.CLOSE, onPopUpEventClose, false, 0, true);
popup.open(button); break;
}
buttonPick = button;
}
private function onPopUpEventClose(event:PopUpEvent):void {
popup.removeEventListener(PopUpEvent.CLOSE, onPopUpEventClose);
trace(event.commit);
trace(event.data);
buttonPick.label=event.data;
}
and this as the mxml:
<s:HGroup click="button_clickHandler(event.target as Button)">
<s:Button id="button1" x="102" y="103" label="Button 1 Numbers"
/>
<s:Button id="button2" x="102" y="200" label="Button 2 Numbers"
/>
</s:HGroup>
Thanks for the input and advice! And if there is a more efficient way to do it than with case statements, be sure to suggest it!
You should put those buttons into a common container and listen for clicks on that container. Then you can use Event#target to detect which element in the container was clicked.
Your buttons in a common container:
<s:Group click="button_clickHandler(event.target as Button)">
<s:Button id="button1" x="102" y="103" label="Button 1 Numbers" />
<s:Button id="button2" x="102" y="200" label="Button 2 Numbers" />
</s:Group>
The event handler:
protected function button_clickHandler(button:Button):void {
switch (button) {
case button1: trace('clicked button 1'); break;
case button2: trace('clicked button 2'); break;
default: trace('clicked somewhere else in the group'); break;
}
}
As you can see, I cast event.target to a Button class using the 'as' keyword. This way, if you click anything else than a Button, the 'button' argument will be 'null'.
Read the docs for Event.target and Event.currentTarget. In this case you want to use currentTarget. This article describes the differences between target and currentTarget.
I want to add a button with a cross to the header of the accordion which can be clickable. that means i want to display a message when the some one click on that button. i go through many of the samples in the web but couldn't get it done. if any one who knows do this in flex4 it will very helpful.
I tried with also a CanvasButtonAccordionHeader, it shows the button but when i click it, it didn't give the message although i created the click event handler.
if somebody know how to resolve this please describe it with a simple source code.
thanx.
You can easily do that by customizing the header in CSS.
Add the header Style to you accordion.
<mx:Accordion id="accordion"
headerStyleName="accHeader"
width="100%" />
In your CSS
.accHeader {
fillColors: haloSilver, haloBlue;
fillAlphas: 1.0, 0.5;
selectedFillColors: black, black;
}
Or embed your image in here.
You can place that message in your ViewStack.
I use the CanvasButtonAccordionHeader in Flex 3, so not sure if this will work in Flex 4.
But.... in case it's of any use, I create my CanvasButtonAccordianHeader as a custom componant which dispatches an event when the button is clicked:
<CanvasButtonAccordionHeader xmlns="flexlib.containers.accordionClasses.*"
xmlns:mx="http://www.adobe.com/2006/mxml" mouseChildren="true"
<mx:Script>
<![CDATA[
[Bindable]
private var itemName:String;
public function init():void{
itemName=data.name;
}
]]>
</mx:Script>
<mx:Metadata>
[Event(name="homeButtonClicked")]
</mx:Metadata>
<mx:HBox width="100%" horizontalAlign="right" height="100%"
paddingRight="5"
verticalAlign="middle">
<mx:LinkButton label="<>"
click="dispatchEvent(new Event('homeButtonClicked'));"
/>
</mx:HBox>
</CanvasButtonAccordionHeader>
Then I instantiate the custom componant at the bottom of the Accordian as a Header Renderer:
............................................
<mx:headerRenderer>
<mx:Component>
<applicationLayout:AccordionNavHeaderRenderer
homeButtonClicked="outerDocument.dispatchEvent(new Event('homeClick'))"/>
</mx:Component>
</mx:headerRenderer>
</mx:Accordion>
Hope this is of use.
I have a small flex application.
<mx:Script>
<![CDATA[
import flash.events.Event;
// Event handler function to print a message
// describing the selected Button control.
private function printMessage(event:Event):void {
message.text += event.target.label + " pressed" + "\n";
}
]]>
</mx:Script>
<mx:Panel title="Button Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:VBox>
<mx:Label width="100%" color="blue"
text="Select a Button control."/>
<!-- The button can contain an image, as in the "Button with Icon" button -->
<mx:Button id="iconButton" icon="#Embed('assets/mm-icon.png')" label="Button with Icon"
labelPlacement="right" color="#993300" click="printMessage(event);"/>
<!-- The size of the button and the label attributes can be customized -->
<mx:Button label="Customized Button" color="#993300" toggle="true" selected="true"
textAlign="left" fontStyle="italic" fontSize="13" width="{iconButton.width}"
click="printMessage(event);"/>
<!-- By default, the look and feel of the customized button is
similar to the Default Button. -->
<mx:Button label="Default Button" click="printMessage(event);"/>
</mx:VBox>
<mx:TextArea id="message" text="" editable="false" height="100%" width="100%"
color="#0000FF"/>
</mx:Panel>
What I want to achieve is, I want my user to pass the script as a parameter. so he has the flexibility to do anything with the buttons->like add event, hide the other buttons.
Something like this(below)
<param name="script" value="import flash.events.Event;\n private function printMessage(event:Event):void {\nmessage.text += event.target.label + " pressed" + "\n";\n}">
Thanks.
If I understood, what you want is simply create dynamic event and load it to some component, right? If so in did its very easy to implement.
Just create your own custom event (inherit from Event) or use the Event itself:
var event:Event = new Event("[Your event type here"],[bubbles?],[cancelable?]);
and then add listener to your wanted component to the same "event type".
If you need you can also dispatch this event from wanted component programmatically like this:
[you component].dispatchEvent(event);
but then you have to make sure this component extends EventDispatcher class.
Hope I helped.
Royee
I am creating a lot of dynamic flex components like RadioButton, Combo Box, CheckBox.
if(type=="mx.controls.CheckBox"){
//if(rep.currentIndex<5){
for each(j in x){
k=createNewInstanceOfClass(rep.currentItem.type);
k.id="radioGroup"+rep.currentItem;
k.label=j.linkname;
k.data=j.linkname;
linkPanel[rep.currentIndex].addChild(DisplayObject(k));
}
MXML
<mx:Panel layout="horizontal" id="linkPanel" title="Evaluation" fontWeight="bold" height="100%" backgroundColor="0xFFF7E6"
borderThicknessLeft="0" borderThicknessRight="0" cornerRadius="10" headerHeight="20" dropShadowEnabled="false" roundedBottomCorners="true" verticalScrollPolicy
="off" horizontalScrollPolicy="off" headerColors="[#ffffff,#ffffff]" width="100%">
<mx:Form>
<mx:FormItem paddingLeft="2" paddingTop="2" paddingBottom="2">
<mx:Repeater id="rep2" dataProvider="{sendToActionScript(rep.currentItem.link)}" />
</mx:FormItem>
</mx:Form>
</mx:Panel>
When i click on Submit finally i need to get all the selected Values in each question. All the components are dynamically created at runtime.
You can list the children of linkPanel with getChildren()
when looping through them, read the "selected" property
public function test():void {
for each ( var obj:Object in linkPanel.getChildren()) {
if( obj is RadioButton) {
Alert.show( (obj as RadioButton).selected.toString());
}
}
}
If you are creating a list of radio buttons belonging to a group, look into "selectedValue" for this group
<mx:RadioButtonGroup id="rbg" />
<mx:RadioButton id="answer1" group="{rbg}" label="Answer 1" />
public function test():void {
Alert.show( rbg.selectedValue.toString())
}
I have two questions.
How do I change the corner radius of a Label component in Flex. Tried applying style name, and the setStyle('cornerRadius',9) methods, but doesn't work.
How can I change the arrow image in the combo box control to a different image?
Please give your suggestions.
Ok, I've edited my answer.
Looks like the only way to do it is wrap the Label in a container like an HBox
<mx:HBox width="100%" horizontalAlign="right" id="hbox1" cornerRadius="16" borderStyle="solid">
<mx:Label label="{stuff}" id="opLabel" />
</mx:HBox>
Using Spark components use the BorderContainer control
<s:BorderContainer id="brdr"
cornerRadius="6"
width="80" height="30"
horizontalCenter="0" verticalCenter="0">
<s:Label id="lblFoo"
text="Bar"
width="100%" height="15"
horizontalCenter="0" verticalCenter="0"/>
</s:BorderContainer>
To change the combobox arrow you need to change the following skins:
upSkin
overSkin
downSkin
disabledSkin
For an editable combobox you need to change the following skins:
editableUpSkin
editableOverSkin
editableDownSkin
editableDisabledSkin
If you coding on actionScript try this one, first you have to create in your css file attribute, for example:
CSS-File
.lineCorner{ corner-radius: 20; }
And in your main mxml app you have to set styleName to your Label like this example:
var myLabel:Label = new Label();
myLabel.text = "Bla-Bla-Bla";
myLabel.styleName = "lineCorner";
this.addChild(myLabel);