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.

PrimitiveExplorer

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

Advertisements

42 Responses to “Flex 2.0 Primitive Explorer”

  1. greg h Says:

    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

  2. Shigeru Says:

    So interesting!!

  3. Arul Says:

    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()


  4. 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

  5. Rick Says:

    Very well done! This is extremely useful, thanks for putting the time together to get this going in AS3!

  6. Juan Says:

    This is great! This is going to help me big time as I get more involved developing programmatic skins.

    Thanks!

  7. Joel Says:

    ha! This is awesome. Thank you very much for sharing.

  8. Stefan Schmalhaus Says:

    Great tool! Thanks for sharing!


  9. […] 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 […]


  10. […] Flex 2.0 Primitive Explorer Jason Hawryluk: Flexibleexperiments.wordpress.com […]


  11. […] 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 […]

  12. Josh Says:

    Nice article. I am learning to program with UIComponents and these kind of articles really help!

  13. embed Says:

    Very cool, thanks. Flex continues to get better

  14. Kevin Says:

    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.


  15. […] 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 […]

  16. Billy Says:

    Great job well done! This is very useful, thanks for putting this online.

    Thnx again

    Billy


  17. 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


  18. Just as earlier, thanks for sharing this!!

    Cheers Jason

    Vincent

  19. Postman Says:

    Very well done! This is extremely useful, thanks for putting the time together.


  20. […] 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 […]


  21. […] 2.0 Primitive Explorer Jason Hawryluk: Flexibleexperiments.wordpress.com Jason starts with the Style Explorer UI, and creates a great application for exploring and […]

  22. voyance Says:

    Thanks! Great blog!


  23. […] Flex 2 Primitive Explorer by Jason Hawryluk, […]

  24. abhishek Says:

    could we use this with flex 3 also


  25. […] :: 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 […]


  26. […] :: 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 […]


  27. […] Jason Hawryluk :: Primitive Explorer :: More info […]


  28. […] :: 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 […]


  29. […] :: 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 […]

  30. smpires Says:

    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


  31. […] 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 […]


  32. […] 2.0 Primitive Explorer Jason Hawryluk: Flexibleexperiments.wordpress.com Jason starts with the Style Explorer UI, and creates a great application for exploring and […]

  33. JT Insurance Says:

    UIComponents are great to use. I love what you did with the PrimitiveStyles.

  34. Teacher Says:

    If all a certain it too superlative so are there again time to realize it how have come to greedy and the covetous we.


  35. !
    I’ve got an account here.
    . .
    How can I become a moderator here?
    my lifestyle web site

  36. cicek Says:

    nice flowers here have a look for valentine day

  37. CİCEK Says:

    VALENTİNA DAYS COMİNG TAKE A FLOWERS FOR SHE


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: