"Pure" ActionScript Main Application File in Flex 4

In order to have a clean main application file in Flex 4 we can define a custom application skin and remove contentGroup from it. This way there is no way to add any mxml elements inside of the main application file. Even if you do, they wont show up. Main application file in this way has only the script block and maybe metadata and other similar blocks if you declare them. At the end you will have almost perfectly clean main application file. Here is the example.
// Application File.
<?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"
skinClass="com.gnstudio.skins.MyApplicationSkin"
preinitialize="onPreinitialize(event)"
minWidth="700" minHeight="440">

<fx:Metadata>
[ResourceBundle("IB_Main")]
</fx:Metadata>

<fx:Style source="../css/main.css"/>
<fx:Style source="../css/fonts.css"/>

<fx:Script>
<![CDATA[
private function onPreinitialize(event:FlexEvent):void {

// Initialize your application here.

}

private function myMethod():void {

// My method stup. All components are in MyApplicationSkin.

}
]]>
</fx:Script>

</s:Application>


// Application Skin.
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">

<fx:Metadata>[HostComponent("MyApplication")]</fx:Metadata>

<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>

<!-- application background -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>

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

<my:Component1 id="component1"/>
<my:Component2 id="component2"/>

</s:Group>

</s:Skin>

Spark Custom States

When defining custom states for your spark component, make sure you override getCurrentSkinState() method. You will determine skin state according to your custom and some already existing flags like enabled. Here is an example.
//----------------------------------
// States
//----------------------------------

/**
* Opened Normal State
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("openedNormal")]

/**
* Opened Disabled State
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("openedDisabled")]

/**
* Closed Normal State
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("closedNormal")]

/**
* Closed Disabled State
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[SkinState("closedDisabled")]


override protected function getCurrentSkinState():String {

var state:String;
if (opened) {
state = enabled ? "openedNormal" : "openedDisabled";
} else {
state = enabled ? "closedNormal" : "closedDisabled";
}
return state;

}

Spark Item by Item Scrolling List like in Flex 3 mx List

Spark list vertical scroll setup that works like Flex 3 mx list item by item scrolling. The point is to setup s:VScrollBar with smoothScrolling false and to set step size that equals list item height. You will also want to set the list height in a way that list items don't get cut off at the bottom (list height = n x item height).
<s:DataGroup id="contentGroup" width="341" height="100">
<s:layout>
<s:TileLayout horizontalGap="9" verticalGap="0" columnWidth="69" requestedColumnCount="4"/>
</s:layout>
</s:DataGroup>

<s:VScrollBar viewport="{contentGroup}" top="0" left="330" height="100" smoothScrolling="false" stepSize="100"/>

Spark Scrolling List

Easy and quick setup of spark list with vertical scroll.
<s:DataGroup id="contentGroup" width="100%" height="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:DataGroup>

<s:VScrollBar viewport="{contentGroup}"/>