Posted on: May 14, 2010 at 12:00 AM
SkinnableContainer in Flex4:
The SkinnableContainer container is a Flex container that hold components as children. It contain only those components that implement IVisualElement interface. It's contain both visual and graphical components. If user want to use this container by using <s:SkinnableContainer> tag in the application. By default it has BasicLayout. It is same as a canvas container in Flex3. User can apply skin on this container. In this example you can see the process of create SkinnableContainer container in the application.
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/mx" minWidth="955" minHeight="600"> <s:SkinnableContainer x="10" width="100%" height="100%"> <s:BorderContainer width="160" height="367"borderColor=" black" borderVisible="true"borderStyle=" solid" borderAlpha="10"borderWeight=" 5" cornerRadius="5" backgroundColor="0x000000"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:Image source="@Embed(source='file:/C:/work/bikrant/flex4component/skinnablecontainer/1.jpg')" width="150" height="114"/> <mx:Image source="@Embed(source='file:/C:/work/bikrant/flex4component/skinnablecontainer/2.jpg')" width="150" height="119"/> <mx:Image source="@Embed(source='file:/C:/work/bikrant/flex4component/skinnablecontainer/3.jpg')" width="150" height="112"/> </s:BorderContainer> </s:SkinnableContainer></s:Application> |
In this example we have use SkinnableContainer container and set width and height properties and create a BorderContainer container and apply properties for this container. We have used VerticalLayout to set layout for BorderContainer.
Output:
Running Application:
To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.
Download this code
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
