Setting the corner radius on a Spark Border container in Flex 4

The following example shows how you can set the corner radius on a Spark Border container in Flex 4 by setting the cornerRadius style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

The following example requires Flex SDK 4.0.0.10008 or later.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ -->
<s:Application name="Spark_Border_cornerRadius_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:controlBarContent>
        <s:Label text="cornerRadius:" />
        <s:HSlider id="slider"
                minimum="0"
                maximum="100"
                value="2" />
    </s:controlBarContent>
 
    <s:Border id="brdr"
            cornerRadius="{slider.value}"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:Label id="lbl"
                 text="width:{brdr.width}, cornerRadius:{brdr.getStyle('cornerRadius')}"
                 horizontalCenter="0" verticalCenter="0" />
    </s:Border>
 
</s:Application>

View source is enabled in the following example.

[GoogleAdsWide]

You can also set the cornerRadius style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ -->
<s:Application name="Spark_Border_cornerRadius_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Border {
            cornerRadius: 50;
        }
    </fx:Style>
 
    <s:Border id="brdr"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:Label id="lbl"
                 text="width:{brdr.width}, cornerRadius:{brdr.getStyle('cornerRadius')}"
                 horizontalCenter="0" verticalCenter="0" />
    </s:Border>
 
</s:Application>

Or you can set the cornerRadius style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ -->
<s:Application name="Spark_Border_cornerRadius_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:controlBarContent>
        <s:Label text="cornerRadius:" />
        <s:HSlider id="slider"
                minimum="0"
                maximum="100"
                value="2"
                change="slider_change(event);"/>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function slider_change(evt:Event):void {
                brdr.setStyle("cornerRadius", slider.value);
            }
        ]]>
    </fx:Script>
 
    <s:Border id="brdr"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:Label id="lbl"
                 text="width:{brdr.width}, cornerRadius:{brdr.getStyle('cornerRadius')}"
                 horizontalCenter="0" verticalCenter="0" />
    </s:Border>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

10 thoughts on “Setting the corner radius on a Spark Border container in Flex 4

  1. Hello Peter,

    It looks like more and more new components are being added, while some are deprecated.
    For example, the ‘SimpleText’ component has been already deprecated in favor of ‘Label’.
    It means, that if I want to use the beta1 version, once the beta2 is released all instances of ‘SimpleText’ will need to be rewritten as ‘Label’.
    Is this right assumption?
    Also, while trying to run your example with the latest version of SDK 4.0.0.10008 being installed, I get runtime error:
    VerifyError: Error #1014: Class IVisualElement could not be found.
    Although, it shows up as runtime error, I assume that it’s a compile error, because the example runs fine on this page.

    Could you clarify this?
    Thanks,
    Igor Borodin

    1. @Igor Borodin,

      Correct. Basically the SimpleText control was renamed to Label and a few minor tweaks were made. You can read more about it at http://opensource.adobe.com/wiki/display/flexsdk/Spark+Text+Primitives+Decision.

      As for the runtime error, I haven’t seen that one in particular, but if you have a small, reproducible test case, please file it at http://bugs.adobe.com/flex/ and somebody can take a look and see if it is a bug or not.

      Thanks,
      Peter

    2. Igor;
      I found to correct the IVisualElement error with latest nightly builds –
      go to Project Properties / Flex Build Path / Library Path / and under the SDK being used I moved framework.swc to the top of the list.

      1. Jdesk0, thank you very much.
        Your solution DOES work.
        You may want to post it on Flex forum, because there are people who experience the same problem with nightly builds.
        I’d be curious to find out what’s the logic behind your solution, i.e. why the order of swc’s matter? For example, the order of ‘import’ statements doesn’t matter.
        Anyway, thanks once again,
        Igor Borodin

  2. Thank you Peter for the prompt response.
    As to the error, I was running your example – just copied it from this page.
    Here is the setting: Mac OS X 10.5.8, Flash Player 10 latest version, FlashBuilder Beta 1 using nightly build SDK 4.0.0.10008.
    Compiling runs fine – no errors, no warnings. But once the browser opens I have immediately error message. If I click continue, then a few more classes are referred to as ‘could not be found’.

    IB

  3. <object style=”border:1;borderAlpha:0″></object >

    or
    @border{border:1;borderAlpha:0}

    <object style=”@:border”></object >

    i could say why i hate flex for some reasons…

  4. Hi, do you know why when i set borderWeight, the cornersRadius is modify. i can’t set cornerRadius=0 when borderWeight=50… :(

    Thanks …

    1. @julien,

      You may need to set the border stroke explicitly and set the joints property to “miter”, as seen in the following example:

      <?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/halo">
          <s:controlBarContent>
              <s:Label text="joints:" />
              <s:DropDownList id="dropDownList" requireSelection="true" selectedIndex="2">
                  <s:dataProvider>
                      <s:ArrayList source="[bevel,miter,round]" />
                  </s:dataProvider>
              </s:DropDownList>
          </s:controlBarContent>
          <s:controlBarLayout>
              <s:HorizontalLayout verticalAlign="middle" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
          </s:controlBarLayout>
       
          <s:Border left="50" right="50" top="50" bottom="50"
                    horizontalCenter="0" verticalCenter="0">
              <s:borderStroke>
                  <s:SolidColorStroke weight="50" joints="{dropDownList.selectedItem}" />
              </s:borderStroke>
          </s:Border>
       
      </s:Application>

      Peter

  5. How do I set the cornerRadius for each of the corners individually or as pairs along one of the four sides. What I would like is to construct a Vertical Layout page with a BorderContainer at the top with rounded upper corners, a mid section with no rounded corners and a lower section with rounded lower corners. Each is to be seperated by a bar and the whole page to extend with content in each. I hope you can help me, Thanks.

Comments are closed.