Archive for the 'Flex' Category
Declarative Ajax and Flex Interop 
July 3rd, 2007
This is some code that I wrote about a year ago at the Flex Component Developers Summit (and more recently presented at XTech) to show how declarative Ajax and Flex can work together to create dynamic, rich and compelling Internet applications.
The idea is simple. Take a single declaration - in this case XHTML - of some user-interface component and then use it to build a UI using either Ajax or Flex. All this from just one declaration.
What happens is that we take a single declarative data grid and converts it using XSLT on the client (so it only works Firefox, IE and soon Safari) into a declarative Nitobi Ajax Grid and to a Flex declarative MXML DataGrid. I use the FABridge to get the string of MXML generated from the XSL transformation into a stub Flex application where a Flex DataGrid is instantiated (deserialized) from the MXML declaration. It can an be seen live here (note: create the Flex grid first then the Ajax one - something funny that I can’t be bothered to fix 
) and the code can be downloaded from here.
So by using a declarative approach and a little XSLT on the client we were able to quickly choose between using a Flex DataGrid or a Nitobi Ajax Grid to display our tabular data in!
Really the most interesting part is the MXML deserialization stuff. The only contents of the Flex application are two functions for performing the deserialization. I have listed the main part of the code that takes an XML document of an MXML DataGrid declaration and actually instantiates a DataGrid according to that declaration. It’s pretty quick and dirty but at least gets the right thing out! Essentially it just looks at each XML element and creates an Object out of it and sets all the properties on it from the XML element attributes and then recurses through the child elements doing the same. There are some special attributes though like datasources that need a little more care.
public function initGrid(html) {
// setup a tagname to datatype hash - maybe this already exists somewhere
controls['DataGrid'] = 'mx.controls.DataGrid';
controls['ArrayCollection'] = 'mx.collections.ArrayCollection';
controls['Object'] = 'Object';
controls['columns'] = 'Array';
controls['DataGridColumn'] = 'mx.controls.dataGridClasses.DataGridColumn';
// load the HTML into XML DOM
var mxml:XML = new XML('<root>'+html+'</root>');
parseXml(AjaxBox, mxml);
}
public function parseXml(parent, mxml) {
var item:String;
// get all the elements in our XML doc - this should of course walk the xml tree recursively
var itemList:XMLList = mxml.elements('*');
for (item in itemList) {
// get the tag name of the XML node
var tagName:String = itemList[item].localName();
// get the class by using getDefinitionByName() method
var ClassReference:Class = Class(getDefinitionByName(controls[tagName]));
// create an instance of the class
var myObject:Object = new ClassReference();
// get all the attributes and set the properties
var attrList:XMLList = XML(itemList[item]).attributes();
for (var attr:String in attrList) {
myObject[attrList[attr].localName()] = attrList[attr].toString();
}
// now parse the children of this node
parseXml(myObject, itemList[item]);
if (parent.hasOwnProperty(tagName)) {
parent[tagName] = myObject;
} else if (parent.hasOwnProperty("length")) {
if (parent.hasOwnProperty("source")) {
parent.source.push(myObject);
} else {
parent.push(myObject);
}
} else if (parent.hasOwnProperty("dataProvider") && tagName == "ArrayCollection") {
// This means we need to create a datasource for the Grid
parent.dataProvider = myObject;
} else {
parent.addChild(DisplayObject(myObject));
}
}
}
Posted in Web2.0, AJAX, XSLT, Flash, Flex, Declarative Programming, Components, Grid, RIA, FABridge | No Comments »
Ajax and Flex Job Opportunities
June 28th, 2007
Who wants a job? We have some very exciting Flex and Ajax development opportunities coming up with some high profile companies and we need some kick ass people to help us out.
To apply just do something awesome with our components or maybe something cool with say JavaFX, Adobe AIR (not that Adobe AIR) or Flex.
Send it to jobs=at=nitobi.com.
Just to give an idea of what goes on here and why it is great …
mmmmmm mountains - don’t worry it’s really nice in the summer too
xbox 360 or wii anyone?
sea monkeys ???
we also work … sometimes
Posted in Uncategorized, AJAX, Flex, Nitobi, air, jobs | No Comments »
Podcast #17
March 29th, 2007
This one almost never saw the light of day but it has been resurrected. Not even really sure what is on it aside from Ryan Stewart 
Posted in AJAX, Flash, Flex, Podcast, Nitobi, FABridge, apollo | No Comments »
Resolving <fab:Fabridge>
March 17th, 2007
In case anyone is wondering, it seems that the easiest way to include the FABridge in your Flex applications is by copying the .as file into a folder in your application named bridge. The error that most people get due to this problem is “could not resolve <fab:Fabridge> to a component implementation”.
Posted in AJAX, Flex, FABridge | 1 Comment »
Flex Ajax Dashboard
October 17th, 2006
We have just made a quick Flex/Ajax dashboard to show how Flex and Ajax can work together to make a very compelling user-interface for something like a corporate information dashboard. You can check it out the demo here and an article about the demo here.
Using the FABridge along with the Nitobi Ajax Grid and Adobe Flex Charting, we have created a scenario where one can view monthly sales data and then see the sales details for the month in both a tabular format in a grid and visually represented in a Flex chart.
Under the hood we have used PHP and MySQL to provide the data to both the data grids and the chart. When a user clicks on a record in the sales data grouped by month, the details grid makes a request to the server for all the sales data for that month - this ends up being between 200 to 1000 records or so. To ensure that the details grid is still fast, we only render the part of the dataset that the user is looking at rather than rendering all 1000 records say, which can take a long time when you use the DOM
innerHTML
property. The other thing that happens when a month is selected in the master grid is that the Flex chart is also updated with information about the sales for that month, except that the sales data is then grouped by day. Grouping of the sales data could either be done on the client or the server, however, since we have already retreived all the sales data for the month and displayed it in the detail grid we simply take that same data and group it very quickly using an XSL transformation (yes currently only IE and Moz but the latest Safari build also has it - finally!). The grouped data we output from the XSL transformation is actually formatted as JSON which is then evaluated into a JavaScript object and passed to the Flex chart for rendering. The grouping XSLT is pretty simple and uses the
Muenchian method:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ntb="http://www.nitobi.com">
<xsl:output method="text" encoding="utf-8"/>
<xsl:key name="sales-by-day" match="ntb:e" use="@h" />
<xsl:template match="/">
[<xsl:apply-templates select="//ntb:data" />{}]
</xsl:template>
<xsl:template match="ntb:data">
<xsl:for-each select="ntb:e[count(. | key('sales-by-day', @h)[1]) = 1]">
{'totalSales': <xsl:value-of select="sum(key('sales-by-day', @h)/@i)"/>,
'day': <xsl:value-of select="@h" />,
'month': <xsl:value-of select="@f" />,
'year': <xsl:value-of select="@g" />},
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
We have also hooked up a few other events so that the chart will be updated when changes to the data in the detail grid are made.
All in all, by using the FABridge to move data to and from a Flex chart we can create very compelling and ultimately very useful dashboard type of application by merrying the Flex and Ajax technologies.
Posted in Web2.0, AJAX, Flex, Declarative Programming, Components, Nitobi, RIA | 11 Comments »
Flex 2 Released
June 29th, 2006
Looks like Adobe’s Flex 2 has finally been released!
I am pretty excited to see how the uptake is and if people are into buying components for it - after all we are not married to Ajax!
If you are building a Flex application then don’t be a stranger and let us know what kinds of components you need. There could be a very good opportunity there for charting (of course Adobe has their own charting component already) and rich data manipulation.
On a somewhat related note, I will post some cool screencasts of Flex + Ajax copy and paste shortly with the latest copy and paste functionality of our currently only Ajax based Data Grid.
Technorati Tags: flex ajax adobe
Posted in AJAX, Flex | No Comments »
Podcasting with Duane Nickull
June 21st, 2006
In the latest Nitobi podcast we were lucky enough to have Duane “Cosmic Genius” Nickull with us from Adobe.
Mostly just discussed SOA and jabbed at SOA 2.0 a bit
I am also hacking away at a Flex component for copy and paste functionality between our AJAX Grid and a Flex DataGrid (or Microsoft Excel). I did a quick google and found that someone from Adobe already did a copy/paste to/from Flex and Excel example - just five days ago.
Check it out.
Posted in Web2.0, AJAX, Service Oriented Architecture, Flex | No Comments »
Podcasting it up!
May 24th, 2006
Well, Captain AJAX and I finally got around to making our first podcast! It is a bit long and the audio sucks but we will be sure to get that fixed for next time . Anyhow, Dre and I just talked about everything that happened in the past coupld weeks including Dre’s findings down at JavaOne, The AJAX Experience, DCamp and NetBeans Day.
We also talked about the launch of Nitobi Grid V3…and what's to come down the road - WARNING - could be considered shameless self promotion but we also talk about some AJAX technology stuff
Here is the podcast care of Audioblo. If anyone has any tips about posting and or making the old podcasts then let us know!
Technorati Tags: ajax podcast javaone ajaxexperience
Posted in Web2.0, AJAX, JavaScript, XML, Architecture, Business, Flex, Declarative Programming, Components | No Comments »
Flex + AJAX = FlexJAX
May 19th, 2006
We have just put together a little demo that uses the Adobe FABridge library for their new Flex technology and married it with our AJAX Grid control.
Check out the cool screencast here on our Nitobi Labs site. Essentially what it lets you do is plot data from our Grid control using the Flex / Flash.
It should be even more cool once we put in our newly released, cross-browser, AJAX Grid component (which I will post a screencast about very soon)!
Technorati Tags: ajax grid web2.0 eba flex flash
Posted in Web2.0, AJAX, Flash, Flex, Declarative Programming, Components | 1 Comment »
AJAX and Flex - A Match Made in Heaven?
March 8th, 2006
Today a few of us at Nitobi had a sneak peak at some really cool Flex technology from the team over at Adobe.
Essentially we saw how one can go beyond the ExternalInterface feature in Flash 8, which only supports function calls across the JavaScript / ActionScript boundary with primitive objects, to a situation where one can access Flex objects directly from JavaScript and vice versa. This is being called the Flex-AJAX Bridge or FABridge. All the info (with Alpha download) can be found here on Adobe Labs.
Today this means that AJAX developers can better leverage native Flash capabilities such as local storage (hopefully it is faster than ExternalInterface), cross-domain data access, and sockets. It should get really interesting when the AJAX Client for Flex Data Services become available (later this year) which should provide data persistence, pub/sub, push, etc.
As a component vendor, I like the idea of marrying the benefits of both AJAX and Flex - it particularly makes sense for doing anything with charting etc. With the SVG/VML/Canvas battle for vectors graphics dominance pretty much going nowhere (and they can’t even do video or audio), Flash is the best option for rich media that works on a large majority of today’s web browsers. It was a good move on Adobe’s part to provide some incremental benefit for AJAX developers rather than trying to push a full Flex framework where the open standards of the AJAX technology stack rule. Something like XAML, which is Microsoft’s next generation declarative user-interface language, will have a tough time for that exact reason.
Flex seems to be shaping up into something that should, in the near term at the very least, be a great addition to the AJAX developers toolbox. I can’t wait to get into the guts of it - just as soon as Grid V3 is done 
Posted in Web2.0, AJAX, Flash, Flex | No Comments »
Entries (RSS)
and