5 Replies Latest reply on Jun 18, 2009 10:29 AM by Handycam

    Wrap long lines in a Spark List component?

    Handycam Level 1

      I have a Spark List. 

       

      The text for each entry is on one line, and is too long to fit.

       

      Can I get it to break to as many lines as needed without a custom item renderer?

        • 1. Re: Wrap long lines in a Spark List component?
          garigantua Level 1

          Have you tried playing with these?

           

          sdks\4.0.0\frameworks\projects\flex4\src\spark\skins\default\DefaultItemRenderer.mxml

           

          or

           

          sdks\4.0.0\frameworks\projects\flex4\src\spark\skins\default\ListSkin.mxml

          • 2. Re: Wrap long lines in a Spark List component?
            Peter deHaan Level 4

            Handycam,

             

            I believe you'll need to create a custom item renderer to implement word wrapping.

             

            Peter

            • 3. Re: Wrap long lines in a Spark List component?
              Shongrunden Adobe Employee

              If you define an explicit width on the SimpleText in the DefaultItemRenderer you can get this behavior.

               

              Here is an example of this using an inline ItemRenderer:

              <s:Application
                   xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/halo">
                  
                  <s:List width="50" height="200">
                      <s:ArrayList>
                          <fx:String>a</fx:String>
                          <fx:String>b</fx:String>
                          <fx:String>c c c c c c c c c c c c</fx:String>
                          <fx:String>d</fx:String>
                          <fx:String>e</fx:String>
                      </s:ArrayList>
                      
                      <!-- here we define a custom item renderer inline (copied and modified from DefaultItemRenderer.mxml) -->
                      <s:itemRenderer>
                          <fx:Component>
                              <s:ItemRenderer focusEnabled="false">
                                  
                                  <fx:Script>
                                      <![CDATA[
                                          
                                          override public function set label(value:String):void
                                          {
                                              super.label = value;
                                              labelDisplay.text = label; 
                                          }
                                      ]]>
                                  </fx:Script>
                                  
                                  <s:states>
                                      <s:State name="normal" />            
                                      <s:State name="hovered" />
                                      <s:State name="selected" />
                                      <s:State name="normalAndShowsCaret"/>
                                      <s:State name="hoveredAndShowsCaret"/>
                                      <s:State name="selectedAndShowsCaret"/>
                                  </s:states>
                                  
                                  <s:Rect left="0" right="0" top="0" bottom="0">
                                      <s:stroke.normalAndShowsCaret>
                                          <s:SolidColorStroke 
                                              color="{selectionColor}" 
                                              weight="1"/>
                                      </s:stroke.normalAndShowsCaret>
                                      <s:stroke.hoveredAndShowsCaret>
                                          <s:SolidColorStroke 
                                              color="{selectionColor}" 
                                              weight="1"/>
                                      </s:stroke.hoveredAndShowsCaret>
                                      <s:stroke.selectedAndShowsCaret>
                                          <s:SolidColorStroke 
                                              color="{selectionColor}" 
                                              weight="1"/>
                                      </s:stroke.selectedAndShowsCaret>
                                      <s:fill>
                                          <s:SolidColor 
                                              color.normal="{contentBackgroundColor}"
                                              color.normalAndShowsCaret="{contentBackgroundColor}"
                                              color.hovered="{rollOverColor}"    
                                              color.hoveredAndShowsCaret="{rollOverColor}"
                                              color.selected="{selectionColor}"
                                              color.selectedAndShowsCaret="{selectionColor}"
                                              />
                                      </s:fill>
                                  </s:Rect>
                                  
                                  <!-- the only real change is to set a specific size on the SimpleText slightly smaller
                                       than the width of the List to account for the border -->
                                   
                                  <s:SimpleText id="labelDisplay" verticalCenter="0" width="48" top="6" bottom="4"/>
                              
                              </s:ItemRenderer>
                          </fx:Component>
                      </s:itemRenderer>
                  </s:List>
                  
              </s:Application>
              • 4. Re: Wrap long lines in a Spark List component?
                Evtim Georgiev (Adobe) Level 2

                Hi,

                 

                You should be able to do this with our default item renderer. The default setting for the List layout is a VerticalLayout with horizontalAlign="contentJustify". If you want all the items to be restricted to the with of the List, then you should set it to "justify" like this:

                 

                    <s:List width="200" height="200">
                        <s:layout>
                            <s:VerticalLayout horizontalAlign="justify" gap="0"/>
                        </s:layout>

                 

                        ....
                    </s:List>

                 

                Note that there's a bug currently and you'll still see horizontal scrollbar appear, but we're looking into that one.

                Also, in the default skin, the layout has a gap set to "0", so make sure you don't forget to set that (as in the example above) when overriding the layout settings.

                 

                -Evtim

                • 5. Re: Wrap long lines in a Spark List component?
                  Handycam Level 1

                  Outstanding, Evtim, thank you.