Use GGE to develop Google gadgets (Google gadget)

Link: http://hi.baidu.com/shirdrn/blog/item/9c144dfc1607e984b901a02d.html

When I started to study opensocial of Google, I found that I had to learn from Google gadget (that is, Google gadgets.

First, create an individual account in Google. you can log on directly before using GGE to edit managed files. Then, you can test your own tool on your igoogle.

Log on to your account and open the link http://code.google.com/intl/zh-cn/apis/gadgets/docs/tools.html. You can see the ggeeditor. The first entry will show the default Hello world example ,:

If you save the default helloworld. xml file and publish it directly, the following error occurs ,:

Some verification warnings may not be ignored even if you click OK. Therefore, you need to add some attribute settings prompted in the warning.

The following is a simple Google tool that I created named welcometomybaiduspace. xml,

Modify it as follows:

 

 
 

  
  
 
   
 
    
<? XML version ="1.0"Encoding =UTF-8"?>
  <Module>
  <Moduleprefs Title ="& # X6b22; & # x8fce; & # x8bbf; & # x95ee; & # x6211; & # x7684; & # x767e; & # x5ea6; & # x7a7a; & # x95f4 ;:-)"
Width = "320"
Height = "200"
Author = "shirdrn"
Author_email = "shirdrn@hotmail.com"
Description = "shirdrn's first Google gadget">
  <Require feature =Opensocial-0.7"/>
  </Moduleprefs>
  <Content type ="Html">
<! [CDATA [
Hello, & # x6b22; & # x8fce; & # x8bbf; & # x95ee; & # x6211; & # x7684; & # x767e; & # x5ea6; & # x7a7a; & # x95f4; http://hi.baidu.com/shirdrn
]>
  </Content>
  </Module>
 
   
 
  
 
 
 
After the modification is complete, select "save" or "Save as" under "file" in the upper left corner to save the modification.

I entered a Chinese character in it. As you can see, it automatically converts Chinese to Unicode.

OK. The simplest Google tool above is complete.

Then, publish your Google gadgets to your igoogle to test the effect.

Select "publish" under "file" to bring up a verification warning dialog box, as shown below:

Click "OK". Ignore this warning. The dialog box is displayed ,:

In this case, you need to select as needed. For such a simple test, select "add to my igoogle page" and publish it to your igoogle homepage. If it is a Google gadgets with complex interaction functions and success, you can select "Publish t0 igoogle directory" to publish it to the igoogle directory to share your Google gadgets. You can also select "add to a webpage" to publish it to a page.

When I select "add to my igoogle page", a prompt page will pop up to confirm that the page is added to your igoogle ,:

Select the blue button "add to Google" and add it to your igoogle. The page turns to your igoogle. You will see the following tab page:

OK. The first Google tool is developed and tested. Below, we will directly reference the Google gadget api reference to briefly describe the structure and meaning of the above XML code:

In the XML file<ModulePrefs>The features of the gadgets are specified, such as the title, author, and preferred size. For example: <Module> <ModulePrefs title="Developer Forum" title_url="http://groups.google.com/group/Google-Gadgets-API" height="200" author="Jane Smith" author_email="xxx@google.com"/> <Content ...> ... content ... </Content> </Module> Users of gadgets cannot change these attributes. The following table lists<ModulePrefs>Attribute: Attribute Description title Provides an optional string for the title of the widget. The title is displayed in the title bar of the igoogle tool. If the string contains the user preference substitution variable and you intend to submit the tool to the igoogle content directory, you should also providedirectory_titleUsed for directory display. directory_title Provides an optional string for titles of the gadgets in the igoogle content directory. Only the text to be displayed should be included, not the user preference substitution variable. This is because the igoogle content directory displays the static view of the mini-tool, so it is not necessary to replace it to generate a reasonable title. For example, if the title of the tool is "Friends For _ up_name _", the directory cannot be replaced with "_ up_name _" to provide a reasonable value. So you onlydirectory_titleSet it to "friend. title_url Provides an optional string for the URL to which the title of the widget is linked. For example, you can link the title to a Web page related to the gadgets. description Optional string that describes the gadgets. author Lists the optional strings of the author of a widget. author_email Provides an optional string for the email address of the gadget author. You can use any email system, but in view of the large amount of spam, you should not use a personal email address. One way is to useHelensmith. Feedback + coolgadget@gmail.comForm email address. Gmail will omit all content after the plus sign (+), so the email address can be interpretedHelensmith.feedback@gmail.com. You can create a Gmail account here. author_affiliation An optional string (such as "google") of the institution to which the author belongs "). This attribute is required for gadgets contained in the igoogle content directory. author_location The author's geographic location, such as "Mountain View city, California ". screenshot Provides an optional string for the URL of the widget screen. The image must be inRobots.txtBlocked public websites. PNG is the preferred format, and GIF and jpg are also acceptable. The screen width of the widget should be 280 pixels. The screen height should be the "normal" height when using a small tool. For more information about the on-screen guidelines, see "Publish to igoogle content directory ". thumbnail Provides an optional string for the URL of the thumbnail. The image must be inRobots.txtBlocked public websites. PNG is the preferred format, and GIF and jpg are also acceptable. The thumbnail of the widget should be 120x60 pixels. For more information about the thumbnail guidelines, see "Publish to igoogle content directory ". height An optional positive integer that specifies the height of the region where the gadgets are running. The height is 200 by default. width An optional positive integer that specifies the width of the region where the widget is running. Default width: 320. scaling Specifies whether to maintain the available Boolean value of the aspect ratio (Aspect Ratio) of the widget when the browser size is adjusted. The auto-scaling tool should set this attribute to true, and the highly fixed tool should set this attribute to false. The default value is true. scrolling An optional Boolean value is provided for vertical and/or horizontal scroll bars when the content exceeds the specified space. If it is false, the content is trimmed Based on the given height and width (which does not indicate that the width cannot be configured. The default value is false. singleton Specifies whether the user can add a Boolean value of the tool multiple times from the directory. The default value is true, which means that the gadgets can be added only once by default. The directory can process this attribute regardless of the selection. For example, the igoogle content directory is processed by adding the "added" gray Text of the added gadgets.singleton="true". Note that changes to this attribute may not be immediately accepted by the Directory. This attribute does not prevent users from adding gadgets multiple times through developer gadgets or by URL. Therefore, you still need to write a small tool to support adding instances multiple times. author_photo For the author page, it is the URL to the photo (preferred 70x100 PNG format, but JPG/GIF is also supported. author_aboutme For the author page, it is a personal description (please keep it within 500 characters ). author_link The author page is a link to your website, blog, and so on. author_quote For the author page, it is the excerpt you want to include (please keep it within 300 characters as much as possible)

The Google gadgets mentioned above only add some text content. In reality, you can add HTML, JavaScript, Flash, and other code to complete complicated functions so that users can experience complex interactions, the following uses a Google tool named "rot13" developed by someone else to see how it works. The XML Code is as follows:

 

 
 

  
  
 
   
 
    
<? XML version ="1.0"Encoding =UTF-8"?>
 
  <Module>
  <Moduleprefs Title ="& # X9b54; & # x672f; & # x8bd1; & # x7801; & # x5668 ;"
Width = "320"
Height = "200"
Author = "shirdrn"
Author_email = "shirdrn@hotmail.com"
Description = "rot13"/>
  <Content type ="Html">
<! [CDATA [
<SCRIPT type ="Text/JavaScript"></SCRIPT>
 
// The Gadget version of rot13.
// Encodes/decodes text strings by replacing each letterWithThe letter
// 13 positions to the right in the alphabet.
FunctionDecodemessage (form ){
VaRAlpha = "abcdefghijklmnopqrstuvwxyz ";
VaRInput = form. inputbox. value;
VaRAchar;
VaRMessage = "";
For(VaRI = 0; I<Input. length; I ++)12) {// compensateFor0-based index
{
Achar = input. charat (I );
VaRIndex = Alpha. indexof (Achar. tolowercase ());
 
//IfA non-alphabetic character, just append to string
If(Index =-1)
{
Message + = Achar;
}
 
//IfYou have to wrap around the end of the alphabet
Else If(Index>
Index = 25-index; // last item in array is at [25]
Index = 12-index; // Because array startsWith0
Achar = Alpha. charat (INDEX );
Message + = Achar;
}
 
//IfYou don't have to wrap
Else{
Achar = Alpha. charat (index + 13 );
Message + = Achar;
}
}
Document. Getelementbyid ('content _ Div '). innerhtml ="<B>Your message:</B>"+ Message;
}
 
 
<Form name ="Myform"Action =""Method ="Get">Message:<Br><Input type ="Text"Name ="Inputbox"Value =""><P><Input type ="Button"Name ="Button"Value ="Transform"Onclick ="Decodemessage (This. Form )">
</Form>
<Div id ="Content_div"></Div>
]>
  </Content>
  </Module>
 
   
 
  
 
 
 
In the above code, I modified the title. Because publishing requires some necessary attributes, I added some attributes myself, as shown below:

Width = "320" Height = "200" Author = "shirdrn" Author_email = "shirdrn@hotmail.com" Description = "rot13"

Saved as the magicdecoder. xml file. The complete URL format is:

Http://hosting.gmodules.com/ig/gadgets/file/117231683431063926075/magicDecoder.xml

Then, publish it to my igoogle. The browsing effect is as follows:

Enter a message, which is a response string. I will test it using helloshirdrn ,:

For details about rot13, refer to the following page:

Http://en.wikipedia.org/wiki/ROT13