My ‘Flex’ible Experiments

Most of the flex develpors a face a common problem to render html tags . Flex do not have the abillity to render complex html tags like <table> tags , but  Adobe Air is having a HTML control for rendering the html. I think the full html rendering ability is not included in flash player inorder to keep it light weight .

I faced a similar problem to render html tables in flex. I have a tried  a third party html component inorder to render html . That component is working well , but the hmtl is a appearing as a layer on top of the swf giving scrolling issues always.

Then i tried to create component based on the Grid Component in flex which is similar to the HTML Table .  The component will accept an html string containing table tags and will use regular expressions to parse the string to create Grid rows and columns. 

The component is working correctly for simple tables , now need to include the ability to render style attributes .

Here is the Code of the component .

Subeesh

<?xml version="1.0" encoding="utf-8"?>
<mx:Grid  xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"   creationComplete="gridCreated()">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;

   import mx.controls.Text;
   import mx.containers.GridItem;
   import mx.containers.GridRow;

   private var tableExpression:RegExp = new RegExp("
<table[^>]*>(.*?)</table>
","s");
   private var headerExpression:RegExp = new RegExp("
<th[^>]*>(.*?)</th>
");
   private var rowExpression:RegExp = new RegExp("
<tr[^>]*>(.*?)</tr>
","gs");
   private var columnExpression:RegExp = new RegExp("
<td[^>]*>(.*?)</td>
","gs");

   private var initializedf:Boolean = false;

   //Property whic

   private var _htmlString:String;
   public function get htmlString() : String {
    return _htmlString;
   }

   public function set htmlString(value:String) : void {
    _htmlString = value;

   } 

   private function gridCreated() : void {
    createTable();
   }

   /* override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
    super.updateDisplayList(unscaledWidth,unscaledHeight);

   } */

   private function createTable() : void {
    _htmlString = getTableProperties(_htmlString);
    var tableResult:Array = _htmlString.match(tableExpression) as Array;
    var rowResult:Array = ( tableResult[1] as String).match(rowExpression) as Array;
    //this.setStyle("borderStyle","solid");
    //this.setStyle("borderColor","#666666");
    this.setStyle("verticalGap",0);
    this.setStyle("horizontalGap",0);

    var columnWidth:int = getColumnWidth(rowResult,width );
    for( var i: int = 0 ; i < rowResult.length ; i ++ ) {

     var gridrow:GridRow = new GridRow();
     //gridrow.percentWidth = 100;
     this.addChild(gridrow);
     var columnResult:Array = ( rowResult[i] as String).match(columnExpression);

     for( var j:int = 0; j < columnResult.length ; j++ ) {
      var griditem:GridItem = new GridItem();
      griditem.setStyle("borderStyle","solid");
      griditem.setStyle("borderColor","#666666");
      gridrow.addChild(griditem);
      var text:Text = new Text();
      text.width = columnWidth;
      text.truncateToFit = true;
      text.htmlText = removetd(columnResult[j] as String);
      griditem.addChild(text);
     }
    }

   }

   private  static  function removetd(str:String): String {
    str = str.replace("
<td>","");
    str = str.replace("</td>
","");
    return str;
   }

   private function removetbody(str:String) : String {
    str = str.replace("
<tbody>","");
    str = str.replace("</tbody>
","");
    return str;
   }

   private function getTableProperties(str:String) : String {

    //clean the table from div tags and tbody tags
    var startIndex:int =  str.indexOf("
<table");
    str = str.substr(startIndex);
    var endIndex:int =  str.indexOf("</table>
");
    str = str.substring(0,endIndex + 8);
    str = removetbody(str);
    str = str.replace("\\r","");
    str = str.replace("\\n","");

    //store the table property information for appyling styles
    var tableTag:String = str.substring(0,str.indexOf(">") + 1);

    var contents:String = str.substr(str.indexOf(">") + 1);

    return "
<table>" + contents;

   }

   private function getColumnWidth(rowResult:Array,_width:int) : int {
     var maxColumns:int = 0;
     for( var i: int = 0 ; i< rowResult.length ; i ++ ) {
     var columnResult:Array = ( rowResult[i] as String).match(columnExpression);
     if(maxColumns < columnResult.length)
      maxColumns = columnResult.length;
     }
     return Math.floor((_width - 100)/maxColumns);
   }

  ]]>
 </mx:Script>
</mx:Grid>