Congratulations!

[Valid RSS] 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.

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

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet type="text/xsl" href="../rss.xsl"?>
  3. <rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/"
  4. xmlns:content="http://purl.org/rss/1.0/modules/content/">
  5.  
  6. <channel>
  7.        <title>Anirudh Sasikumar</title>
  8.        <link>http://anirudhsasikumar.net/</link>
  9.        <description>Anirudh Sasikumar's Blog</description>
  10.        <language>en-us</language>
  11.        <copyright>Copyright 2004 - 2011, Anirudh Sasikumar</copyright>
  12.        <generator>Emacs Wiki Blog (ewb) 0.4</generator>
  13.        <docs>http://blogs.law.harvard.edu/tech/rss</docs>
  14.        <ttl>600</ttl>
  15.        <managingEditor>[email protected]</managingEditor>
  16.        <webMaster>[email protected]</webMaster>
  17.        <lastBuildDate>Fri, 16 Dec 2011 12:20:02 +0530</lastBuildDate>
  18. <item>
  19.      <title>Using the new AIR 3 APIs with an old Flex 4 SDK</title>
  20.      <link>http://anirudhsasikumar.net/blog/2011.12.16.html</link>
  21.      <description><![CDATA[Once you manually <a href="http://kb2.adobe.com/cps/495/cpsid_49532.html">overlay&#32;a&#32;new&#32;AIR&#32;SDK</a> over a Flex SDK, there are a
  22. couple of things that you need to do to use the new APIs. Flex 4.5 has
  23. a compiler option known as swf-version which is required to be set if
  24. you want to use new AIR/Player APIs in addition to bumping the
  25. namespace version in your application descriptor. What if you wanted
  26. to use the new AIR 3 APIs with an SDK older than 4.5? In my case, I
  27. wanted to move to <a href="http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/JSON.html">native&#32;JSON&#32;decoding</a> in a project that uses the Flex
  28. 4.0 SDK.
  29.  
  30. </p>
  31.  
  32. <p>
  33. It is really simple, just use -target-version=13 in the additional
  34. compiler arguments. Use -swf-version if you are on Flex SDK 4.5 or
  35. higher.
  36.  
  37. </p>
  38.  
  39. <h2>Step by Step</h2>
  40.  
  41. <p>
  42. Once you overlay the new AIR 3 SDK over the Flex 4 SDK:
  43.  
  44. </p>
  45.  
  46. <p>
  47. 1) Update your application descriptor file to the new version:
  48.  
  49. </p>
  50.  
  51. <pre class="fontlock">
  52. &lt;<span class="function-name">application</span> <span class="variable-name">xmlns</span>=<span class="string">&quot;http://ns.adobe.com/air/application/3.0&quot;</span>&gt;
  53. </pre>
  54.  
  55. <p>
  56. 2) Set target player in additional compiler arguments:
  57.  
  58. </p>
  59.  
  60. <p class="verse">-target-player=13<br/></p>
  61.  
  62. <p>
  63. This compiler option basically changes the data written to the SWF
  64. file (the first few bytes of a SWF). Both the namespace version and
  65. swf version in the file is checked before allowing new APIs to be used.
  66.  
  67. </p>
  68.  
  69. <p>
  70. The symptoms you see when you try to use the new APIs without changing
  71. the descriptor version and target-version are not directly linked to
  72. the problem: You get a runtime Verify Error and the compiler not
  73. detecting this at compile-time just adds to the worry.
  74.  
  75. </p>
  76.  
  77. <h2>Useful Hint</h2>
  78.  
  79. <p>
  80. If you use TLF, updating your namespace to 3.0 gives your fonts a much
  81. better look.
  82.  
  83. </p>
  84.  
  85. (286 Words, CategoryFlex)]]> </description>
  86.      <pubDate>Fri, 16 Dec 2011 11:56:37 +0530</pubDate>
  87.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.12.16.html</guid>
  88. </item>
  89. <item>
  90.      <title>Reverse Debugging with Causal Analysis</title>
  91.      <link>http://anirudhsasikumar.net/blog/2011.12.15.html</link>
  92.      <description><![CDATA[Incremental innovation is hard, not impossible. I think I've come up
  93. with something that is both useful and not already implemented
  94. elsewhere. The Internet might prove me otherwise, but I'm
  95. personally incredibly excited about this since I've always wanted to
  96. do something that is non-trivial and useful for developers.
  97.  
  98. </p>
  99.  
  100. <p>
  101. Imagine you're debugging and a breakpoint hits. Instead of stepping
  102. forward, you can step backward. You can position your cursor at a
  103. line of code and see how you reached that line. This is more than a
  104. stack trace; it is a causal analysis report listing <em>only</em> lines of code
  105. that played a part in execution reaching that point (lines of code
  106. with if, switch, break, continue, method call and event handling
  107. statements<sup><a id="fnr.2" href="#fn.2">2</a></sup> <em>that affected control flow</em>).
  108.  
  109. </p>
  110.  
  111. <p>
  112. Looking at the list in the report, you can quickly spot an item that
  113. shouldn't be on it to determine where your control flow logic went
  114. wrong.
  115.  
  116. </p>
  117.  
  118. <p>
  119. The second part: you can highlight a variable in the editor and see
  120. all lines of code where the variable was modified till the breakpoint
  121. was hit. I suspect this part is not that unique.
  122.  
  123. </p>
  124.  
  125. <p>
  126. There's a video further down that should help clarify what I mean.
  127.  
  128. </p>
  129.  
  130. <p>
  131. Before that, let me tell you what this is not:
  132.  
  133. </p>
  134.  
  135. <ul>
  136. <li><a href="http://www.gnu.org/software/gdb/news/reversible.html">Reverse&#32;step&#32;in&#32;GDB</a> which actually executes backward. (This is
  137. built on top of the "reverse debugging" concept).
  138. </li>
  139. <li><a href="http://blogs.msdn.com/b/ianhu/archive/2009/05/13/historical-debugging-in-visual-studio-team-system-2010.aspx">Intellitrace&#32;or&#32;Historical&#32;debugging</a> in Visual Studio 2010. (Though
  140. I added this as well to my prototype).
  141. </li>
  142. <li><a href="http://www.cs.cmu.edu/%7eNatProg/whyline.html">Whyline&#32;debugging</a>.
  143. </li>
  144. <li><a href="http://help.eclipse.org/indigo/topic/org.eclipse.jdt.doc.user/reference/views/debug/ref-droptoframe.htm">Drop&#32;to&#32;Frame</a> in Eclipse.
  145. </li>
  146. </ul>
  147.  
  148. <p>
  149. I demoed this on stage at <a href="http://max.adobe.com/">MAX&#32;2011</a> where I had <a href="http://en.wikipedia.org/wiki/Rainn_Wilson">Rainn&#32;Wilson</a> constantly
  150. try to faze me (all in good faith<sup><a id="fnr.3" href="#fn.3">3</a></sup>):
  151.  
  152. </p>
  153.  
  154. <p>
  155. <iframe title="AdobeTV Video Player" width="480" height="296" src="http://tv.adobe.com/embed/816/11416/" frameborder="0" allowfullscreen scrolling="no"></iframe>
  156.  
  157. </p>
  158.  
  159. <p>
  160. <img src="../imgs/reversedebug.jpg" alt="Reverse&#32;Debugging&#32;with&#32;Causal&#32;Analysis" />
  161.  
  162. </p>
  163.  
  164. <p>
  165. Apart from causal analysis, one more piece was shown at MAX (and in
  166. the <a href="tv.adobe.com/watch/max-2011-sneak-peeks/max-2011-sneak-peek-reverse-debugging-in-flash-builder/">video&#32;above</a>):
  167.  
  168. </p>
  169.  
  170. <ul>
  171. <li>Generate a trace dump which can then be used to do post-mortem
  172. analysis (reverse debugging and all that jazz) of the application.
  173. This is exactly like Visual Studio's Intellitrace or Historical
  174. debugging.
  175. </li>
  176. </ul>
  177.  
  178. <p>
  179. What I'm excited about is the causal analysis and the variable
  180. modification analysis (though implementing the other bits was also
  181. fascinating).
  182.  
  183. </p>
  184.  
  185. <h3>Developer Reaction</h3>
  186.  
  187. <p>
  188. I was floored by the reception this received, the party after MAX
  189. Sneak Peek was amazing to say the least. It was hard to be the only
  190. code related demo among magical photoshop and 3D video demos. Cheers
  191. to all the Flex and Flash developers who congratulated me personally
  192. and to all those were curious enough to ask me how it was done (even
  193. though I might not have answered your question, trust me when I tell
  194. you, I wanted to). I appreciate it.
  195.  
  196. </p>
  197.  
  198. <h3>Meta (or How I came up with this)</h3>
  199.  
  200. <p>
  201. My work at Adobe as a developer gives me access to the source code of
  202. an IDE with code completion and refactoring support (Flash Builder)
  203. and a virtual machine (AVM) with debugging capability, the flash
  204. player. I work on the debugger, so I'm always looking out in this
  205. area. I started doing this in my spare time, when I was not working
  206. on bugs or a feature.
  207.  
  208. </p>
  209.  
  210. <p>
  211. I initially implemented reverse debugging in Flash Builder/flash
  212. player just because I was frustrated with having to reset breakpoints
  213. and restart if a breakpoint was set too far ahead. I had read the
  214. original <a href="http://www.gnu.org/software/gdb/news/reversible.html">gdb&#32;article</a> via slashdot long ago so I knew it should be
  215. possible. Implementing it was a challenge, time was always against me.
  216.  
  217. </p>
  218.  
  219. <p>
  220. Seeing Reverse debugging work, the other pieces just sort of came to
  221. me while I was trying to sleep that night. I was awake up all night
  222. thinking if I would be able to do it or not and if I'm crazy to be so
  223. excited about it. From the next day on, I worked continuously to get a
  224. prototype up. It is hard to work on something when you're not really
  225. sure if it will work or not, but the feeling you get when it finally
  226. starts working is inexplicable.
  227.  
  228. </p>
  229.  
  230. <h3>When is it shipping?</h3>
  231.  
  232. <p>
  233. I'm glad that you're interested, I can't disclose anything about that
  234. now.
  235.  
  236. </p>
  237.  
  238. <h3>Why are you writing this?</h3>
  239.  
  240. <p>
  241. Several reasons:
  242.  
  243. </p>
  244.  
  245. <ul>
  246. <li>Maybe this will help someone get an idea like I got this one.
  247. Whatever it is, go do it even if it looks impossible. Like I said,
  248. incremental innovation is hard. But not impossible.
  249. </li>
  250. <li>There have been only very few times<sup><a id="fnr.4" href="#fn.4">4</a></sup> when I've actually come
  251. up with something worthy of being posted on Hacker news.
  252. </li>
  253. </ul>
  254.  
  255. <p>
  256. <a href="http://news.ycombinator.com/item?id=3356619">Discuss&#32;this&#32;on&#32;Hacker&#32;News</a>
  257.  
  258. </p>
  259.  
  260. <p>
  261. </p><hr />
  262. <p>
  263. <sup>[<a id="fn.1" href="#fnr.1">1</a>]</sup> I know for sure that I thought up of this by myself, but the world
  264. being a big place, it might be more than possible that someone
  265. either already thought about it or implemented it. <br />
  266.  
  267. </p>
  268.  
  269. <p>
  270. <sup>[<a id="fn.2" href="#fnr.2">2</a>]</sup>  There are way more cases than what is listed being considered.
  271. That said, the report is always not perfect.<br />
  272.  
  273. </p>
  274.  
  275. <p>
  276. <sup>[<a id="fn.3" href="#fnr.3">3</a>]</sup> He was nothing compared to the developer from the audience who
  277. shouted that he got a boner. That is when I'm
  278. going "Dude!" in the video.<br />
  279.  
  280. </p>
  281.  
  282. <p>
  283. <sup>[<a id="fn.4" href="#fnr.4">4</a>]</sup> First time I considered it was when I worked on the seamless
  284. client server debugging and automatic async/sync conversion
  285. pieces (with other extremely talented engineers) demoed at MAX
  286. 2009 Sneak peeks. The second time was when I came up with
  287. <a href="http://readefine.net/">Readefine</a> and the third time was when I built
  288. <a href="2011.05.16.html">visual&#32;conditional&#32;breakpoints&#32;with&#32;a&#32;live&#32;design&#32;view</a> demoed at
  289. MAX 2010 Sneak peeks.<br />
  290.  
  291. </p>
  292.  
  293. (905 Words, CategoryProgramming)]]> </description>
  294.      <pubDate>Thu, 15 Dec 2011 16:39:03 +0530</pubDate>
  295.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.12.15.html</guid>
  296. </item>
  297. <item>
  298.      <title>Speaking at Adobe MAX 2011</title>
  299.      <link>http://anirudhsasikumar.net/blog/2011.09.23.html</link>
  300.      <description><![CDATA[I'm really excited to be speaking at <a href="http://max.adobe.com/">Adobe&#32;MAX&#32;2011</a> about
  301. <a href="http://bit.ly/nWGlbe">Flash&#32;Builder&#32;Tips&#32;and&#32;Tricks</a>. Drop in for an in-depth look at getting
  302. the maximum out of Flash Builder. As a developer on the Builder
  303. team who uses Builder quite a bit<sup><a id="fnr.2" href="#fn.2">2</a></sup>, I'm hoping that I will be able
  304. to show you useful stuff that can help you become more productive
  305. while understanding what is going on under the hood of the tool.
  306.  
  307. </p>
  308.  
  309. <p>
  310. <img src="../imgs/max.jpg" alt="MAX&#32;Speaker" />
  311.  
  312. </p>
  313.  
  314. <p>
  315. Of course, I also happen to sit next to and work with other brilliant
  316. engineers in the Builder team. Couple this with stalking a lot on
  317. <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
  318. tips.
  319.  
  320. </p>
  321.  
  322. <p>
  323. Some other great Flex and Flash Builder related sessions to check out
  324. at MAX:
  325.  
  326. </p>
  327.  
  328. <ul>
  329. <li>Developing Flex Mobile Applications by <a href="http://www.webkitchen.be">Serge&#32;Jespers</a>.
  330. </li>
  331. <li>Flash Platform Roadmap: Flex, Flash Builder, Flash Player, AIR by
  332. Scott Castle and <a href="http://andrewrshorten.wordpress.com/">Andrew&#32;Shorten.</a>
  333. </li>
  334. <li>What's new in Flash Builder 4.5 and later by <a href="http://www.adrocknaphobia.com/">Adam&#32;Lehman</a>.
  335. </li>
  336. <li>How to Extend Your Mobile AIR Applications Using Native Extensions
  337. by <a href="http://blogs.adobe.com/simplicity/">Oliver&#32;Goldman.</a>
  338. </li>
  339. <li>Working with AIR Native Extensions by Brijesh Patel.
  340. </li>
  341. <li>Flash Builder and Flash Catalyst Sitting in a Tree by Jacob Surber.
  342. </li>
  343. </ul>
  344.  
  345. <p>
  346. See you there!
  347.  
  348. </p>
  349.  
  350. <p>
  351. </p><hr />
  352. <p>
  353. <sup>[<a id="fn.1" href="#fnr.1">1</a>]</sup> I've worked mostly on debugging, compiler integration,
  354. Eclipse integration. <br />
  355. <sup>[<a id="fn.2" href="#fnr.2">2</a>]</sup> <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&#32;and&#32;RSS&#32;readers</a>
  356. category.
  357.  
  358. </p>
  359.  
  360. (227 Words, CategoryFlex)]]> </description>
  361.      <pubDate>Fri, 23 Sep 2011 14:47:45 +0530</pubDate>
  362.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.09.23.html</guid>
  363. </item>
  364. <item>
  365.      <title>Magazine Layout and Mark these as Read</title>
  366.      <link>http://anirudhsasikumar.net/blog/2011.07.26.html</link>
  367.      <description><![CDATA[Stranded in office late night due to heavy rain, I got bored and wrote
  368. a new layout for
  369. <a href="http://readefine.anirudhsasikumar.net/">Readefine</a>. Multiple
  370. articles show up in a grid, but there are articles that drop
  371. vertically to span across and articles that grow wide to two columns
  372. or more. Articles that are small may take up only the necessary space.
  373. Empty space should be minimal. This layout was not very hard to do,
  374. but getting the right performance was not easy. But it was gratifying
  375. to see the same app up and running on a tablet with no code changes.
  376.  
  377. </p>
  378.  
  379. <div class="imgalign"><a
  380. href="http://readefine.anirudhsasikumar.net/"><img src="../imgs/readefine_magazine_400.png" alt="Readefine&#32;Magazine&#32;Layout" /></a></div>
  381.  
  382. <p>
  383. I finished the layout that night, but took around four days to tune
  384. performance. The good thing about this is that I know more about
  385. TextLine and Flash Text Engine now. The bad thing is that I went
  386. home at midnight that day.
  387.  
  388. </p>
  389.  
  390. <p>
  391. Try it out by downloading <a href="http://readefine.anirudhsasikumar.net/">Readefine&#32;Desktop&#32;2.0</a>.
  392.  
  393. </p>
  394.  
  395. <h2>Mark these as Read</h2>
  396.  
  397. <p>
  398. There's a very nifty feature in the Android Google Reader app. If you
  399. scroll through headings of your articles, a "Mark these as Read"
  400. button appears allowing you to mark all articles till the current one
  401. read.
  402.  
  403. </p>
  404.  
  405. <p>
  406. I loved this feature. But as usual, scrolling is not my thing, so
  407. implemented the same concept in Readefine but with pagination. A page
  408. with multiple articles is shown. If interested, you can read an
  409. article in depth. Or you can "Mark these articles" as read and
  410. move to the next set. Just tap Space.
  411.  
  412. </p>
  413.  
  414. <h2>Tablet trials</h2>
  415.  
  416. <p>
  417. I re-packaged the SWF as is for Android and tried it out on a Motorola
  418. Xoom tablet. Magazine layout took around 30 - 50 seconds to lay out.
  419.  
  420. </p>
  421.  
  422. <p>
  423. I tweaked with the amount of data I pre-fetch, process and cache.
  424. Layout time came down to 10 seconds. This is for around 8 - 10
  425. articles being displayed with a total of 15 articles processed and
  426. ready for layout all in Actionscript.
  427.  
  428. </p>
  429.  
  430. <p>
  431. That was impressive. Minimal code changes (constants in my singleton
  432. class) and I'm up and running on an Android tablet.
  433.  
  434. </p>
  435.  
  436. <p>
  437. Of course, I need to make a lot of design changes for the Tablet form
  438. factor, but this was very encouraging for about an hour of effort.
  439.  
  440. </p>
  441.  
  442. <p>
  443. I'm not releasing the tablet version till I add some touch
  444. functionality and get the experience right.
  445.  
  446. </p>
  447.  
  448. <h2>Future of magazine layout</h2>
  449.  
  450. <p>
  451. Tablet. Performance. And better elimination of empty space. Since this
  452. is a hobby, expect random infrequent updates.
  453.  
  454. </p>
  455.  
  456. <p>
  457. </p><hr />
  458. <p>
  459. <sup>[<a id="fn.1" href="#fnr.1">1</a>]</sup> Caching TextFlow objects when you have custom text containers
  460. is not very straight-forward. Neither is TextLine recycling.
  461.  
  462. </p>
  463.  
  464. (431 Words, CategoryFlex)]]> </description>
  465.      <pubDate>Tue, 26 Jul 2011 20:07:46 +0530</pubDate>
  466.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.07.26.html</guid>
  467. </item>
  468. <item>
  469.      <title>Faster Flex Compilation with Flash Builder 4.5</title>
  470.      <link>http://anirudhsasikumar.net/blog/2011.06.02.html</link>
  471.      <description><![CDATA[The Flex 4.5 SDK compiler is slightly faster and more conservative
  472. about memory compared to its previous version. There are a couple of
  473. small changes that a developer can make to speed up compilation. One
  474. of them involves a new compiler option and others are related to
  475. organizing code in your project and can be leveraged by customers on
  476. the 4.0 SDK as well.
  477.  
  478. </p>
  479.  
  480. <h3>The New Compress Option (non-mobile projects only)</h3>
  481.  
  482. <p>
  483. SWF files can be compressed or uncompressed. SDK 4.5 exposes a
  484. compiler option to control whether the output SWF is compressed or
  485. uncompressed. Try setting <code>-compress=false</code> in
  486. Project properties -> Flex Compiler -> Additional Compiler arguments.
  487.  
  488. </p>
  489.  
  490. <div
  491. class="imgalign"><img src="../imgs/compressflex.png" alt="Using&#32;the&#32;compress&#32;compiler&#32;argument" /></div>
  492.  
  493. <p>
  494. Before you go ahead and set this, note the caveats:
  495.  
  496. </p>
  497.  
  498. <ol>
  499. <li>Flash Builder automatically sets this option for Mobile projects
  500. (and removes it on an Export Release build).
  501. </li>
  502. <li>If you set the option, you'll have to remove the option before
  503. exporting a release build unless you are fine with 2x - 10x increase
  504. in SWF size.
  505. </li>
  506. <li>Strangely, we found Flex runtime performance implications when an
  507. uncompressed SWF was generated. This requires more investigation, but
  508. it is something that must be kept in the back of your mind and the
  509. reason why this is <em>not the default behavior</em>.
  510. </li>
  511. </ol>
  512.  
  513. <p>
  514. The numbers: 2239ms before and 1734ms after (On a large customer
  515. project when making an incremental change of width in MXML). That is
  516. roughly 22%, but your mileage will vary depending upon the actual
  517. contents of your project. Normal projects are unlikely to give this
  518. drastic an improvement in compilation speed.
  519.  
  520. </p>
  521.  
  522. <h3>Move Embedded Assets into a Library Project</h3>
  523.  
  524. <p>
  525. This is very important especially if you use embedded fonts. This will
  526. save a lot of time and reduce your overall heap memory consumption.
  527. Here's how:
  528.  
  529. </p>
  530.  
  531. <p>
  532. 1) Create a library project in Flash Builder.
  533.  
  534. </p>
  535.  
  536. <p>
  537. 2) Create an Actionscript class in this project and put your
  538. embedded font and image declarations there:
  539.  
  540. </p>
  541.  
  542. <pre class="fontlock">
  543. <span class="keyword">packag</span><span class="keyword">e</span>
  544. {
  545.  <span class="keyword">public</span> <span class="keyword">clas</span><span class="keyword">s</span> <span class="type">TestProjectAssets</span>
  546.  {
  547.    [<span class="type">Embed</span>(source=<span class="string">&quot;fonts/MySuperDuperFont.otf&quot;</span>,
  548.                    fontFamily=<span class="string">&quot;SuperDuperFont&quot;</span>,
  549.                    mimeType=<span class="string">&quot;application/x-font&quot;</span>,
  550.                    embedAsCFF=<span class="string">&quot;true&quot;</span>)]
  551.    <span class="keyword">private</span> <span class="keyword">const</span> <span class="type">SuperDuperFont</span>:<span class="type">Class</span>;
  552.  
  553.    [<span class="type">Embed</span>(source=<span class="string">&quot;assets/mainMenu.png&quot;</span>)]
  554.    <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">const</span> mainMenuImg:<span class="type">Class</span>;
  555.  }
  556.  
  557. }
  558. </pre>
  559.  
  560. <p>
  561. 3) Copy over the fonts and assets into the src directory.
  562.  
  563. </p>
  564.  
  565. <p>
  566. 4) In your main project, add the library project you created as a
  567. reference in Project Properties -> Flex Build Path -> Add Project.
  568.  
  569. </p>
  570.  
  571. <p>
  572. 5) In the main MXML file of your project, declare an instance of the
  573. class you created in the library project. This is so that the class is
  574. linked in to your project and fonts and assets are available for use
  575. in your main project:
  576.  
  577. </p>
  578.  
  579. <pre class="fontlock">
  580. &lt;<span class="keyword">?xml</span> <span class="variable-name">version</span>=<span class="string">&quot;1.0&quot;</span> <span class="variable-name">encoding</span>=<span class="string">&quot;utf-8&quot;</span>?&gt;
  581. &lt;<span class="sgml-namespace">s</span>:<span class="function-name">WindowedApplication</span>
  582.  <span class="sgml-namespace">xmlns</span>:<span class="variable-name">fx</span>=<span class="string">&quot;http://ns.adobe.com/mxml/2009&quot;</span>
  583.  <span class="sgml-namespace">xmlns</span>:<span class="variable-name">s</span>=<span class="string">&quot;library://ns.adobe.com/flex/spark&quot;</span>
  584.  <span class="sgml-namespace">xmlns</span>:<span class="variable-name">mx</span>=<span class="string">&quot;library://ns.adobe.com/flex/mx&quot;</span>&gt;
  585.  &lt;<span class="sgml-namespace">fx</span>:<span class="function-name">Script</span>&gt;
  586.    &lt;![CDATA[
  587.      import TestProjectAssets;
  588.      
  589.      private var projectAssets:TestProjectAssets;
  590.    ]]&gt;
  591.  &lt;/<span class="sgml-namespace">fx</span>:<span class="function-name">Script</span>&gt;
  592.  &lt;<span class="sgml-namespace">fx</span>:<span class="function-name">Style</span>&gt;
  593.    @namespace s <span class="string">&quot;library://ns.adobe.com/flex/spark&quot;</span>;
  594.    @namespace mx <span class="string">&quot;library://ns.adobe.com/flex/mx&quot;</span>;
  595.    
  596.    global
  597.    {
  598.      font-family: SuperDuperFont;
  599.      color: white;
  600.      fontAntiAliasType: advanced;
  601.    }
  602.  &lt;/<span class="sgml-namespace">fx</span>:<span class="function-name">Style</span>&gt;
  603. &lt;/<span class="sgml-namespace">s</span>:<span class="function-name">WindowedApplication</span>&gt;
  604. </pre>
  605.  
  606. <p>
  607. Image instances in TestProjectAssets are static so that you can easily
  608. refer to them from any MXML file.
  609.  
  610. </p>
  611.  
  612. <p>
  613. The numbers: 1368ms before and 1255ms after (on change of width in a
  614. test project). That is about 8.26%, but the improvement will increase
  615. proportionally with the amount of embedded assets and fonts.
  616.  
  617. </p>
  618.  
  619. <h3>Moving your CSS file to a Library Project</h3>
  620.  
  621. <p>
  622. Okay, I'm stretching facts a bit here. This doesn't save you a lot of
  623. compilation time. But it is nevertheless a neat thing to do. The
  624. biggest advantage is that CSS files are separated out.
  625.  
  626. </p>
  627.  
  628. <p>
  629. Here's how you do it:
  630.  
  631. </p>
  632.  
  633. <ol>
  634. <li>Create a library project.
  635. </li>
  636. <li>Create a CSS file named defaults.css in the src directory.
  637. </li>
  638. <li>Go to Project Properties -> Flex Library Build Path -> Assets.
  639. Expand src and check defaults.css.
  640. </li>
  641. <li>In your main project, add the library project you created as a
  642. reference in Project Properties -> Flex Build Path -> Add Project.
  643. </li>
  644. </ol>
  645.  
  646. <p>
  647. Now defaults.css will be automatically applied to your main project
  648. without having to add any fx:Style tags to your application MXML file.
  649.  
  650. </p>
  651.  
  652. <p>
  653. You can combine this with the second approach mentioned above though
  654. keep in mind that embedding fonts via font-face will not work if you
  655. declare that in defaults.css. Similarly if you use the
  656. background-image style in defaults.css, you won't get as much
  657. performance boost compared to moving it an Actionscript class.
  658.  
  659. </p>
  660.  
  661. <h3>Note on the Numbers</h3>
  662.  
  663. <p>
  664. Numbers reflect the time taken for incremental compile only. A simple
  665. MXML attribute like width is changed and numbers are recorded by
  666. repeating this five times.
  667.  
  668. </p>
  669.  
  670. (770 Words, CategoryFlex)]]> </description>
  671.      <pubDate>Thu, 02 Jun 2011 11:06:28 +0530</pubDate>
  672.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.06.02.html</guid>
  673. </item>
  674. <item>
  675.      <title>Debugging Flex or Flash applications running on Google Chrome and Firefox 4</title>
  676.      <link>http://anirudhsasikumar.net/blog/2011.05.17.html</link>
  677.      <description><![CDATA[Google Chrome bundles a version of the Flash player plug-in that it
  678. keeps up-to-date. Firefox 4's <a href="https://developer.mozilla.org/en/Plugins/Out_of_process_plugins/The_plugin_hang_detector">plugin&#32;hang&#32;detector</a> stops flash player
  679. when it detects inactivity. Read on to see how these challenges can
  680. be overcome when debugging flex/flash applications with Flash Builder.
  681.  
  682. </p>
  683.  
  684. <h3>Google Chrome</h3>
  685.  
  686. <ul>
  687. <li>Release version of the player is bundled and that gets priority over
  688. the debug player.
  689. </li>
  690. </ul>
  691.  
  692. <p>
  693. Disable the bundled flash player by following the instructions at
  694. <a href="http://www.google.com/support/forum/p/Chrome/thread?tid=2b2821a6b7e9e3e5&amp;hl=en">the&#32;official&#32;Chrome&#32;help&#32;forum</a> or <a href="http://polygeek.com/2780_flex_debugging-with-google-chrome-and-flash-player-10-1">polygeek.com</a>.
  695.  
  696. </p>
  697.  
  698. <ul>
  699. <li>Plug-in hang detector kicks in and asks if you want to stop flash
  700. player when at a breakpoint in Flash Builder.
  701. </li>
  702. </ul>
  703.  
  704. <p>
  705. This is how you can disable the hang monitor:
  706.  
  707. </p>
  708.  
  709. <ol>
  710. <li>In Flash Builder, open Window -> Preferences -> General ->
  711. Web Browser.
  712. </li>
  713. <li>Hit "New", type in Chrome, point to the location of Google
  714. Chrome<sup><a id="fnr.2" href="#fn.2">2</a></sup> and add <code>--disable-hang-monitor</code> in the "Parameters" field.
  715. </li>
  716. <li>Set the newly created Chrome as your browser. Note that this only
  717. applies to Chrome starting up when no
  718. <a href="http://www.mail-archive.com/chromium-dev%40googlegroups.com/msg08281.html">chrome&#32;windows&#32;are&#32;already&#32;running</a>.
  719. </li>
  720. </ol>
  721.  
  722. <div class="imgalign"><img src="../imgs/chrome_eclipse.png" alt="Flash&#32;Builder&#32;Google&#32;Chrome" /></div>
  723.  
  724. <h3>Mozilla Firefox</h3>
  725.  
  726. <ul>
  727. <li>Firefox 3.6.6+ stops flash player after a short duration when at a
  728. breakpoint.
  729. </li>
  730. </ul>
  731.  
  732. <p>
  733. Disable the Firefox hang monitor by following these steps:
  734.  
  735. </p>
  736.  
  737. <ol>
  738. <li>Type in about:config in the address bar and hit enter.
  739. </li>
  740. <li>Agree that you'll be careful.
  741. </li>
  742. <li>Type in dom.ipc.plugins.timeoutSecs. Change the value to -1.
  743. </li>
  744. <li>Restart Firefox.
  745. </li>
  746. </ol>
  747.  
  748. <p>
  749. </p><hr />
  750. <p>
  751. <sup>[<a id="fn.1" href="#fnr.1">1</a>]</sup> Without offering a choice to the user unlike Google Chrome.<br />
  752. <sup>[<a id="fn.2" href="#fnr.2">2</a>]</sup> This may be harder than it sounds. On the Mac, you
  753. <a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=297273">cannot&#32;use&#32;the&#32;Browse&#32;button</a> and point to the app. Instead, you
  754. have to type in the path to the actual binary -
  755. <code>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</code>. On
  756. Windows, the location of the binary can be deduced by looking at
  757. the properties of the Google Chrome shortcut.
  758.  
  759. </p>
  760.  
  761. (305 Words, CategoryFlex)]]> </description>
  762.      <pubDate>Tue, 17 May 2011 12:30:33 +0530</pubDate>
  763.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.05.17.html</guid>
  764. </item>
  765. <item>
  766.      <title>A Year on the Flash Builder Team</title>
  767.      <link>http://anirudhsasikumar.net/blog/2011.05.16.html</link>
  768.      <description><![CDATA[Last year, I moved into the <a href="http://www.adobe.com/products/flash-builder.html">Flash&#32;Builder</a> engineering team as a
  769. developer. Working on a developer tool is fun and satisfying.
  770. Especially when the work you do helps developers code faster and
  771. easily build mobile apps. For example, take
  772. <a href="http://www.adobe.com/devnet/flash-builder/articles/flashbuilder45-coding-enhancements.html">some&#32;of&#32;the&#32;coding&#32;productivity&#32;features</a> baked in Flash Builder 4.5,
  773. there are some killer time-savers present in there.
  774.  
  775. </p>
  776.  
  777. <p>
  778. Looking back, some events clearly stand out: seeing <a href="http://www.adobe.com/products/flex/mobile/">Flex&#32;mobile</a> come
  779. alive with our one-click debug workflow, experiencing first-hand the
  780. coding productivity features we built, presenting a sneak peek at
  781. Adobe MAX 2010 and most exciting of all, to see Flex 4.5 and Flash
  782. Builder ship.
  783.  
  784. </p>
  785.  
  786. <h3>Sneak Peek</h3>
  787.  
  788. <p>
  789. Last October, I flew to Los Angeles to attend Adobe MAX. This was my
  790. first MAX and I was completely blown away by the scale and most
  791. importantly, by the passion people had for Adobe's products. The Flex
  792. community is vibrant, alive and filled with talented people.
  793.  
  794. </p>
  795.  
  796. <p>
  797. It was amazing to be given the opportunity to demo my prototype at the
  798. MAX Sneak Peek<sup><a id="fnr.3" href="#fn.3">3</a></sup> to a crowd of over four-thousand people at Adobe MAX
  799. 2010, Los Angeles. A recording of the demo is up on Youtube:
  800.  
  801. </p>
  802.  
  803. <p>
  804. <iframe width="425" height="349" src="http://www.youtube.com/embed/dJT3PUHloJc" frameborder="0" allowfullscreen></iframe>
  805.  
  806. </p>
  807.  
  808. <p>
  809. This is the biggest audience I've ever presented to and it was
  810. nerve-wracking backstage especially after hearing the crowd roar for
  811. the preceding sneaks: Flash to HTML5 and Pixel bender 3D. I almost had
  812. a heart-attack when the application failed to launch at the end.
  813. Control + Z to undo my mistyping saved the demo.
  814.  
  815. </p>
  816.  
  817. <h3>The Future</h3>
  818.  
  819. <p>
  820. Looks incredibly exciting. Expect <em>useful</em> posts<sup><a id="fnr.4" href="#fn.4">4</a></sup> about Flex and Flash
  821. Builder in the near term.
  822.  
  823. </p>
  824.  
  825. <p>
  826. </p><hr />
  827. <p>
  828. <sup>[<a id="fn.1" href="#fnr.1">1</a>]</sup> Code templates<sup><a id="fnr.2" href="#fn.2">2</a></sup>! With dynamic variable support! You can find the
  829. 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&#32;page</a>.<br />
  830. <sup>[<a id="fn.2" href="#fnr.2">2</a>]</sup> This makes my hoard of MXML/AS <a href="http://code.google.com/p/yasnippet/">yasnippet</a> templates obsolete.<br />
  831. <sup>[<a id="fn.3" href="#fnr.3">3</a>]</sup> For the un-initiated, a Sneak peek showcases technology with no
  832. guarantees that it will make it into a product. Think of it as
  833. ten engineers showing cool demos one after the other. <br />
  834. <sup>[<a id="fn.4" href="#fnr.4">4</a>]</sup>  Unlike this post which talks about something personal that
  835. happened a long time ago.
  836. </p> (362 Words, CategoryFlex)]]> </description>
  837.      <pubDate>Mon, 16 May 2011 16:46:40 +0530</pubDate>
  838.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2011.05.16.html</guid>
  839. </item>
  840. <item>
  841.      <title>Flex 4 Wizard Component with Progress Indication and Move Effects</title>
  842.      <link>http://anirudhsasikumar.net/blog/2009.12.10.html</link>
  843.      <description><![CDATA[I love the Insuricorp demo. The wizard in that has two distinguishing
  844. features. A subtle animated progress indication that not only denotes
  845. the current step, but also the fact that you are <em>progressing</em>. And the
  846. other thing - a neat move effect between each step so that it looks
  847. like the next step is sliding in from the right. I built a Flex 4
  848. component that does exactly this. Use it similar to our good old Flex
  849. 3 view stack and voila!
  850.  
  851. </p>
  852.  
  853. <h2>Wizard Component</h2>
  854.  
  855. <p>
  856. Only a demo (view source enabled) can do it justice. Click the image
  857. below to try it out:
  858.  
  859. </p>
  860.  
  861. <div class="imgalign"><a
  862. href="http://anirudhsasikumar.net/examples/flex4wizard/"><img src="../imgs/flex4wizard.png" alt="Flex&#32;4&#32;Wizard&#32;Component" /></a></div>
  863.  
  864. <p>
  865. You can also <a href="http://anirudhsasikumar.net/examples/flex4wizard/Flex4Wizard.fxp">download&#32;the&#32;FXP</a>. The source is licensed under MPL 1.1.
  866.  
  867. </p>
  868.  
  869. <p>
  870. Try clicking next and previous pretty fast. The move effects play in
  871. parallel so that there is a kinetic feel to it.
  872.  
  873. </p>
  874.  
  875. <h3>Usage</h3>
  876.  
  877. <p>
  878. First, declare the step names:
  879.  
  880. </p>
  881.  
  882. <pre class="fontlock">
  883. [<span class="type">Bindable</span>]
  884. <span class="keyword">private</span> <span class="keyword">var</span> <span class="variable-name">wizardViews</span>:<span class="type">ArrayCollection</span> = <span class="keyword">new</span> <span class="type">ArrayCollection</span>(
  885. [<span class="keyword">new</span> <span class="type">WizardStepVO</span>({<span class="constant">name</span>:<span class="string">&quot;PICK PLAYLIST&quot;</span>, state: <span class="string">&quot;selected&quot;</span>}),
  886. <span class="keyword">new</span> <span class="type">WizardStepVO</span>({<span class="constant">name</span>: <span class="string">&quot;SOURCE&quot;</span>, state: <span class="string">&quot;normal&quot;</span>}),
  887. <span class="keyword">new</span> <span class="type">WizardStepVO</span>({<span class="constant">name</span>: <span class="string">&quot;DESTINATION&quot;</span>, state: <span class="string">&quot;normal&quot;</span>})
  888. ]);
  889. </pre>
  890.  
  891. <p>
  892. Now declare the view elements of the wizard as a child to the
  893. WizardPanel tag:
  894.  
  895. </p>
  896.  
  897. <pre class="fontlock">
  898. &lt;<span class="sgml-namespace">wizard</span>:<span class="function-name">WizardPanel</span> <span class="variable-name">id</span>=<span class="string">&quot;wizard&quot;</span>    
  899.     <span class="variable-name">change</span>=<span class="string">&quot;trace('step: ' + wizard.currentStepTitle)&quot;</span>
  900.     <span class="variable-name">wizardViews</span>=<span class="string">&quot;{wizardViews}&quot;</span>&gt;
  901.  &lt;<span class="sgml-namespace">steps</span>:<span class="function-name">PickPlaylist</span> <span class="variable-name">width</span>=<span class="string">&quot;100%&quot;</span> <span class="variable-name">top</span>=<span class="string">&quot;40&quot;</span> <span class="variable-name">bottom</span>=<span class="string">&quot;30&quot;</span> /&gt;
  902.  &lt;<span class="sgml-namespace">steps</span>:<span class="function-name">PickSource</span> <span class="variable-name">width</span>=<span class="string">&quot;100%&quot;</span> <span class="variable-name">top</span>=<span class="string">&quot;40&quot;</span> <span class="variable-name">bottom</span>=<span class="string">&quot;30&quot;</span> /&gt;
  903.  &lt;<span class="sgml-namespace">steps</span>:<span class="function-name">PickDestination</span> <span class="variable-name">width</span>=<span class="string">&quot;100%&quot;</span> <span class="variable-name">top</span>=<span class="string">&quot;40&quot;</span> <span class="variable-name">bottom</span>=<span class="string">&quot;30&quot;</span> /&gt;
  904.  &lt;<span class="sgml-namespace">steps</span>:<span class="function-name">Finish</span> <span class="variable-name">width</span>=<span class="string">&quot;100%&quot;</span> <span class="variable-name">top</span>=<span class="string">&quot;40&quot;</span> <span class="variable-name">bottom</span>=<span class="string">&quot;34&quot;</span>  /&gt;
  905. &lt;/<span class="sgml-namespace">wizard</span>:<span class="function-name">WizardPanel</span>&gt;
  906. </pre>
  907.  
  908. <p>
  909. The only difference from a view stack is that since
  910. GraphicElements do not have a "label" property, you have to
  911. provide the step name via a <code>wizardViews</code> property. Internally, the
  912. children passed to the component gets added to a Group and its
  913. visibility is toggled based on the current step.
  914.  
  915. </p>
  916.  
  917. <h3>Effects</h3>
  918.  
  919. <p>
  920. Pressing "Next" causes the next step to slide in and the current step
  921. to slide out. Then the progress indicator grows to cover the new step
  922. while the color of the indicator changes from white to blue. I used
  923. the new Flex 4 AnimateColor effect for this.
  924.  
  925. </p>
  926.  
  927. <p>
  928. The move effects work in parallel so that multiple next / previous
  929. does not cause abrupt changes.
  930.  
  931. </p>
  932.  
  933. <h2>Conclusion</h2>
  934.  
  935. <p>
  936. This was my first Flex 4 component. I had forgotten about it till I
  937. was cleaning up my Eclipse workspace. Let me know if you guys find it useful.
  938.  
  939. </p>
  940.  
  941. (377 Words, CategoryFlex)]]> </description>
  942.      <pubDate>Thu, 10 Dec 2009 18:08:10 +0530</pubDate>
  943.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2009.12.10.html</guid>
  944. </item>
  945. <item>
  946.      <title>Flex 4 Component: Navbar with Scoped Search, Vimeo Style</title>
  947.      <link>http://anirudhsasikumar.net/blog/2009.12.09.html</link>
  948.      <description><![CDATA[I came across this great post by Theresa Neil: <a href="http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/">30&#32;essential&#32;controls</a>
  949. for RIA design. I liked control twenty-three in particular: Scoped
  950. Search. So I cooked up a Flex 4 navigation bar (vimeo style) that has
  951. scoped search and is completely data-driven and customizable via CSS.
  952. It does not use any images; everything is drawn. Along the way, I
  953. built some potentially re-usable things like a dotted line
  954. graphic element and a vertical separator layout.
  955.  
  956. </p>
  957.  
  958. <h2>Inspiration</h2>
  959.  
  960. <p>
  961. <a href="http://vimeo.com">Vimeo.com</a> is beautifully designed. I noticed the beautiful top
  962. navigation header only when it was referenced from Theresa's article.
  963. The blended curves are beautiful. It is the "Scoped Search" part that drove me
  964. to build this component.
  965.  
  966. </p>
  967.  
  968. <h3>What is Scoped Search?</h3>
  969.  
  970. <div class="imgalign"><img src="../imgs/flex4-scoped-search-400.png" alt="Flex&#32;4&#32;Scoped&#32;Search" /></div>
  971.  
  972. <p>
  973. According to Theresa:
  974.  
  975. </p>
  976.  
  977. <p class="verse">Scoped search like ITunes, allows for the optional selection<br/>of a category before entering free form search text... <br/></p>
  978.  
  979. <h2>Demo</h2>
  980.  
  981. <p>
  982. Click the image below to run the demo (view source enabled, the source
  983. is under MPL 1.1):
  984.  
  985. </p>
  986.  
  987. <div class="imgalign"><a href="http://anirudhsasikumar.net/examples/scopedsearch/"><img src="../imgs/flex-scoped-search-demo.png" alt="Flex&#32;4&#32;Navbar&#32;with&#32;Scoped&#32;Search&#32;Vimeo&#32;Style" /></a></div>
  988.  
  989. <p>
  990. You can also <a href="http://anirudhsasikumar.net/examples/scopedsearch/ScopedNavigation.fxp">download&#32;the&#32;FXP</a>.
  991.  
  992. </p>
  993.  
  994. <p>
  995. The demo lets you change any color at runtime. These colors are passed
  996. in via CSS. In a real use-case, you could also change the data
  997. displayed at runtime.
  998.  
  999. </p>
  1000.  
  1001. <p>
  1002. On mouseover over a top level item, a popup menu is displayed. This
  1003. menu stays open in the case of scoped search to allow changing the
  1004. selected item in the list while displaying a changing prompt text if
  1005. the user has not entered anything.
  1006.  
  1007. </p>
  1008.  
  1009. <p>
  1010. Events dispatched are shown in the bottom.
  1011.  
  1012. </p>
  1013.  
  1014. <h2>Using Navbar</h2>
  1015.  
  1016. <p>
  1017. To get started, declare the data to be set:
  1018.  
  1019. </p>
  1020.  
  1021. <pre class="fontlock">
  1022. [<span class="type">Bindable</span>]
  1023. <span class="keyword">private</span> <span class="keyword">var</span> <span class="variable-name">navData</span>:<span class="type">ArrayList</span> = <span class="keyword">new</span> <span class="type">ArrayList</span>(
  1024. [{<span class="constant">label</span>: <span class="string">&quot;Log In&quot;</span>}, {<span class="constant">label</span>: <span class="string">&quot;Explore&quot;</span>, menu: explorePopup},
  1025. {<span class="constant">label</span>: <span class="string">&quot;Help&quot;</span>, menu: popupData2}]);
  1026.  
  1027. <span class="keyword">private</span> <span class="keyword">var</span> <span class="variable-name">explorePopup</span>:<span class="type">ArrayList</span> = <span class="keyword">new</span> <span class="type">ArrayList</span>(
  1028.    [<span class="string">&quot;Categories&quot;</span>, <span class="string">&quot;Groups&quot;</span>, <span class="string">&quot;Channels&quot;</span>,
  1029.     <span class="string">&quot;Toys&quot;</span>]);
  1030.  
  1031. [<span class="type">Bindable</span>]
  1032. <span class="keyword">private</span> <span class="keyword">var</span> <span class="variable-name">searchCategories</span>:<span class="type">ArrayList</span> = <span class="keyword">new</span> <span class="type">ArrayList</span>(
  1033.    [<span class="string">&quot;Search Videos&quot;</span>, <span class="string">&quot;Search People&quot;</span>, <span class="string">&quot;Search Channels&quot;</span>,
  1034.     <span class="string">&quot;Search Forums&quot;</span>]);
  1035. </pre>
  1036.  
  1037. <p>
  1038. Assign them via the dataProvider and searchDataProvider attributes:
  1039.  
  1040. </p>
  1041.  
  1042. <pre class="fontlock">
  1043. <span class="comment-delimiter">&lt;</span><span class="comment-delimiter">!-- </span><span class="comment">to change style of brand label, see scopednav.css </span><span class="comment-delimiter">--</span><span class="comment-delimiter">&gt;</span>
  1044. <span class="comment-delimiter">&lt;</span><span class="comment-delimiter">!-- </span><span class="comment">to add a brand image rather than text, change NavContainerSkin </span><span class="comment-delimiter">--</span><span class="comment-delimiter">&gt;</span>
  1045. &lt;<span class="sgml-namespace">controls</span>:<span class="function-name">MainNavigation</span> <span class="variable-name">top</span>=<span class="string">&quot;0&quot;</span> <span class="variable-name">right</span>=<span class="string">&quot;150&quot;</span>
  1046.  <span class="variable-name">brand</span>=<span class="string">&quot;foobar&quot;</span>
  1047.  <span class="variable-name">dataProvider</span>=<span class="string">&quot;{navData}&quot;</span>
  1048.  <span class="variable-name">searchDataProvider</span>=<span class="string">&quot;{searchCategories}&quot;</span>
  1049.  <span class="variable-name">search</span>=<span class="string">&quot;trace('searching for ' + event.searchText+' in '+event.selectedItem)&quot;</span>
  1050.  <span class="variable-name">navselect</span>=<span class="string">&quot;trace('selected ' + event.selectedItem)&quot;</span>
  1051.  /&gt;
  1052. </pre>
  1053.  
  1054. <p>
  1055. The search event is fired when a scoped search is performed (by
  1056. clicking on the magnifying glass or pressing enter). navselect is
  1057. fired when a menu item is clicked.
  1058.  
  1059. </p>
  1060.  
  1061. <h2>Components that come along with Navbar</h2>
  1062.  
  1063. <p>
  1064. 1) There is a new GraphicElement, DottedLine, which you can
  1065. use in Flex 4 the same way as Line, Rect, etc. DottedLine uses a
  1066. bitmap fill to draw the dots (thanks to <a href="http://www.warmforestflash.com/blog/2009/01/as3-dotted-line-class/">warm&#32;forest</a>).
  1067.  
  1068. </p>
  1069.  
  1070. <p>
  1071. 2) VerticalSeparatorLayout: If you notice the List in the popup
  1072. menu, the separator (dotted line) is not drawn for the last element.
  1073. This is done via a custom layout that makes the separator of the
  1074. last item in the List invisible.
  1075.  
  1076. </p>
  1077.  
  1078. <p>
  1079. 3) ScopedDropDown: This is used to popup the menu (List). It is a
  1080. customized DropDownList which can stay open till it is
  1081. notified that it can be closed.
  1082.  
  1083. </p>
  1084.  
  1085. <p>
  1086. 4) Magnifying Glass: Not exactly a component, but an ellipse and a
  1087. line that looks a lot like a search magnifying glass<sup><a id="fnr.2" href="#fn.2">2</a></sup>.
  1088.  
  1089. </p>
  1090.  
  1091. <h2>Flex 4 Observations</h2>
  1092.  
  1093. <p>
  1094. Some points<sup><a id="fnr.3" href="#fn.3">3</a></sup> I noted while developing the component:
  1095.  
  1096. </p>
  1097.  
  1098. <h3>Rect</h3>
  1099.  
  1100. <p>
  1101. The Rect primitive can support setting a corner radius X, Y property on an
  1102. individual corner via: bottomLeftRadiusX, bottomRightRadiusX,
  1103. topLeftRadiusX, topLeftRadiusY, etc.
  1104.  
  1105. </p>
  1106.  
  1107. <p>
  1108. That said, for the blended look in the popup list, I had to cheat and
  1109. draw two rectangles: one normal and another filled with background
  1110. color and set with corner radius. Maybe there is a blend mode that can
  1111. erase whatever is underneath it of a particular color?
  1112.  
  1113. </p>
  1114.  
  1115. <h3>CSS</h3>
  1116.  
  1117. <p>
  1118. In CSS, you use namespace|component. This is expanded to the
  1119. fully qualified name of the component. This is important to know if
  1120. you want to modify a style declaration at runtime (like in the demo).
  1121. For example, if you wanted to change navFill defined in the CSS
  1122. declaration container|NavContainer:
  1123.  
  1124. </p>
  1125.  
  1126. <pre class="fontlock">
  1127. <span class="type">StyleManager</span>.getStyleDeclaration(<span class="string">'net.anirudh.container.NavContainer'</span>).
  1128.    setStyle(<span class="string">'navFill'</span>, navfill.selectedColor);
  1129. </pre>
  1130.  
  1131. <p>
  1132. The syntax in Flex 4 for CSS is incredibly powerful. For example, this
  1133. is how the brand label is changed via CSS:
  1134.  
  1135. </p>
  1136.  
  1137. <pre class="fontlock">
  1138. <span class="comment-delimiter">/* </span><span class="comment">In NavContainer change Label with id brandLabel */</span>
  1139. <span class="function-name">container</span>|NavContainer s|Label#<span class="string">brandLabel</span>
  1140. {
  1141.  <span class="variable-name">fontSize</span>: 18;
  1142. }
  1143. </pre>
  1144.  
  1145. <h3>Skin</h3>
  1146.  
  1147. <p>
  1148. Any style defined for the component is available in the skin.
  1149. GraphicElement's don't support CSS, so you could bind properties
  1150. via <code>getStyle()</code> calls.
  1151.  
  1152. </p>
  1153.  
  1154. <p>
  1155. Override <code>updateDisplayList()</code> if you want to check a CSS property and
  1156. do something like make a Rect invisible in the skin.
  1157.  
  1158. </p>
  1159.  
  1160. <h3>GraphicElement</h3>
  1161.  
  1162. <p>
  1163. When you are building your own GraphicElement, you can access the
  1164. Graphics object via:
  1165.  
  1166. </p>
  1167.  
  1168. <pre class="fontlock">
  1169. <span class="comment-delimiter">/</span><span class="comment-delimiter">/</span><span class="comment">The base GraphicElement class has cleared the graphics for us.
  1170. </span>(drawnDisplayObject <span class="type">as</span> <span class="type">Sprite</span>).graphics
  1171. </pre>
  1172.  
  1173. <h2>Conclusion</h2>
  1174.  
  1175. <p>
  1176. Developing with Flex 4 is sweet, sweet bliss. In my opinion, this is
  1177. the most well architected GUI framework out there.
  1178.  
  1179. </p>
  1180.  
  1181. <p>
  1182. </p><hr />
  1183. <p>
  1184. <sup>[<a id="fn.1" href="#fnr.1">1</a>]</sup>  I'm certain this was never considered as a reason why people
  1185. would customize a layout. Nevertheless, it works beautifully with
  1186. minimal code.<br />
  1187. <sup>[<a id="fn.2" href="#fnr.2">2</a>]</sup>  Yes, I know should have used an icon. But I wanted to be able to
  1188. change its color.<br />
  1189. <sup>[<a id="fn.3" href="#fnr.3">3</a>]</sup>  Please do not consider any of these as hard and stead-fast rules.
  1190. These are simply my own observations.
  1191.  
  1192. </p>
  1193.  
  1194. (870 Words, CategoryFlex)]]> </description>
  1195.      <pubDate>Wed, 09 Dec 2009 23:29:09 +0530</pubDate>
  1196.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2009.12.09.html</guid>
  1197. </item>
  1198. <item>
  1199.      <title>Black Glass - Flex 4 Theme</title>
  1200.      <link>http://anirudhsasikumar.net/blog/2009.11.25.html</link>
  1201.      <description><![CDATA[I took a leap of faith. I tried it out. I built a black Flex 4 theme
  1202. using Flash Catalyst alone. Last week, I watched <a href="http://blog.flexgeek.in">Harish</a> build a Flex 4
  1203. <a href="http://blog.flexgeek.in/2009/11/somethinglikemac/">theme</a> using Catalyst. Leaning over his shoulder, I gaped on while he
  1204. effortlessly moved rectangles and ellipses around to build a dialog
  1205. window that looks fantastically close to the "Display Properties"
  1206. dialog on the Mac. I was so impressed (anyone who has watched Harish
  1207. demo Catalyst will be) that I took a leap of faith. Read on for the
  1208. details and some Catalyst tips.
  1209.  
  1210. </p>
  1211.  
  1212. <h2>Black Glass</h2>
  1213.  
  1214. <div class="imgalign"><a href="http://anirudhsasikumar.net/examples/blackglass/"><img src="../imgs/blackglass.png" alt="Black&#32;Glass&#32;Flex&#32;4&#32;Theme" /></a></div>
  1215.  
  1216. <p>
  1217. <a href="http://anirudhsasikumar.net/examples/blackglass/">Click&#32;here</a> to try it out.
  1218.  
  1219. </p>
  1220.  
  1221. <p>
  1222. You can download the code (FXP) <a href="http://anirudhsasikumar.net/examples/blackglass/blackglass.fxp">here</a>. This was tested with Flash
  1223. Builder 4 Beta 2 using the Flex 4 Beta 2 SDK.
  1224.  
  1225. </p>
  1226.  
  1227. <h3>Design</h3>
  1228.  
  1229. <p>
  1230. First a disclaimer: I'm not a designer or a UI expert; feel free to
  1231. bash me for my poor choice of colors. Doomed it may be, but I will
  1232. build an app using this theme.
  1233.  
  1234. </p>
  1235.  
  1236. <p>
  1237. I've always wanted some Flex theme to have that blue color along with
  1238. black. My fetish for the blue and black is evident in <a href="2006.07.12.html">Deskworld</a>:
  1239.  
  1240. </p>
  1241.  
  1242. <div class="imgalign"><img src="../imgs/deskworld-blue.png" alt="Deskworld&#32;Desktop" /></div>
  1243.  
  1244. <p>
  1245. I started working on the theme with only a simple concept, inspired
  1246. by the highlight part of a Button skin in Flex 4:
  1247.  
  1248. </p>
  1249.  
  1250. <p>
  1251. A line with <code>0xcccccc</code> color, 0.25 alpha at the top that leaves some gap
  1252. on both sides, another line below it with the same color but 0.07
  1253. alpha extending fully along the side. Similar setup below, but visible
  1254. only on mouse over. There's also two blue lines on the left and right
  1255. with 0.07 alpha. The bottom two lines turn blue on mouse down.
  1256.  
  1257. </p>
  1258.  
  1259. <h2>Flash Catalyst Tips</h2>
  1260.  
  1261. <p>
  1262. Amazing tool. All Flex developers should try it out to instantly see
  1263. how changes to properties and styles affect components without the
  1264. compile cycle in Flash Builder.
  1265.  
  1266. </p>
  1267.  
  1268. <p>
  1269. For example, a gradient stroke on an ellipse with the stop point set
  1270. at around 0.36 with alpha 0 is used to draw the highlight on top of
  1271. the thumb in the slider. This would have been hard to preview and
  1272. tweak around with in FB's design view.
  1273.  
  1274. </p>
  1275.  
  1276. <h3>Generated Code</h3>
  1277.  
  1278. <p>
  1279. There's some tweaking<sup><a id="fnr.2" href="#fn.2">2</a></sup> you have to do to Catalyst generated code so
  1280. that the components resize properly. Basically, take note of
  1281. hard-coded width or height numbers and convert them to use constraints
  1282. (left, right, top, bottom). This becomes painful when you have items
  1283. under a Group. So, you may want to "Ungroup" before importing the FXP
  1284. in Flash Builder 4.
  1285.  
  1286. </p>
  1287.  
  1288. <h3>CSS</h3>
  1289.  
  1290. <p>
  1291. A practice I've found useful: Strip out the properties applied to
  1292. individual components like <code>focusColor</code> and <code>skinClass</code> into a CSS file.
  1293. This way, a person will be able to use your skins just by dropping in
  1294. your CSS file.
  1295.  
  1296. </p>
  1297.  
  1298. <p>
  1299. For example, this is a portion of the CSS file I created for Black Glass:
  1300.  
  1301. </p>
  1302.  
  1303. <pre class="fontlock">
  1304. <span class="function-name">s</span>|Button
  1305. {
  1306. <span class="variable-name">focusColor</span>: #0d103f;
  1307. <span class="variable-name">skinClass</span>: ClassReference(<span class="string">&quot;components.Button2&quot;</span>);
  1308. <span class="variable-name">fontFamily</span>: <span class="string">&quot;Inconsolata&quot;</span>;
  1309. }
  1310. </pre>
  1311.  
  1312. <p>
  1313. You can choose to use my theme by simply putting in a Style tag:
  1314.  
  1315. </p>
  1316.  
  1317. <pre class="fontlock">
  1318.  <span class="comment-delimiter">&lt;</span><span class="comment-delimiter">!-- </span><span class="comment">apply our theme </span><span class="comment-delimiter">--</span><span class="comment-delimiter">&gt;</span>
  1319.  &lt;<span class="sgml-namespace">fx</span>:<span class="function-name">Style</span> <span class="variable-name">source</span>=<span class="string">&quot;blackglass.css&quot;</span>/&gt;
  1320. </pre>
  1321.  
  1322. <h2>Conclusion</h2>
  1323.  
  1324. <p>
  1325. Try out Catalyst. Flex 4 rocks.
  1326.  
  1327. </p>
  1328.  
  1329. <p>
  1330. </p><hr />
  1331. <p>
  1332. <sup>[<a id="fn.1" href="#fnr.1">1</a>]</sup>  Normally, I would have used AS3 for this.<br />
  1333. <sup>[<a id="fn.2" href="#fnr.2">2</a>]</sup>  Maybe, it is a beta thing?
  1334.  
  1335. </p>
  1336.  
  1337. (541 Words, CategoryFlex)]]> </description>
  1338.      <pubDate>Wed, 25 Nov 2009 17:56:31 +0530</pubDate>
  1339.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2009.11.25.html</guid>
  1340. </item>
  1341. <item>
  1342.      <title>Developing a Google Reader Client in Adobe AIR</title>
  1343.      <link>http://anirudhsasikumar.net/blog/2009.11.04.html</link>
  1344.      <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&#32;Kennedy</a> and
  1345. the project <a href="http://code.google.com/p/pyrfeed/wiki/GoogleReaderAPI">pyrfeed</a> have excellent documentation on it. I had
  1346. developed a Google Reader client in python that the
  1347. <a href="http://readefine.anirudhsasikumar.net/">web&#32;version&#32;of&#32;Readefine</a> uses. I needed to leverage the same AS3
  1348. code base and write an AS3 Google Reader client on top of it for the
  1349. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;offeringid=16744&amp;marketplaceid=1">desktop&#32;version</a>. I managed to do it in a day while ensuring a common
  1350. code-base for the AIR and Flex versions thanks to
  1351. <a href="http://anirudhsasikumar.net/blog/2008.08.25.html">conditional&#32;compilation</a>. This article explains Google Reader's API
  1352. along with the AS3 implementation and how it merged in with the
  1353. web-version.
  1354.  
  1355. </p>
  1356.  
  1357. <p>
  1358. Interestingly, there is AS3 code for Google Reader access in <a href="http://snackr.googlecode.com/">snackr</a>'s
  1359. code. I wrote my own though because I needed it to seamlessly merge
  1360. with my existing Flex code. Regardless, this is the screen-shot of how
  1361. Readefine Desktop looks with Google Reader access and all chrome
  1362. minimized:
  1363.  
  1364. </p>
  1365.  
  1366. <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>
  1367.  
  1368. <p>
  1369. For more screen-shots, visit <a href="http://readefine.anirudhsasikumar.net/desktop.html">Readefine&#32;Desktop</a>.
  1370.  
  1371. </p>
  1372.  
  1373. <h2>Google Reader API</h2>
  1374.  
  1375. <p>
  1376. Google Reader is excellently architected. Its view in HTML and
  1377. Javascript is independent of the actual methods to get and update
  1378. Google Reader<sup><a id="fnr.2" href="#fn.2">2</a></sup>.
  1379.  
  1380. </p>
  1381.  
  1382. <p>
  1383. There are three main parts to the API: authentication, getting data
  1384. and updating data.
  1385.  
  1386. </p>
  1387.  
  1388. <p>
  1389. Kindly read the articles referenced in the first paragraph of the
  1390. article before proceeding. The information regarding the API here
  1391. augments that information.
  1392.  
  1393. </p>
  1394.  
  1395. <h3>Authentication</h3>
  1396.  
  1397. <p>
  1398. <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
  1399. Google. You have to do an HTTP POST to a URL while setting the service
  1400. as <code>reader</code> and passing the username and password.
  1401.  
  1402. </p>
  1403.  
  1404. <p>
  1405. Ideally, an OAuth or AuthSub implementation would help third-party
  1406. applications to leverage Google Reader without having users enter
  1407. their precious skynet password into their application. Let us hope
  1408. Google releases that in the near future.
  1409.  
  1410. </p>
  1411.  
  1412. <h3>Getting Data</h3>
  1413.  
  1414. <p>
  1415. The flow for a Google Reader Client is as follows (after auth):
  1416.  
  1417. </p>
  1418.  
  1419. <p>
  1420. 1) Get user info by asking <code>/api/0/user-info</code>.
  1421.  
  1422. </p>
  1423.  
  1424. <p>
  1425. 2) Get subscription list. Each subscription contains a
  1426. "category" if the user had created folders. It also has a field called
  1427. <code>firstitemmsec</code> that denotes in milliseconds the time from which entries
  1428. for that feed should be picked up.
  1429.  
  1430. </p>
  1431.  
  1432. <p>
  1433. <code>firstitemmsec</code> initially stumped me until I added a new subscription. I
  1434. noticed that Google Reader has entries for a feed spanning back to a
  1435. month (probably -infinity). So the reader has to know to show you
  1436. articles <em>only from the time you subscribed to a feed</em>.
  1437.  
  1438. </p>
  1439.  
  1440. <p>
  1441. <code>ot</code> is the parameter that takes <code>firstitemmsec / 1000</code> when you are
  1442. fetching the reading list or a particular feed.
  1443.  
  1444. </p>
  1445.  
  1446. <p>
  1447. 3) Get unread counts. The total will be with the feed id
  1448. <code>user/userid_obtained_in_step1/state/com.google/reading-list</code>. This has
  1449. an upper bound of 1000, so 1000 is always 1000+.
  1450.  
  1451. </p>
  1452.  
  1453. <p>
  1454. 4) Get the reading list or a particular feed while being careful to
  1455. pass in the correct <code>ot</code>. Each article in the feed will have special
  1456. fields if it is read, starred, kept-unread, etc.
  1457.  
  1458. </p>
  1459.  
  1460. <p>
  1461. 5) To get the next set of articles, pass in a "cont" GET parameter to
  1462. the call in 4.
  1463.  
  1464. </p>
  1465.  
  1466. <p>
  1467. Every now and then, you have to fetch unread counts because it changes
  1468. often depending upon the amount of feeds you are subscribed to.
  1469.  
  1470. </p>
  1471.  
  1472. <h3>Updating Data</h3>
  1473.  
  1474. <p>
  1475. Marking as read, star, like, share, etc. all fall into this category.
  1476. This is slightly more tricky than getting data because it involves a
  1477. token.
  1478.  
  1479. </p>
  1480.  
  1481. <p>
  1482. This is what I understood:
  1483.  
  1484. </p>
  1485.  
  1486. <p>
  1487. 1) Get a token by posting to <code>/api/0/token</code>. Save the current timestamp.
  1488.  
  1489. </p>
  1490.  
  1491. <p>
  1492. 2) Every API call that requires a token must be queued so that there
  1493. is only one outstanding call at a time.
  1494.  
  1495. </p>
  1496.  
  1497. <p>
  1498. 3) Before making an update API call, check your saved timestamp to see
  1499. if it has been more than 20 minutes<sup><a id="fnr.3" href="#fn.3">3</a></sup>. If it has, get a new token,
  1500. then continue with the API call.
  1501.  
  1502. </p>
  1503.  
  1504. <h2>Google Reader Client in AIR</h2>
  1505.  
  1506. <p>
  1507. I have a ServiceLocator singleton class with methods like
  1508. <code>greaderGet()</code>, <code>greaderStar()</code>, etc. In that method, depending upon a
  1509. compilation variable, I either call the AIR code or my python server
  1510. side code.
  1511.  
  1512. </p>
  1513.  
  1514. <pre class="fontlock">
  1515. <span class="keyword">public</span> <span class="type">functio</span><span class="type">n</span> <span class="function-name">googleReaderUnreadCount</span>():<span class="keyword">void</span>
  1516. {
  1517.    CONFIG::FLEX
  1518.    {
  1519.        <span class="keyword">var</span> <span class="variable-name">s</span>:<span class="type">HTTPService</span> = getGReaderService();;
  1520.        <span class="keyword">var</span> <span class="variable-name">token</span>:<span class="type">AsyncToken</span> = s.send({<span class="constant">a</span>: <span class="string">'c'</span>});
  1521.        
  1522.        token.addResponder(<span class="keyword">new</span> <span class="type">GReaderCommand</span>(<span class="type">GReaderCommand</span>.GREADER_UNREAD));
  1523.    }
  1524.    CONFIG::AIR
  1525.    {
  1526.        greaderClient.getUnreadCount();
  1527.    }
  1528. }
  1529. </pre>
  1530.  
  1531. <p>
  1532. 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
  1533. implements an <code>IResponder</code>. The command's <code>result()</code> method expects data
  1534. to be an <code>Object</code> that you normally get when resultFormat is "object" in
  1535. an <code>HTTPService</code>.
  1536.  
  1537. </p>
  1538.  
  1539. <p>
  1540. GReaderClient is the AIR class that talks to Google Reader using
  1541. a <code>URLLoader</code>. It takes in the parameters object that was passed to
  1542. HTTPService's send(). Each method knows its GReaderCommand type.
  1543. It then creates a map of requests to loader (for getting the
  1544. parameters) and a map of urlloaders to command.
  1545.  
  1546. </p>
  1547.  
  1548. <p>
  1549. After performing any API call to Google Reader, there is
  1550. a single common result handler that marshall's the response based on
  1551. how <code>GReaderCommand</code> expects it.
  1552.  
  1553. </p>
  1554.  
  1555. <pre class="fontlock">
  1556. <span class="keyword">private</span> <span class="type">functio</span><span class="type">n</span> <span class="function-name">handleReaderResultEvent</span>(event: <span class="type">Event</span>): <span class="keyword">void</span>
  1557. {
  1558.    <span class="keyword">var</span> <span class="variable-name">urlloader</span>:<span class="type">URLLoader</span> = event.target as <span class="type">URLLoader</span>;
  1559.    <span class="keyword">var</span> <span class="variable-name">req</span>:<span class="type">URLRequest</span> = clearFromQueue(urlloader);
  1560.    <span class="keyword">var</span> <span class="variable-name">result</span>:<span class="type">String</span> = <span class="type">String</span>(urlloader.data);
  1561.    urlloader.removeEventListener(<span class="type">Event</span>.COMPLETE, handleReaderResultEvent);
  1562.    urlloader.removeEventListener(<span class="type">IOErrorEvent</span>.IO_ERROR, handleReaderFaultEvent);
  1563.    <span class="keyword">if</span> ( <span class="negation-char">!</span>req )
  1564.        <span class="keyword">return</span>;
  1565.    <span class="keyword">var</span> <span class="variable-name">gCommand</span>:<span class="type">GReaderCommand</span> = clearCommandFromQueue(req);
  1566.    <span class="keyword">if</span> ( gCommand )
  1567.    {
  1568.        marshallReaderResponse(gCommand, result);
  1569.    }
  1570. }
  1571. </pre>
  1572.  
  1573. <p>
  1574. The marshallReaderResponse creates objects that GReaderCommand's
  1575. result() method expects which may be object or e4x. In the case of
  1576. object when the response from Reader is XML, I use an XMLDocument
  1577. along with a SimpleXMLDecoder. If the response from Reader is in
  1578. JSON, I parse it using <a href="http://code.google.com/p/as3corelib/">JSONDecoder</a> and build the appropriate object.
  1579.  
  1580. </p>
  1581.  
  1582. <p>
  1583. Creating an object from XML:
  1584.  
  1585. </p>
  1586.  
  1587. <pre class="fontlock">
  1588. xmlDecoder = <span class="keyword">new</span> <span class="type">SimpleXMLDecoder</span>(true);
  1589. <span class="keyword">try</span>
  1590. {
  1591.    xmlDoc = <span class="keyword">new</span> <span class="type">XMLDocument</span>(result);
  1592. }
  1593. <span class="keyword">catch</span>(err:<span class="type">Error</span>)
  1594. {
  1595.    xmlDoc = null;
  1596. }
  1597. <span class="keyword">if</span> ( <span class="negation-char">!</span>xmlDoc )
  1598.    obj = xmlDecoder.decodeXML(xmlDoc);
  1599. </pre>
  1600.  
  1601. <p>
  1602. The marshall method finally calls the command's <code>result()</code> method with
  1603. the data.
  1604.  
  1605. </p>
  1606.  
  1607. <p>
  1608. Here is the full source for my <a href="http://anirudhsasikumar.net/examples/readefine/GReaderClient.as">GReaderClient.as</a>. It is incomplete
  1609. without GReaderCommand, but this you should serve you as a good
  1610. starting point in developing an Adobe AIR Google Reader client.
  1611.  
  1612. </p>
  1613.  
  1614. <p>
  1615. For more information on Readefine Desktop, visit <a href="http://readefine.anirudhsasikumar.net/desktop.html">readefine.anirudhsasikumar.net</a>.
  1616.  
  1617. </p>
  1618.  
  1619. <p>
  1620. </p><hr />
  1621. <p>
  1622. <sup>[<a id="fn.1" href="#fnr.1">1</a>]</sup>  Since cross-domain requests are not allowed from flash player
  1623. unless explicitly allowed.<br />
  1624. <sup>[<a id="fn.2" href="#fnr.2">2</a>]</sup>  Except for quickadd which seems to return HTML and JSON data in
  1625. the end in a script block.<br />
  1626. <sup>[<a id="fn.3" href="#fnr.3">3</a>]</sup>  Time interval obtained after <em>careless observation</em>. Might be incorrect.
  1627.  
  1628. </p>
  1629.  
  1630. (1051 Words, CategoryAIR)]]> </description>
  1631.      <pubDate>Wed, 04 Nov 2009 18:53:53 +0530</pubDate>
  1632.      <guid isPermaLink="true">http://anirudhsasikumar.net/blog/2009.11.04.html</guid>
  1633. </item>
  1634.  
  1635. </channel>
  1636. </rss>

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

  1. Download the "valid RSS" banner.

  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

  3. Add this HTML to your page (change the image src attribute if necessary):

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

Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda