If anyone has used Minimal Components by Keith Peters you know what a great set of componets they are. The only knock against them was the fact they could not be skinned. Until now.
In order to make the components more flexible from a visual standpoint yet retain the minimal footprint I have developed 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, after looking at the source code, how the components and skins interact and how skins are created. Using either programmatic (ie drawing api) or embedded images you can now easily skin the Minimal Components to your heart's desire.
The demo has three sets of the same components. The first set uses the standard components. The second set is skinned with programmatic skins and the third uses embedded pngs. This demo is super light, even with embedded graphics it weights in at 52kb, compare that to well over 500kb for a comparable Flex app.
The main push to add skinning was Adobe's entrance into the mobile development space. Being involved in the pre release programs for the iPhone and Android packagers it was quickly apparent to any Flex developer involved that Flex is totally not suitable for mobile app development. Note that I said Flex, not Flash. It's just too heavy and processor intensive. This posses a huge dilema for developers accustomed to having a good set of UI components to build with, for now there is nothing to build with. Components would need to be built from scratch. That's a huge non starter for most developers.
Adobe is working to address this with the Slider framework however until that is ready for showtime Flex and Flash developers wanting a decent component set to build mobile apps with are left hung out to dry. Minimal Components seemed like a perfect fit. There are a lot of them, 32 by my count, they are very lightweight and very efficient (all a testament to Keith's skill). The only thing they needed was an easy way to skin them and to separate the view from the core component logic. That's were I focused my energy.
They are still a work in progress. All the necessary work to handle skinning and associating components and skins has been done. Now the work involves refactoring each component (creating a default skin and removing the drawing logic from the component). Currently the Label, PushButton, Text, HSlider and VSlider have been done (as you can see in the demo). All the other components will get converted. Once all the components are skinnable the next major step is adding gesture support.
If you would like to try out the new skinnable version you can find the source code on GitHub. These are still alpha so I'm sure some issues will be uncovered however I want to get this out in the public domain, especially for other Flex and Flash mobile app devs.
Try them out and let me know what you think.
While digging around looking for some info on Keith Peters Minimal Comps I stumbled across a great post by Ryan Campbell on creating pure Actionscript projects using MXML. Actionscript projects using MXML??? yes that's right. Using MXML markup you can create classes without all the Flex overhead. This means you get the benefit of clean easy to read MXML without the bulk of Flex. I will admit, I was completely blown away. I love programming in Flex, I find it much easier and quicker to layout components and views using MXML but I'm often conflicted when I factor in the size advantage a plain Actionscript project has over a Flex project. Now you can have the best of both worlds.
Here is what the mxml looks like.
<?xml version="1.0" encoding="utf-8"?>
<comp:Container xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:comp="com.dgrigg.components.*"
xmlns:text="flash.text.*"
width="250" height="200"
color="0xdddddd">
<fx:Script>
<![CDATA[
[Bindable]
public var text:String = 'Click block to change color';
private function onClick(event:MouseEvent):void
{
var target:Component = event.target as Component
target.color = Math.random()* 16581375;
text = 'Color: #' + target.color.toString(16);
}
]]>
</fx:Script>
<text:TextField id="tf"
x="20" width="200" height="200"
text="{text}"/>
<comp:Component id="comp1"
x="20" y="20" width="200" height="20"
click="onClick(event)"/>
<comp:Component id="comp2"
x="20" y="50" width="200" height="40"
click="onClick(event)"/>
<comp:Component id="comp3"
x="20" y="100" width="200" height="60"
click="onClick(event)"/>
</comp:Container>
I looks just like a Flex MXML class but when compiled it's 12kb vs 532kb (debug version) and 8kb vs 235kb (non-debug version). Wow. If I add the [Bindable] tag, as you can see in the example it adds about 4-6 kb to the non Flex version.
Creating a project to do this is super easy. In Flash Builder (Flex Builder) create a new AS3 Project. After the setup is done
xmlns:fx="http://ns.adobe.com/mxml/2009"
One of the really nice features of coding this way is you can setup event listeners in the MXML just like in Flex, you don't need to type out addEventListener(onEvent, Event.TYPE) blah blah each time.
As I start working on some projects using this method I'm sure I will be posting some more information. The next step is building out a full blown app with RobotLegs and hopefully Degrafa for the skinning.
Derrick Grigg is a Rich Internet Application (RIA) freelance contractor based in Toronto, Canada. He specializes in architecting and developing applications using a variety of technologies, most notably Flash, Flex and Coldfusion.
