XLEFF - an XML Layout Engine For Flash

The user interface of the XLEFF Sampler has been designed utilizing several components included in the Flash component architecture:

• A MenuBar instance
• An Accordion instance with two children
• A TextArea instance
• Three Button instances

The XLEFF Sampler navigation

The user interface of the XLEFF Sampler provides three options for moving back and forth between the two Accordion children:

• Select one of the two menu items in the MenuBar instance
• Click on one of the two Accordion headers
• Click on the Button instances labelled: "Previous" and "Next"

Purpose of the two Accordion children

The headers of the two Accordion children suggests their purpose:

The first child ("Defining The XML Source") includes a text field and a button ("Generate"). The text field already contains some XML text:

<xleff>

<stage>

<form name="FrmMain" x="0" y="0">

<button name="BtnTest"

x="20" y="20" width="160"

label="Test Button" />

</form>

</stage>

</xleff>

That XML code follows the syntax supported by XLEFF and describes a user interface made of a single button labelled "Test Button".

The XLEFF Sampler invokes XLEFF to dynamically generate the user interface described by the XML code in the text field of the first Accordion child whenever you click on the "Generate" button.

Very simple tests

If you are familiar with XML, you can already use the XLEFF Sampler to do simple tests even without knowing the syntax supported by XLEFF!

Clicking on the "Generate" button will open the second child of the Accordion ("Show The Generated Interface ") containing the button labelled "Test Button" which was created dynamically by following the XML description included in the text field in the first child of the Accordion.

To make your own experiments, you can go back to the first child of the Accordion, change the XML code in there and click on the "Generate" button again.

It is reasonable to start with very small tests to get used with how the XLEFF Sampler works and, even more, with the XLEFF concept in general.

For instance, your very first test may change the label attribute of the button element as in:

label="Panic Button"

Clicking on the "Generate" button should now display the new label text inside the button dynamically generated by XLEFF.

Your next experiments may involve moving the button instance around by changing the values of the x, y attributes or making it wider or shorter by changing the value of the width attribute.

Once you have become acquainted with the process, you can also add other button elements to the XML description to generate an interface with two or more buttons.

Eventually, you should end up with a better understanding of what is XLEFF about by playing with the functionality provided by it.

At this point, more experienced developers may find it interesting to look at the XML file that generated the interface of the XLEFF Sampler itself:

• xleffSampler.xml