Funny aspects of HTML5 vs Flex/Flash

This is when I was presenting a flex session at BarCamp, I found so many
questions on HTML5 vs. Flex. Then the idea to create a blog post generated.
That does not mean that I was not aware about these things; I was just trying
to keep myself away from this.

When you will search HTML5 vs. Flex on the web there are so many articles
you will find discussing this hot topic. You may argue that what so funny about
that of courses it’s a hot chatter.

Here what I found most of the topics are written by people who don't like
Adobe, Flex or Flash for any reason. They may like Adobe's rival products; they
may be jealous or even without any reason. Simply put they just hate Adobe
(Steve Jobs’ relatives). From the first paragraph they all will start predicting how and when HTML5
will doom flash (some have mentioned exact date). Here is how most of the
articles look like.

Now HTML5 is in the market and it will just kill flash, flex and Adobe (seems
like HTML5's only aim). All enterprises are considering sifting to HTML5 in
future and they can read every company's CEO's mind.
They have provided some funny comparisons about flex and HTML5.

Video:
Though flash player has some advantages like streaming, full screen option,
over HTML5 in future HTML5 will have all those capabilities and when the future
will come, God knows.

UI Controls:
In this case Adobe gets full credit for having a rich set of basic and non basic
components but some people are working on it for HTML5. So should start working
on HTML5.

Browser compatibility:
Now only one or two browsers are supporting HTML5, it has 5% penetration where
flash player has 98%. Other browsers (one or two names) are working on it. so
by 2022 you will find 95% of presence of HTML5. So go for HTML5 for long term
applications from now and be ready for 2022.

Plug-in vs. Open standard:
especially they dedicated more lines to this comparison as flash player need to
be installed in order to run .swf file. So dear developers forget about other
benefits you are getting like bitmap manipulation, vector and 3d graphics,
desktop applications, flash builder features and jump into HTML% code base.

Proprietary
Flash player and flex are Adobe's proprietary products. so what if in future
Adobe will run out of money or what if all employees of Adobe will die in soccer
crash, etc. So leave flash from now and join HTML5.

Other comparisons are also there, however I have limited time and space. (I
may add some when I have time).

In the conclusion for every HTML5 feature they have mentioed you will find a arrow mark towards
future. They are expecting that in future Santa Claus will give everythig to HTML5 and till then Adobe will sit ideal. One thing I
like about them that they all are unconsciously admitted that flex/flash has so
many advantages over HTML5. Now HTML5 has only video and audio tag which flash player introduced 10
years back. and they are thinking that those things are sufficient to irreverent
flash from market.

One thing I forget to mention that all the authors consider Steve Jobs as
there God, messiah. In every article Steve Job's comment on flash is common
(like god's message). With their own made stories because they thinks they are
god's messengers. Their main argument to the developers that if Steve Job
didn't allow flash on iphone and ipad (for whatever reason, may be Adobe's guard
didn't allow him to enter into Adobe's lab or may be someone in Adobe
misbehaved him) you have no right to even think about flash, flex and hence
Adobe and what he will choose every body must follow that.
For HTML5 lovers sorry, I am biased, its only for fun, Enjoy.

Cairngorm 3 Example

Publishing Cairngorm 3 Adobe tries to keep itself away from frameworks battle. Cairngorm 3 is an architecture which should be followed with one IOC ( Inversion Of Control) framework present in market. There are so many IOC frameworks available like Parsley, Swiz, RobotLegs and Spring In Actionscript are some of them. Again its a tough task to choose one IOC frameowrk as each one has its own advantages. One of the Advantage of Cairngorm 3 is it helps to write test driven projects.

Alongside of Cairngorm 3 Adobe published some libraries to use if someone thinks its necessary for the project. One may not use a single library and still follow Cairngorm 3. Some of the Libraries supports Parsley (IOC) framework. Yes Parsley is a mature framework (But what if some better frameworks will come in future, will Adobe support them all...oh, thats a different topic).

When I was trying to jump to Cairngorm 3, I found that Adobe docs are not clear enough to start. I didn't find much examples. Here I developed a simple example in Cairngorm 3 and Parsley 2.3.0. code is not well optimized. The original code was written by Joel Hooks to show a Parsley example. Here you can find more in the blog post. You can download the source code of my project here.

Hope this will help others to start Cairngorm 3.
Other examples you can find here.

Adobe Cairngorm 3 Simple Sample application explained.

Column or Bar Chart Item Width

Flex has Column and Bar charts which visualizes data in rectangular shapes.
To change the width of items flex provides two styles.
For column chart those are "columnWidthRatio" and "maxColumnWidth" of Number type.

columnWidthRatio specifies a ratio of wide to draw the columns relative to the category width,
as a percentage in the range of 0 to 1.
A value of 1 uses the entire space. The default value is 0.65.

maxColumnWidth specifies how wide to draw the columns, in pixels.

The actual column width used is the smaller of these two properties
Clustered columns divide this space proportionally among the columns in each cluster.

As width of the item depends on smaller of the two I kept one property constant and assigned the maximum value.
i.e. columnWidthRatio=1; Now one can assign any Number to the maxColumnWidth according to the requirement.

For Bar chart the styles are "barwidthRatio" and "maxBarWidth".

Datagrid with Random Cell Colors

Flex has rich component sets having a lot of properties and styles to use according to our requirement. Even if we don't get our requirement, we can easily extend a component and add our stuffs to get the result. When It comes to give each cell a random background color or different background color I have extended a Datagrid component and overridden the protected function drawRowBackground().

By default flex Datagrid draws each row with same color from alternatingItemColors. We can use ItemRenderer to fulfil our job, however I think this is an easier trick.

• Custom component extended from Datagrid
• overrides the drawRowBackground() function to add random color.

               override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, 

 height:Number, color:uint, dataIndex:int):void

{

// used the DisplayObject instead of ListBaseContentHolder because that is excluded

var disObj:DisplayObject = s.parent;

var background:Shape;

var redBias:Number = 0xFF;

var greenBias:Number = 0xFF;

var blueBias:Number = 0xFF;

if (rowIndex < s.numChildren)

{

background = Shape(s.getChildAt(rowIndex));

}

else

{

background = new FlexShape();

background.name = "background";

s.addChild(background);

}

background.y = y;

// Height is usually as tall is the items in the row, but not if

// it would extend below the bottom of listContent

var height:Number = Math.min(height,

disObj.height -

y);

var g:Graphics = background.graphics;

var xCoord:Number = 0;

var numColumns:int = this.columns.length; // number of columns

g.clear();

/* this will loop for no of columns and generate a random color

* x Coordinate increases as column no increases*/

for (var i:int=0; i < (numColumns); i++)

{

var ct:ColorTransform = new ColorTransform(1, 1, 1, 1, 

Math.random() * redBias, Math.random() * greenBias, Math.random() * blueBias);

g.beginFill(ct.color, getStyle("backgroundAlpha"));

g.drawRect(xCoord, 0, unscaledWidth, height);

xCoord += DataGridColumn(this.columns[i]).width;

g.endFill();

}






Now as the basic things done we can modify it according to our requirement.