Run the Flex Style Explorer Inside of Flex Builder

It’s been a while since Flex 2 was officially released, but I’m finally getting around to writing about this. Of course, many of you have probably noticed that the release version of the Flex Style Explorer is now linked directly from the start page in Flex Builder. But, I also wanted to point out that its quite possible to run the style explorer directly in Flex Builder in it’s own tab, as shown in the image below:

styleExplorer_inFlexBuilder.jpg


To do so, just follow these few simple steps (with apologies to those whoever this was already obvious to):

  1. Download the Flex Style Explorer to your computer by clicking here
  2. Save it wherever your heart desires
  3. Inside Flex Builder, select File –> Open File… and choose Flex2StyleExplorer.html
  4. Ta da…. Flex Style Explorer running in its own tab inside of Flex Builder

Yeah, it’s really that easy, and I apologize if I’ve insulted your intelligence.

11 Responses to Run the Flex Style Explorer Inside of Flex Builder

  1. Bob Flynn says:

    When I tried these steps and open the .swf it came in as a mess of code gook. There is no Design view to toggle to. I put the style explorer file in a subdirectory of the Flex Builder if that makes any difference.

  2. Peter Baird says:

    Sorry about that, I’ve edited the post to make it clearer that it’s the html file that you’re opening up, not the swf.

  3. AndyC says:

    Dont worry I’m not that intelligent
    When I try and open it it always asks if I want to install flash 9. If I decline nothing happens
    If I accept it opens it in a seperate IE browse window

  4. Peter Baird says:

    Now that’s strange. I would say that of course you’d need Flash Player 9 for it to work, the by the mere fact that you have Flex Builder, you should also have Player 9 installed already. (Unless, of course, you’re trying to run it in one of the Beta versions of Flex Builder, than it would make sense). Any more info you could provide? Anyone else seeing this?

  5. Jason says:

    When I try opening the html, I get an error which reads:

    [begin error message]
    A Runtime Error has occurred.
    Do you wish to debug?

    Line: 4
    Error: Permission denied
    [end error message]

    I click “No,” which brings up another error message:

    [begin error message]
    A Runtime Error has occurred.
    Do you wish to debug?

    Line: 12
    Error: Permission denied
    [end error message]

    I click “No” again, and the Style Explorer opens in Flex 2 as expected.

    Any ideas as to why the error messages appear?

  6. Carpii says:

    Didnt really know where to post this, but there is a minor bug in Style Explorer.

    The Application has a style of backgroundSize: 100%;
    Flex doesnt like this, and instead it should be
    backgroundSize: “100%”;

    Nice tool though, thanks for the work.

  7. Erik says:

    Great Tool, but there is a bug inside Style-Explorer:
    If you use the tabs-section and set the tab-width inside the TabNavigator to the absolut minimum and then back again to normal size then the whole application does not respond anymore.
    Did not know where to post this so I just do it here.

  8. Michael says:

    Hi!

    Great tool, but since I’ve updated to FlexBuilder 2.0.1 (with debug flashplayer) the style explorer doesn’t work anymore.

    Could someone confirm this?

    Thanks!

  9. Jim C says:

    If you have FlexBuilder 2.0.1 you can access the Flex StyleExplorer app from the Flex Start Page. Looks like Adobe is hosting it. Go to Help menu if you don’t know where to find the Flex Start Page. It is right there.

  10. Pete says:

    Hi I just downloaded the source, put it into my flex worspce but im getting 6 near identical errors reference the sliders and unable to databind sq brackets and should be using array collection.
    To be precise: Data binding will not be able to detect changes when using square bracket operator. For Array, please use ArrayCollection.getItemAt() instead. Flex2StyleExplorer/components doubleTextSliders.mxml line 12. Why am i getting these errors? Thanks

  11. Peter Baird says:

    Good question. So, those are completely normal. They’re not errors, rather they are alerts. Basically it says, “doing what you’re doing will work, but we recommend using arrayCollections instead”. For various reasons, I’m sticking with just a standard array and living with the warnings. So, the source will still compile and work just fine despite the warnings. Don’t worry, I’m getting them too.