What's in a RIA Software Engineer's Tool Chest

Major Power Tools

• Microsoft Visual Studio
• Adobe Flex Builder, Flash Builder
  
• Adobe Coldfusion Builder
• SQL Server Management Studio

Browsers

• IE
  
• FireFox
• Google Chrome
  

Eclipse Plugins

• Subclipse: SVN client
  
• Flex Formatter: auto indent and format Flex code
  
• Aptana: excellen JS, HTML, CSS editors
  
• CFEclipse: Coldfusion editor
  

Firefox Plugins

• Firebug
• Html Validator
• Screengrab: take screenshots of browser content (including Flash)
  
• YSlow
• Web Developer

Free or really affordable utilities

• Data Dictionary Creator: manage and generate data dictionary
  
• Service Capture: capture HTTP traffic in/out of local computer, with built-in parser of Flash Remoting content
  
• Fiddler: capture HTTP traffic, well known in .NET community
  
• JSON Viewer: all you can ask for to navigate, search, format JSON data string
  
• VNC: remote desktop
  
• Tortois SVN, CVS, GIT: version control with Windows Explorer integration
  
• Tour De Flex: Air application showcasing Flex controls and sample code
• Skype: IM, talk, video conference, share desktop, ...
  
• Google Desktop: search code, design document with ease
  
• GIMP: free replacement for Photoshop
  
• Sysinternals: a group of Windows Utilities now owned by Microsoft. Here are a few of my favorites:
  
• Process Explorer: advance task manager, mostly used to search for locked resources
  
• Port Mon: serial port traffic analyzer
  
• Autoruns: manage autorun programs that can start through various mechanisms
  
• Depends: Dependency Walker
• WinMerge: graphical diff, can be easily integrated with Tortoise clients
  

Online Resources in Browser Bookmarks

• Google Code Search: search open source code
  
• Google Analytics: keep tab on web site usage
  
• Stackoverflow: ask questions, search for answers, and answer some questions. Occasionally get job offers due to your answers here
  
• EETimes: resource on embedded, semiconductor development
• TechCrunch
  
• DZONE: daily digest of tech blogs similar to TechCrunch
  
• ScottGu's Blog: MSFT VP of several .NET products
  
• MIX: Video, PPT of past conference
  
• PDC: Video, PPT of past conference
  
• GOOGLE IO: Video of past conference
  
• BeanStalk: online SVN server
• Github: onlien GIT server
  
• Gist: code snippet management
  
• CFLib.org: Coldfusion library
  

Open Source Software

• FlexLib: Flex controls
  
• AS3Core: Actionscript 3 utilities
  
• PureMVC: MVC framework, popular in Flex community
  
• Cairngorm: official MVC framework in Flex community
  
• Report.NET: .NET PDF library
  
• ZedGraph: .NET chart library
  
• SQLite: light-weight database, popular in embedded community
  
• NUnit: .NET unit testing framework
• FlexUnit: Flex unit testing framework

Icons

• Java Look and Feel Graphics Repository: official JAVA icon set
  
• Visual Studio Image Library: came with Visual Studio Installation
• Web Application Icons from WebAppers.com
• famfamfam.com
  

Embedding Chart in Web Pages Made Easy

This week, embedding charts in your web page (either dynamic or static) is made extremely easy by the release of two new tools by Yahoo and Google. Both released free tools to help create chart online.

I am not sure if this is competition between Yahoo and Google or just coincidence. The two tools are released within the same week (this week):
YUI 2.4.0 released on 12/04/2007
Google Chart API released on 12/06/2007

The two tools actually complement each other.

Google Chart API:
Nothing can describe it better than the following text on their web site:

The Google Chart API lets you dynamically generate charts. To see the Chart API in action, open up a browser window and copy the following URL into it:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Press the Enter or Return key ...

Pros:
- absolutely the simplest and the easiest chart tool I have ever seen;
- there is no CPU overhead on your web server and client's computer;
Cons:
- may have problem serving chart over SSL (at least IE will complain about secure and non-secure content on the same page);
- chart is static, no user interaction;
- very limited control over chart's look and feel;
- can only show limited data range;
- can only show limited number of data points;
- your data has to be sent to a Google server, it may be a security concert;

Below is a sample chart serve by Google Chart API. It is the real thing! Served dynamically from Google's server farms! It takes me only 20 seconds to embed it into this blog.




Yahoo! User Interface Library (YUI):
YUI implementation is based on a Flash component. You will need to write JavaScript to control the data and look&feel on the Flash chart.
Pros:
- Rich user interaction (there is potential to allow user zoom, pan, or edit charts);
- More control over look and feel;
- Can show more data;
- Can be hosted on your own server (no worry about Google being BIG BROTHER or going BANKRUPT);
- Less Internet traffic is required (only need to download data, not PNG or any other image files);
- Can serve live data (again, only data download is needed, we can afford to update the chart frequently);
Cons:
- substantial JavaScipt programming and HTML editing is required;
- end user need to have Flash Player 9.0.45 or higher (not many people have that as on December 2007);
- end user's computer must have some spare CPU power, especially when multiple charts are embedded on the web page;

As an obvious proof of the difficulty to start using YUI, I am not willing to try to embed a sample chart here in my blog! :-(

The Verdict:
If you want a simple chart embedded on a static page or your blog, use Google Chart API.
If you have total control of your web server, and want to create powerful dynamic charts, use YUI 2.4.0's experimental chart component.

Last Words:
Of course, if you have enough server side CPU power and deep programming knowledge, server side chart rendering always give you ultimate control over the look and feel of your charts. On this end, you have these great open source libraries to help you: ZedGrap (C#), JFreeChart (Java), ASTRA (Flash).

ASTRA -- Open Source ActionScript 3.0 Library From Yahoo

Here is a first look of ASTRA: ActionScript Toolkit for Rich Applications.

ASTRA, the ActionScript Toolkit for Rich Applications, is Yahoo!’s collection of Flash and Flex components, libraries, toolkits and advanced applications. These libraries are open-source and available under the BSD license.

Quote from http://developer.yahoo.com/flash/

The "Flash Componet Library" is the library that really draws my interest. I only looked at this library. I guess, however, the "Web APIs Library" is the one YAHOO really want people getting attached too. :-)

The download is a complete package that starts to be useful within seconds
The download (9.6 MB) contains complete documentation, source code with detailed comments, examples, and binaries that can be installed into Flash CS3 directly. If you are only interested in using the components, you only need to double click the file "astra.mxp", the components will automatically installed and you can start to use it in Flash CS3. You will find the new components under "yahoo" folder. (Notice: if double click "astra.mxp" does not lead you to anything, please check you have installed "Adobe Extension Manager", a separate installation that can be downloaded here: http://www.adobe.com/exchange/em_download/. It is not installed when you first install Flash CS3.)

Small Footprint
All the .swf files in example directory are no more than 50 KB (even chart samples).

Excellent learning tool
If you have reservation on using "Beta" libraries in your product, there may still be reason to have a look at this library. It's source code is fully commented, and neatly organized. This make it a great tool for beginners who are learning to use ActionScript 3.0 and trying to understand object-oriented programming.

Problems
As I said, being a "beta" library, we should expect a lot of bugs. After about 10 minutes playing with chart. I already found a few things worth mentioning. The Flash I created is here: http://huguogang.googlepages.com/testAstra.html
1. Rotated chart cannot be shown properly (although preview on the design surface seems to be ok);
2. Error handling of chart data is weak. It do not show any error message if "dataProvider" has string values. I also managed to make X axis shift to the right by 1 unit, which I don't know why it happens;