Share on Google+Share on Google+

SkinnableContainer in Flex4

Advertisement
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.

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

Advertisements

Posted on: May 14, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.