How to declare a component or skin inline

I’ve wanted to know how to do this for a while and I couldn’t get it to work until now. Here’s how how to set the skin class to the skin declared in the declarations.

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
		 skinClass="{mySkinClass}">
	
	<fx:Declarations>
		<fx:Component className="mySkinClass">
			<s:Skin >
				<s:states>
					<s:State name="normal" />
					<s:State name="disabled" />
					<s:State name="normalWithControlBar" stateGroups="withControls" />
					<s:State name="disabledWithControlBar" stateGroups="withControls" />
				</s:states>
				<s:Button label="HELLO SKIN"/>
			</s:Skin>
		</fx:Component>
	</fx:Declarations>
	
</s:SkinnableContainer>

Note: It’s not “inline” as an item renderer is inline but it’s in the same document which is close enough for me. :)

Example II

	<s:ButtonBar id="buttonBarList" 
				 top="120" 
				 width="100%" 
				 height="40"
				 skinClass="{MyButtonBarSkin}"
				 >
		
	</s:ButtonBar>
	
	<fx:Declarations>
		<fx:Component className="MyButtonBarSkin">
			<skins:ButtonBarSkin>
				
			</skins:ButtonBarSkin>
		</fx:Component>
	</fx:Declarations>

NOTE: When declaring a skin class you may have to manually add the namespace to the package path to the document since it is not in the default manifest. You can do that like this:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:skins="spark.skins.mobile.*"
		>

Notice how we point right to the package path that has our skin class into it. This also works for every other class that is not showing up automatically in code hinting.