Advanced DataGrid with Summary rows & Operations

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:

Generate UI from XML, and re-save modified updates

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

Adobe and Time Warner Partner

To assure dominance of internet rich multimedia, Adobe and Time Warner are announcing Tuesday they have formed an online video alliance.

They’ll work on finding solutions for issues like digital rights management, audience measurement and content discovery and monetization.

Much of the relationship will concern backend technology for video creation that that the public will never see, Adobe said, however some implementations are already out there today, for instance CNN’s advanced application of Flash for its Obama Inauguration coverage and the recently relaunched TheWB.com.

Browsing Habits – Silverlight gets PhotoSynth

On the road, you browse the internet with your finger. On your desktop, you browse the internet with your mouse wheel. More so if you would be able to use a horizontal+vertical wheel, like the mac’s mighty mouse and navigate with your middle finger the world.

Silverlight, Microsofts front to the RIA battle field, will have a nifty new feature by PhotoSynth in their Silverlight Player renderer this march, and ponder if Adobe is following suit on a similar or more effective way of ‘browsing’. The Seadragon will also be made for the iPhone that lets users “infinitely zoom” on high quality images with near zero transition times.

You can currently see the functionality in action used on the HardRock cafe’s Memorabilia. Loading time kept the image often blurry in transition, but eventually loaded.

Flash Camp: San Francisco – Flash CS4

We’re in day 2 of Flash Camp located at the historic Adobe building in San Francisco.

Adobe kindly gave every attendee a pre-release of Flash CS4, and I have admit, after a quick overview, they have added really cool features!

The first thing you’d notice is the tools locations have changed, the tools are fixed in place (with option to move around), some liked it and prefered it to the loosely moveable tool sets. Another feature that certainly stands out is the ‘Bone’ tool. Briefly, it’s an arm where you can hook two objects and use one of them as rotational center with the radius length of the bone. You can add several objects connected by bones.

You also will be greeted by the 3D feature, from the look of it being denies it looks extreemly easy to use! I feel any neophyte will be able to do 3D stuff pretty quickly (having Flex as the backbone of most of my applications I don’t see much use for it out of the designing world).

Oh, and get this, Adobe has Free Massage for any attendee; They sure do know how to pamper their developers!

Flex – Dispatching your very own custom event

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

Parse Boolean method for Flex

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

Google, Yahoo! crawls .swf files

Today, Adobe and Google announced that major search engines Google and Yahoo! are able to crawl these esthetically beautiful flash websites and Rich Internet Applications.

This has been a major obstacle in the past due to the fact that if these search engines do not recognize your work, basically you don’t exist. Now designer and developers can style and architect with the peace of mind of being searchable. This includes Flash “gadgets” such as buttons or menus, self-contained Flash websites, and everything in between. All of the text that users can see as they interact with your Flash file. If your website contains Flash, the textual content in your Flash files can be used when Google generates a snippet for your website. Also, the words that appear in your Flash files can be used to match query terms in Google searches. Keep in mind, URLs that appear in swf files, and feeding them into Googles’ crawling pipeline—just like they do with URLs that appear in non-Flash webpages. For example, if your Flash application contains links to pages inside your website, Google may now be better able to discover and crawl more of your website/RIA.

This is a major improvement for the RIA world, because competing RIA technologies to Adobe Flex and Flash are not crawl-able by search engines like Silverlight. As with HTML content, best practices will emerge over time for creating SWF content that is more optimized for search engine rankings.

ColumnChart purely in ActionScript

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.

pieChart purely in Actionscipt

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.