Getting started with Flex 4 FXG and Flex Builder 3
As I mentioned the other day, the Flex team has released a ton of information on Flex 4. One of the new features which I am most excited about is the FXG graphic format being developed.
What is FXG? From the spec:
FXG 1.0 describes an XML-based graphics interchange format for the Flash Platform. FXG contains high-level graphical and text primitives that can be used to create, group, transform and visually modify basic vector and bitmap shapes. The FXG rendering model follows very closely the Flash Player 10 rendering model and exposes all graphics capabilities of the Flash platform as well as offering expandable support to accommodate future capabilities of the Flash Player. The specification below dives into the technical details governing every element of FXG 1.0.
One of the major benefits of FXG is that it will make it much easier to build visual tooling around working with and designing Flex applications (such as Thermo and all of the Adobe CS tools).
This post is not going to go over all of the elements within FXG as you can find all of that in the spec. However, it is going to show how to start playing with FXG today using Flex Builder 3, and a nightly Flex 4 build.
Update : James Polanco just posted much more detailed instructions on how to setup Flex 4 in Flex Builder.
First, you need to setup Flex Builder 3 to work with a nightly Flex 4 SDK build (im using the Flex 4 4.0.0.3009 build). Once you have downloaded and unzipped the SDK, following the instructions in the Flex Builder docs on how to add a new Flex SDK to Flex Builder.
Once you do that, create a new Flex Project, making sure to set it to use the Flex 4 SDK which you just installed (Project > Properties > Flex Compiler > Use a specific SDK > Flex 4).
On the same screen, make sure to also set the “Require Flash Player Version” to 10.0.0.
Once you have configured the project, add the following MXML and FXG:
<?xml version="1.0" encoding="utf-8"?>
<Application
xmlns:mx="library:adobe/flex/halo"
xmlns="http://ns.adobe.com/mxml/2009">
<!-- Flex 4 Hello World with FXG -->
<mx:Canvas top="0" bottom="0" left="0" right="0">
<Group verticalCenter="0" horizontalCenter="0">
<TextGraphic fontFamily="Verdana" fontWeight="bold">
<content>Hello, World</content>
</TextGraphic>
</Group>
</mx:Canvas>
</Application>
This will create a simple piece of content with Hello World centered on the screen.
A couple of notes on the markup.
First, notice the use of namespaces in the Application tag. http://ns.adobe.com/mxml/2009 is the new namespace used for Flex 4 components and classes. In order to using existing component, we need to map the mx namespace to library:adobe/flex/halo. (You can read more on the new namespacing stuff in the MXML 2009 Spec.)
Update : James Polanco points out that if you use the gumbo namespace, instead of the default namespace, you will get code hinting for the gumbo elements (such as Group).
Also, note that we placed the FXG code inside of a Group tag, and not directly inside of the Canvas element. This is because visual children of Canvas (and other containers) must implement mx.core.IUIElement, which the FXG elements (being a little lower level and focused on drawing) do not. The Group element does, and also allows FXG to be nested within it.
At this stage, you are all set up to begin playing with and experimenting with the full range of FXG support.
[...] My goal was to take these two posts, summarize them and show how to get the current source and check it in. Just as I sat down to write this all up, Mike Chambers comes in and scoops me. Figures. Anyway, I yelled at Mike via IM for stealing my thoughts and then mentioned that I figured out how to bind the Flex 4 source to the SWC in Flex Builder so that you can F3 / CTRL+Click you way to the code. So, I am going to post that aspect of the process and refer back to Mike’s straightforward post on how to get the SDK compiling and running. [...]
Vivisecting Media » Blog Archive » Binding Source for Flex 4 in Flex Builder 3
28 Aug 08 at 3:48 pm
Hi Mike,
so another descriptive (xml) graphics format that represents the more procedural (AS3) drawing API. That’s great, but wait.. there are already some descriptive formats out: xml based: SVG, VML, XAML, binary or text based such as (older) .ai format and there are also other procedural formats if I think of the canvas html tag’s Javascript. Don’t get me wrong, the new format sounds great, but as usual it reinvents the wheel.
As flash/flex developer I often invent intermediate formats based on xml by myself to have generic jobs done. Often in the hope that it is not me, that is using this format only, because I could do the same in pure code. My motivation to do that is that someone else could easily do alterations without reading and understanding the whole application.
But as I understand you Flex4 FXG shall be used as transport format from design applications into coding environments. I am unsure whether this will become a workflow here in my company and our mid-size projects.
Btw. when do we see you back on you flashplatform chat?
Regards,
Matthias
Matthias
29 Aug 08 at 12:32 am
[...] which can then be reused multiple times within the FXG or MXML document. For example, here is our HelloWorld example from yesterday, which uses a symbol to display the content, as opposed to just generating it [...]
Mike Chambers » Blog Archive » Defining and Reusing Symbols in Flex 4 FXG
29 Aug 08 at 10:04 am
[...] I also have a post on how to get started with Flex 4 FXG in Flex Builder 3. [...]
Mike Chambers » Blog Archive » Data Binding with FXG in Flex 4
29 Aug 08 at 1:13 pm
quote: “but wait.. there are already some descriptive formats out: xml based: SVG, VML, XAML”
I see your point Mattias, but I imagine that FXG will model the functionality of Flash-Player, and as such not all of the other formats mentioned will fit the model as closely as a custom one. I’m sure adobe could have written a sub-set of say SVG, but then we’d just end up with a non-standard SVG implementation, or a full implementation with missing features from the Flash player APIs.
this could also be totally wrong. But, it’s the answer I gave myself when I first heard of FXG and asked myself the very question you are asking here.
Be interesting to know if this is the case, and if so what are the areas that FXG handles for the Player APIs that wouldn’t have not been so fully covered by SVG for example.
again, I may be way off here and there may be no reason what so ever for a new format, but a doubt they’d have gone to the trouble.
cheers
glenn
tinylion development uk
Glenn Williams
30 Aug 08 at 12:48 am
re : FXG cs SVG
This is actually covered in the specification:
http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification
–
FXG vs SVG
When initial work on an XML-based graphics interchange format began, the natural first thought was to use SVG. However, there are key differences between SVG and Flash Player’s graphics capabilities. These include core differences in SVG and Flash’s rendering model with regards to filters, transforms and text. Additionally, the interchange format needed to be able to support future Flash Player features, which would not necessarily map to SVG features. As such, the decision was made to go with a new interchange format, FXG, instead of having a non-standard implementation of SVG. FXG does borrow from SVG whenever possible.
It is important to note that this specification follows much of the SVG specification format organization as well as copying related concept prose. The SVG specification is available at http://www.w3.org/TR/SVG/.
–
mike chambers
mesh@adobe.com
mikechambers
30 Aug 08 at 11:01 am
Can’t wait for the new version to come out. I’m very excited about the new text engine and the gradient fills!
Christopher Hayen
30 Aug 08 at 1:50 pm
[...] Getting started with Flex 4 FXG and Flex Builder 3 (from Mike Chambers) [...]
Flex Monkey Patches » Blog Archive » Rubbernecker’s Review - Week 10
2 Sep 08 at 7:38 am
Thanks for the wonderful artical~
By the way, how to merge namespaces together?
In flex-configure.xml?
If anybody know that , please email me.
Thanks in advance!
Email:shineandsky@gmail.com
mani
19 Sep 08 at 7:38 pm
Mike, great stuff. When I was at SAP, we had a number of discussions with the Flex team regarding the value of declarative vector graphics versus AS methods. A few quick questions/comments:
- Will an FXG “thing” be addressible at the object instance (e.g. can you script animation by accessing elements with an “id” and manipulating their properties)? To me, this would be a HUGE must-have and would also open Flex/Flash up to a whole new class of applications.
- Why not also address a few of the deficiencies/missing items in SVG while defining the FXG spec? Notably, an arc and wedge object, which required massive mental math and should be a declarative object.
- Will FXG support binding much like Flex elements can? Stated differently, could the color of a rectangle be defined via a {expression}?
- Will it be possible to dynamically instantiate/create objects and add them to an FXG object (e.g. can I create a new rectangle on the fly and add it and have it rendered)?
Looks quite promising!
Rick
Rick Bullotta
25 Sep 08 at 10:08 am
To answer myself (I don’t know if that’s good or bad), it looks like degrafa has a lot of these features, so I’m guessing it would be reasonable to assume that FXG will implement them as well. I’m really impressed with what I’ve seen…and will experiment with the dynamic object creation/instantiation.
Rick Bullotta
27 Sep 08 at 2:59 pm
[...] Mike Chambers has a good blog post on how to set this up, but I have also prepared a screencast to show you how to set this up. [...]
Getting Started with Flex 4 (Gumbo) | Simeon Says
24 Nov 08 at 7:37 pm
[...] auf das kommende Flex 4 (Codename Gumbo) setzt Adobe aber selbst ein deklaratives Grafikformat ein: FXG. FXG erlaubt den leichten Austausch von Grafiken in Textform. Flex 4 kann FXG-Elemente zur Laufzeit [...]
Code is Lyric » Blog Archive » SVG und seine Ideen im RIA-Space
2 Mar 09 at 12:35 pm
Hi Mike,
using sdk_4.0.0.5409 I’ve got the following error:
Error: Could not resolve to a component implementation.
Looks like the namespace has changed from xmlns:mx=”library:adobe/flex/halo” to xmlns:mx=”http://ns.adobe.com/mxml/2009″
Cheers,
Stefan
Stefan Bistram
20 Mar 09 at 6:13 am
Likewise, same problem here…
Jason The Saj
26 May 09 at 8:18 pm
[...] software from Flex Builder to Flash Builder, which combines with new features of the Flex 4 like FXG to grant developers more control in how their applications look and animate between [...]
Live Images from FlashCamp San Francisco at Adobe | John Cozen
31 May 09 at 5:02 pm
Hi there fellas. Is FXG possible on eclipse with Flex SDK 4. If so please let me know the steps. Thanks in advance.
Mohammed
24 Jul 09 at 12:20 pm