Lets move to the second chapter for Adobe certification’s  tutorials

ModuleLoader :

Component Type : MX

The working of ModuleLoader is very similar to the SWFLoader  except that it follows a contract with the loaded content.

In this case a single copy of the module SWF file is transferred over the network by using the ModuleManager singleton.

Example :

<mx:Panel

title="Module: {moduleTitle}">

<mx:ModuleLoader

url="Example.swf"

ready="init();"/>

</mx:Panel>

HGroup

Component Type : MX

Alternative Class : Spark’s Line Class

Important points :

1)      Instance of : Group container(that uses the HorizontalLayout class)

Characteristic	Description
Default size	Large enough to display its children
Minimum size	0 pixels
Maximum size	10000 pixels wide and 10000 pixels high

Example :

<?xml version="1.0"?>

<!-- Simple example to demonstrate the Spark Group component. -->

<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:Panel title="HGroup"   width="75%" height="75%"  horizontalCenter="0" verticalCenter="0">

<s:Group left="10" right="10" top="10" bottom="10">

<s:HGroup gap="1">

<s:Button label="My Button" width="50" height="50" />

</s:HGroup>

</s:Group>

</s:Panel>

</s:Application>

Panel :

Component Type : Spark

The  container that includes a title bar, a caption, a border, and a content area for its children.

Characteristics:

Characteristic	Description
Default size	Large enough to display its children
Minimum size	131 pixels wide and 127 pixels high
Maximum size	10000 pixels wide and 10000 pixels high

Example :

<?xml version="1.0"?>

<!-- Simple example to demonstrate the Spark Group component. -->

<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:Panel title=" User Panel "   width="75%" height="75%"  horizontalCenter="0" verticalCenter="0">

</s:Panel>

</s:Application>

Scroller

Component Type : Spark

The Scroller component displays a single scrollable component, called a viewport, and horizontal and vertical scroll bars.

Important points :

1.) IViewport interface: The viewport must implement the IViewport interface.

2.) Skin: Its skin must be a derivative of the Group class.

3.) The Spark Group, DataGroup, and RichEditableText components implement the IViewport interface and can be used as the children of the Scroller control.

Characteristics:

Characteristic	Description
Default size	0
Minimum size	0
Maximum size	10000 pixels wide and 10000 pixels high
Default skin class	spark.skins.spark.ScrollerSkin

Example :

<s:Scroller width="100" height="100">

<s:Group>

<mx:Image width="300" height="400"

source="@Embed(source='assets/logo.jpg')"/>

</s:Group>

</s:Scroller>

SkinnableContainer

Component Type : Spark

The SkinnableContainer class is the base class for skinnable containers that have visual content.

Important points :

1). IVisualElement interface :The SkinnableContainer container takes as children any components that implement the IVisualElement interface.

2). GraphicElement class: All Spark and Halo components implement the IVisualElement interface, as does the GraphicElement class.

That means the container can use the graphics classes, such as Rect and Ellipse, as children.

3). Group container : To improve performance and minimize application size, you can use the Group container.

4). Cannot be skinned  :The Group container cannot be skinned.

Characteristics:

Characteristic	Description
Default size	Large enough to display its children
Minimum size	0 pixels
Maximum size	10000 pixels wide and 10000 pixels high

Example :

<?xml version="1.0" encoding="utf-8"?>

<!-- containers\spark\SparkContainerSimple.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

<s:SkinnableContainer>

<s:layout>

<s:HorizontalLayout/>

</s:layout>

<s:Button label="Button 1"/>

</s:SkinnableContainer>

</s:Application>

Spacer

Component Type : MX

The Spacer control helps you lay out children within a parent container.

Important points : the Spacer control does not draw anything, it does allocate space for itself within its parent container.

Example :

<mx:HBox>

<mx:Image source="Logo.jpg"/>

<mx:Label text="Company XYZ"/>

<mx:Spacer width="100%"/>

<mx:Button label="Close"/>

</mx:HBox>

TileGroup

Component Type : Spark

The TileGroup container is an instance of the Group container that uses the TileLayout class

Important points :

Don’t :Don’t Modify the layout property

Do : Use the properties of the TileGroup class to modify the characteristics of the TileLayout class

Characteristics:

Characteristic	Description
Default size	Large enough to display its children
Minimum size	0 pixels
Maximum size	10000 pixels wide and 10000 pixels high

Example :

<?xml version="1.0"?>

<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:Panel title="TileGroup Component " width="75%" height="75%"  horizontalCenter="0" verticalCenter="0">

<s:Group left="10" right="10" top="10" bottom="10">

<s:TileGroup horizontalGap="1" verticalGap="1">

<s:Button label="My button" width="70" height="70" />

</s:TileGroup>

</s:Group>

</s:Panel>

</s:Application>

TitleWindow

Component Type : Spark

The TitleWindow class extends Panel to include a close button and move area. It is designed as a pop-up window.

Important points :

Don’t : . Do not create a TitleWindow in MXML as part of an application

Do : create a custom MXML component based on the TitleWindow class, and then use the PopUpManager.createPopUp()

method to pop up the component, and the PopUpManager.removePopUp() method to remove the component.

Characteristics:

Characteristic	Description
Default size	Height is large enough to hold all of the children in the content area at the default or explicit heights of the children, plus the title bar and border, plus any vertical gap between the children, plus the top and bottom padding of the container. Width is the larger of the default or explicit width of the widest child, plus the left and right container borders padding, or the width of the title text.
Default skin class	spark.skins.spark.TitleWindowSkin

Example :

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/halo"

title="Title Window" x="168" y="86">

<s:HGroup>

<s:Label text="Enter Name: "/>

</s:HGroup>

</mx:TitleWindow>

VGroup

Component Type : Spark

The VGroup container is an instance of the Group container that uses the VerticalLayout class.

Important points :

Don’t : Do not modify the layout property.

Do : Use the properties of the VGroup class to modify the characteristics of the VerticalLayout class.

Characteristics:

Characteristic	Description
Default size	Large enough to display its children
Minimum size	0 pixels
Maximum size	10000 pixels wide and 10000 pixels high

Example :

<?xml version="1.0"?>

<!-- Simple example to demonstrate the Spark Group component. -->

<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:Panel title="VGroup "  width="75%" height="75%"  horizontalCenter="0" verticalCenter="0">

<s:Group left="10" right="10" top="10" bottom="10">

<s:VGroup gap="1">

<s:Button label="Sample Button" width="50" height="50" />

</s:VGroup>

</s:Group>

</s:Panel>

</s:Application>

VRule

Component Type : MX
The VRule control creates a single vertical line. You typically use this control to create a dividing line within a container.

Important points :

Alternative Class : the spark.primitives.Line class as an alternative to this class

Characteristic:

Characteristic	Description
Default size	height is 100 pixels, width is 2 pixels. By default, the VRule control is not resizable; set width and height to percentage values to enable resizing.
strokeWidth	2 pixels.
strokeColor	0xC4CCCC.
shadowColor	0xEEEEEE.

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:Panel id="myPanel" title="Hello VRule " width="75%" height="75%" horizontalCenter="0" verticalCenter="0">

<s:VGroup left="10" right="10" top="10" bottom="10">

<mx:VRule rollOverEffect="WipeUp" strokeWidth="1" strokeColor="red"/>

</s:VGroup>

</s:Panel>

</s:Application>

HRule

Component Type : MX
The HRule control creates a single horizontal line. You typically use this control to create a dividing line within a container.

Important points :

1) Alternative Class : the spark.primitives.Line class as an alternative to this class

Characteristic:

Characteristic	Description
Default size	height is 100 pixels, t width is 2 pixels. By default, the VRule control is not resizable; set width and height to percentage values to enable resizing.
strokeWidth	2 pixels.
strokeColor	0xC4CCCC.
shadowColor	0xEEEEEE.

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:Panel id="myPanel" title="Hello HRule " width="75%" height="75%" horizontalCenter="0" verticalCenter="0">

<s:VGroup left="10" right="10" top="10" bottom="10">

<mx:HRule rollOverEffect="WipeUp" strokeWidth="1" strokeColor="red"/>

</s:VGroup>

</s:Panel>

</s:Application>

Tags: Adobe certification, Alternative Class, and RichEditableText, DataGroup, GraphicElement class, Group class, Group container, HGroup, HorizontalLayout class, HRule, IViewport interface, IVisualElement interface, loaded content, ModuleLoader, ModuleManager, Panel, Scroller, Skin, SkinnableContainer, Spacer, Spark Group, Spark’s Line Class, SWFLoader, TileGroup, title bar, TitleWindow, VGroup, VRule