3 Replies Latest reply on Jun 10, 2011 11:11 AM by dhbrown

    Rounding Square Corners with BorderContainer

    dhbrown

      I am trying to round the corners of a s:List by placing the list into a s:BorderContainer and then setting the cornerRadius of the bordercontainer to my desired value of 10.  Unfortunately the rounded corners of the container do not clip/mask the contents, and so the square list extends out over the rounded corners.  A simple code example looks lke this:

       

          <s:BorderContainer top="100" horizontalCenter="0" cornerRadius="10">
              <s:List id="menuList">
                  <s:dataProvider>
                      <s:ArrayList>
                          <fx:Object label="Juice" />
                          <fx:Object label="Coffee" />
                          <fx:Object label="Milk" />
                          <fx:Object label="Water" />
                      </s:ArrayList>
                  </s:dataProvider>
              </s:List>
          </s:BorderContainer>
      

       

      And produces this:

       

      list.png

      This holds for other types of square display objects (e.g. filled rect).   Am I missing some styling?  Or maybe this is the wrong approach for rounding square corners?  Can someone point out my error or suggest an alternative approach?

       

      Thanks,

      Dave

        • 1. Re: Rounding Square Corners with BorderContainer
          UbuntuPenguin Level 4

          You might have to end up making a custom skin for the s:List.


          • 2. Re: Rounding Square Corners with BorderContainer
            SashaKeith Adobe Employee

            Try to create a custom List skin. If you look at the ListSkin class, you'll see the Rect that's drawing the border. In your custom skin, maybe you can replace this Rect with a rounded BorderContainer to get the look you want.

            • 3. Re: Rounding Square Corners with BorderContainer
              dhbrown Level 1

              Thanks for the suggestions.  I had looked at the skin already, and encountered the same problem, namely that the corners of the list were extending over the radiused corners of the BorderContainer.

               

              The solution was to use a mask, as follows.

               

              <s:Group id="listGroup" top="100" horizontalCenter="0" >
                   <s:List id="menuList" styleName="menuListStyle" width="718"
                             dataProvider="{audioXMLDP}" labelFunction="labeler" itemRenderer="components.LTAWListRenderer" 
                             selectionColor="0x0088F4" click="listClickHandler(event);" borderVisible="false">
                   </s:List>
                   <s:BorderContainer backgroundAlpha="0" borderWeight="2" borderColor="0x999999"
                             cornerRadius="10" width="{menuList.width}" height="{menuList.height}"
                             mouseEnabled="false" mouseChildren="false"/>
                   <s:mask>
                        <s:BorderContainer id="listMask" cornerRadius="10"
                                width="{menuList.width}" height="{menuList.height}" />
                   </s:mask>          
              </s:Group>
              

               

              I would have thought that the corners of a radiused BorderContainer would be masked by default.  Who would ever want the contents of a container to spill over the corners? It would be nice if this were the default behavior for a BorderContainer.