How come?
As I am currently evaluating a Digital Signage project which makes heavy usage of Flash movies I decided to re-evaluate this technology. Until now I was rather reticent for the following reasons: it is proprietary and does not have any free development tools and (most disturbing) it requires Windows. However today while browsing the Adobe site I found out some rather cool things. There is a product called flex which allows to freely develop flash applications on Linux. So I downloaded the free flex compiler and started building some simple examples. The compiler, which is Java based works perfectly on my Linux box and it does not bother at all to write some XML in emacs.
After some play with the simple examples I decided to take advantage of this new tool and combine it with the need to create a feature matrix for our SOLIS product. The features list contains a list of modules and per module features which can be easily described by an XML in the following format:
<?xml version="1.0" encoding="utf8" ?>
<product>
<module>
<name>Client database CRM</name>
<feature>
<value>Advanced client search by various criteria</value>
</feature>
<feature>
<value>Client ordering by name or region</value>
</feature>
....
The application
So I decided to write a simple example which can read this format and display it in a nice visual way. After browsing the available widgets I decided to use an accordion component with several dataGrids. Here is the result:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="feedRequest.send()" layout="absolute"
width="500" height="400">
<mx:Style source="features.css"/>
<mx:HTTPService
id="feedRequest"
url="http://www.solis.ro/solis_chart.xml"
useProxy="false"/>
<mx:Accordion id="accordion1" height="400" width="500" headerStyleName="aHeader">
<mx:Repeater id="mRep" dataProvider="{feedRequest.lastResult.product.module}">
<mx:VBox width="500" height="400" label="{mRep.currentIndex + 1}. {mRep.currentItem.name}">
<mx:DataGrid width="498" id="dgPosts" dataProvider="{mRep.currentItem.feature}" styleName="dGrid">
<mx:columns>
<!--mx:DataGridColumn headerText="Type" dataField="type"/-->
<mx:DataGridColumn dataField="value" headerText="Feature list"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Repeater>
</mx:Accordion>
</mx:Application>
Some explanations:
- the mx:HTTPService read the XML and makes it available in the lastResult variable. The object it’s identified by it’s id. The XML structure can be easy accessed using a dotted notation:
- feedRequest.lastResult.product means the “product” element
- feedRequest.lastResult.product.module means a list of “module” elements
- a very important aspect is, if you want to access an XML which cannot be found on the same server to add a /crossdomain.xml on the server which contains the xml. Otherwise the XML will not be loaded (I found this just by looking in the access_log after some failed tries)
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
- the mx:Accordion is a container which has the desired graphical functionality. I use a mx:Repeater to populate it with mx:VBox containers. The mx:Accordion will use the label attribute for each of the containers
- the mRep mx:Repeater “object” has the currentIndex and currentItem attributes which I use to access the current element
- the dataProvider requires some time of list such the list of “module” or “feature” elements
- the mx:DataGrid display the list in a simple grid (table) with a header. Note: I tried using multiple columns but I did not managed to resize the columns automatically based on the data size
- the mx:Style defines an external stylesheet to change the visual aspect of the widgets. It seems external means in a separate file at compilation but you cannot change the stylesheet after compiling the mxml file. The styles are linked to the elements by the styleName attribute.
.dGrid {
selectionColor:#ea8116;
rollOverColor: #CCCCCC;
}
.aHeader {
font-size: 13px;
font-weight: bold;
}
How to compile
Compilation is easy, it involves just calling the compiler and the mxml file:
~/test/<span class="highlightedSearchTerm">flex</span>_sdk_2/bin/mxmlc --strict=true --file-specs features.mxml
The result
The result is a simple swf file which you can either test using the standalone flash player for linux or by using an html file:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load test</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="zone1"> </div>
<script type="text/javascript">
// <![CDATA[
var z1 = new SWFObject("features.swf", "zone1", "500", "450", "9", "#000000");
z1.write("zone1");
// ]]>
</script>
</body>
In my case I use the SWFObject library to generate the flash html inclusion.
Conclusion
It seams great that it’s now possible to develop Flash applications on Linux. This has given a great point in using this technology which until now seemed restricted to Windows and Mac users. I will probably try using with any appropriate occasion as it seemed flexible and powerful.
Links
- http://www.adobe.com/devnet/flex/?tab:home=1 – Adobe Flex
- http://blog.deconcept.com/swfobject/ – SWFObject flash inclusion
- http://plone.org/products/atflashmovie/ – Flash inclusion in Plone