6 Replies Latest reply on Oct 10, 2011 8:20 AM by crunchhead

    How to get text cut onto a custom button/toggle button?

    crunchhead

      Hi there,

       

      when you put a standard button/toggle button at the screen in catalyst and you set its width smaller than its text length the text is cut off and 3 dots are put at the button. But as soon as you change the button to a custom component it is impossible to recreate this behaviour of the text. Even if you doesn'z change anything after converting it, the text flows over the button boundaries.

       

      Does anyone have an idea if this a bug or if you can somehow work around this issue?

        • 1. Re: How to get text cut onto a custom button/toggle button?
          Chris W. Griffith Adobe Community Professional

          Can you post a simple sample? It might be as simple as adding constraints to the parts.

           

          Chris

          • 2. Re: How to get text cut onto a custom button/toggle button?
            crunchhead Level 1

            Hi,

             

            the skin code of the button in catalyst looks like:

            <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

                                xmlns:s="library://ns.adobe.com/flex/spark"

                                xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"

                                width="70" height="24" fc:manageBounds="false">

             

                      <fx:Metadata>

                                [HostComponent("spark.components.Button")]

                      </fx:Metadata>

             

                      <s:states>

                                <s:State name="up" />

                                <s:State name="over" />

                                <s:State name="down" />

                                <s:State name="disabled" />

                      </s:states>

             

                      <!-- background -->

                      <s:Rect left="0" right="0" top="0" bottom="0"

                                          radiusX="2" radiusY="2" alpha.disabled="0.5">

                                <s:stroke>

                                          <s:SolidColorStroke color="#A9A9A9" color.over="#9C9C9C" color.down="#9C9C9C" />

                                </s:stroke>

                                <s:fill>

                                          <s:SolidColor color="#BABABA" color.up="#EEEEEE" color.over="#DDDDDD" color.down="#DDDDDD" />

                                </s:fill>

                      </s:Rect>

             

                      <!-- shadow (down state only) -->

                      <s:Rect includeIn="down" left="0" right="0" y="0" height="4" radiusX="2">

                                <s:fill>

                                          <s:LinearGradient rotation="90">

                                                    <s:GradientEntry alpha="0.23" color="#000000" ratio="0"/>

                                                    <s:GradientEntry alpha="0.20" color="#000000" ratio="0.4"/>

                                                    <s:GradientEntry alpha="0.055" color="#000000" ratio="0.55"/>

                                                    <s:GradientEntry alpha="0.0" color="#000000" ratio="0.8"/>

                                          </s:LinearGradient>

                                </s:fill>

                      </s:Rect>

                      <s:Rect includeIn="down" x="0" width="4" top="0" bottom="0" radiusX="2">

                                <s:fill>

                                          <s:LinearGradient rotation="0">

                                                    <s:GradientEntry alpha="0.13" color="#000000" ratio="0"/>

                                                    <s:GradientEntry alpha="0.12" color="#000000" ratio="0.2"/>

                                                    <s:GradientEntry alpha="0.0" color="#000000" ratio="0.55"/>

                                          </s:LinearGradient>

                                </s:fill>

                      </s:Rect>

             

                      <!-- label -->

                      <s:RichText id="labelDisplay" horizontalCenter="0" verticalCenter="1" verticalCenter.down="2"  textAlign="center" verticalAlign="middle" alpha.disabled="0.5"/>

             

            </s:Skin>

             

            using:

            // flows over boundaries

            <s:Button includeIn="StateConnectingView" x="59" y="295" width="74" label="Button with long Text"

                                            skinClass="components.TestButtonSkin"/>

            //its length is set to at least the length of its text by catalyst

                      <s:Button includeIn="StateConnectingView" x="41" y="191" width="184"

                                            label="Schaltfläche mit auch langem text" skinClass="components.TestButtonSkin"/>

             

            Ofc I could change the size of the buttons by hand in Flash Builder. But why do I constantly have to switch between these two? The whole benefit of gui prototyping is rendering void by this.

            • 3. Re: How to get text cut onto a custom button/toggle button?
              Chris W. Griffith Adobe Community Professional

              I think the solution is quite simple, on the s:RichText element add the maxDisplayedLines attribute and set it to 1. This will trigger the auto-truncation built into the component. You will have to add this using Flash Builder.

               

              Hope this helps!

               

              Chris

              1 person found this helpful
              • 4. Re: How to get text cut onto a custom button/toggle button?
                crunchhead Level 1

                Thanks, that solved the problem. But now I can't change the button skin in Catalyst cause the maxDisplayedLines is not allowed in Richtext. :/

                • 5. Re: How to get text cut onto a custom button/toggle button?
                  Chris W. Griffith Adobe Community Professional

                  Catalyst can get picky, even you add allowed attributes. The only solution is to make the maxDisplayedLines change after you have finished skinning the button.

                   

                  Chris

                  • 6. Re: How to get text cut onto a custom button/toggle button?
                    crunchhead Level 1

                    Hehe, Design is never really finished. I guess for now I have to live with the limitations of Catalyst.