Flex 2.0 Primitive Explorer
March 14, 2007
One of the things lacking in Flex 2.0 is the ability to easily draw primitive objects. Whether it be for style enabled itemrenderers, programmatic skins, or a style enabled rating component like the one included with this explorer as a sample. I’ve abstracted the primitive algorithms into handy UIComponents. Direct access to the static drawing utility class is available.
All UIComponent derivatives are completely style enabled including gradient fills, gradient borders, background colors, line thickness etc.. Each primitive UIComponent is ready for itemrenderer, itemeditor, or standalone usage.
Sample code for direct class, mxml, and css use is generated automatically. Future versions will improve upon this. Specifically removing un required tags.
Base set includes Star, Burst, Reverse Burst, Polygon, Gear, Wedge, and Arc. Allot of different shapes can be created with this base set (to many to mention here).
Have a look at the PrimitiveStyles.as styles include file for a list of supported styles 32 in all, and the sample rating component.
The rating component includes the following styles:
horizontalGap
paddingLeft
paddingTop
The RatingItem has support for a limited set of fill type styles.
I fully intend on continuing the development of this tool. Adding more primitive algorithms, styles, and other ideas I have.
Suggestions for future improvements are most welcome including samples, ideas, bug’s found etc..
Credits:
The DrawUtils.as static class is based on primitive algorithms originally published here by Ric Ewing and here extended to Flash 8 by Kevin Williams. I then ported them to Flex 2. This class has a due credit mention in it that should remain.
The explorer application code is based off of the Style Explorer and components provided by Adobe Consulting. I did make some changes though. In particular, the color picker wheel rollover actions (it was bugging the heck out of me, sorry Adobe). I removed the mini list that closes as there was really no need for it in this explorer. Lastly the code and sandbox are positioned differently.
You’ll need Flash Player 9 to view it and Flex 2.0.1 to use it (I have not tested this with Flex 2.0).
A multitude of components and classes to serve a multitude of purposes. Hopefully other Flex developers see the same value as I do in utilities like this one.
Give the components a second to load when you click in the tree there are quite a few properties for modification.
Enjoy.
Flex 2.0 Primitive Explorer (rigth click for source).
Jason Hawryluk
March 14, 2007 at 9:05 pm
Wow!! Bravo!!
This is FANTASTIC!!!
Thank you Jason, and Kevin and Ric.
I learn most quickly when I can visualize the result and have access to the code which I can rip apart. What you have packaged up here is perfect for helping me dig deeper into the Drawing API and the AS3 flash.display.Graphics Class.
And just as helpful for Flash AS3 developers as for Flex 2 developers.
Your Flex 2.0 Primitive Explorer will be tremendously useful for others for years to come.
Thanks again
g
March 15, 2007 at 1:42 am
So interesting!!
March 15, 2007 at 3:05 am
Nice Work! Thanks for the efforts
I got the following error randomly clicking through the tree. I could not reproduce the issue again.
RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/getChildAt()
at mx.core::Container/getChildAt()
at mx.containers::ViewStack/get selectedChild()
at mx.containers::ViewStack/::commitSelectedIndex()
at mx.containers::ViewStack/mx.containers:ViewStack::commitProperties()
at mx.core::UIComponent/validateProperties()
at mx.managers::LayoutManager/::validateProperties()
at mx.managers::LayoutManager/::doPhasedInstantiation()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/::callLaterDispatcher2()
March 15, 2007 at 7:46 am
Arul,
Thanks I’ll have a look to see if I can reproduce it. Hopefully I’ll have a fix for the next version.
Greg,
Thanks for the thoughtful comment
-jason
March 15, 2007 at 3:35 pm
Very well done! This is extremely useful, thanks for putting the time together to get this going in AS3!
March 15, 2007 at 5:37 pm
[...] Info: http://flexibleexperiments.wordpress.com/2007/03/14/flex-20-primitive-explorer/ [...]
March 15, 2007 at 6:02 pm
This is great! This is going to help me big time as I get more involved developing programmatic skins.
Thanks!
March 16, 2007 at 3:47 pm
[...] Check it out here. [...]
April 9, 2007 at 2:09 pm
ha! This is awesome. Thank you very much for sharing.
April 28, 2007 at 10:10 am
Great tool! Thanks for sharing!
April 28, 2007 at 6:16 pm
[...] shown as a sample in the Primitive Explorer I thought I’d break it out of that and into a post of it’s own. Mostly because as one could [...]
May 20, 2007 at 3:10 am
[...] Flex 2.0 Primitive Explorer Jason Hawryluk: Flexibleexperiments.wordpress.com [...]
July 4, 2007 at 8:49 pm
[...] Hawryluk, the creator of the Flex 2 Primitive Explorer, and I are in the process of creating a Declarative Graphics Framework for Flex. We’re [...]
July 31, 2007 at 1:07 pm
thank you
August 14, 2007 at 1:29 pm
Thanks
August 29, 2007 at 9:35 pm
Nice article. I am learning to program with UIComponents and these kind of articles really help!
September 5, 2007 at 9:56 pm
Very cool, thanks. Flex continues to get better
October 26, 2007 at 3:29 pm
Thanks for these classes. I am wondering if there is an easy way to extend the Poloygon class so that one can draw rectangles width non-matching widths & heights. Thanks for any thoughts on this. I am new to using the Drawing classes in actionscipt.
October 28, 2007 at 11:37 am
[...] shown as a sample in the Primitive Explorer I thought I’d break it out of that and into a post of it’s own. Mostly because as one could [...]
October 31, 2007 at 10:29 am
Great job well done! This is very useful, thanks for putting this online.
Thnx again
Billy
December 7, 2007 at 9:45 am
Thanks for the heads up Devnets. It should be working fine now I’ve changed all the urls to point to a new home for this blog that is in the process of being ready.
Jason
January 13, 2008 at 1:18 pm
Just as earlier, thanks for sharing this!!
Cheers Jason
Vincent
February 3, 2008 at 11:38 am
Very well done! This is extremely useful, thanks for putting the time together.
March 5, 2008 at 7:45 am
[...] six months after I started ScaleNine I picked up on a blog post by Jason Hawryluk about a “Primitive Explorer” he had created that allows for programmatic drawing of shapes via set parameters. My initial [...]
April 4, 2008 at 6:28 pm
[...] 2.0 Primitive Explorer Jason Hawryluk: Flexibleexperiments.wordpress.com Jason starts with the Style Explorer UI, and creates a great application for exploring and [...]
April 5, 2008 at 9:46 am
Thanks! Great blog!
April 16, 2008 at 1:45 pm
[...] Flex 2 Primitive Explorer by Jason Hawryluk, [...]
September 11, 2008 at 11:45 am
could we use this with flex 3 also
September 19, 2008 at 12:18 pm
[...] :: Realtime Thumbnails of Flex UIComponents :: More info Jason Hawryluk :: Primitive Explorer :: More info Ted Patrick :: Developing in Trees :: Adding sprites to the DisplayList :: Part 1 :: Part 2 E4X [...]
September 30, 2008 at 12:22 pm
[...] :: Realtime Thumbnails of Flex UIComponents :: More info Jason Hawryluk :: Primitive Explorer :: More info Ted Patrick :: Developing in Trees :: Adding sprites to the DisplayList :: Part 1 :: Part 2 E4X [...]
October 23, 2008 at 3:50 am
[...] Jason Hawryluk :: Primitive Explorer :: More info [...]
October 25, 2008 at 11:12 am
[...] :: Realtime Thumbnails of Flex UIComponents :: More info Jason Hawryluk :: Primitive Explorer :: More info Ted Patrick :: Developing in Trees :: Adding sprites to the DisplayList :: Part 1 :: Part 2 E4X [...]
October 25, 2008 at 11:12 am
[...] :: Realtime Thumbnails of Flex UIComponents :: More info Jason Hawryluk :: Primitive Explorer :: More info Ted Patrick :: Developing in Trees :: Adding sprites to the DisplayList :: Part 1 :: Part 2 E4X [...]
October 30, 2008 at 2:34 pm
hi. i want to draw a star with some gradient stuff.
where can i paste the code that it’s generated by the flex primitive explorer. i just want a star;and the flex primitive explorer gives me all the code and i don’t know waht to do…
i appreciate if someone helps me…
thanks
January 20, 2009 at 8:13 pm
[...] that the concept for Degrafa originated with something Jason Hawryluk created in Flex 2 called the Primitive Explorer. It basically allowed you to explore different primitive shapes and download the classes to be used [...]
January 23, 2009 at 1:57 pm
[...] 2.0 Primitive Explorer Jason Hawryluk: Flexibleexperiments.wordpress.com Jason starts with the Style Explorer UI, and creates a great application for exploring and [...]
March 20, 2009 at 10:31 pm
UIComponents are great to use. I love what you did with the PrimitiveStyles.
May 15, 2010 at 8:45 am
If all a certain it too superlative so are there again time to realize it how have come to greedy and the covetous we.
May 31, 2010 at 6:27 am
[...] http://flexibleexperiments.wordpress.com/2007/03/14/flex-20-primitive-explorer/ [...]
October 4, 2010 at 9:40 pm
!
I’ve got an account here.
. .
How can I become a moderator here?
my lifestyle web site
February 6, 2012 at 3:38 pm
nice flowers here have a look for valentine day
February 6, 2012 at 3:39 pm
VALENTİNA DAYS COMİNG TAKE A FLOWERS FOR SHE