While travelling through the road, there are many signs which arrests the drivers as well as passengers attention. In a similar way while going through the road to learn flex, I was distracted by the signs of explorers in flex. Here I have gathered almost all of them, so that it will act as a shortcut road, to learn Flex.
The first sign, Flex 2 Component Explorer.
When Flex 2, the solid Flex came out, I was intrigued by the number of components it has. But I was also confused how many of them are there. Those who laid down the road came up with something interesting as Flex 2 Component Explorer. Now what the user gets is, by selecting a visual component, it will be displayed on the right as well as a code snippet will appear below that explaining various types of usages. How useful, isn’t it?
Flex 2 Component Explorer
View Source: Sorry!
I was happy to know that, there are these much components & was happily coding and kept on going forward. The scenic beauty on the way captured my attention and I was thinking, “WOW, nice styles” and was thinking how to get the component styled in such a way so that it will be eye catching. Some another sign was coming to them & presto the second sign, Flex 2 Style Explorer.
Style Explorers allow the user to select any component in the Flex Framework, and style it with the help of an UI interface instead of code. The left-most panel enables selection of the component,the next one enables styling selection, the third panel displays the results of the styling selection, and the last panel or the right-most one displays the CSS styling tags necessary to achieve the desired effect. If you select another component and style it, the code that is displayed will have only the styling codes for that component. After styling whatever component you like, click on ‘Export All CSS’ button located on the bottom-left of the application. Now all the codes are combined and copied to the system clipboard. You can paste it to any editor of your choice.
Now, that was cool. But I need to drive along and find if anything again exists for styles. There is a sign reading… bingo! Style Creator.
Style Creator is a nifty application which again like style explorer, gives you the output in CSS.
Note:- I was not able to get what the Download CSS button is doing on the top right. Whenever I click on it I am getting an error page. On IE page 500, on Firefox & Safari ‘Application error’ page.
Phew, what a way to go! Hey wait, I have seen something like Charts. I have seen so many types of charts. Mmm, let me think about it… I can see a Dashboard sign coming up. Wait, its a Flex 2 Charting Components Explorer.
The Flex 2 Dashboard, also known as the Flex 2 Charting Components Explorer, shows a simple application using the Flex 2 charting components. But there is no code views, its just a simple chart display.
Hmm, that sign demos a simple example of chart use. I must keep my eyes open wide enough to see good signs. Let me go on. I can see some person standing on side of the road… That person is doing something.. Let me see.. Oh, that guy is making up a sign board. A sign board??? NOoo, I missed it. Oh God, Why why, I missed it? & this traffic of flex developers is making me mad. Ah, there is a round-about, I can go back, hooray 
Hey, that is Ely Greenfield. Now what is he doing here, let me see… The sign board reads… Chart Sampler.
Ely Greenfield developed a more interactive charting demo which shows the charting components to their potential. That was a pretty neat application.
Hey, the guys who paved the road to Flex are coming & wait… what??? They are taking away Ely Greenfield..Oh God!
Let me keep on going. Now the road is winding to a more interesting spot. Hooray, I have passed the gates of AS 3 (ActionScript 3). We have seen only MXML related signs till now. I hope, I am able to catch up some good AS 3 signs. I can see one sign coming up…presto it is the Flex 2 Filter Explorer sign.
The AS 3.0 API enables users to add filter effects to Flex components. Flex 2 Filter Explorer explores the various filter settings for Flex components, which include bevel, blur, drop shadow and glow filters. The code shows how to use it in MXML. By using View Source, developers to examine some of the ActionScript used to build the filters used by the explorer.
Phew, that was a pretty neat application which helps to try out the filters, rather than struggle with tweak-run cycle for every visual test. Time to moveo on.. Friends, I can see some primitive signs coming up. Now isn’t that a Flex 2 Primitive Explorer?
Flex 2 Primitive Explorer shows how to draw simple shapes using Drawing API. The interface is good & reminds me of Component Explorer. It will show the MXML implementation as well as the AS 3 implementation too. As earlier, by viewing the source you get know the idea of how primitive components are created.
What a collection of signs…Now that I have seen signs from Component Explorer to Primitive Explorer, have I missed out some signs?? Let me think about it…Aha, got it.. What about some effects? I need to concentrate more on the road as this road is a one-way and I cannot turn around. Now keeping my eyes wide open…I can see another sign coming up.. Oh thank God! It is a Distortion Effects Explorer sign.
Alex Uhlman of Adobe Consulting has written a custom Distortion Effects Explorer, in which you will find some nice effects. It will not show you how to write it in MXML or AS 3. But he has provided the source & by going through the source you will get a hang of how effects are implemented. Now isn’t it high time that instead of taking help from view source, it is time to write down something of your own!
Thinking of effects, more things such as tweening motions with the help of easing functions are coming to my mind. But where can I find it? I have travelled a long road and still it is nowhere to be seen. Maybe I must keep on going…Hmm…In a distant horizon, I can see a person standing..Hey isn’t that person James Ward? Of course he is, & he is posting a sign board! God, that sign says Fun with Easing Functions.
James Ward, is an Adobe person and has created an application which demonstrates usage of almost all types of easing functions, and it has lots of other examples as to how to use the charting components. There is no MXML / AS3 code generation.
What if I want to write custom easing functions? Ah, there is one! But if you try to view the web page for the description of the said application, it is in Spanish. Hey, do not worry, the translated page is here.
Moving on, I can see another sign which says Audio Visualization Explorer. That sign is made by Ben Stucki, who is a Flex Consultant.
Oh, that was a long road. I think, I am nearing to the end of the road. A quick memory scan says I need to find some signs regarding benchmarking.
James Ward, not again, has two (later combined to make it as one) pretty neat benchmarking application which are:
- Ajax and Flex Data Loading Benchmarks
- BlazeBench: Why you want AMF and BlazeDS.
Oh God, the road is still not ending and I am pretty exhausted. But wait, I can see a wall coming up. Is that the end…of course NOT! I can see a gate and it is open. Vroom… I passed the gate and hey a more smooth road? I can see the surrondings are getting changed here and there a little bit. I can see an arch coming up which says ‘Welcome to the world of FLEX 3‘. What?? Am I into the world of FLEX 3? YES, yes. Now, everything is getting more smoother and it is easier to drive. And while enjoying the smooth ride, I must keep my eyes wide open to catch sign boards. Here comes the first sign which is obviously, Flex 3 Component Explorer.
It is pretty much the same like Flex 2 Component Explorer, but addtional components such as Advanced DataGrid are present.
Flex 3 Component Explorer
View Source: Sorry again!
Now from my experience of driving through the road, I must see another sign relating to Flex 3 Style Explorer and I can see a sign coming up. Woah! It is indeed mentioning Flex 3 Style Explorer. Again pretty much the same as Flex 2 Style Explorer…
Now it must be the turn of charting components. Yes, the sign coming up reads, Flex 3 Charting Components Explorer. It consists of some of the newer features as well as capabilities of Flex 3 charts.
That was a cool one. Now, have I ever thought about Themes? Nooo..Now is there any sign of theme explorers. I must say, till now nothing. But there are hoardings, saying that themes are avaialbe. Some of the hoadings I came across are:
ScaleNine: http://scalenine.com/
Fill Colors: http://www.fillcolors.com/
Also out of the box, CSS Zen garden.
Now eventhough I am more of a developer side, I want to see how color theme creations are possible. This is more interesting to a designer rather than for a developer. I saw a sign mentioning something about Adobe Kuler. I earlier passed it and thought ‘Hey that is for designers’. But I am now interested in knowing the look and feel of color theme creation without going through the hassles of code-compile-run-see cycle.
Kuler is an extremely sophisticated colour theme creation application. It do has a downloadable Adobe AIR widget.
Adobe Kuler
View Source: Oops…
Now it is time for me to take a rest and refresh all the signs I saw on the road. Ah, I forgot to mention. Along the way I came across an example of using the data components, charting and RPC services to create a very powerful application.
The Flex 3 Network Monitor shows how to use Adobe LiveCycle Data Services ES for RemoteObject calls from client to server and using server push to update data on the client. In addition, it’s a really good example of using the Cairngorm architecture. You can take it apart and study it to know more about the usage.
Time to move on! I can see in a distance many signs cluttering together to form a cloud. I need to check out what all those are!
More to be continued… I need some rest
Wow!
I need not look through search engines again. You took the pain to collect them all here. Waiting to see more links.
-Teresa