Friday, August 31, 2007

YUI widget "Dialog" now depends on "Button Control"

Environment: YUI 2.3, IE 7.0

This is another problem I discovered during update from YUI 0.12 to YUI 2.3. As always, when updating library, there are many surprises that you have to run into.

Problem: Error message: "Error: Function expected" appears when I call the "render" method of YUI "Dialog" control a second time on the web page. Turn out the offending line is here: container.js, line: 6373,
if (oButton instanceof YAHOO.widget.Button) {

Why: The new "Dialog" implementation depends on the "Button" control now. Due to the above offending line, the dependency is not "optional" as stated in the documentation even if you don't use the new button control. If you don't include "button.js", you program will break at the above point.

Fix: If you are willing to change the source code, we can change the offending line to something like this:
if (YAHOO.widget.Button && oButton instanceof YAHOO.widget.Button) {
BUT, I am 80% sure, at another line, or in another control, I may run into the same problem again.
So, the best bet is to include "Button.js" to my web page.

Friday, August 24, 2007

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.

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;

Thursday, August 23, 2007

Error: "YAHOO.util.CustomEvent is not a constructor"

The Problem: This error message ("YAHOO.util.CustomEvent is not a constructor") appears after I update my YUI library from 0.12 to the latest release (2.3). There was no such error before the update.

The Why: The new Container in YUI implementation fires CutomEvent at various stage, thus is dependent on the event utility. In my old web pages, the .js files happened to be included in the wrong orders (container.js was included before event.js) and caused this error message.

The Fix: include "event.js" before "container.js". Better yet, try the new YUILoader utility which claims to be able to load the correct libraries automatically.

The Lesson: Whenever you see an error like "[XYZ] is not a contructor", try to check for typo then file dependence.

Link: Also see this thread on YUI discussion group:
http://tech.groups.yahoo.com/group/ydn-javascript/messages/16266?threaded=1&m=e&var=1&tidx=1

Thursday, August 09, 2007

Using SyntaxHighlighter on BLOGGER

SyntaxHighlighter is a
Free syntax highlighter written in JavaScript
It can insert colored code snippets on a web page using client-side javascript only. It is ideal tool for users of BLOGGER because we do not have server side resource to parse and highlight the code. And we are lazy, we do not want to write a lot of CSS to just post a code snippet. :-).

However it takes a little twisting to make it work properly.

Below are the steps to setup:
1. Download and find a place to host the library files for SyntaxHighlighter. A free choice is, of course, Google Page Creator;
2. Login to BLOGGER, go to: "Settings > Template > Edit HTML", make the following changes (credit goes to yehyeh's blog):

</div></div> <!-- end outer-wrapper -->
<link href='http://[YOUR HOST]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://[YOUR HOST]/shCore.js' type='text/javascript'/>

<script src='http://[YOUR HOST]/shBrushCpp.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushCSharp.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushCss.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushJava.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushJScript.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushSql.js' type='text/javascript'/>
<script src='http://[YOUR HOST]/shBrushXml.js' type='text/javascript'/>

<script class='javascript'>
//<![CDATA[
function FindTagsByName(container, name, Tag)
{
var elements = document.getElementsByTagName(Tag);
for (var i = 0; i < elements.length; i++)
{
if (elements[i].getAttribute("name") == name)
{
container.push(elements[i]);
}
}
}
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "textarea");

for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
var childNode = elements[i].childNodes[0];
var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
elements[i].replaceChild(newNode, childNode);

}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
brs = elements[i].getElementsByTagName("br");
for(var j = 0, brLength = brs.length; j < brLength; j++) {
var newNode = document.createTextNode("\n");
elements[i].replaceChild(newNode, brs[0]);
}
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf =
//"http://[YOUR HOST]/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>

</body>
</html>


3. Now you can post code snippet on BLOGGER using either "pre" or "textarea" tag.

Notice:
  1. The solution above is found here: http://yehhou.blogspot.com/2007/06/blogger-dpsyntaxhighlighter.html. That blog was written in Chinese. I made some minor changes and posted here. The reason for the Javascript code to remove <br/> tags is because BLOGGER has a setting to automatically add <br/> where there is line break. It is very convenient feature for blog posters, but somehow syntax highlighter will display the <br/> tag in plain text;
  2. Clipboard for the SyntaxHighlither does not work well here. It tends to give you the text without line breaks, so I commented out the Javascript that setup the clipboard function;
  3. When posting HTML code, remember to replace < with &lt;, and replace > with &gt;;
Next:
Now you've got beautiful code in your blog, next step might be some nice charts for your blog. You will find a way to embed a chart with one line HTML code here: Embedding Chart in Web Pages Made Easy
And, here is a post to show you how to Embed Silverlight video on Blogger:Embed Silverlight Streaming in Blogger

Update 11/11/2008
There are a few questions and comments regarding script hosting. .NET Dev posted an interesting idea here:
http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html

Basically, he setup the links directly to the trunk location of SyntaxHighlighter project.

Update 07/07/2010
I found using gist.github.com is way easier to paste syntax highlighted code in blogger. Here is my post showing you how to use it:

Syntax Highlighting on Blogger - Gist

Tuesday, August 07, 2007

Free Screen Capture Tools for Windows

Here are two free screen capture tools that work decently well for small tasks:

1. CamStudio 2.0: Open Source software that comes with Visual Studio solution, and Win32 installation package. It works very well. Can capture to .AVI, and has a tool to convert AVI file to .SWF file and a HTML template to embed the Flash file. The captured file size is big. 40 seconds capture generated 20MByte AVI file and 1.5MByte SWF file.
Links:
SourceForge Host: http://sourceforge.net/projects/camstudio/
CamStudio - Free Streaming Video Desktop Recording Software
: read the "Issues" section on this page. You will need to manually edit the generated HTML template in order for it to play in Firefox or Netscape.

2. Windows Media Encoder: Free Microsoft tool for video capture and editing. Capture result is WMV file format. File size is very small. But I recommend to use at least medium quality option which will generate a 500 KByte WMV file for 40 seconds capture.
Links:
http://www.microsoft.com/windows/windowsmedia/forpros/encoder/default.mspx

My environment: Windows XP Professional, Dual Monitor