Friday, February 26, 2010

Developing Google Gadgets Tutorial: Part 1

This is the first part in a series of posts that will teach you how to develop your own Google Gadget. Google definition: “Google Gadgets are simple HTML and JavaScript application that can be embedded in web pages and other applications”. From now on I will simply use the term Gadget. The Followers and My Favorite Links sections of my blog are implemented as Gadgets. Gadgets are supported by sites like iGoogle and Blogger.

Let’s see a simple example for a Gadget. Our sample Gadget let’s the user enter his name. When the name is entered the user clicks a button and a greeting is displayed.

Code Snippet
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <Module>
  3.   <ModulePrefs title="hello world example"/>
  4.   <Content type="html" preferred_width="300">
  5.     <![CDATA[
  6.     <div id="content">
  7.         <table>
  8.             <tr>
  9.                 <td>
  10.                     <label id="nameLabel">Enter your name:</label>
  11.                 </td>
  12.                 <td>
  13.                     <input type="text" id="nameTextBox" />
  14.                 </td>
  15.                 <td>
  16.                     <input type="submit" name="ShowGreetingButton" value="Show Greeting" onclick="onShowGreeting_Click()" />
  17.                 </td>
  18.             </tr>
  19.             <tr>
  20.                 <td colspan="3">
  21.                     <label id="greetingLabel" />
  22.                 </td>
  23.             </tr>
  24.         </table>
  25.     </div>
  26.     <script type="text/javascript">
  27.         function onShowGreeting_Click() {
  28.             var greetingLabel = document.getElementById("greetingLabel");
  29.             var nameTextBox = document.getElementById("nameTextBox");
  30.             if (nameTextBox.value === "") {
  31.                 greetingLabel.innerHTML = "Please enter your name";
  32.             }
  33.             else {
  34.                 greetingLabel.innerHTML = "Hello " + nameTextBox.value + "!";
  35.             }
  36.         }        
  37.     </script>
  38.     ]]></Content>
  39. </Module>

So as you can see a Gadget is just an XML document that starts with a Module tag. The ModulePrefs tag contains information about the Gadget such as its name, description, author and more. Afterwards you simply add a Content tag that specifies the HTML and JavaScript that implements the Gadget. The content type can also be a URL that specifies the Gadget content. Please note: the <html> and <body> tags are not needed. There are more tags I will present in later posts.

So now that we have a Gadget you will ask what can I do with it? You can host it in your own iGoogle page. You can add the Gadget to your blogger page. The easiest step to do it is to go to a (very surprising) Gadget called Google Gadget Editor. You can find this Gadget Here. Simply edit the Gadget there, Save it and the select publish from the File combo box. See the following picture for an illustration

GGE sample

After publishing your Gadget you can load it to your iGoogle page.

That’s it for our starter. Let’s finish with some tips:

  1. Develop your Gadget as a simple HTML page and then transform it to a Gadget by removing redundant HTML tags.
  2. Test your Gadget on more than one browser to verify that it works correctly on them. I tested my Gadget on Firefox, Chrome and Internet Explorer.
  3. Google Gadget Editor behaves strangely on Chrome so use it in IE or Firefox.

Wednesday, February 10, 2010

A nasty case with AutoScaleMode

Yesterday we tackled a strange problem at work. Some of our application forms that were displayed correctly on our development machine and on most of our test machine, failed to load on a machine with a Japanese Windows OS. A NullReferneceException was thrown during their load.

For those of you who don’t know what is AutoScaleMode let me explain shortly. This is a property of ContainerControl that specifies how to perform automatic scaling of the control and its’ children. Automatic scaling is a feature that lets you develop a form or control on one screen resolution or font settings and use it on a machine with other settings. The form and its’ children will intelligently resize if you use it correctly. If you want more information about Automatic Scaling try this article Automatic Scaling in Windows Forms.

Now we are ready to show the  problem. Let’s look at an example.

There is a BaseControl class that is defined as follows:

   1: public class BaseControl : UserControl



   2: {



   3:     public BaseControl()



   4:     {



   5:         InitializeComponent();



   6:     }



   7:  



   8:     private void InitializeComponent()



   9:     {



  10:         this.SuspendLayout();



  11:         // 



  12:         // BaseControl



  13:         // 



  14:         this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);



  15:         this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;



  16:         this.Name = "BaseControl";



  17:         this.ResumeLayout(false);



  18:  



  19:     }



  20: }




And here is the code for some DerivedControl class:







   1: public class DerivedControl : BaseControl



   2: {



   3:     private string someString;



   4:  



   5:     public DerivedControl()



   6:     {



   7:         InitializeComponent();



   8:         //initialize someString here.



   9:     }



  10:  



  11:     protected override void OnResize(EventArgs e)



  12:     {



  13:         base.OnResize(e);



  14:         //use someString here.



  15:     }



  16: }






Since we developed our application on a machine with English settings and most of our test machine were in the same settings as the development machines, the code was executing perfectly.



When the code was running on a Japanese machine something different happened. While creating an instance of DerivedControl the BaseControl constructor was called. BaseControl constructor called its’ InitializeComponents method and as a result the OnResize method of DerivedControl was called. The OnResize method was called due to lines 14 and 15 of  BaseControl since the screen resolution or font settings were different from the development machine settings. Since someString was not initialized yet, a NullReferenceException has been thrown.



To fix this problem we simply set the AutoScaleMode property to AutoScaleMode.None since we don’t need Automatic Scaling support. Of course it took us a while before we understood this problem and therefore I decided to share our experience.



Conclusions:




  • Beware from the AutoScaleMode property.


  • Test your WinForms application on different screen resolutions, DPI settings and Font setting.

Friday, February 5, 2010

Hello world!

Hey, welcome to my blog. My name is Itzhak Kasovitch and this is my first blog entry ever.

Writing a blog is a new experience for me. I always wanted to write a blog, but felt that I should have something new to say in order to do that. After all writing a blog is a way to express yourself and if you don’t have something new to say why would other people read your blog?

One day I read a chapter in Joel Spolsky’s excellent book “Smart and Gets Things Done”. On that book there was one enlightening idea that caught  my eyes. Joel Spolsky explains that most people think that in order to build a successful software company they should have a neat idea that solves a problem nobody have solved before. Joel Spolsky thinks that this is not the only way to succeed. His thinks that a software company can succeed if it solves a problem somebody has already solved in a better way.

This idea was enlightening because it made me think that it is not necessary to invent the wheel to make people come back to your blog.

So this is the place where I will express myself and I hope to find some regular followers. This blog will be about programming usually. On some occasions I will provide book reviews too. So come back soon and don’t hesitate to tell me what you think about my posts.