flexr

Archive for the ‘Flex 2’ Category

Advanced DataGrid with Summary rows & Operations

without comments

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 »

Written by Jester theFool

November 11, 2009 at 5:15 pm

Flex – Dispatching your very own custom event

with one comment

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;
   }

Written by Jester theFool

October 5, 2008 at 10:40 pm