Siam Flex framework | Preview

By | July 26, 2009

Siam Flex framework aims to provide usability and rapid application development changes to the existing Adobe Flex data representation support. Siam is a lightweight framework that enables you to quickly represent your application data models regardless of their type or origin.

This preview introduces the envisioned features of the framework and contains also code examples and ideas for future releases. Siam is still in early phase, so your feedback is highly appreciated!

The project can be found at http://code.google.com/p/siam-flex/.

Goals

Siam aims to provide a simple and additive API to keep your Flex implementation DRY (Don’t Repeat Yourself).

For instance, you have a field in your Flex application that should show a Currency Amount in dozen places, you probably want to use a a TextField, some validators, and a CurrencyFormatter or perhaps even some custom item renderer. You think about it as a Currency Amount. If you decide to change that field, you would have to do “monkey work” and go find all the instances of that field and keep them up to date.

Siam allows you to describe via metadata how your model properties should be represented across your application.

Siam API will support the following data representation features:

  • formatting: render data as text
  • storage: store and access data regardless of its type (model, xml, array…)
  • validation: validate data input on client-side, e.g. in forms
  • conversion: convert data on the fly, e.g. temperature from Celsius to Fahrenheit
  • renderers: render data in a control, e.g. Checkbox for all booleans
  • editors: alter data graphically, e.g. password field

At a global level, Siam will also feature internalization and localization support that will affect most data representation features.

Note: only the formatting feature will be described here as a proof of concept.

Configuration

Based on on a metadata-driven architecture, Siam allows you to describe your application data models via XML.

Here’s an example of application configuration file:

  1. <!-- siam.cfg.xml -->
  2. <?xml version="1.0" encoding="UTF-8"?>
  3. <siam-configuration>
  4.     <formatting>
  5.         <class name="mx.formatters.DateFormatter">
  6.             <formatter id="date" formatString="MM/DD/YY" />
  7.             <formatter id="time" formatString="HH:NN:SS" />
  8.         </class>
  9.         <class name="mx.formatters.NumberFormatter">
  10.             <formatter id="integer" />
  11.         </class>
  12.         <class name="mx.formatters.CurrencyFormatter">
  13.             <formatter id="money" precision="1" currencySymbol="$ " />
  14.         </class>
  15.         <class name="mx.formatters.ZipCodeFormatter">
  16.             <formatter id="zipcode" formatString="#####" />
  17.         </class>
  18.         <class name="mx.formatters.PhoneFormatter">
  19.             <formatter id="phone" formatString="(##)###-####" />
  20.         </class>
  21.     </formatting>
  22.     <mapping>
  23.         <schema id="car">
  24.             <property id="make" name="Make" />
  25.             <property id="model" name="Model" />
  26.             <property id="year" name="Year" />
  27.             <property id="mileage" name="Mileage" formatter="integer" />
  28.             <property id="price" name="Price" formatter="money" />
  29.             <property id="location" name="Location" formatter="zipcode" />
  30.             <property id="contact" name="Contact" formatter="phone" />
  31.         </schema>
  32.     </mapping>
  33. </siam-configuration>

The structure of the configuration file was inspired from ORM framework Hibernate’s. Under <siam-configuration> common feature properties are configured and data models are described under <mapping>.

The <formatting> configuration includes a list of formatters that are needed in the application. Those can be any of Flex built-in ones (mx.formatters.*) or your own custom implementation. For each class, a list of formatters can be defined with an id and any properties necessary.

The <mapping> directive can contains multiple <schema> (data model description)

Each model schema is described with a list of <property> items. A schema property represents a data model item (identified by attribute id) and use metadata tags to describe its data representation within the application. For instance, the formatter attribute tells how the model property should be formatted within the application.

Usage

Below is an example of usage using Siam. After loading the configuration, the schema ‘car’ is retrieved to properly format necessary data properties displayed in the built-in DataGrid component.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"
  4.     xmlns:siam="http://code.google.com/p/siam-flex/" viewSourceURL="srcview/index.html">
  5.  
  6.     <siam:SiamManager id="siam">
  7.         <mx:XML source="siam.cfg.xml" />
  8.     </siam:SiamManager>
  9.  
  10.     <mx:Model id="allCars">
  11.         <cars>
  12.             <car>
  13.                 <make>Acura</make>
  14.                 <model>Integra</model>
  15.                 <year>2003</year>
  16.                 <mileage>34000</mileage>
  17.                 <price>22500</price>
  18.                 <location>08540</location>
  19.                 <contact>095469876</contact>
  20.             </car>
  21.             <car>
  22.                 <make>Honda</make>
  23.                 <model>Civic</model>
  24.                 <year>1993</year>
  25.                 <mileage>108340</mileage>
  26.                 <price>7800</price>
  27.                 <location>12890</location>
  28.                 <contact>082639063</contact>
  29.             </car>
  30.             <car>
  31.                 <make>Land Rover</make>
  32.                 <model>Discovery</model>
  33.                 <year>2006</year>
  34.                 <mileage>17800</mileage>
  35.                 <price>32000</price>
  36.                 <location>09672</location>
  37.                 <contact>029381579</contact>
  38.             </car>
  39.             <car>
  40.                 <make>Hyundai</make>
  41.                 <model>Accent</model>
  42.                 <year>2008</year>
  43.                 <mileage>9800</mileage>
  44.                 <price>24000</price>
  45.                 <location>10783</location>
  46.                 <contact>076109632</contact>
  47.             </car>
  48.         </cars>
  49.     </mx:Model>
  50.  
  51.     <mx:Script>
  52.         <!&#91;CDATA&#91;
  53.             import mx.controls.dataGridClasses.DataGridColumn;
  54.  
  55.             public function formatFunction(item:Object, column:DataGridColumn):String {
  56.                 return siam.manage("car").format(item, column.dataField);
  57.             }
  58.         &#93;&#93;>
  59.     </mx:Script>
  60.  
  61.     <mx:DataGrid width="100%" dataProvider="{allCars.car}"
  62.         labelFunction="formatFunction">
  63.         <mx:columns>
  64.             <mx:DataGridColumn dataField="make" />
  65.             <mx:DataGridColumn dataField="model" />
  66.             <mx:DataGridColumn dataField="year" />
  67.             <mx:DataGridColumn dataField="mileage" />
  68.             <mx:DataGridColumn dataField="price" />
  69.             <mx:DataGridColumn dataField="location" />
  70.             <mx:DataGridColumn dataField="contact" />
  71.         </mx:columns>
  72.     </mx:DataGrid>
  73.  
  74. </mx:Application>

Feedback

As mentioned above, Siam Flex framework is in early stage of development, hence I’m looking forward to your input and suggestions!!!

8 comments on “Siam Flex framework | Preview

  1. Nice article and promising framework … Looking forward to the first release!

  2. I agree with Michal I found it both interesting and informative. When’s the first release due?

  3. I just love the mapping of the Model with formatters… Cool idea!! Cant wait to try this!!

  4. Looking forward to its release. Mapping seems, it will make the task easier.

  5. julien on said:

    Thank you all for the positive feedback!

    I released the first alpha version 0.1.0 at http://code.google.com/p/siam-flex/.
    Please try it out and let me know what you think.

  6. philip andrew on said:

    Hi, its interesting, I will try it out on one of my pages in my project.
    Have you looked into the two way data binsding of Flex 4 and how that would work with this?
    Also, I use GraniteDS, so I need to bind all of this to my server side data. Should work. will try and see.

    • julien on said:

      hi phil, that would be great! Regarding Flex 4 two-way data binding, it won’t be a problem since Siam does not deal with binding of raw data. Uou will just have to make sure the underlying data-driven components supporting Siam API can be properly configured via MXML. I also use as Java backend (using BlazeDS) and describe all server transfer objects into the configuration file. Btw, I posted an article yesterday about the first beta version. cheers.

  7. julien on said:

    I posted an article yesterday about the first beta version:

    http://www.webdevbros.net/2009/10/05/siam-flex-framework-first-beta-released-0-4-0/

Leave a Reply

*

* Copy This Password *

* Type Or Paste Password Here *

135,313 Spam Comments Blocked so far by Spam Free Wordpress