How to create a iGoogle Widget!

by Pieter Brinkman 14. January 2008 13:43

Because every eveloper needs to have a New Guid generator and .Net info search iGoogle widget ;-). It was time for me to create one!

I had no idea where to start, try searching Google no good results. But after clicking along on iGoogle I found the Google Gadgets developer site. After reading some documents and playing with some examples I found out that it is to easy to create a iGoogle widget. Here is a ... step guide to create a iGoogle widget.

In this guide where going to load an external website (http://www.newguid.net/iGoogle_CreateGuid.aspx) in the widget (the most easy way to build a widget).

Step 1:
Go to the Google getting started document and scroll down to the Google Gadgets Editor. Here you can try out some examples or insert your own code.

Step 2:
Insert the following code to the Gadgets Editor 

[code:html]
<?xml version="1.0" encoding="UTF-8"?><Module>  <ModulePrefs title="[Widget Title]" height="100" author="[Author Name]" author_email="[Author Email]" description = "[Widget Description]" screenshot = "[Link to a Screenshot]" thumbnail = "[Link to a thumbnail]" author_link = "[Link to author website]"><Require feature="dynamic-height"/>  </ModulePrefs>   <Content type="url" href="http://www.newguid.net/iGoogle_CreateGuid.aspx"/></Module>
[/code]

Press the Preview tab. You will see that the New Guid widget is already working. The widget just loads the website within an Iframe. The best thing is that you only have to design an build your widget once on your own server. It is a normal page so there aren't any design limits.

Step 3:
Save and Publish your widget. You have to change all properties (eg. title, author, author_email, etc.) in de code before you save and publish your widget. After you've changed the properties you can just save and then publish your widget. You can either publish your widget on your webpage (just by linking to it) or publish it into the Google Directory or both.

Publish your gadget in the editor by going to File > Publish. This button is only clickable if your syntax is correct.

Your gadget will be validated before the real publish. Fix all the issues that show in popup (see image below). And retry.

 

 

Like I told you to easy. Ofcourse you can do mutch more with it, but this will do for most of your widgets.

 

Tags: , ,
Categories: Google

Using Google Custom Search Engine (CSE) with Asp .Net

by Pieter Brinkman 12. January 2008 12:11

I’ve been using Google Custom Search Engine (CSE) for one of my projects (searchTravelBlog). When I was trying to implement CSE in NewGuid.NET I found some problems doing this.The big issue is that CSE depends on the html FORM element with submit event for posting all the variables from the hiddenfields. 

The CSE code from Google looks like this:   

[code:html]
<form action="http://" id="searchbox_004900934070880588383:m5qbf6oxe6k">
      <input type="hidden" name="cx" value="004900934070880588383:m5qbf6oxe6k" />
      <input type="hidden" name="cof" value="FORID:11" />
      <input type="text" name="q" size="25" />
      <input type="submit" name="sa" value="Search" />
</form>
[/code]

 

When you copy this code into a .Net page it will not work. This because of the default .Net server form tag.

If you want to use CSE within your .Net page don't use Google's code that generates the search form.  Create your own code, just add one Textbox and one Button control to your page.

[code:html]
<asp:TextBox ID="searchQuery" runat="server" size="30" />
<asp:Button runat="server" Text="Search .Net Info" ID="searchButton" OnClick="searchButton_Click" />
[/code]

 

In the code behind you add the following searchButton_Click event:

[code:c#]
protected void searchButton_Click(object sender, EventArgs e)
{
   StringBuilder redirectUrl = new StringBuilder();
   //The URL to your resultpage
   redirectUrl.Append("./search_netInfo.aspx");
   //Add your CSE unique identifier
   redirectUrl.Append("?cx=004900934070880588383%3Am5qbf6oxe6k");
   //Add your advertising location code
   redirectUrl.Append("&cof=FORID%3A11");
   //The search query
   redirectUrl.Append("&q=" + searchQuery.Text);
   //Redirect to the resultpage
   Response.Redirect(redirectUrl.ToString());
}
[/code]

 

You can find these values in the hidden values from the default code that Google creates for you.It is important that the values within the redirectUrl are html encoded.

Add the following code to your Page_PreRender so that the searchquery will appear in the textbox.

[code:c#]
protected void Page_PreRender(object sender, EventArgs e)
{
   searchQuery.Text = Request.QueryString["q"];
}
[/code]

 

Note: This example doesn't include the branding that Google requires. Please read the branding guidelines here!

Categories: ASP.Net | Google

obout Suite for .Net 2.0

by Pieter Brinkman 11. January 2008 06:03

When surfing around I found this great range ASP.Net controls.  Obout.com offers a great variety of ASP and ASP .Net controls. The controls are Cross-Browser (including Safari  and Opera).You can download the obout Suite for .Net 2.0. The suite contains the following controls:

  • TreeView  (recommended)
  • Grid
  • Editor
  • Spell checker
  • Calendar
  • Easy menu
  • Combobox
  • Slide menu
  • AJAXPage
  • Two colors menu
  • Splitter
  • Super button
  • Tree_DB
  • Autosuggest
  • Show
  • Flyout Window
  • FileUploadProgress
  • Slide Panel (with Slide menu)
  • TabStrip (with Easy Menu) 
  • Context menu (with EasyMenu)
  • Toolbar (with Supper button)
  • State Selector (with Combobox)

There are loads of examples on their website. So go check it out!

Tags: ,
Categories: AJAX | ASP.Net | Controls