CODEWITHSUNDEEP
apache-flexflash-builder
travistravis
travistravis

Reputation: 257

Multi-line labels on flex (FB 4.5) buttons?

I'm trying to make a button in Flash Builder 4.5 that is multi-lined (specific line break, both are left justified), with the second line being italicized. I can do this by making a button, and throwing a label on top of it, but it wrecks the button functionality where that label sits.

Is there an easy functionality to do this, or is it starting to step into custom skins? (I've looked at it, but I'm pretty new to FB, and it looks like a steep learning curve)

Upvotes: 4

Views: 3539

Answers (4)

Yozef
Yozef

Reputation: 829

To create a multi-lined Label of a Button:

  1. Skin your Button (Simplest way: Create Skin from the Design view)
  2. In the Skin, scroll to where you see the Label with the id="labelDisplay"
  3. Set a Fixed Width to that Label in the Skin & you're Done!

Once you populate the label property of the Button, it'll auto multi-line for you

Upvotes: 0

travistravis
travistravis

Reputation: 257

There was nothing I've found to do what I wanted to do (I did find Flexlib and canvasButton, but it didn't seem to work for me)

What I ended up doing is making my own "simulated" buttons. A container with 2 lines of labels (one normal, one italic, like I wanted) with another container over it. mouseOver and mouseOut and click were all bound to the top container to make it seem like one large button. (I also used some alpha transparency to simulate highlighting.

For the curious (or other beginners with similar issue) -this is what I've done

    <s:BorderContainer id="bottomContainer" x="129" y="99" width="200" height="44" backgroundColor="#EEEEEE"
                   borderVisible="false" cornerRadius="6">
    <s:Label id="encLabel1" x="48" y="8" color="#000000" fontFamily="Arial"
             text="Create a new encounter"/>
    <s:Label id="encLabel2" x="48" y="24" color="#000000" fontStyle="italic"
             text="Single encounter"/>
    <s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>        
<s:BorderContainer id="coverContainer" x="129" y="99" width="200" height="44" backgroundColor="#000000"
                       borderVisible="false" cornerRadius="6" alpha=".1" mouseOver="alphaOver(event)" mouseOut="alphaOver(event)" click="trace('working')">
</s:BorderContainer>

Upvotes: -1

FTQuest
FTQuest

Reputation: 546

Minor clarification/addition: While having multiple lines in the button label is as easy as setting the 'maxDisplayedLines' attribute of the 'labelDisplay' in the skin to anything larger than '1', s:Label does NOT support multiple styles; i.e. you can't have one line regular and the second line italic.

FTQuest

Upvotes: 1

J_A_X
J_A_X

Reputation: 12847

Yeah, you definitely want skinning. It's fairly easy since it generates all the code for you. You just need to find the label for the button and modify it to your will.

Sorry to say, but this is the only way to do it properly. If what you're trying to do is just hack it together, I don't think you should be touching code...

Upvotes: 2

Related Questions