flexr

It took me a while to figure out I really don’t need to write an AdvancedDataGrid dynamically, since the data is structurely fixed, and don’t need to dynamically create columns. So MXML was the way to go for me, and easy to figure out. I needed a summary row to be calculated on the client side of the data (which came in as XML, converted to objects and placed in an ArrayCollection).

• When you see for example:  dataField=”visits” – visits here is actually the key of the object, so the value of that object is placed in the datafield.

• When you see: summaryPlacement=”group” – Summary Placement is how the summary row will be displayed: Group is added to the row of the SummaryField, if you put for example:  summaryPlacement=”group first” – This will actually put it in the top group row And a extra row right underneath the Summary row. You have the option of last too.

• When you see operation=”{operation}” – This is actually a string whether “SUM” or “AVG” of that Column, even better yet, the summaries of that column, you have other options such as MIN, MAX, or COUNT.

• When you see labelFunction=”someFunc” - This is a returned Object that formats the content.

Code Below: Read the rest of this entry »

Alright, so we’ll be dynamically generating a UI interface from an XML. So I’ll show you the XML first:

<mx:XML id="xml_save">
<cfg>
   <checkbox id="ebay" enabled="true" description="eBay"/>
   <checkbox id="wikipedia" enabled="false" description="wikipedia"/>
   <checkbox id="pandora" enabled="true" description="pandora"/>
   <checkbox id="flexr" enabled="false" description="flexr"/>
</cfg>
</mx:XML>

Now for each of the shortcut node in the XML above, we’re going to create a checkbox for each of them, style it, then see whether its checked or not (and display it), and then add it to a VBox called ‘p_CheckContainer‘.

private function updateForm(xml_result:XML):void {
   for each (var node:Object in xml_result.checkbox) {
       var checkBox:CheckBox = new CheckBox();        // new checkbox for each node
       checkBox.setStyle('paddingLeft', 30);          // style it 
       checkBox.label = node.@description;            // add it's label
       checkBox.selected = TypeConverter.parseBoolean*(node.@enabled); // un/checked
       checkBox.id = node.@id;                        // identify it
   p_CheckContainer.addChild(checkBox);               // display it
   }
}

* TypeConverter is a class with static public method parseBoolean which returns a true/false boolean.

——

Now, After we generated the UI from the XML, we want to save any changes, say for example, the user un/checked one of these checkboxes, and we want to resave the new XML with the appropriate values:

private function saveChanges():void {
   var _numCheckboxes:Number = p_CheckContainer.numChildren; // Number of CheckBoxes
   m_modifiedXML = <cfg></cfg>;                              // member var of type XML
   for (var i:Number= 0; i <= _numCheckboxes - 1; i++) {
       var _checkBox:CheckBox = p_CheckContainer.getChildAt(i) as CheckBox;
       var _newNode:XML = <shortcut/>;
           _newNode.@id= _checkBox.id;
           _newNode.@enabled = _checkBox.selected;
       m_modifiedXML.appendChild(_newNode);      
    }
    trace ("m_modifiedXML: " + m_modifiedXML);
}

Many friends of mine are noticing the emerging new Programming Language that’s sweeping the RIA world. ActionScript 3. Like many other OO languages, you can easily customize your own Event. Here’s a quick and simple way of understanding it.

The Problem: You want to create a timer, and after each elapsed time, you would like to dispatch an event and a variable that keeps updating (without using global variables, and ensuring decoupling).

CountdownTimer.as : A timer which elapses ever second and displays a countdown of a time remaining with fixed endTime. 

CountDownTimer.as:
// in the constructor
ticker = new Timer(1000);
ticker.addEventListener(TimerEvent.TIMER, onTick);
ticker.start();

private function onTick(evt:TimerEvent):void {
   var myEvent:MyTimerEvent = new MyTimerEvent(“secElapse”);
       myEvent.timeLeft = getCountDown(countDownTime – (new Date()).getTime());
   dispatchEvent(myEvent);
}

——
 

MyTimerEvent.as: Our very own customized timer
public class MyTimerEvent extends Event {
   private var theTime:String;

   public function MyTimerEvent( type:String ) {
      super(type);
   }

   public function set timeLeft ( time:String ):void {
      theTime = time;
   }

   public function get timeLeft ():String {
      return theTime;
   }
}

——-

Our MXML where all the action converges on CreationComplete=”onCC()” :
      private function onCC():void {
     // listner to secElapse dispatcher
     countDown = new CountdownTimer();
     countDown.addEventListener("secElapse", updateTime);
   }

   // Update the display timer
   private function updateTime (e:MyTimerEvent):void {
      countDown.endTime = m_endTime;
      m_updatedTimeRemaining = e.timeLeft;
   }

I wonder why there isn’t an out of the box Boolean parser in Flex, I must have built this same method at least 3 times for different projects… You should probably add this to your utils as well.

static public function parseBoolean(str:String):Boolean {
switch(str) {
case "1":
case "true":
case "yes":
return true;
case "0":
case "false":
case "no":
return false;
default:
return Boolean(str);
}
}

Same as the other charts I have posted here in Actionscript 3… we would need the data for the Column Chart to be generated.

private function getDataProvider():ArrayCollection {
   var arr:Array = [];
   arr.push({title: "Benefit 1", data: 2});
   arr.push({title: "Benefit 2", data: 5});
   arr.push({title: "Benefit 3", data: 6});
   arr.push({title: "Benefit 4", data: 3});
   return new ArrayCollection(arr);
}

Now for the Chart to be displayed… you’d need to call this function,

private function columnChart():void {
   var columnChart:ColumnChart = new ColumnChart();
       columnChart.dataProvider = getDataProvider();
       columnChart.percentWidth = 60;
       columnChart.percentHeight = 60;
       columnChart.x = 100;
       columnChart.y = 85;
       columnChart.dataTipFunction = tipFeedback;
       columnChart.showDataTips = true;
   var catAxis:CategoryAxis = new CategoryAxis();
       catAxis.categoryField = "title";
   columnChart.horizontalAxis = catAxis;
   var col:ColumnSeries = new ColumnSeries();
       col.yField = "data";
       col.xField = "title";
   columnChart.series = [col];
   // add a lengend
   var legendAnnualBen:Legend = new Legend();
       legendAnnualBen.dataProvider = columnChart;
       legendAnnualBen.x = 700;
       legendAnnualBen.y = 140;
   columnContainer.addChild(columnChart);
   columnContainer.addChild(legendAnnualBen);
}

In MXML, the columnContainer is the id of any container from a Canvas to a VBox, to a … any container you wish that has the id name “columnContainer”

enjoy.

Similar to last week, I gave the raw basis of a LineChart, this week I’ll post on how to render a pieChart, slightly different… here goes, same dataProvider

private function getDataProvider():ArrayCollection {
   var arr:Array = [];
   arr.push({title: “Benefit 1″, data: 2});
   arr.push({title: “Benefit 2″, data: 5});
   arr.push({title: “Benefit 3″, data: 6});
   arr.push({title: “Benefit 4″, data: 3});
   return new ArrayCollection(arr);
}

the pieChart is the following:

private function drawPieChart():void {
   var dummyData:ArrayCollection;
       dummyData = getDataProvider();
   var series:PieSeries;
       series = new PieSeries();
       series.nameField = "title";
       series.field = "data";
       series.filters = [];
   pieChart = new PieChart();
   pieChart.percentWidth = 60;
   pieChart.percentHeight = 60;
   pieChart.showDataTips = true;
   pieChart.dataProvider = dummyData;
   pieChart.series = [series];
   pieChart.y = 75;
   pieChart.x = 70;
   var legendPie = new Legend();  // add a legend to your chart
       legendPie.dataProvider = pieChart;
       legendPie.x = 516;
       legendPie.y = 134;
   chartContainer.addChild(pieChart);
   chartContainer.addChild(legendPie);
}

The ‘chartContainer’ is the id of a container say of, a canvas or any other sort of container you wish. Enjoy.

Hello Chaps,

Below you’ll find a quick and simple Line Chart in Actionscript. You need to instantiate an Array Collection of data, here’s my dummy data;

private function getDataProvider():ArrayCollection {
   var arr:Array = [];
       arr.push({month: 2, data: 3});
       arr.push({month: 4, data: 5});
       arr.push({month: 6, data: 9});
       arr.push({month: 11, data: 23});
   return new ArrayCollection(arr);
}

Call this function below by some mean, or simply through initialize=”pieChartF()” in your header MXML… and voila, you’ve got yourself a pie Chart and it’s Legend.

private function lineChartF():void {

   var arr:ArrayCollection = new ArrayCollection;
       arr = getDataProvider();

   var lineChart:LineChart = new LineChart();
       lineChart.dataProvider = arr;
       lineChart.percentWidth = 60;
       lineChart.percentHeight = 60;
       lineChart.x = 100;
       lineChart.y = 85;
       lineChart.showDataTips = true;

   var lineSeries:LineSeries = new LineSeries();

       lineSeries.xField = "month";
       lineSeries.yField = "data";

   var arr2:Array = new Array();

       arr2.push(lineSeries);

   lineChart.series = arr2;

       legendLine.dataProvider = lineChart;
       legendLine.x = 700;
       legendLine.y = 140;
   lineContainer.addChild(lineChart);
   lineContainer.addChild(legendLine);
}

Add lineContainer to the id of any container you want, and run/debug.