A few days ago one of the commit messages in the Gumbo trunk mentioned some work for advanced CSS was beginning. I tried to create an example of using a descendant selector as well as an ID selector, but neither worked.
Tonight, another commit message said that this was now in place by default (I guess it would have worked earlier, but I needed to be specify a compiler argument). But now, after rebuilding the latest checkout of Gumbo you should now be able to compile the following example to see the advanced CSS selectors working. Below is the SWF (you’ll need Flash Player 10 to view it) and the code follows:
A few times a day I update my subversion checkout of the Gumbo trunk. Last night I noticed a major overhaul which renamed all the Flex 4 classes, repackaged them into the mx package instead of flex. The new classes are now all (at least temporarily) prefixed with Fx, so if you are trying to compile your previously working Flex 4 code against the up-to-date SDK and suddenly see the following error:
Error: Could not resolve <Application> to a component implementation.
your issue will be resolved by changing Application to FxApplication. You’ll need to do the same for most of the other Flex 4 controls (Group, VGroup, and HGroup are exceptions that don’t need to be prefixed with Fx).
Spark Theme
You may also notice the new spark folder added in the skins directory. Below is an example application showing what these new skins look like for some of the Gumbo components: (more…)
One big improvement in Flash Player 10 is that fonts no longer need to be embedded in order to rotate text or alter it’s alpha. Below is a simple example demonstrating both of these features by using the Rotate and Fade effects in Flex 4.
In Part 2 we added hovered and selected states to the ItemRenderer for the list items. In this part we’ll add some transitions to make the list look more like an Accordion. Since screenshots won’t do the example justice this time, I’ll show a screencast I made demonstrating the result first:
(Sorry for the embed being cutoff, still figuring out the params to this word press plugin. Click through for the full embed on its own page.)
In Part 1 of this series we learned how to create an ItemRenderer for a List in Flex 4. I wanted to get through 2 steps tonight, but only have the code for the next step finished. This code creates the item renderer seen at ~4:20 of Ely’s video.
If you haven’t seen Ely’s video on Adobe TV about improving the designer/developer workflow (which is an updated version of what he infamously previewed at MAX last year), you should probably check that out to see what the goal of this series is.
I’m going to attempt to go through the steps and recreate what he demonstrated, which was to take a simple list and iteratively transform it into a rich, accordion-like interactive list. To get started, be sure that you’re setup to compile Flex 4 code and that you have Flash Player 10. Here we go…
It took me a couple of days to get to my next Flex 4 example, but here we finally are. I wanted to try making a component which had optional SkinParts, so I came up with the following example (get the source). For those who don’t know, Flex 4 targets Flash Player 10 so you’ll need that in order to run the SWF.
In this example we will build a component called QuestionAndAnswer which will include a text field containing a question, a check box, and a text field containing an answer to the question. The check box and answer are both optional, so if the Skin file doesn’t include those SkinParts, they won’t be a part of the view. If they are included, then clicking the check box will show the text field containing the answer. Let’s see what the code looks like.
So apparently I’m giving a week long series on getting started with Flex 4. I would have titled my content as such, but I guess I wasn’t sure if I would have learned enough to provide a week’s worth of content. Let’s give it a shot anyway.
As I briefly touched upon in yesterday’s post, layout is handled in new layout classes in Flex 4. Let’s dive in to making a simple, custom layout manager.
In yesterday’s post I walked through how I got the Flex 4 SDK setup, compiled, and ran the first Hello World application in Flex 4. I said I would follow up today with skinning a Button using the new declarative graphics tags known as FXG (previously referred to as MXML-G), so here we are.
Today I want to explore using the new layout property as well as using a Skin file to describe how the button should look. Let’s get started…
Big news today in the world of Flex! The first push of the Flex 4 source was made this afternoon (and another push was made this evening). Additionally, a lot of documentation was added to the Adobe Open Source site regarding Flex 4 (code-named “Gumbo”). Reading through the Architecture Whitepaper will leave you with a great handle around where things stand and the current direction Flex is headed.
To reward myself for reading through all of those docs this evening, I decided it would be appropriate to try to test out the new code and make my first Flex 4 application…