9 Replies Latest reply on Apr 7, 2010 11:08 AM by FTQuest

    How to: not all corners are rounded

    de.hannes Level 1

      Is it possible to specify the rounded corners of a Box? Example: I only want to round the left-bottom and the  right-bottom corner.

      http://i41.tinypic.com/14mccg4.png

        • 1. Re: How to: not all corners are rounded
          David_F57 Level 5

          Hi,

           

          There is the right way and the easy way, below is the easy way - the right way is to use a path(svg) to draw your border then set your color fill.

           

          David.

           

          <?xml version="1.0" encoding="utf-8"?>

          <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/mx" minWidth="955" minHeight="600">

          <s:Group top="100" left="100" bottom="100" right="100">

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

          <s:stroke>

          <s:SolidColorStroke color="#555555" />

          </s:stroke>

          <s:fill>

          <s:SolidColor color="#C0C0C0" />

          </s:fill>   

          </s:Rect>

          <s:Rect left="0" right="0" height="80" bottom="0" radiusX="20" radiusY="20" >

          <s:stroke>

          <s:SolidColorStroke color="#555555" />

          </s:stroke>

          <s:fill>

          <s:SolidColor color="#C0C0C0"/>

          </s:fill>   

          </s:Rect>

          <s:Rect left="1" right="1" top="1" bottom="40">

          <s:fill>

          <s:SolidColor color="#C0C0C0" />

          </s:fill>   

          </s:Rect>

          </s:Group>

          </s:Application>

          • 2. Re: How to: not all corners are rounded
            de.hannes Level 1

            Ha, Ok! But theire is no way to do this as a property for a Box, like a Canvas, HBox, and so on? Is theire a way how i can extend a box to implement this property? Which internal methode draws the shape of a box?

            • 3. Re: How to: not all corners are rounded
              David_F57 Level 5

              hi,

               

              Ideally you create a skin for the component i.e. a skinnable container and either do it the way above with a bit cleaner code or you use svg path to draw the border, I did this before with options for each corner, i'll find the code and attach it later tonight when i have a bit of time.

               

              David

              • 4. Re: How to: not all corners are rounded
                FTQuest Level 3

                Hi,

                 

                Why not to use the 'bottomLeftRadiusX', 'bottomLeftRadiusY' and similar attributes of Rect to define the corners individually?

                 

                FTQuest

                1 person found this helpful
                • 5. Re: How to: not all corners are rounded
                  David_F57 Level 5

                  Hey FTQuest,

                   

                  And there's that

                   

                  I forgot about those additions rect, we all get something from these forums ....

                   

                  thanks.

                   

                  David.

                  • 6. Re: How to: not all corners are rounded
                    de.hannes Level 1

                    Which component has such properties? I can't find them in the docs. How can I use them?

                    • 7. Re: How to: not all corners are rounded
                      David_F57 Level 5

                      Hi,

                       

                      Any component than can be skinned can have rounded corners.(this is for Flashbuilder with flex 4 sdk)

                       

                      1. create a new project, drop a skinnable container onto the form in design view

                       

                      2. right click on the container and select create skin

                       

                      3 you can then edit that new skin to round your corners.

                       

                      the following is a modified container skin - modified area marked in green

                       

                      Once you have this skin you can use it for any other container you add to your application

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>

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

                          xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">

                       

                          <fx:Metadata>

                          <![CDATA[

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

                          ]]>

                          </fx:Metadata>

                       

                          <fx:Script fb:purpose="styling">

                              <![CDATA[        

                                  /**

                                   *  @private

                                   */

                                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

                                  {

                                      if (isNaN(getStyle("backgroundColor")))

                                      {

                                          background.visible = false;

                                      }

                                      else

                                      {

                                          background.visible = true;

                                          bgFill.color = getStyle("backgroundColor");

                                          bgFill.alpha = getStyle("backgroundAlpha");

                                      }

                       

                                      super.updateDisplayList(unscaledWidth, unscaledHeight);

                                  }

                              ]]>       

                          </fx:Script>

                       

                          <s:states>

                              <s:State name="normal" />

                              <s:State name="disabled" />

                          </s:states>

                       

                          <!--- Defines the appearance of the SkinnableContainer class's background. -->

                          <s:Rect id="background" left="0" right="0" top="0" bottom="0" bottomLeftRadiusX="20" bottomRightRadiusX="20" bottomLeftRadiusY="20" bottomRightRadiusY="20">

                      <s:stroke>

                      <s:SolidColorStroke color="#000000" weight="2"/>

                      </s:stroke>

                             <s:fill>

                                   <s:SolidColor id="bgFill" color="#FFFFFF"/>

                              </s:fill>

                          </s:Rect>

                       

                      <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">

                              <s:layout>

                                  <s:BasicLayout/>

                              </s:layout>

                          </s:Group>

                       

                      </s:Skin>

                      1 person found this helpful
                      • 8. Re: How to: not all corners are rounded
                        de.hannes Level 1

                        Ok, I got it! I thought there should be an easy programmatically way to do this for my special component. Well, the skinning method should be the right.

                         

                        Thanks guys.

                        • 9. Re: How to: not all corners are rounded
                          FTQuest Level 3

                          Here is fairly short version:

                           

                          <?xml version="1.0" encoding="utf-8"?>

                          <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/mx" minWidth="955" minHeight="600">

                           

                          <s:Rect x="20" y="20" width="200" height="100" bottomLeftRadiusX="20" bottomLeftRadiusY="20" bottomRightRadiusX="20" bottomRightRadiusY="20" >

                          <s:stroke>

                          <s:SolidColorStroke color="0xFF0000" weight="2" />

                          </s:stroke>

                          </s:Rect>

                          </s:Application>