Creating a Flex-free MXML app with Razor

Actionscript

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.

Flex project properties

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).

HTML:


<?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:

HTML:


<?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.

This entry was posted on Wednesday, December 23rd, 2009 at 1:53 pm and is filed under Actionscript. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

6 Responses to “Creating a Flex-free MXML app with Razor”

  1. volkan Says:

    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?

  2. volkan Says:

    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.

  3. Ash Says:

    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!

  4. volkan Says:

    >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.

  5. Dock Says:

    Hello,

    How can we change SWF "height" and "width"

  6. Ash Says:

    Dock:
    In the metadata tag here: [SWF(width="450", height="350", backgroundColor="#ffffff")]

    See the first code snippet above.

Leave a Reply