Using MXML without Flex (Example and Source)
I made a few minor changes to the MinimalComps project from Keith Peters and got it playing nicely with MXML. The below application compiles to a tiny 23KB yet makes use of MXML and even data binding.
I added only 2 new extra classes (Container and Application). Container simply adds the ability to add child DisplayObjects via MXML. Application extends Container and handles configuring the stage.
The only changes I made to the existing MinimalComps classes was adding a few metadata tags and modified VBox and HBox to extend Container.
View or download the full source code.
Here's the source for the main mxml file:
Note: This has nothing to do with the new framework we are building. I just wanted to show off how easy it is to use MXML without Flex.
Recent Posts
- Introducing the Swiz [URLMapping] Metadata Processor
- Skinning MinimalComps with Degrafa
- Using MXML without Flex (Example and Source)
- Here’s 5 3D Layouts for Flex 4
- OpenFlux Independant From Flex
Categories
- 360Flex
- Anywhere.FM
- Club Penguin
- DataGrid
- Degrafa
- Disney
- Flex
- FluxCharts
- Google AdSense
- MinimalComps
- MXML
- MySQL
- OpenFlux
- PayPal
- PlexiGlass
- SEO
- Uncategorized
August 26th, 2009 - 12:08
I’ve been meaning to do a blog post like this for a while. I don’t think everyone realizes that MXML doesn’t require the framework, and it’s great to see people exploring this possibility. I was going to use the fl.* components in my example, but Keith’s are great too. Thanks for sharing.
August 26th, 2009 - 12:23
Yeah, I’ve been doing a lot with MXML without Flex the last few months.
It shouldn’t be used for everything but for view/container classes MXML is a lot easier to read compared to AS3. I hope more frameworks start supporting it.
August 26th, 2009 - 12:40
Wow, I’ve been wondering (hoping!) that MXML could be used without the framework. Has this always been possible or just since the Flex 4 beta?
And to answer the statement, “I don’t think everyone realizes that MXML doesn’t require the framework…” that’s probably because Adobe never mentions that possibility anywhere! In fact, this is the first time I’ve ever seen a working example of it.
Thanks, Ryan, gonna dig into this right now.
And you’re absolutely right, MXML is perfect for views where a declarative syntax is natural. Been missing that on my last project…
August 26th, 2009 - 12:46
I’m not sure if its _always_ been possible, but definitely with Flex 3 and 4.
Flex 4 (MXML 2009) made it possible to use the [DefaultProperty] metadata with the root elements of the document though. Previously this only worked if your component extending mx.core.Container.
You can also use two way data binding with MXML 2009.
August 26th, 2009 - 12:50
You just totally blew my mind. I didn’t really get what you were doing from your email. Damn.
August 26th, 2009 - 12:51
Also, for the record this compiles to 551 bytes:
<d:Sprite xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:d=”flash.display.*”></d:Sprite>
August 26th, 2009 - 12:56
Seriously, my head is reeling. didn’t know this was remotely possible. Always thought MXML was tied to the framework.
August 26th, 2009 - 12:58
Nice post, Ryan! It’s great to see some constructive growth in the mx.*/fl.* debate.
August 26th, 2009 - 13:06
So is this only in Flash Builder 4 or is this a FB3 thing as well. I’m looking forward to trying it out.
August 26th, 2009 - 13:06
That makes perfect sense, great post!
Didn’t put two and two together — obviously you can use MXML syntax for your AS3 classes but always assumed setting the language namespace caused the Flex framework to get tied in.
August 26th, 2009 - 13:07
I think I first considered the idea that MXML didn’t require Flex when I saw some Flex MVC frameworks using MXML for classes that weren’t UIComponents at all.
My Flex 3 component PopUpInitializer uses [DefaultProperty] to act like a container, though it actually adds a bunch of components to the PopUpManager. That’s certainly a Flex component, of course, but not a container (though it acts like one). Once I had that working, I had pretty much confirmed that other component sets could make container-like objects and enjoy the same MXML benefits as Flex.
August 26th, 2009 - 13:23
This is just Flex 4 though, right? One of the advantages of them separating out the language from the halo/spark framework namespace.
If you did this in Flex 3, the syntax would work but it would compile in the framework unless I’m very much mistaken.
August 26th, 2009 - 13:24
So what does it take to compile this under Flex Builder 3? Or do I need to move up to Flash Builder (beta) to get this going? I’m unclear on exactly where support for MXML 2009 comes into play. I’m guessing Flex Builder 3 isn’t clever enough to see the namespace URL and sort it out for itself.
August 26th, 2009 - 13:26
You can use Flex 3 or Flex 4 and Flex Builder 3 or Flash Builder 4 or even just the command line mxmlc compiler.
Flex 4 mxml 2009 works a little better then Flex 3 mxml 2006 but they both work. This actually has nothing to do with Flex 4.
All I did was create a new Flex 4 project and replace the main mxml application file contents with the code you see above. Hit save, compile and it ran.
August 26th, 2009 - 13:33
You will need Flex 4 to support the vector stuff, right? (Trying to build it in Flex Builder 3.) Sorry, I’ve been in production mode with Flex 3 and Flash Player 9 so I’m a bit out of the loop on the latest and greatest.
August 26th, 2009 - 13:35
No, you just have to modify your project settings to target flash player 10. You should at least be using Flex 3.3 for that to work.
August 26th, 2009 - 13:38
wow yes it does work on Flex 3, I’m excited!
Can definitely see myself using MXML syntax for UI related work on top of my AS3 classes now.
August 26th, 2009 - 13:41
Using Flex Builder 3, SDK 3.4, targeting Flash Player 10, I get two internal errors, each on the first child of the box components: “type for Property ‘{name}’ is unreachable.” Any ideas?
August 26th, 2009 - 13:44
Yeah, I’ve played around with this since Flex 2. You can do it in any version of Flex since 2. However, up until Flex 4 the DefaultProperty of the root of an MXML file didn’t work. To do Ryan’s example above in Flex 2 and 3 you will need to wrap everything in Application with the tag. And actually, that might not be the case in 3.3 or 3.4. I haven’t tested it in awhile.
Hope that helps.
August 26th, 2009 - 13:51
So, Peter, what modifications did you have to make to get it working in Flex Builder 3?
August 26th, 2009 - 13:58
Here is a version that works with Flex 3.3, Flex Builder 3 and Flash Player 9:
http://www.bobjim.com/flex/MinimalCompsFlex3/srcview/index.html
All I did was wrap the child objects in a <:bobjim:children> tag and switched the Vector to an Array
August 26th, 2009 - 14:03
That did it. Guess Flex Builder (or how I had it setup — incorrectly I’m sure) was having problems matching up the Vector type with the default property.
August 26th, 2009 - 14:06
Oh, and the size is the same (23650 bytes). Cool.
I guess there’s not really a way to use MXML-based classes in an AS3 project, right? In other words, I’m gonna have to have an MXML file as my application root, right?
August 26th, 2009 - 14:15
And based on the background color the app has (default Flex3-gray/blue), the Flex bootstrapper is in there (and loader), right?
August 26th, 2009 - 14:16
No, the app is transparent and the background color is the background of the webpage. The Flex “bootstrapper” would include SystemManager and a ton of stuff.
August 26th, 2009 - 14:17
Interestingly, mx:Script blocks stop working. And no, changing the namespace to “fx:Script” doesn’t fix it.
August 26th, 2009 - 14:18
Re: background color: Ah, yes, of course… good.
August 26th, 2009 - 14:32
You can have MXML files in an AS3 projects if:
1. you include the framework.swc. This is because even though your mxml file might not be using any Flex code, all the imports are still generated which cause compile errors.
2. you create the mxml file using New -> File and name it whatever.mxml. It doesn’t let you create one using New -> MXML Component.
Script blocks work too. Make sure you’re using the correct namespace. In Flex 3 it is xmlns:mx=”http://www.adobe.com/2006/mxml” where in Flex 4 the mx namespace is different.
Here’s my MyText.mxml file contents.
and here is my Test.as main application class:
package
{
import flash.display.Sprite;
public class Test extends Sprite
{
public function Test()
{
var t:MyView = new MyView();
addChild(t);
t.sayHi();
}
}
}
All working!
August 26th, 2009 - 14:33
Whoops, needed to escape my tags.
<d:Sprite xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:d=”flash.display.*”>
<mx:Script>
<![CDATA[
public function sayHi():void
{
trace("hello world");
}
]]>
</mx:Script>
</d:Sprite>
August 26th, 2009 - 16:26
Great stuff, it would totally change the way a lot of us do pure-actionscript projects.
Though, I knew from long time you can create light-weight apps leveraging declarative-markup by giving up framework. But never tried actually, the way you did.
Awesome stuff.
It’s good to see mxmlc doesn’t assume things and do as it is told to, which is follow whatever is there in config (flex-config.xml) and mxml-code.
-abdul
August 26th, 2009 - 16:28
Take a look at flex-config.xml and you would see, you can do a lot more. That is having your namespaces mapped with your list of components/libraries/classes.
-abdul
August 26th, 2009 - 16:33
Yeah, now that I’ve realized so many people had no idea this was possible I’ll write another blog entry on how to best take advantage of mxml.
August 26th, 2009 - 17:17
Just gave a try, I can use fl.* components for CS4. Though it doesn’t take care of default-property, as you mentioned.
-abdul
August 26th, 2009 - 17:36
I just replaced controls in your example with fl.controls.*.
This is how it looks:-
http://bit.ly/g43ig
To compile the source there, you would nee to link it with User Interface.swc (which can be compiled using User Interface.fla in Flash CS4 config folders).
August 27th, 2009 - 00:03
Just put the Flex 3.3, Flex Builder 3 and Flash Player 9 sample into a FlashDevelop AS3 project, made MinimalComps.mxml to always compile and …. it just worked!
Now, should it be possible to instatiate mxml components from script?!
August 27th, 2009 - 00:47
Looks interesting!
We try to apply the same approach with FLit. Check out the source here:
http://flit.googlecode.com/
But we’ve focused on providing a components model and transitions frameworks (that looks similarly to Flex), and we haven’t developed a comprehensive library of reusable controls.
Check out the introductory post about FLit:
http://npacemo.com/wordpress/2009/06/30/flit-a-light-weight-flex-for-flash-apps/
August 27th, 2009 - 01:59
Is there a way to compile MXML in using CS4? I was also thinking of another idea – to write a regex converter that would replace all standard MXML Flex components with Keith’s Minimal Comps.
August 27th, 2009 - 02:00
Could you explain why did you use Vector?
August 31st, 2009 - 14:48
What about the binding tags that you used in your example. Wouldn’t that create a dependency on the flex framework?
September 18th, 2009 - 14:47
Does your mxml compile outside of the editor, or do u need flex builder or fdt to compile a swf?
November 12th, 2009 - 15:20
We are considering a UI port from a Struts framework to take advantage of the widgets in Flex, we did end up extending Struts with some homegrown tags that helps us with app specific view+model components. From a port MXML looks a better option than Flex or even ExtJS.
November 13th, 2009 - 22:37
Interesting..
April 10th, 2010 - 09:48
Ryan, just stumbled across this post. This is fantastic. As a Flash and Flex developer I always dread having to do a pure AS3 project because I find the MXML so much easier to quickly do layouts etc. Great job.
June 7th, 2010 - 07:49
I am getting two errors with FlexBuilder 3
Unable to transcode /assets/pf_ronda_seven.ttf. MinimalComps/src/com/bit101/components Component.as line 51
Severity and Description Path Resource Location Creation Time Id
transcoding parameter ‘embedAsCFF’ is not supported by ‘flex2.compiler.media.FontTranscoder’ testApplicationCreation/src/com/bit101/components Component.as line 51 1275921796859 167
Does anyone know how to fix this?
Thanks