Alpha Release of Skinnable Minimal Components

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.

22 Comments

  1. pablo

    really cool work..how exactly can you use your own custom markup without invoking the flex bloat?

  2. @pablo following is a link with more detailed explanation of using mxml without the Flex bloat, be sure to read through the comments, lots of good info there. If you compile a project with the -keep-generated-as option you can see what the compiler does, the only Flex class that gets included is mx.binding.BindingManager and it’s only for one small temp call. Not exactly sure why it’s even needed but it only adds 4kb compared to a straight AS3 class.

    http://www.ryancampbell.com/2009/08/26/using-mxml-without-flex-example-and-source/

  3. Jeff

    Awesome! Ill be watching this, cant wait for the full release (please hurry :)

    I love MinimalComps for my code-based projects, but can i layout them in the IDE also? There used to be an issue with that, but does this skinning also fix that?

  4. atomi

    Good work!

  5. I can’t speak for Derrick, but I highly doubt that the skinning additions include Flash IDE layout support. The necessary changes to make the components show up in the Flash component panel, add live preview and working component parameters would be massive.

  6. Ypmits

    Love ‘m… great stuff… I do find that there’s no buttonMode on the slider when using the Drawing API or Embedded Image Skins… it’s there in the original slider. Bug?

  7. @jeff Keith is right these are not for the Flash IDE, only for use in AS3 classes. Adding the code to support the IDE would bloat them incredibly.

    @ypmits buttonMode was overlooked on my part, good catch.

  8. pablo

    @derrick – i used the -keep option and the generated AS is not very optimal..im looking to use this kind of thing for mobile..the code it writes is really inefficient.

    its no wonder flex is such a hog!

    this is a great technique to build out apps with custom litewight components for the desktop..but for mobile..dont seem right

    of course..in a years time mobile’s will increase in capacity so its a moot issue..so perhaps my concerns wont be an issue

  9. pablo

    @derrick – also is there any particular disadvantage with creating a layout file like this in xml and reading it in at runtime. then just create a simple parser/layout class that instantiates and plops the movieclips on the stage with the property attributes? seems to me this would have the advantage of deferred instantiation as well as total control on how and when the code runs

    no flex at all is what i say ;)

  10. @Pablo you could do something like that with an XML file, I’ve seen that done many times before. The only thing is the parser needs to grow in complexity as you add more classes and you need to wait until runtime to catch coding errors. The speed and optimization you could get though could outweigh those issues.

  11. pablo

    @Derrick – thank you for your insight. I am not too concerned about coding errors at runtime as I intend to use this for small personal projects where im already familiar with my ugly code :)

    could you perhaps point me to some projects you have seen that do this xml parser layout based idea? im looking for something nimble yet extendable

    also thank you for sharing you code. i have learnt a lot from your code this past week.

  12. Hello Derrick

    I was not familiar with minimal comps by Keith Peters and came across your post through twitter…

    I think that it would be interesting to try them out together with our ELIPS Studio tool and framework.

    What ELIPS Studio bring is twofold:

    1) a tool that compiles AS3/MXML to native code for mobile devices (including iPhone, Android, WinMob and Symbian)

    2) a subset of the Flex framework suitable for mobile devices

    ELIPS Studio effectively addresses your statement saying: “for now there is nothing to build with” (for Flex developers on mobile)

    It’s been available since MAX’09 and you can try it out by registering at : http://developer.openplug.com

  13. Great! I was looking for such tips since 3 days in German Blogs and here a find it. Many thanks for that post !!!

  14. bill

    Will there be an onliner DesignerTool such as Keith offers for his components?

  15. @ Bill, no, unfortunately I have no intent on creating a designer-type app for the components like Keith’s. Technically you could just use Keith’s and then drop the generated code into your class(es) but use the skinnable components instead as the methods and class paths have remained the same for consistency. The only thing you would need to add in would be the custom skins.

  16. This is great! I intend to spend a good deal of time looking through this.

  17. [...] a side note: For the Actionscript components used in these experiments I am extending SkinnableMinimalComponents and using my own pure AS3 FXG implementation which I hope to release soon… but that’s a [...]

  18. Scott Jensen

    Hi there i want to thank you for these components all though i know this post is old i want to know if you had any insight on skinning the List control type. Skinned the panel control but the problem then becomes that i can not select the item’s in the list as the skin appear to cover the control itself. Please email me if you get time and or notice this comment :)

  19. [...] new on the scene, and alternatives such as Keith Peter’s MinimalComps, Derek Grigg’s skinning library, and Todd Anderson’s as3Flobile components are very popular with developers.  (Although [...]

  20. Derrick

    @Scott to be honest I haven’t run across that issue, I’ll need to take a look and get back to you.

Leave a comment

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Copyright © 2014 DGrigg Development Inc. zzz