Creating a Flex-free MXML app with Razor
As it turns out, it was fairly simple to add support to the base Razor component classes to enable them for use inside mxml. You can use the razor.controls.Application class as the base tag for your mxml, change the default namespace, and instantiate any of the razor components with regular mxml tags.
The resulting swf is super-lightweight (the demo below is 37k) and fast. Of course, the razor framework has only a fraction of the features of the Flex framework, so I'm not advocating it as a total replacement; but you might find it useful for certain applications.
In order to create such an app with Flash Builder (I'm using Flash Builder beta 2, but you could also use Flex Builder 3), you create a new Flex project as you normally would.
In the "Flex Build Path" screen of your project properties, make sure you are not using the Spark framework, and change the "Framework linkage" option to "Merged into code", as shown below.
You should also include the razor framework swc in your build path on this screen (The swc is available here). You can then change the contents of your main application mxml so that it uses the razor framework instead of the Flex framework.
(Please ignore the strange syntax colouring and html header, wordpress is being a pain).
<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="razor.controls.*" xmlns:mx="http://ns.adobe.com/mxml/2009">
<mx:Metadata>
[SWF(width="450", height="350", backgroundColor="#ffffff")]
</mx:Metadata>
</Application>
Note that we changed the main namespace using xmlns="razor.controls.*". This means that the main Application tag is an instance of razor.controls.Application, instead of the usual mx Application. Also notice that we can still use the mx Metadata tag to specify our swf metadata.
We can now add some razor controls to the Application:
<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="razor.controls.*" xmlns:mx="http://ns.adobe.com/mxml/2009">
<mx:Metadata>
[SWF(width="450", height="350", backgroundColor="#ffffff")]
</mx:Metadata>
<HBox>
<Image id="image" sourceClass="@Embed('emoticon_grin.png')"
height="300" keepAspectRatio="true" scaleContent="true"/>
<VBox>
<HBox>
<Label text="Buttons that don't do anything:"
autoSize="left" fontColor="0xff0000"/>
<Button label="One" width="50" height="18"/>
<Button label="Two" width="50" height="18"/>
<Button label="Three" width="50" height="18"/>
</HBox>
<TextArea id="textArea" text="Text Area"
width="400" height="300"
fontColor="0x0000ff" editable="true"/>
</VBox>
</HBox>
</Application>
In the snippet above, notice that you can set properties and styles on the controls like you normally would. You can also use the @Embed directive to have mxmlc embed files in the resulting swf.
This code produces the swf below:
One thing the framework doesn't support yet is percentage based layouts (ie. width="100%"), but if there's enough interest then that's something that definitely could be included in the future.
One final thing to note is that you can also use razor components within a regular flex app. All you need to do is wrap any components inside a RazorFlexWrapper tag in order to make them UIComponent compatible.
December 24th, 2009 at 3:06 pm
hi there,
I am testing out your component framework. It's very impressive. However, I have a few questions regarding the ComboBox component.
When I used it in my own project, following the code example in the project, it did not display the items in the list. The item text was invisible, even though you could tell it was there. And plus there was no interaction with the items on the list, either.
Can you help?
Also, is there a forum for these components? I feel like others may have the same issues, but don't have a place to ask them?
December 24th, 2009 at 3:28 pm
Just to clarify...
I was referring to these components (not to the ones in this blog post)
http://www.razorberry.com/blog/components/
And I am trying to use them in a file that extends the MovieClip class (not the Container class as you have in your demos.) So I am wondering if these components only work when the container swf extends the Container class?
thanks.
December 24th, 2009 at 9:42 pm
Hi Volkan,
I'll try and get a forum set up as soon as possible. The components don't need to be in a Container to work.
Please email me at ash (at) razorberry (dot) com with your code and I'll try and help. You problem highlights a gap in the documentation I obviously have to fill
Thanks!
December 25th, 2009 at 3:50 pm
>I'll try and get a forum set up as soon as possible.
May I recommend Google Groups? I find its daily digest emails very useful.
March 29th, 2010 at 6:25 am
Hello,
How can we change SWF "height" and "width"
March 29th, 2010 at 8:41 am
Dock:
In the metadata tag here: [SWF(width="450", height="350", backgroundColor="#ffffff")]
See the first code snippet above.