Click here to Skip to main content
15,867,453 members
Articles / Web Development / HTML
Article

Gadget Maker IDE

Rate me:
Please Sign up or sign in to vote.
4.30/5 (7 votes)
28 Sep 2011CPOL3 min read 30.8K   847   21   7
This article explains how to create a Gagdet using an IDE
Sample Image - maximum width is 600 pixels

Sample Image - maximum width is 600 pixels

Introduction

I have created an IDE using Visual C# 2010 (Express Edition) that automates the process of creating a Windows Vista Gadget. This IDE has the common features found in an IDE, for example, editing the HTML/JavaScript code using an editor, editing the gadget manifest using a GUI interface, inserting generic code and building the gadget. I have used SharpZipLib, a free C# compression library to compress the gadget files.

Background

Windows Vista Gadgets are small applications which are hosted on the Sidebar. The code for a gadget is defined using HTML and JavaScript, while properties of the gadget are defined using an XML file. In the IDE, I have used a Rich Text Box to create/edit the HTML and JavaScript code. To specify the gadget properties, I have created a GUI interface using Text Box controls. Common operations like opening files, saving files, cutting text, copying text, pasting text and setting foreground and background colors and setting fonts are performed using menu commands. A gadget is created by compressing the files that make up the gadget.

Using the Code

Following are the steps to use the IDE:

  1. Select the 'File -> New' menu command from the Gadget tab and type the code for the gadget. Alternatively, use the 'Gadget -> Insert Template' menu command from the Gadget tab to insert a default template which can be edited if required.
  2. Save the file as an HTML file using the 'File -> Save' command.
  3. Click on the Properties tab and edit values for the Gadget properties or use the default values. Ensure that the value of Source property is the same as the HTML file name (without path).
  4. Save the properties by clicking on the 'Save Gadget Manifest' button.
  5. You can view the Gadget XML file by clicking on the 'View Gadget Manifest' button.
  6. Select the 'Gadget -> Build Gadget' menu command from the Gadget tab to build the gadget.
  7. Double click the gadget file to install it.

I have used the following code to define a default template which is inserted by using the 'Insert Template' command from the Gadget Menu. This default template can be used to create a simple 'Hello World' gadget. It can be modified as per the requirement of the user. The entire template code is stored in a string variable and returned from the GetTemplate() function.

C#
private string GetTemplate()
{
    string template="";
    try
    {
        template = "<html>\n";
        template += "<head>\n";
        template += "<title>My Gadget</title>\n";
        template += "<style>\n";
        template += "body\n";
        template += "{\n";
        template += "margin: 0px;\n";
        template += "width: 130px;\n";
        template += "height: 80px;\n";
        template += "}\n";
        template += "#gadgetContent\n";
        template += "{\n";
        template += "width: 130px;\n";
        template += "top: 24px;\n";
        template += "text-align: center;\n";
        template += "position: absolute;\n";
        template += "font-family: Verdana;\n";
        template += "font-size: 10pt;\n";
        template += "}\n";
        template += "</style>\n";
        template += "</head>\n";
        template += "<body>\n";
        template += "<span id=\"gadgetContent\">\n";
        template += "<!--\n";
        template += "Your content goes here\n";
        template += "-->\n";
        template += "<marquee><h2 style=\"color:red\">Hello World</h2></marquee>\n";
        template += "</span>\n";
        template += "</body>\n";
        template += "</html>\n";
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
    }
    return template;
}

The return value of the GetTemplate() function is assigned to the text property of the editor control.

Following is the code to set the template on the Rich Text Editor:

C#
private void insertTemplateToolStripMenuItem_Click(object sender, EventArgs e)
{
    try
    {
        if (txtEditor.Modified)
        {
            if (MessageBox.Show("Do you want to save the current file?",
            "Confirm file save", MessageBoxButtons.YesNo,
            MessageBoxIcon.Question) == DialogResult.Yes)
            {
                saveToolStripMenuItem_Click(sender, e);
            }
        }
        txtEditor.Text = GetTemplate();
        txtEditor.Modified = true;
        txtEditor.Tag = "";
        this.Text = "Gadget Maker";
        MessageBox.Show("Now you can edit the gadget content and layout",
        "Edit", MessageBoxButtons.OK, MessageBoxIcon.Information);
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
    }
}

The following code is used to save the gadget settings as gadget.xml file. The properties are appended into a string variable and saved into the gadget.xml file using a StreamWriter object.

C#
private void btnSave_Click(object sender, EventArgs e)
{
    try
    {
        string xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
        xml += "<gadget>";
        xml += "<name>" + txtGadgetName.Text + "</name>";
        xml += "<namespace>" + txtNamespace.Text + "</namespace>";
        xml += "<version>" + txtVersion.Text + "</version>";
        xml += "<author name=\"" + txtAuthorName.Text + "\">";
        xml += "<info url=\"" + txtInfoURL.Text + "\"/>";
        xml += "</author>";
        xml += "<copyright>" + txtCopyright.Text + "</copyright>";
        xml += "<description>" + txtDescription.Text + "</description>";
        xml += "<hosts>";
        xml += "<host name=\"" + txtHostName.Text + "\">";
        xml += "<base type=\"" + txtBaseType.Text + "\" apiversion=\"" +
        txtVersion.Text + "\" src=\"" + txtSource.Text + "\"/>";
        xml += "<platform minPlatformVersion=\"" + txtMinPlatformVersion.Text + "\"/>";
        xml += "<permissions>" + txtPermissions.Text + "</permissions>";
        xml += "</host>";
        xml += "</hosts>";
        xml += "</gadget>";
        FileStream manifestfile = new FileStream(Path.GetDirectoryName
        (txtEditor.Tag.ToString()) + "\\gadget.xml",
        FileMode.Create, FileAccess.Write, FileShare.None);
        StreamWriter writer = new StreamWriter(manifestfile);
        writer.WriteLine(xml);
        writer.Close();
        manifestfile.Close();
        MessageBox.Show("Gadget Manifest Saved", "Message",
        MessageBoxButtons.OK, MessageBoxIcon.Information);
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message, "Error",
        	MessageBoxButtons.OK, MessageBoxIcon.Information);
    }
}

The following code compresses the HTML and XML files into a .gadget file using the SharpZipLib compression library. The gadget file is saved in the same folder where you have saved the HTML file and has the same name as the HTML file.

C#
private void buildToolStripMenuItem_Click(object sender, EventArgs e)
{
    try
    {
        if (txtSource.Text.Trim().Length == 0)
        {
            MessageBox.Show("File not saved. Please save file first.",
            "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
            return;
        }
        ZipOutputStream zs = new ZipOutputStream(File.Create
        (Path.GetDirectoryName(txtEditor.Tag.ToString()) + "\\" +
        Path.GetFileNameWithoutExtension(txtEditor.Tag.ToString()) + ".gadget"));
        FileStream fs1 = File.OpenRead(txtEditor.Tag.ToString());
        byte[] b1 = new byte[fs1.Length - 1];
        fs1.Read(b1, 0, b1.Length);
        ZipEntry entry1 = new ZipEntry(Path.GetFileName(txtEditor.Tag.ToString()));
        entry1.DateTime = DateTime.Now;
        entry1.Size = fs1.Length - 1;
        fs1.Close();
        zs.PutNextEntry(entry1);
        zs.Write(b1, 0, b1.Length);
        FileStream fs2 = File.OpenRead(Path.GetDirectoryName
        (txtEditor.Tag.ToString()) + "\\gadget.xml");
        byte[] b2 = new byte[fs2.Length - 1];
        fs2.Read(b2, 0, b2.Length);
        ZipEntry entry2 = new ZipEntry(Path.GetFileName
        (Path.GetDirectoryName(txtEditor.Tag.ToString()) + "\\gadget.xml"));
        entry2.DateTime = DateTime.Now;
        entry2.Size = fs2.Length - 1;
        fs2.Close();
        zs.PutNextEntry(entry2);
        zs.Write(b2, 0, b2.Length);
        zs.Close();
        MessageBox.Show("Build Completed. Gadget saved as " +
        Path.GetDirectoryName(txtEditor.Tag.ToString()) + "\\" +
        Path.GetFileNameWithoutExtension(txtEditor.Tag.ToString()) +
        ".gadget", "Build Completed", MessageBoxButtons.OK, MessageBoxIcon.Information);
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message, "Error",
        MessageBoxButtons.OK, MessageBoxIcon.Information);
    }
}

Double clicking on the gadget file will display the following screen:

Image 3

Clicking on the Install button will install the gadget on the sidebar.

Points of Interest

This application is developed using Visual C# 2010 Express Edition. It can be executed by double clicking on the GadgetMaker.exe file from the bin/Debug or bin/Release folder.

History

  • 29th September, 2011 - Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Instructor / Trainer NIIT, India
India India
I am a trainer by profession. Currently I am working with iFuture Technologies(India) as a Senior Faculty. I enjoy programming as a hobby. During my career I have seen the growth and decline of many technologies, many of them being my favorites like Flash, WPF, Windows Mobile Development. Few of my current favorites are Android, Xamarin and Python, though I also like traditional and evergreen languages like PHP, C#, Visual Basic and Java.

Apart from computers, my favorite pastime is bicycling.

Comments and Discussions

 
GeneralMy vote of 3 Pin
Abolfazl Khusniddinov3-Oct-11 18:23
Abolfazl Khusniddinov3-Oct-11 18:23 
GeneralRe: My vote of 3 Pin
Azim Zahir3-Oct-11 18:53
Azim Zahir3-Oct-11 18:53 
GeneralMy vote of 2 Pin
Pavel Vladov28-Sep-11 23:31
Pavel Vladov28-Sep-11 23:31 
GeneralRe: My vote of 2 Pin
RugbyLeague29-Sep-11 1:51
RugbyLeague29-Sep-11 1:51 
GeneralRe: My vote of 2 Pin
Azim Zahir29-Sep-11 4:09
Azim Zahir29-Sep-11 4:09 
SuggestionRe: My vote of 2 Pin
Clifford Nelson7-Sep-12 14:38
Clifford Nelson7-Sep-12 14:38 
GeneralRe: My vote of 2 Pin
Azim Zahir9-Sep-12 5:15
Azim Zahir9-Sep-12 5:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.