FEED Validator

for Atom and RSS and KML

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

line 15, column 48: Email address is missing real name [help]

        <managingEditor>anirudh@anisk.8bit.co.uk</managingEditor>
                                                ^

line 16, column 43: Email address is missing real name [help]

        <webMaster>anirudh@anisk.8bit.co.uk</webMaster>
                                           ^

line 155, column 0: description should not contain iframe tag (2 occurrences) [help]
```
<iframe title="AdobeTV Video Player" width="480" height="296" src="http://tv ...
```

line 293, column 37: description should not contain relative URL references: ../imgs/reversedebug.jpg (13 occurrences) [help]

 (905 Words, CategoryProgramming)]]> </description>
                                     ^

line 1635, column 0: Missing atom:link with rel="self" [help]
```
</channel>
```

Source: http://anirudhsasikumar.net/blog/weblog.xml

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="../rss.xsl"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>Anirudh Sasikumar</title>
<link>http://anirudhsasikumar.net/</link>
<description>Anirudh Sasikumar's Blog</description>
<language>en-us</language>
<copyright>Copyright 2004 - 2011, Anirudh Sasikumar</copyright>
<generator>Emacs Wiki Blog (ewb) 0.4</generator>
<docs>http://blogs.law.harvard.edu/tech/rss</docs>
<ttl>600</ttl>
<managingEditor>anirudh@anisk.8bit.co.uk</managingEditor>
<webMaster>anirudh@anisk.8bit.co.uk</webMaster>
<lastBuildDate>Fri, 16 Dec 2011 12:20:02 +0530</lastBuildDate>
<item>
<title>Using the new AIR 3 APIs with an old Flex 4 SDK</title>
<link>http://anirudhsasikumar.net/blog/2011.12.16.html</link>
<description><![CDATA[Once you manually <a href="http://kb2.adobe.com/cps/495/cpsid_49532.html">overlay a new AIR SDK</a> over a Flex SDK, there are a
couple of things that you need to do to use the new APIs. Flex 4.5 has
a compiler option known as swf-version which is required to be set if
you want to use new AIR/Player APIs in addition to bumping the
namespace version in your application descriptor. What if you wanted
to use the new AIR 3 APIs with an SDK older than 4.5? In my case, I
wanted to move to <a href="http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/JSON.html">native JSON decoding</a> in a project that uses the Flex
4.0 SDK.


It is really simple, just use -target-version=13 in the additional
compiler arguments. Use -swf-version if you are on Flex SDK 4.5 or
higher.

<h2>Step by Step</h2>

Once you overlay the new AIR 3 SDK over the Flex 4 SDK:


1) Update your application descriptor file to the new version:

<pre class="fontlock">
<application xmlns="http://ns.adobe.com/air/application/3.0">
</pre>

2) Set target player in additional compiler arguments:

-target-player=13 

This compiler option basically changes the data written to the SWF
file (the first few bytes of a SWF). Both the namespace version and
swf version in the file is checked before allowing new APIs to be used.


The symptoms you see when you try to use the new APIs without changing
the descriptor version and target-version are not directly linked to
the problem: You get a runtime Verify Error and the compiler not
detecting this at compile-time just adds to the worry.

<h2>Useful Hint</h2>

If you use TLF, updating your namespace to 3.0 gives your fonts a much
better look.

(286 Words, CategoryFlex)]]> </description>
<pubDate>Fri, 16 Dec 2011 11:56:37 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.12.16.html</guid>
</item>
<item>
<title>Reverse Debugging with Causal Analysis</title>
<link>http://anirudhsasikumar.net/blog/2011.12.15.html</link>
<description><![CDATA[Incremental innovation is hard, not impossible. I think I've come up
with something that is both useful and not already implemented
elsewhere. The Internet might prove me otherwise, but I'm
personally incredibly excited about this since I've always wanted to
do something that is non-trivial and useful for developers.


Imagine you're debugging and a breakpoint hits. Instead of stepping
forward, you can step backward. You can position your cursor at a
line of code and see how you reached that line. This is more than a
stack trace; it is a causal analysis report listing only lines of code
that played a part in execution reaching that point (lines of code
with if, switch, break, continue, method call and event handling
statements<a id="fnr.2" href="#fn.2">2</a> that affected control flow).


Looking at the list in the report, you can quickly spot an item that
shouldn't be on it to determine where your control flow logic went
wrong.


The second part: you can highlight a variable in the editor and see
all lines of code where the variable was modified till the breakpoint
was hit. I suspect this part is not that unique.


There's a video further down that should help clarify what I mean.


Before that, let me tell you what this is not:

<ul>
<li><a href="http://www.gnu.org/software/gdb/news/reversible.html">Reverse step in GDB</a> which actually executes backward. (This is
built on top of the "reverse debugging" concept).
</li>
<li><a href="http://blogs.msdn.com/b/ianhu/archive/2009/05/13/historical-debugging-in-visual-studio-team-system-2010.aspx">Intellitrace or Historical debugging</a> in Visual Studio 2010. (Though
I added this as well to my prototype).
</li>
<li><a href="http://www.cs.cmu.edu/%7eNatProg/whyline.html">Whyline debugging</a>.
</li>
<li><a href="http://help.eclipse.org/indigo/topic/org.eclipse.jdt.doc.user/reference/views/debug/ref-droptoframe.htm">Drop to Frame</a> in Eclipse.
</li>
</ul>

I demoed this on stage at <a href="http://max.adobe.com/">MAX 2011</a> where I had <a href="http://en.wikipedia.org/wiki/Rainn_Wilson">Rainn Wilson</a> constantly
try to faze me (all in good faith<a id="fnr.3" href="#fn.3">3</a>):


<iframe title="AdobeTV Video Player" width="480" height="296" src="http://tv.adobe.com/embed/816/11416/" frameborder="0" allowfullscreen scrolling="no"></iframe>


<img src="../imgs/reversedebug.jpg" alt="Reverse Debugging with Causal Analysis" />


Apart from causal analysis, one more piece was shown at MAX (and in
the <a href="tv.adobe.com/watch/max-2011-sneak-peeks/max-2011-sneak-peek-reverse-debugging-in-flash-builder/">video above</a>):

<ul>
<li>Generate a trace dump which can then be used to do post-mortem
analysis (reverse debugging and all that jazz) of the application.
This is exactly like Visual Studio's Intellitrace or Historical
debugging.
</li>
</ul>

What I'm excited about is the causal analysis and the variable
modification analysis (though implementing the other bits was also
fascinating).

<h3>Developer Reaction</h3>

I was floored by the reception this received, the party after MAX
Sneak Peek was amazing to say the least. It was hard to be the only
code related demo among magical photoshop and 3D video demos. Cheers
to all the Flex and Flash developers who congratulated me personally
and to all those were curious enough to ask me how it was done (even
though I might not have answered your question, trust me when I tell
you, I wanted to). I appreciate it.

<h3>Meta (or How I came up with this)</h3>

My work at Adobe as a developer gives me access to the source code of
an IDE with code completion and refactoring support (Flash Builder)
and a virtual machine (AVM) with debugging capability, the flash
player. I work on the debugger, so I'm always looking out in this
area. I started doing this in my spare time, when I was not working
on bugs or a feature.


I initially implemented reverse debugging in Flash Builder/flash
player just because I was frustrated with having to reset breakpoints
and restart if a breakpoint was set too far ahead. I had read the
original <a href="http://www.gnu.org/software/gdb/news/reversible.html">gdb article</a> via slashdot long ago so I knew it should be
possible. Implementing it was a challenge, time was always against me.


Seeing Reverse debugging work, the other pieces just sort of came to
me while I was trying to sleep that night. I was awake up all night
thinking if I would be able to do it or not and if I'm crazy to be so
excited about it. From the next day on, I worked continuously to get a
prototype up. It is hard to work on something when you're not really
sure if it will work or not, but the feeling you get when it finally
starts working is inexplicable.

<h3>When is it shipping?</h3>

I'm glad that you're interested, I can't disclose anything about that
now.

<h3>Why are you writing this?</h3>

Several reasons:

<ul>
<li>Maybe this will help someone get an idea like I got this one.
Whatever it is, go do it even if it looks impossible. Like I said,
incremental innovation is hard. But not impossible.
</li>
<li>There have been only very few times<a id="fnr.4" href="#fn.4">4</a> when I've actually come
up with something worthy of being posted on Hacker news.
</li>
</ul>

<a href="http://news.ycombinator.com/item?id=3356619">Discuss this on Hacker News</a>


<hr />

[<a id="fn.1" href="#fnr.1">1</a>] I know for sure that I thought up of this by myself, but the world
being a big place, it might be more than possible that someone
either already thought about it or implemented it. 


[<a id="fn.2" href="#fnr.2">2</a>] There are way more cases than what is listed being considered.
That said, the report is always not perfect. 


[<a id="fn.3" href="#fnr.3">3</a>] He was nothing compared to the developer from the audience who
shouted that he got a boner. That is when I'm
going "Dude!" in the video. 


[<a id="fn.4" href="#fnr.4">4</a>] First time I considered it was when I worked on the seamless
client server debugging and automatic async/sync conversion
pieces (with other extremely talented engineers) demoed at MAX
2009 Sneak peeks. The second time was when I came up with
<a href="http://readefine.net/">Readefine</a> and the third time was when I built
<a href="2011.05.16.html">visual conditional breakpoints with a live design view</a> demoed at
MAX 2010 Sneak peeks. 

(905 Words, CategoryProgramming)]]> </description>
<pubDate>Thu, 15 Dec 2011 16:39:03 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.12.15.html</guid>
</item>
<item>
<title>Speaking at Adobe MAX 2011</title>
<link>http://anirudhsasikumar.net/blog/2011.09.23.html</link>
<description><![CDATA[I'm really excited to be speaking at <a href="http://max.adobe.com/">Adobe MAX 2011</a> about
<a href="http://bit.ly/nWGlbe">Flash Builder Tips and Tricks</a>. Drop in for an in-depth look at getting
the maximum out of Flash Builder. As a developer on the Builder
team who uses Builder quite a bit<a id="fnr.2" href="#fn.2">2</a>, I'm hoping that I will be able
to show you useful stuff that can help you become more productive
while understanding what is going on under the hood of the tool.


<img src="../imgs/max.jpg" alt="MAX Speaker" />


Of course, I also happen to sit next to and work with other brilliant
engineers in the Builder team. Couple this with stalking a lot on
<a href="http://forums.adobe.com/community/flash_builder/using_flash_builder">forums</a> and you might get what I'm hoping is a good collection of
tips.


Some other great Flex and Flash Builder related sessions to check out
at MAX:

<ul>
<li>Developing Flex Mobile Applications by <a href="http://www.webkitchen.be">Serge Jespers</a>.
</li>
<li>Flash Platform Roadmap: Flex, Flash Builder, Flash Player, AIR by
Scott Castle and <a href="http://andrewrshorten.wordpress.com/">Andrew Shorten.</a>
</li>
<li>What's new in Flash Builder 4.5 and later by <a href="http://www.adrocknaphobia.com/">Adam Lehman</a>.
</li>
<li>How to Extend Your Mobile AIR Applications Using Native Extensions
by <a href="http://blogs.adobe.com/simplicity/">Oliver Goldman.</a>
</li>
<li>Working with AIR Native Extensions by Brijesh Patel.
</li>
<li>Flash Builder and Flash Catalyst Sitting in a Tree by Jacob Surber.
</li>
</ul>

See you there!


<hr />

[<a id="fn.1" href="#fnr.1">1</a>] I've worked mostly on debugging, compiler integration,
Eclipse integration. 
[<a id="fn.2" href="#fnr.2">2</a>] <a href="http://readefine.anirudhsasikumar.net/">Readefine</a> is topping the download.com <a href="http://download.cnet.com/Readefine-Desktop/3000-2164_4-10976389.html">Newsreaders and RSS readers</a>
category.

(227 Words, CategoryFlex)]]> </description>
<pubDate>Fri, 23 Sep 2011 14:47:45 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.09.23.html</guid>
</item>
<item>
<title>Magazine Layout and Mark these as Read</title>
<link>http://anirudhsasikumar.net/blog/2011.07.26.html</link>
<description><![CDATA[Stranded in office late night due to heavy rain, I got bored and wrote
a new layout for
<a href="http://readefine.anirudhsasikumar.net/">Readefine</a>. Multiple
articles show up in a grid, but there are articles that drop
vertically to span across and articles that grow wide to two columns
or more. Articles that are small may take up only the necessary space.
Empty space should be minimal. This layout was not very hard to do,
but getting the right performance was not easy. But it was gratifying
to see the same app up and running on a tablet with no code changes.

<div class="imgalign"><a
href="http://readefine.anirudhsasikumar.net/"><img src="../imgs/readefine_magazine_400.png" alt="Readefine Magazine Layout" /></a></div>

I finished the layout that night, but took around four days to tune
performance. The good thing about this is that I know more about
TextLine and Flash Text Engine now. The bad thing is that I went
home at midnight that day.


Try it out by downloading <a href="http://readefine.anirudhsasikumar.net/">Readefine Desktop 2.0</a>.

<h2>Mark these as Read</h2>

There's a very nifty feature in the Android Google Reader app. If you
scroll through headings of your articles, a "Mark these as Read"
button appears allowing you to mark all articles till the current one
read.


I loved this feature. But as usual, scrolling is not my thing, so
implemented the same concept in Readefine but with pagination. A page
with multiple articles is shown. If interested, you can read an
article in depth. Or you can "Mark these articles" as read and
move to the next set. Just tap Space.

<h2>Tablet trials</h2>

I re-packaged the SWF as is for Android and tried it out on a Motorola
Xoom tablet. Magazine layout took around 30 - 50 seconds to lay out.


I tweaked with the amount of data I pre-fetch, process and cache.
Layout time came down to 10 seconds. This is for around 8 - 10
articles being displayed with a total of 15 articles processed and
ready for layout all in Actionscript.


That was impressive. Minimal code changes (constants in my singleton
class) and I'm up and running on an Android tablet.


Of course, I need to make a lot of design changes for the Tablet form
factor, but this was very encouraging for about an hour of effort.


I'm not releasing the tablet version till I add some touch
functionality and get the experience right.

<h2>Future of magazine layout</h2>

Tablet. Performance. And better elimination of empty space. Since this
is a hobby, expect random infrequent updates.


<hr />

[<a id="fn.1" href="#fnr.1">1</a>] Caching TextFlow objects when you have custom text containers
is not very straight-forward. Neither is TextLine recycling.

(431 Words, CategoryFlex)]]> </description>
<pubDate>Tue, 26 Jul 2011 20:07:46 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.07.26.html</guid>
</item>
<item>
<title>Faster Flex Compilation with Flash Builder 4.5</title>
<link>http://anirudhsasikumar.net/blog/2011.06.02.html</link>
<description><![CDATA[The Flex 4.5 SDK compiler is slightly faster and more conservative
about memory compared to its previous version. There are a couple of
small changes that a developer can make to speed up compilation. One
of them involves a new compiler option and others are related to
organizing code in your project and can be leveraged by customers on
the 4.0 SDK as well.

<h3>The New Compress Option (non-mobile projects only)</h3>

SWF files can be compressed or uncompressed. SDK 4.5 exposes a
compiler option to control whether the output SWF is compressed or
uncompressed. Try setting <code>-compress=false</code> in
Project properties -> Flex Compiler -> Additional Compiler arguments.

<div
class="imgalign"><img src="../imgs/compressflex.png" alt="Using the compress compiler argument" /></div>

Before you go ahead and set this, note the caveats:

<ol>
<li>Flash Builder automatically sets this option for Mobile projects
(and removes it on an Export Release build).
</li>
<li>If you set the option, you'll have to remove the option before
exporting a release build unless you are fine with 2x - 10x increase
in SWF size.
</li>
<li>Strangely, we found Flex runtime performance implications when an
uncompressed SWF was generated. This requires more investigation, but
it is something that must be kept in the back of your mind and the
reason why this is not the default behavior.
</li>
</ol>

The numbers: 2239ms before and 1734ms after (On a large customer
project when making an incremental change of width in MXML). That is
roughly 22%, but your mileage will vary depending upon the actual
contents of your project. Normal projects are unlikely to give this
drastic an improvement in compilation speed.

<h3>Move Embedded Assets into a Library Project</h3>

This is very important especially if you use embedded fonts. This will
save a lot of time and reduce your overall heap memory consumption.
Here's how:


1) Create a library project in Flash Builder.


2) Create an Actionscript class in this project and put your
embedded font and image declarations there:

<pre class="fontlock">
package
{
public class TestProjectAssets
{
[Embed(source="fonts/MySuperDuperFont.otf",
fontFamily="SuperDuperFont",
mimeType="application/x-font",
embedAsCFF="true")]
private const SuperDuperFont:Class;
[Embed(source="assets/mainMenu.png")]
public static const mainMenuImg:Class;
}
}
</pre>

3) Copy over the fonts and assets into the src directory.


4) In your main project, add the library project you created as a
reference in Project Properties -> Flex Build Path -> Add Project.


5) In the main MXML file of your project, declare an instance of the
class you created in the library project. This is so that the class is
linked in to your project and fonts and assets are available for use
in your main project:

<pre class="fontlock">
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import TestProjectAssets;
private var projectAssets:TestProjectAssets;
]]>
</fx:Script>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global
{
font-family: SuperDuperFont;
color: white;
fontAntiAliasType: advanced;
}
</fx:Style>
</s:WindowedApplication>
</pre>

Image instances in TestProjectAssets are static so that you can easily
refer to them from any MXML file.


The numbers: 1368ms before and 1255ms after (on change of width in a
test project). That is about 8.26%, but the improvement will increase
proportionally with the amount of embedded assets and fonts.

<h3>Moving your CSS file to a Library Project</h3>

Okay, I'm stretching facts a bit here. This doesn't save you a lot of
compilation time. But it is nevertheless a neat thing to do. The
biggest advantage is that CSS files are separated out.


Here's how you do it:

<ol>
<li>Create a library project.
</li>
<li>Create a CSS file named defaults.css in the src directory.
</li>
<li>Go to Project Properties -> Flex Library Build Path -> Assets.
Expand src and check defaults.css.
</li>
<li>In your main project, add the library project you created as a
reference in Project Properties -> Flex Build Path -> Add Project.
</li>
</ol>

Now defaults.css will be automatically applied to your main project
without having to add any fx:Style tags to your application MXML file.


You can combine this with the second approach mentioned above though
keep in mind that embedding fonts via font-face will not work if you
declare that in defaults.css. Similarly if you use the
background-image style in defaults.css, you won't get as much
performance boost compared to moving it an Actionscript class.

<h3>Note on the Numbers</h3>

Numbers reflect the time taken for incremental compile only. A simple
MXML attribute like width is changed and numbers are recorded by
repeating this five times.

(770 Words, CategoryFlex)]]> </description>
<pubDate>Thu, 02 Jun 2011 11:06:28 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.06.02.html</guid>
</item>
<item>
<title>Debugging Flex or Flash applications running on Google Chrome and Firefox 4</title>
<link>http://anirudhsasikumar.net/blog/2011.05.17.html</link>
<description><![CDATA[Google Chrome bundles a version of the Flash player plug-in that it
keeps up-to-date. Firefox 4's <a href="https://developer.mozilla.org/en/Plugins/Out_of_process_plugins/The_plugin_hang_detector">plugin hang detector</a> stops flash player
when it detects inactivity. Read on to see how these challenges can
be overcome when debugging flex/flash applications with Flash Builder.

<h3>Google Chrome</h3>
<ul>
<li>Release version of the player is bundled and that gets priority over
the debug player.
</li>
</ul>

Disable the bundled flash player by following the instructions at
<a href="http://www.google.com/support/forum/p/Chrome/thread?tid=2b2821a6b7e9e3e5&hl=en">the official Chrome help forum</a> or <a href="http://polygeek.com/2780_flex_debugging-with-google-chrome-and-flash-player-10-1">polygeek.com</a>.

<ul>
<li>Plug-in hang detector kicks in and asks if you want to stop flash
player when at a breakpoint in Flash Builder.
</li>
</ul>

This is how you can disable the hang monitor:

<ol>
<li>In Flash Builder, open Window -> Preferences -> General ->
Web Browser.
</li>
<li>Hit "New", type in Chrome, point to the location of Google
Chrome<a id="fnr.2" href="#fn.2">2</a> and add <code>--disable-hang-monitor</code> in the "Parameters" field.
</li>
<li>Set the newly created Chrome as your browser. Note that this only
applies to Chrome starting up when no
<a href="http://www.mail-archive.com/chromium-dev%40googlegroups.com/msg08281.html">chrome windows are already running</a>.
</li>
</ol>
<div class="imgalign"><img src="../imgs/chrome_eclipse.png" alt="Flash Builder Google Chrome" /></div>
<h3>Mozilla Firefox</h3>
<ul>
<li>Firefox 3.6.6+ stops flash player after a short duration when at a
breakpoint.
</li>
</ul>

Disable the Firefox hang monitor by following these steps:

<ol>
<li>Type in about:config in the address bar and hit enter.
</li>
<li>Agree that you'll be careful.
</li>
<li>Type in dom.ipc.plugins.timeoutSecs. Change the value to -1.
</li>
<li>Restart Firefox.
</li>
</ol>

<hr />

[<a id="fn.1" href="#fnr.1">1</a>] Without offering a choice to the user unlike Google Chrome. 
[<a id="fn.2" href="#fnr.2">2</a>] This may be harder than it sounds. On the Mac, you
<a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=297273">cannot use the Browse button</a> and point to the app. Instead, you
have to type in the path to the actual binary -
<code>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</code>. On
Windows, the location of the binary can be deduced by looking at
the properties of the Google Chrome shortcut.

(305 Words, CategoryFlex)]]> </description>
<pubDate>Tue, 17 May 2011 12:30:33 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.05.17.html</guid>
</item>
<item>
<title>A Year on the Flash Builder Team</title>
<link>http://anirudhsasikumar.net/blog/2011.05.16.html</link>
<description><![CDATA[Last year, I moved into the <a href="http://www.adobe.com/products/flash-builder.html">Flash Builder</a> engineering team as a
developer. Working on a developer tool is fun and satisfying.
Especially when the work you do helps developers code faster and
easily build mobile apps. For example, take
<a href="http://www.adobe.com/devnet/flash-builder/articles/flashbuilder45-coding-enhancements.html">some of the coding productivity features</a> baked in Flash Builder 4.5,
there are some killer time-savers present in there.


Looking back, some events clearly stand out: seeing <a href="http://www.adobe.com/products/flex/mobile/">Flex mobile</a> come
alive with our one-click debug workflow, experiencing first-hand the
coding productivity features we built, presenting a sneak peek at
Adobe MAX 2010 and most exciting of all, to see Flex 4.5 and Flash
Builder ship.

<h3>Sneak Peek</h3>

Last October, I flew to Los Angeles to attend Adobe MAX. This was my
first MAX and I was completely blown away by the scale and most
importantly, by the passion people had for Adobe's products. The Flex
community is vibrant, alive and filled with talented people.


It was amazing to be given the opportunity to demo my prototype at the
MAX Sneak Peek<a id="fnr.3" href="#fn.3">3</a> to a crowd of over four-thousand people at Adobe MAX
2010, Los Angeles. A recording of the demo is up on Youtube:


<iframe width="425" height="349" src="http://www.youtube.com/embed/dJT3PUHloJc" frameborder="0" allowfullscreen></iframe>


This is the biggest audience I've ever presented to and it was
nerve-wracking backstage especially after hearing the crowd roar for
the preceding sneaks: Flash to HTML5 and Pixel bender 3D. I almost had
a heart-attack when the application failed to launch at the end.
Control + Z to undo my mistyping saved the demo.

<h3>The Future</h3>

Looks incredibly exciting. Expect useful posts<a id="fnr.4" href="#fn.4">4</a> about Flex and Flash
Builder in the near term.


<hr />

[<a id="fn.1" href="#fnr.1">1</a>] Code templates<a id="fnr.2" href="#fn.2">2</a>! With dynamic variable support! You can find the
complete list of new features in Flash Builder 4.5 at this <a href="http://www.adobe.com/devnet/flash-builder/articles/whatsnew-flashbuilder-45.html">devnet page</a>. 
[<a id="fn.2" href="#fnr.2">2</a>] This makes my hoard of MXML/AS <a href="http://code.google.com/p/yasnippet/">yasnippet</a> templates obsolete. 
[<a id="fn.3" href="#fnr.3">3</a>] For the un-initiated, a Sneak peek showcases technology with no
guarantees that it will make it into a product. Think of it as
ten engineers showing cool demos one after the other. 
[<a id="fn.4" href="#fnr.4">4</a>] Unlike this post which talks about something personal that
happened a long time ago.
 (362 Words, CategoryFlex)]]> </description>
<pubDate>Mon, 16 May 2011 16:46:40 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.05.16.html</guid>
</item>
<item>
<title>Flex 4 Wizard Component with Progress Indication and Move Effects</title>
<link>http://anirudhsasikumar.net/blog/2009.12.10.html</link>
<description><![CDATA[I love the Insuricorp demo. The wizard in that has two distinguishing
features. A subtle animated progress indication that not only denotes
the current step, but also the fact that you are progressing. And the
other thing - a neat move effect between each step so that it looks
like the next step is sliding in from the right. I built a Flex 4
component that does exactly this. Use it similar to our good old Flex
3 view stack and voila!

<h2>Wizard Component</h2>

Only a demo (view source enabled) can do it justice. Click the image
below to try it out:

<div class="imgalign"><a
href="http://anirudhsasikumar.net/examples/flex4wizard/"><img src="../imgs/flex4wizard.png" alt="Flex 4 Wizard Component" /></a></div>

You can also <a href="http://anirudhsasikumar.net/examples/flex4wizard/Flex4Wizard.fxp">download the FXP</a>. The source is licensed under MPL 1.1.


Try clicking next and previous pretty fast. The move effects play in
parallel so that there is a kinetic feel to it.

<h3>Usage</h3>

First, declare the step names:

<pre class="fontlock">
[Bindable]
private var wizardViews:ArrayCollection = new ArrayCollection(
[new WizardStepVO({name:"PICK PLAYLIST", state: "selected"}),
new WizardStepVO({name: "SOURCE", state: "normal"}),
new WizardStepVO({name: "DESTINATION", state: "normal"})
]);
</pre>

Now declare the view elements of the wizard as a child to the
WizardPanel tag:

<pre class="fontlock">
<wizard:WizardPanel id="wizard"
change="trace('step: ' + wizard.currentStepTitle)"
wizardViews="{wizardViews}">
<steps:PickPlaylist width="100%" top="40" bottom="30" />
<steps:PickSource width="100%" top="40" bottom="30" />
<steps:PickDestination width="100%" top="40" bottom="30" />
<steps:Finish width="100%" top="40" bottom="34" />
</wizard:WizardPanel>
</pre>

The only difference from a view stack is that since
GraphicElements do not have a "label" property, you have to
provide the step name via a <code>wizardViews</code> property. Internally, the
children passed to the component gets added to a Group and its
visibility is toggled based on the current step.

<h3>Effects</h3>

Pressing "Next" causes the next step to slide in and the current step
to slide out. Then the progress indicator grows to cover the new step
while the color of the indicator changes from white to blue. I used
the new Flex 4 AnimateColor effect for this.


The move effects work in parallel so that multiple next / previous
does not cause abrupt changes.

<h2>Conclusion</h2>

This was my first Flex 4 component. I had forgotten about it till I
was cleaning up my Eclipse workspace. Let me know if you guys find it useful.

(377 Words, CategoryFlex)]]> </description>
<pubDate>Thu, 10 Dec 2009 18:08:10 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2009.12.10.html</guid>
</item>
<item>
<title>Flex 4 Component: Navbar with Scoped Search, Vimeo Style</title>
<link>http://anirudhsasikumar.net/blog/2009.12.09.html</link>
<description><![CDATA[I came across this great post by Theresa Neil: <a href="http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/">30 essential controls</a>
for RIA design. I liked control twenty-three in particular: Scoped
Search. So I cooked up a Flex 4 navigation bar (vimeo style) that has
scoped search and is completely data-driven and customizable via CSS.
It does not use any images; everything is drawn. Along the way, I
built some potentially re-usable things like a dotted line
graphic element and a vertical separator layout.

<h2>Inspiration</h2>

<a href="http://vimeo.com">Vimeo.com</a> is beautifully designed. I noticed the beautiful top
navigation header only when it was referenced from Theresa's article.
The blended curves are beautiful. It is the "Scoped Search" part that drove me
to build this component.

<h3>What is Scoped Search?</h3>
<div class="imgalign"><img src="../imgs/flex4-scoped-search-400.png" alt="Flex 4 Scoped Search" /></div>

According to Theresa:

Scoped search like ITunes, allows for the optional selection of a category before entering free form search text... 
<h2>Demo</h2>

Click the image below to run the demo (view source enabled, the source
is under MPL 1.1):

<div class="imgalign"><a href="http://anirudhsasikumar.net/examples/scopedsearch/"><img src="../imgs/flex-scoped-search-demo.png" alt="Flex 4 Navbar with Scoped Search Vimeo Style" /></a></div>

You can also <a href="http://anirudhsasikumar.net/examples/scopedsearch/ScopedNavigation.fxp">download the FXP</a>.


The demo lets you change any color at runtime. These colors are passed
in via CSS. In a real use-case, you could also change the data
displayed at runtime.


On mouseover over a top level item, a popup menu is displayed. This
menu stays open in the case of scoped search to allow changing the
selected item in the list while displaying a changing prompt text if
the user has not entered anything.


Events dispatched are shown in the bottom.

<h2>Using Navbar</h2>

To get started, declare the data to be set:

<pre class="fontlock">
[Bindable]
private var navData:ArrayList = new ArrayList(
[{label: "Log In"}, {label: "Explore", menu: explorePopup},
{label: "Help", menu: popupData2}]);
private var explorePopup:ArrayList = new ArrayList(
["Categories", "Groups", "Channels",
"Toys"]);
[Bindable]
private var searchCategories:ArrayList = new ArrayList(
["Search Videos", "Search People", "Search Channels",
"Search Forums"]);
</pre>

Assign them via the dataProvider and searchDataProvider attributes:

<pre class="fontlock">


<controls:MainNavigation top="0" right="150"
brand="foobar"
dataProvider="{navData}"
searchDataProvider="{searchCategories}"
search="trace('searching for ' + event.searchText+' in '+event.selectedItem)"
navselect="trace('selected ' + event.selectedItem)"
/>
</pre>

The search event is fired when a scoped search is performed (by
clicking on the magnifying glass or pressing enter). navselect is
fired when a menu item is clicked.

<h2>Components that come along with Navbar</h2>

1) There is a new GraphicElement, DottedLine, which you can
use in Flex 4 the same way as Line, Rect, etc. DottedLine uses a
bitmap fill to draw the dots (thanks to <a href="http://www.warmforestflash.com/blog/2009/01/as3-dotted-line-class/">warm forest</a>).


2) VerticalSeparatorLayout: If you notice the List in the popup
menu, the separator (dotted line) is not drawn for the last element.
This is done via a custom layout that makes the separator of the
last item in the List invisible.


3) ScopedDropDown: This is used to popup the menu (List). It is a
customized DropDownList which can stay open till it is
notified that it can be closed.


4) Magnifying Glass: Not exactly a component, but an ellipse and a
line that looks a lot like a search magnifying glass<a id="fnr.2" href="#fn.2">2</a>.

<h2>Flex 4 Observations</h2>

Some points<a id="fnr.3" href="#fn.3">3</a> I noted while developing the component:

<h3>Rect</h3>

The Rect primitive can support setting a corner radius X, Y property on an
individual corner via: bottomLeftRadiusX, bottomRightRadiusX,
topLeftRadiusX, topLeftRadiusY, etc.


That said, for the blended look in the popup list, I had to cheat and
draw two rectangles: one normal and another filled with background
color and set with corner radius. Maybe there is a blend mode that can
erase whatever is underneath it of a particular color?

<h3>CSS</h3>

In CSS, you use namespace|component. This is expanded to the
fully qualified name of the component. This is important to know if
you want to modify a style declaration at runtime (like in the demo).
For example, if you wanted to change navFill defined in the CSS
declaration container|NavContainer:

<pre class="fontlock">
StyleManager.getStyleDeclaration('net.anirudh.container.NavContainer').
setStyle('navFill', navfill.selectedColor);
</pre>

The syntax in Flex 4 for CSS is incredibly powerful. For example, this
is how the brand label is changed via CSS:

<pre class="fontlock">
/* In NavContainer change Label with id brandLabel */
container|NavContainer s|Label#brandLabel
{
fontSize: 18;
}
</pre>
<h3>Skin</h3>

Any style defined for the component is available in the skin.
GraphicElement's don't support CSS, so you could bind properties
via <code>getStyle()</code> calls.


Override <code>updateDisplayList()</code> if you want to check a CSS property and
do something like make a Rect invisible in the skin.

<h3>GraphicElement</h3>

When you are building your own GraphicElement, you can access the
Graphics object via:

<pre class="fontlock">
//The base GraphicElement class has cleared the graphics for us.
(drawnDisplayObject as Sprite).graphics
</pre>
<h2>Conclusion</h2>

Developing with Flex 4 is sweet, sweet bliss. In my opinion, this is
the most well architected GUI framework out there.


<hr />

[<a id="fn.1" href="#fnr.1">1</a>] I'm certain this was never considered as a reason why people
would customize a layout. Nevertheless, it works beautifully with
minimal code. 
[<a id="fn.2" href="#fnr.2">2</a>] Yes, I know should have used an icon. But I wanted to be able to
change its color. 
[<a id="fn.3" href="#fnr.3">3</a>] Please do not consider any of these as hard and stead-fast rules.
These are simply my own observations.

(870 Words, CategoryFlex)]]> </description>
<pubDate>Wed, 09 Dec 2009 23:29:09 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2009.12.09.html</guid>
</item>
<item>
<title>Black Glass - Flex 4 Theme</title>
<link>http://anirudhsasikumar.net/blog/2009.11.25.html</link>
<description><![CDATA[I took a leap of faith. I tried it out. I built a black Flex 4 theme
using Flash Catalyst alone. Last week, I watched <a href="http://blog.flexgeek.in">Harish</a> build a Flex 4
<a href="http://blog.flexgeek.in/2009/11/somethinglikemac/">theme</a> using Catalyst. Leaning over his shoulder, I gaped on while he
effortlessly moved rectangles and ellipses around to build a dialog
window that looks fantastically close to the "Display Properties"
dialog on the Mac. I was so impressed (anyone who has watched Harish
demo Catalyst will be) that I took a leap of faith. Read on for the
details and some Catalyst tips.

<h2>Black Glass</h2>
<div class="imgalign"><a href="http://anirudhsasikumar.net/examples/blackglass/"><img src="../imgs/blackglass.png" alt="Black Glass Flex 4 Theme" /></a></div>

<a href="http://anirudhsasikumar.net/examples/blackglass/">Click here</a> to try it out.


You can download the code (FXP) <a href="http://anirudhsasikumar.net/examples/blackglass/blackglass.fxp">here</a>. This was tested with Flash
Builder 4 Beta 2 using the Flex 4 Beta 2 SDK.

<h3>Design</h3>

First a disclaimer: I'm not a designer or a UI expert; feel free to
bash me for my poor choice of colors. Doomed it may be, but I will
build an app using this theme.


I've always wanted some Flex theme to have that blue color along with
black. My fetish for the blue and black is evident in <a href="2006.07.12.html">Deskworld</a>:

<div class="imgalign"><img src="../imgs/deskworld-blue.png" alt="Deskworld Desktop" /></div>

I started working on the theme with only a simple concept, inspired
by the highlight part of a Button skin in Flex 4:


A line with <code>0xcccccc</code> color, 0.25 alpha at the top that leaves some gap
on both sides, another line below it with the same color but 0.07
alpha extending fully along the side. Similar setup below, but visible
only on mouse over. There's also two blue lines on the left and right
with 0.07 alpha. The bottom two lines turn blue on mouse down.

<h2>Flash Catalyst Tips</h2>

Amazing tool. All Flex developers should try it out to instantly see
how changes to properties and styles affect components without the
compile cycle in Flash Builder.


For example, a gradient stroke on an ellipse with the stop point set
at around 0.36 with alpha 0 is used to draw the highlight on top of
the thumb in the slider. This would have been hard to preview and
tweak around with in FB's design view.

<h3>Generated Code</h3>

There's some tweaking<a id="fnr.2" href="#fn.2">2</a> you have to do to Catalyst generated code so
that the components resize properly. Basically, take note of
hard-coded width or height numbers and convert them to use constraints
(left, right, top, bottom). This becomes painful when you have items
under a Group. So, you may want to "Ungroup" before importing the FXP
in Flash Builder 4.

<h3>CSS</h3>

A practice I've found useful: Strip out the properties applied to
individual components like <code>focusColor</code> and <code>skinClass</code> into a CSS file.
This way, a person will be able to use your skins just by dropping in
your CSS file.


For example, this is a portion of the CSS file I created for Black Glass:

<pre class="fontlock">
s|Button
{
focusColor: #0d103f;
skinClass: ClassReference("components.Button2");
fontFamily: "Inconsolata";
}
</pre>

You can choose to use my theme by simply putting in a Style tag:

<pre class="fontlock">

<fx:Style source="blackglass.css"/>
</pre>
<h2>Conclusion</h2>

Try out Catalyst. Flex 4 rocks.


<hr />

[<a id="fn.1" href="#fnr.1">1</a>] Normally, I would have used AS3 for this. 
[<a id="fn.2" href="#fnr.2">2</a>] Maybe, it is a beta thing?

(541 Words, CategoryFlex)]]> </description>
<pubDate>Wed, 25 Nov 2009 17:56:31 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2009.11.25.html</guid>
</item>
<item>
<title>Developing a Google Reader Client in Adobe AIR</title>
<link>http://anirudhsasikumar.net/blog/2009.11.04.html</link>
<description><![CDATA[Google Reader does not have an official API. However, <a href="http://www.niallkennedy.com/blog/2005/12/google-reader-api.html">Nial Kennedy</a> and
the project <a href="http://code.google.com/p/pyrfeed/wiki/GoogleReaderAPI">pyrfeed</a> have excellent documentation on it. I had
developed a Google Reader client in python that the
<a href="http://readefine.anirudhsasikumar.net/">web version of Readefine</a> uses. I needed to leverage the same AS3
code base and write an AS3 Google Reader client on top of it for the
<a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringid=16744&marketplaceid=1">desktop version</a>. I managed to do it in a day while ensuring a common
code-base for the AIR and Flex versions thanks to
<a href="http://anirudhsasikumar.net/blog/2008.08.25.html">conditional compilation</a>. This article explains Google Reader's API
along with the AS3 implementation and how it merged in with the
web-version.


Interestingly, there is AS3 code for Google Reader access in <a href="http://snackr.googlecode.com/">snackr</a>'s
code. I wrote my own though because I needed it to seamlessly merge
with my existing Flex code. Regardless, this is the screen-shot of how
Readefine Desktop looks with Google Reader access and all chrome
minimized:

<div class="imgalign"><a href="http://anirudhsasikumar.net/examples/readefine/readefine-air-maximum-reading.png"><img src="http://anirudhsasikumar.net/examples/readefine/readefine-air-maximum-reading-400.png" alt="readefined" /></a></div>

For more screen-shots, visit <a href="http://readefine.anirudhsasikumar.net/desktop.html">Readefine Desktop</a>.

<h2>Google Reader API</h2>

Google Reader is excellently architected. Its view in HTML and
Javascript is independent of the actual methods to get and update
Google Reader<a id="fnr.2" href="#fn.2">2</a>.


There are three main parts to the API: authentication, getting data
and updating data.


Kindly read the articles referenced in the first paragraph of the
article before proceeding. The information regarding the API here
augments that information.

<h3>Authentication</h3>

<a href="http://code.google.com/apis/accounts/docs/AuthForInstalledApps.html">ClientLogin</a> is what you have to use and it is well documented by
Google. You have to do an HTTP POST to a URL while setting the service
as <code>reader</code> and passing the username and password.


Ideally, an OAuth or AuthSub implementation would help third-party
applications to leverage Google Reader without having users enter
their precious skynet password into their application. Let us hope
Google releases that in the near future.

<h3>Getting Data</h3>

The flow for a Google Reader Client is as follows (after auth):


1) Get user info by asking <code>/api/0/user-info</code>.


2) Get subscription list. Each subscription contains a
"category" if the user had created folders. It also has a field called
<code>firstitemmsec</code> that denotes in milliseconds the time from which entries
for that feed should be picked up.


<code>firstitemmsec</code> initially stumped me until I added a new subscription. I
noticed that Google Reader has entries for a feed spanning back to a
month (probably -infinity). So the reader has to know to show you
articles only from the time you subscribed to a feed.


<code>ot</code> is the parameter that takes <code>firstitemmsec / 1000</code> when you are
fetching the reading list or a particular feed.


3) Get unread counts. The total will be with the feed id
<code>user/userid_obtained_in_step1/state/com.google/reading-list</code>. This has
an upper bound of 1000, so 1000 is always 1000+.


4) Get the reading list or a particular feed while being careful to
pass in the correct <code>ot</code>. Each article in the feed will have special
fields if it is read, starred, kept-unread, etc.


5) To get the next set of articles, pass in a "cont" GET parameter to
the call in 4.


Every now and then, you have to fetch unread counts because it changes
often depending upon the amount of feeds you are subscribed to.

<h3>Updating Data</h3>

Marking as read, star, like, share, etc. all fall into this category.
This is slightly more tricky than getting data because it involves a
token.


This is what I understood:


1) Get a token by posting to <code>/api/0/token</code>. Save the current timestamp.


2) Every API call that requires a token must be queued so that there
is only one outstanding call at a time.


3) Before making an update API call, check your saved timestamp to see
if it has been more than 20 minutes<a id="fnr.3" href="#fn.3">3</a>. If it has, get a new token,
then continue with the API call.

<h2>Google Reader Client in AIR</h2>

I have a ServiceLocator singleton class with methods like
<code>greaderGet()</code>, <code>greaderStar()</code>, etc. In that method, depending upon a
compilation variable, I either call the AIR code or my python server
side code.

<pre class="fontlock">
public function googleReaderUnreadCount():void
{
CONFIG::FLEX
{
var s:HTTPService = getGReaderService();;
var token:AsyncToken = s.send({a: 'c'});
token.addResponder(new GReaderCommand(GReaderCommand.GREADER_UNREAD));
}
CONFIG::AIR
{
greaderClient.getUnreadCount();
}
}
</pre>

Since I'm using an <a href="http://livedocs.adobe.com/flex/3/langref/mx/rpc/AsyncToken.html">AsyncToken</a>, I have a <code>GReaderCommand</code>, a class that
implements an <code>IResponder</code>. The command's <code>result()</code> method expects data
to be an <code>Object</code> that you normally get when resultFormat is "object" in
an <code>HTTPService</code>.


GReaderClient is the AIR class that talks to Google Reader using
a <code>URLLoader</code>. It takes in the parameters object that was passed to
HTTPService's send(). Each method knows its GReaderCommand type.
It then creates a map of requests to loader (for getting the
parameters) and a map of urlloaders to command.


After performing any API call to Google Reader, there is
a single common result handler that marshall's the response based on
how <code>GReaderCommand</code> expects it.

<pre class="fontlock">
private function handleReaderResultEvent(event: Event): void
{
var urlloader:URLLoader = event.target as URLLoader;
var req:URLRequest = clearFromQueue(urlloader);
var result:String = String(urlloader.data);
urlloader.removeEventListener(Event.COMPLETE, handleReaderResultEvent);
urlloader.removeEventListener(IOErrorEvent.IO_ERROR, handleReaderFaultEvent);
if ( !req )
return;
var gCommand:GReaderCommand = clearCommandFromQueue(req);
if ( gCommand )
{
marshallReaderResponse(gCommand, result);
}
}
</pre>

The marshallReaderResponse creates objects that GReaderCommand's
result() method expects which may be object or e4x. In the case of
object when the response from Reader is XML, I use an XMLDocument
along with a SimpleXMLDecoder. If the response from Reader is in
JSON, I parse it using <a href="http://code.google.com/p/as3corelib/">JSONDecoder</a> and build the appropriate object.


Creating an object from XML:

<pre class="fontlock">
xmlDecoder = new SimpleXMLDecoder(true);
try
{
xmlDoc = new XMLDocument(result);
}
catch(err:Error)
{
xmlDoc = null;
}
if ( !xmlDoc )
obj = xmlDecoder.decodeXML(xmlDoc);
</pre>

The marshall method finally calls the command's <code>result()</code> method with
the data.


Here is the full source for my <a href="http://anirudhsasikumar.net/examples/readefine/GReaderClient.as">GReaderClient.as</a>. It is incomplete
without GReaderCommand, but this you should serve you as a good
starting point in developing an Adobe AIR Google Reader client.


For more information on Readefine Desktop, visit <a href="http://readefine.anirudhsasikumar.net/desktop.html">readefine.anirudhsasikumar.net</a>.


<hr />

[<a id="fn.1" href="#fnr.1">1</a>] Since cross-domain requests are not allowed from flash player
unless explicitly allowed. 
[<a id="fn.2" href="#fnr.2">2</a>] Except for quickadd which seems to return HTML and JSON data in
the end in a script block. 
[<a id="fn.3" href="#fnr.3">3</a>] Time interval obtained after careless observation. Might be incorrect.

(1051 Words, CategoryAIR)]]> </description>
<pubDate>Wed, 04 Nov 2009 18:53:53 +0530</pubDate>
<guid isPermaLink="true">http://anirudhsasikumar.net/blog/2009.11.04.html</guid>
</item>
</channel>
</rss>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):

<a href="http://www.feedvalidator.org/check.cgi?url=http%3A//anirudhsasikumar.net/blog/weblog.xml"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//anirudhsasikumar.net/blog/weblog.xml

Home · About · News · Docs · Terms