This is an extension of the Minimal Components set created by Keith Peters (http://www.minimalcomps.com/). The components are super lightweight however they lack the ability to be easily skinned (http://www.bit-101.com/blog/?p=2535).

In order to make the components more flexible from a visual standpoint yet retain the minimal footprint a basic set of classes for drawing shapes and fills and the required logic to handle skinning was added. If you have worked with Flex 4 or Degrafa it should be quite obvious how the components and skins interact and how skins are created.

There are two demo files, one is a straight AS3 class, SkinDemo.as, the other SkinMarkupDemo.mxml is an mxml file that is compiled by mxmlc, however it doesn't include the Flex framework when it gets compiled, it only uses the framework to allow coding in markup.

It was used to simplify the creation (using markup vs script). It should also be more familiar to Flex developers. You can read this post to see how to setup projects to use this method, http://www.dgrigg.com/post.cfm/04/12/2010/When-Flex-goes-on-a-SlimFast-diet or follow these steps.

In Flash Builder (Flex Builder) create a new AS3 Project. After the setup is done

1. go to the project properties
2. select Actionscript Build Path
3. select Library path
4. Add SWC(s)
5. Browse to the 'framework.swc' in the Flex SDK dir you are using (ie /flex_sdk_4.1.0.14965/frameworks/libs) and select it.
6. Browse to the 'framework_rb.swc' in the Flex SDK dir you are using (ie /flex_sdk_4.1.0.14965/frameworks/locale/en_US) and select it.

Documentation coming soon.

Creating new skins

When creating a new skin there are a few things to keep in mind:

1. You need to extend the com.dgrigg.minimalcomps.skins.Skin class

2. If you want the hostComponent to be aware of the skin parts when they are added, you need to give each skin part a name, either in the markup or programmatically:

or

var label:Label = new Label(); label.name = "skinLabel";

the name value is how you can differentiate the skin parts in the component as they are added, see the 'skinPartAdded' method in com.bit101.components.Component

3. In the skin you can access the host component via the 'hostComponent' property

4. To apply a skin to a component

or

button.skinClass = com.dgrigg.skins.ButtonImageSkin;

Releases

4/28/2010 Label, PushButton, Checkbox, Text, HSlider and VSlider have been refactored to use skinning.

Derrick Grigg www.dgrigg.com