2 Replies Latest reply on Oct 6, 2009 11:06 AM by Jason Szeto

    How to specify border-sides for a Spark container?

    Alconis-MY9GnN

      Hi, there.

       

      I've noticed that the CSS border-sides property that could be found on former Halo components has been removed. For instance, we are encouraged with Flex 4 to use the Border class and play with the Stroke property to skin the borders.

       

      But looking at the BorderSkin Spark class, it seems that there is no way to specify the border sides (top, bottom, left, right) to be drawn.

       

      So, what is the recommandation using Spark to draw specific border sides of a container?

        • 1. Re: How to specify border-sides for a Spark container?
          Jason Szeto Level 3

          Alconis,

           

          Since Spark components separate out the component appearance from the component behaviors and logic, it is easy to customize the appearance of your containers. You can declaratively create a skin class in MXML with Line primitives for the sides you want to display. If you want rounded corners, you can use a Path to define the corner curves. You'd then have to apply a scale grid to get resize behavior. Catalyst, our new designer tool will make it easy to convert Illustrator, Fireworks and Photoshop assets into MXML.

           

          I've attached an example of how to create a custom skin and assign it to a SkinnableContainer.

          • 2. Re: How to specify border-sides for a Spark container?
            Jason Szeto Level 3

            Looks like I had problems attaching the files. I'll just include them inline:

             

            mySkin.mxml:

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/halo" alpha.disabled=".5">   
                <s:states>
                    <s:State name="normal" />
                    <s:State name="disabled" />
                </s:states>
               
                <s:Line left="0" right="0" top="0">
                    <s:stroke>
                        <s:SolidColorStroke/>
                    </s:stroke>
                </s:Line>
                <s:Line left="0" top="0" bottom="0">
                    <s:stroke>
                        <s:SolidColorStroke/>
                    </s:stroke>
                </s:Line>
                <s:Line right="0" top="0" bottom="0">
                    <s:stroke>
                        <s:SolidColorStroke/>
                    </s:stroke>
                </s:Line>
                <s:Group id="contentGroup" left="1" right="1" top="1" bottom="1"/>
            </s:SparkSkin>

             

            testFile.mxml:

             

            <?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" minWidth="1024" minHeight="768">  
               
                <s:SkinnableContainer x="10" y="10" skinClass="mySkin" width="400" height="300">
                    <s:layout>
                        <s:VerticalLayout/>
                    </s:layout>
                    <s:Button label="Push"/>
                    <s:Button label="Me"/>
                </s:SkinnableContainer>
               
            </s:Application>