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

By Peter deHaan On September 4, 2009 · 10 Comments

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

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.

Tagged with: cornerRadius • Gumbo

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

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

Igor Borodin says:

September 5, 2009 at 11:15 am

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

Reply
- Peter deHaan says:
  
  September 5, 2009 at 12:09 pm
  
  @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
  
  Reply
- jdesko says:
  
  September 5, 2009 at 6:58 pm
  
  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.
  
  Reply
  - Igor Borodin says:
    
    September 6, 2009 at 8:37 am
    
    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
Igor Borodin says:

September 5, 2009 at 3:16 pm

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

Reply
peter says:

September 23, 2009 at 1:53 am

<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…

Reply

julien says:

November 2, 2009 at 2:22 am

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

Thanks …

Peter deHaan says:

November 3, 2009 at 3:21 pm

@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

Peter deHaan says:

November 3, 2009 at 3:32 pm

Posted at “Setting the joint style on a Spark Border container in Flex 4″.

Stephen Brown says:

July 9, 2011 at 2:14 am

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.

Reply

M	T	W	T	F	S	S
« Aug				Oct »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Just a bunch of Adobe Flex Examples

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

Peter deHaan

Add Widgets (Content Sidebar)

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

Leave a Reply Cancel reply

Categories

Articles

Calendar

Meta

Pages

The Latest

Setting the icon placement on a Spark Button control in Flex Hero

More