The MXMLLoader Class > Dynamic load MXML In Flex Builder 3
Posted: April 24th, 2008 | Author: Ivan Valadares | Filed under: Actionscript3, Adobe Flex, Code, Events, WorkAround |First of all I don’t really use flex to do flex stuff and I’m not a big fan of flex. But in my latest project I had to build with flex an interface witch would be always diferent (a dynamic interface). In the beginning we thought in parsing some type of XML, but if we are in flex why not parse MXML? I took a look over the internet and I only found MXMLLoader component v0.01, witch didn’t compile on flex builder 3 and was really in the beginning. So there it is, as XMMLLoader class for flex builder 3. You just have to instantiate the class with the mxml :
You can access objects by name:
Or by id:
And have access to component events like:
The class with an example:
Thank you for this article. I’ve been playing around with your example as well as the original component that you mention and I seem to be stuck. Are you familiar with the following error and where I may have gone wrong?
Thanks.
Error #1009:
[code]
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at MXMLLoader/createChildFromMXMLNode()[/Users/bealtr/Documents/Storage/Workspace/Flex Builder 3/MXML/src/MXMLLoader.as:111]
at MXMLLoader()[/Users/bealtr/Documents/Storage/Workspace/Flex Builder 3/MXML/src/MXMLLoader.as:41]
at MXML/init/onLoaded()[/Users/bealtr/Documents/Storage/Workspace/Flex Builder 3/MXML/src/MXML.mxml:25]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()
[/code]
Here’s the code for my main mxml file. I’ve got both MXMLLoader.as and MXMLManifest.as in the source directory.
[code]
[/code]
Oops. I guess it filtered the code from my example is there a way for me to post you the code?
could you please post the files online so that we have a look?
It would generally seem as accessing it too early, or a typo, but do post the code
This loader does not parse all types of components, I didn’t add all of them because flex 3 have a lot of component. Probably you are adding a component that I didn’t import the reference but there’s no problem with it, it’s simple to add. Like Pedro said please post a Url with a zip contain the example you are trying to run I will take a look.
Is it possible to use DataGrid components? When trying I receive errors like:
TypeError: Error #1034: Type Coercion failed: cannot convert mx.controls::DataGrid@151c7851 to mx.core.Container.
and
ReferenceError: Error #1065: Variable is not defined.
What you are showing here seems very powerful!
There’s no problem in adding the DataGrid, you just have to declare a variable of type Datagrid eg.“private var dataGrid:DataGrid;” in the MXMLLoader Class, the problem is the “mx:columns” and “mx:DataGridColumn headerText=”Column 1″ dataField=”col1″” nodes, this is a problem because the class will try of instantiate a component of type columns and type DataGridColumn that doesn’t exists, like I said previous I didn’t try this class will all the components. The solution for this problem is to add a special case to see if the node if one of this types and then add the columns by code. If you need any help, e-mail me
That is what I was thinking…thank you for the verification and thank you for sharing your insight and example.
Very nice addition to the original work. Brilliant way of handling events for the components. Has anyone tried passing parameters from the created components? I was able to use e.currentTarget.label to pass information from a button back to the main application, but this is a sorely limiting hack. Any ideas?
Nice piece of work. The example is easy to follow and I got it working in a matter of minutes.
I tried to do this:
var mxmlLoader:MXMLLoader = new MXMLLoader(mxml,this);
this.removeChild(mxmlLoader);
naively assuming the mxmlLoader (extended from UIComponent) had been added as a child to “this.” A look at the source makes it clear that it’s the components within the xml that are added as children and that the structure is maintained (i.e., you can remove everything by removing an uber-container that held all the components).
Architecturally, an alternative to the approach of providing both the conversion and adding the child in one step would be to return the objects of type UIComponent which could be added when and where appropriate.
As the author notes, not all components and attributes are handled.
I am working on something where I need to receive dynamically a relatively small, simple piece of Flex code without any fore knowledge and execute it within the context of my app. MXMLLoader works fine for the visual pieces and while Flex is able to bind “click” attributes to functions outside the MXMLLoader source, I need something equivalent to , which appears to be way outside of the approach that MXMLLoader takes using the manifest and getDefinitionByName(), etc.
Thoughts anyone? And thanks again to the author for a nicely done and nicely presented piece of code.
In the next to last paragraph, the posting removed a reference to the Script/CDATA mechanism for including Actionscript source.
Hi, in the next days I will put the source code of the mxml parser and a actionscript compiler I have make.
For now I get working the “compiler” know the component references as you can assign events to it, and a simple dataProvider initializacion.
A demo:
http://www.xperiments.es/labs/xdflex/Main.swf
I will post source and examples soon at my blog:
http://blog.xperiments.es
Comments are welcome!!
In the last post I not mencioned that this parser is bassed in the MXMLLoader class…
very nice demo. Can I get the source code ?
Hi… this is the 4 post asking me about the source code… and is time to release….by the way…
Is a Proof of concept… not a final release… is made only to see if it can be done… and can… but by some limitations…
The code is hosted at http://code.google.com/p/livemxml/
Thanks 4 your comments… and sorry 4 the lack of updates
I should email u about this.