Will Your Next Web Application Be a Google Gadget?

Will Your Next Web Application Be a Google Gadget?

ince AJAX first appeared, developer interest in JavaScript has increased exponentially?and toolsets for building functionality in JavaScript have burgeoned as well. One of the latest tools for JavaScript-related development is Google Gadgets. Many web sites already provide gadgets built with the Google tools, and you can, too. This article shows you how to develop a Google Gadget that fetches DevX RSS feeds and displays them to the user.

Anatomy of a Google Gadget
Developing a Google Gadget (simply gadget from now on) is really an easy task. After all, a gadget is made of XML, HTML, JavaScript, and optionally, CSS, used as follows:

  • XML describes the gadget’s structure.
  • HTML and CSS provide the presentation layer.
  • JavaScript supplies the gadget’s logic.

The XML below shows the basic gadget structure:

                                  ]]>         

Here’s a breakdown of the XML elements. The root element is Module. The ModulePrefs element holds information about the gadget (title, height, and so on) and its author?more on this later. The Content element is apt to contain the “real” content?the CSS, HTML, and JavaScript code. As you’ll see later on, there are other elements to consider, but these are the basic elements you’ll use in each and every gadget you develop.

A Simple “Hello, World” Gadget
The easiest way to start learning a new programming language or technology is to dive right in with a simple example. Here’s the code for a gadget that just prints out the traditional “Hello, World” message in a box:

                                      hello, world!          
]]>

Save the preceding XML file using the name hello-world.xml. You won’t use this right away?I’ll show you how to deploy it in the next section?but for now, look at Figure 1, which shows what the HelloWorld gadget looks like when run.

 
Figure 1. HelloWorld Gadget In Action: This is how the hello-world.xml renders in the Google Homepage.

By looking at the previous example you can note the following:

  • You define a gadget completely within an XML file.
  • The tag indicates that this XML file contains a gadget.
  • You specify the gadget’s title using the ModulePrefs attribute.
  • The line indicates that the gadget’s content type is HTML (it may also contain CSS and/or JavaScript code). There are other content types but this one is the most flexible and versatile. You can find more info on content types here.
  • The CDATA section contains the HTML (and optionally CSS and JavaScript) code used to render and activate the gadget. You don’t have to use CSS, you can use simply inline style attributes in your HTML, as the previous example does to specify the red color.

To include a CSS block use a standard

You include JavaScript code within

You'll see more on both CSS and JavaScript later on when developing the DevX RSS reader gadget.

Gadget Deployment
Of course, after developing a gadget you will want to deploy it. For example, to run the "hello, world" gadget you need to follow these steps:

  1. Upload the gadget to your web server.
  2. Go to http://www.google.com/ig.
  3. To add a gadget, you must have a personalized homepage. If you don't already have one, you must create it by clicking the "Get started" link. Then sign in with an existing Google Account, or create a new one.
  4. After you have a personalized homepage, you can add gadgets to it by clicking the "Add stuff" link in the upper right corner. This takes you to the content directory. You can use the content directory to search for gadgets and add them to your homepage.
  5. Click the "Add by URL" link (next to the "Search Homepage Content" button).
  6. In the "Add by URL" field, enter the URL (your server or mine) for the hello-world.xml gadget, and then click the Add button.
  7. Click the "Back to homepage" link, to see the new gadget on your homepage.
Author's Note: I uploaded the examples for this article in my web server so you can try them even if you don't have your own. You can find all the examples under the following path: http://www.alessandrolacava.com/google/gadgets/. For example, the URL related to the "hello, world" gadget will be: http://www.alessandrolacava.com/google/gadgets/hello-world.xml.

You can also publish your gadgets to the Google Content Directory. That link discusses how to publish your gadget to other targets too, such as your own web site through syndication.

Now that you've seen how to write and deploy a simple gadget you're ready to move on to more interesting stuff.

User Preferences
Some gadgets need to give users a way of supplying user-specific information. For example, an RSS-feed-reader gadget might require users to provide the number of items to retrieve or the URL of a feed the user is interested in. The user preferences section in the XML file describes the user input fields that are turned into user interface controls when the gadget runs. To include a user preference in your gadget you need to include a section into your XML file. Going back to the HelloWorld example, you could let users specify the gadget's title through a UserPref element:

                                     hello, world!          
]]>
 
Figure 2. User Preference: At runtime, the gadget renders the "title" user preference as a simple textbox.

Figure 2 shows how the preceding user preference gets rendered?as a simple textbox.

The attributes for the UserPref elements in the preceding example have the following meaning:

  • name is the preference's name. It's through its name that you refer to the preference within your code. This is the only required attribute.
  • display_name is the label displayed beside the rendered object?textbox, checkbox, and so on.
  • default_value is the value selected by default.
  • datatype is the datatype of this user preference. The options are string, bool, enum, hidden, list or location. If you don't specify a datatype value it defaults to string. The preference rendering depends on this attribute. For example, a preference defined with a datatype of bool renders as a checkbox. You'll see more about datatypes later on.

These attributes are the most common, but there are others you might need in your gadget. Refer to the official documentation to find out more on this and other gadget API topics.

Notice how the previous code points to the user preference. It uses a double underscore, followed by "UP," which signifies "User Preference," another underscore, and the preference name, closing with another double underscore:

   __UP_prefName__

The only thing that changes is prefName which must match the name you provided in the name attribute when you defined the preference. Such a variable is called a "substitution variable." For example, you can refer to the title preference using __UP_title__. Later on you'll see how to reference a user preference programmatically within a JavaScript block.

Core JavaScript Library
You manage gadget logic using JavaScript. To include JavaScript code in your gadget use the following template:

                                                   // Your JavaScript code here...                     ]]>         

You'll use the Google Gadget API core JavaScript library frequently. Possibly the most important function in this library is _IG_RegisterOnloadHandler, which is the event-handler function called when the gadget is loaded. It takes a single argument?the function it should invoke when the page loads. Here's an example:

                         function init()            {              alert("hello, world!");            }                  // Call the init function on page load            _IG_RegisterOnloadHandler(init);                     ]]>     

This gadget uses _IG_RegisterOnloadHandler to call the init function, which displays "hello, world!" as soon as the page gets loaded.

Another useful Google Gadget API feature is the _IG_Prefs class, which you use to retrieve user preferences programmatically:

   var prefs = new _IG_Prefs();   var title = prefs.getString("title");   alert(title);

The preceding code retrieves the title user preference and displays it using the JavaScript alert method. In addition to getString, you can use getInt and getBool to retrieve integer and Boolean user preferences, respectively. You can also set preferences as well as retrieve them, for example:

   var prefs = new _IG_Prefs();   prefs.set("title", "The New Title Here");

To use this setter method you need to include the setprefs library in your gadget. You do this through a Require XML element?a child of ModulePrefs, for example:

           

There are many other JavaScript libraries you may find useful. They fall under the name "Feature-Specific JavaScript Libraries." For example, you could include the JavaScript library used to build tabbed applications. You'd include that library using the following code:

           

The preceding code would let you use the _IG_Tabs class and its methods to build very nice tab-based gadgets. I won't go into any more detail about this and other feature-specific JavaScript libraries in this article since that discussion would require an article of its own.

Instead, I'll briefly discuss useful features in the core JavaScript libraries. For example, if you want to retrieve the content at a URL as plain text, HTML or JSON (read more on JSON here) you can use the _IG_FetchContent function as follows:

                   function init()         {         _IG_FetchContent(           "http://www.some-content.to-display.com",            callbackFunc);      }         function callbackFunc(responseText)      {        _gel("mainContainer").innerHTML = responseText;      }            // Call the init function on page load      _IG_RegisterOnloadHandler(init);                          
]]>

As you can see _IG_FetchContent takes two arguments. The first is the URL to fetch the content from. The second is the callback function to call when the content gets retrieved. This is necessary since _IG_FetchContent is asynchronous so it does return immediately after its call. In the previous example the callback function displays the HTML code retrieved from that fictitious URL within the mainContainer div tag.

Of course, you're free to handle the retrieved content any way you'd like. For example, you might use this scenario to display a random funny quote whenever the gadget gets loaded. Note also the use of another core function, _gel, which is just a shorthand "get-element" wrapper around the more verbose document.getElementById JavaScript function. There are other useful wrapper functions. You'll see some of them later on. The others can be inspected by pointing your browser to the Official API Reference.

In addition to _IG_FetchContent, the core API provides two other functions used for similar purposes:

  • _IG_FetchXmlContent(URL, func): Fetches the XML content at the specified URL. When it's ready, calls the function specified in the func parameter. Like _IG_FetchContent(), it is asynchronous.
  • _IG_FetchFeedAsJSON(URL, func, num_entries, get_summaries): Fetches the RSS/Atom feed content at URL asynchronously and returns it as a JSON object. When it's ready, calls func. It fetches, at most, the number of feed entries specified by num_entries (the default is 3, the possible range is 1-100), and optionally fetches summaries for each entry depending on the value of get_summaries?the default is false.

I used the _IG_FetchFeedAsJSON method to develop the DevX RSS feed-reader gadget discussed next.

Build a DevX RSS Feed-Reader Gadget
Listing 1 contains the complete code to build the DevX feed reader. Although at first glance, that might look like a lot of code, it's not that much when you consider that it contains both the presentation and the business logic.

Again, if you don't have a server, you can test this gadget at the URL http://www.alessandrolacava.com/google/gadgets/devx-feeds.xml.

Although Listing 1 is considerably larger than the examples you've seen so far, it is composed of the same elements you've already seen, starting with the Module root element, which contains the following child elements:

  • ModulePrefs
  • A set of UserPref elements.
  • A Content element.

However it's worth explaining some new aspects you haven't seen yet. Here's the ModulePrefs element:

       

As you can see, the ModulePrefs element contains general infoormation about the gadget?author info, the gadget's height and so on. Because the content may exceed the height, the gadget supports scrolling via the scrolling="true" attribute. Notice how I wrote my e-mail address:

   [email protected]

I've done that because of spam. Gmail drops everything after the plus sign (+).

I told you earlier that you can specify other datatypes for a UserPref section. The control rendered for the preference strongly depends on the datatype you choose. If you don't specify a datatype it defaults to string, which gets rendered as a simple textbox. The title preference relies on that default rendering:

   
 
Figure 3. Preferences: The figure shows how the the DevX gadget renders preferences.

Figure 3 shows how the sample gadget renders the title and other preference options.

The DevX gadget uses bool and enum preference datatypes as well as the default string type. As you can see from Figure 3, the gadget renders bool preferences as a checkbox, while the enum preference becomes a combobox (a drop-down list). For example, here's the feedUrl enum preference definition that lets the user choose which of several DevX feeds to fetch.

                     ...   

Note that you can indicate a default value through the default_value attribute of the UserPref element, and that the displayed value can differ from the item's value. You specify a different display value using the display_value attribute. If you don't indicate a specific display value the control displays the value attribute value instead?which wouldn't be as convenient for end users in this case. For completeness, here's a more detailed examination of one of the bool preferences used in the DevX gadget:

   

The previous preference definition lets users choose whether to open feed links in the same page?that is in their Google Homepage?or in a different page. I chose true as the default for this preference, which means that the checkbox will be checked by default and all the feed links will load in a fresh browser instance.

As you have probably guessed, the most important part of a gadget lies in the Content element, which is where you define the presentation (CSS and HTML) and business logic (JavaScript) for the gadget application.

I won't delve into the CSS section because it's just styling, like any other CSS. The HTML part is delimited by the following line of code:

   

The contents of this div element will contain the entire gadget body?namely, the DevX RSS feeds.

That leaves the JavaScript section, which is formed by three functions: fillGlobals, init, and parseFeed?plus a call to the _IG_RegisterOnloadHandler discussed earlier, which registers the init function as the page load handler. Here's the code for the init function:

   function init()    {      fillGlobals();         // Display loading message before fetching feed.      container.innerHTML =          '
Loading...
'; // Fetch feed and return it as a JSON object. // parseFeed is the callback function. _IG_FetchFeedAsJSON(feedUrl, parseFeed, numOfEntries); }

The init function calls fillGlobals, which simply assigns values to some variables used throughout the application. It does this by retrieving the user preferences and getting a handle to the feedContainer div tag that contains the feeds. Here's the code for the fillGlobals function:

   function fillGlobals()   {      var prefs = new _IG_Prefs(__MODULE_ID__);      feedUrl = prefs.getString("feedUrl");      numOfEntries = prefs.getInt("numOfEntries");      container = _gel("feedContainer");      showFeedDate = prefs.getBool("showFeedDate");      openInNewPage = prefs.getBool("newPageTarget");   }

After calling fillGlobals, init displays a "Loading..." message in the main container and then calls the _IG_FetchFeedAsJSON built-in function used to retrieve the RSS feed as a JSON object (see this JSON article for more information. The three parameters passed to _IG_FetchFeedAsJSON are:

  • feedUrl: The URL of the RSS feed to fetch. The fillGlobals method retrieves the specific preferred feed value from the user preferences.
  • parseFeed: This is a callback function fired when the feed has been retrieved. Remember, _IG_FetchFeedAsJSON fetches feeds asynchronously and, when done, passes the JSON object?representing the feeds?to the specified callback function, namely parseFeed.
  • numOfEntries: the maximum number of entries to retrieve. This variable is also initialized in fillGlobals from the user's preferences.

That's all the basic information you need to know to build brilliant Google gadgets. Figure 4 shows a screenshot of the completed gadget in my Google homepage.

 
Figure 4. The DevX Tab in My Google Homepage: Here's my homepage showing both the sample gadgets developed for this article?the HelloWorld gadget and the DevX feed reader gadget.

I won't delve into the details of the parseFeed function because it's just basic JavaScript code that loops through the retrieved feed entries and adds them to the gadget's main container (the feedContainer div). The only thing you might need to know more about is the structure of the JSON object passed to parseFeed. For more information on that you can explore the official documentation.

Security Concerns
Finally, I wish to spend some words about security. In fact, you might wonder: "What impedes my gadget from accessing data that belongs to another gadget on the page?"

From gadgets whose content type is HTML?declared such through the line —you cannot access other gadgets' data. The reason for this is that each HTML-type gadget is rendered into an iframe. The following is an excerpt from the Google Gadget Development Fundamentals page:

"Gadget content is wrapped in an iframe. An iframe is effectively a separate page running within the parent page. The iframe has no knowledge of and no ability to interact with the parent page. This isolation helps protect users from malicious gadgets that might try, for example, to steal or modify cookies. However, iframes do impose certain restrictions by denying gadgets to interact with each other and other components on the page."

You can bypass these restrictions by declaring your gadget as an HTML-inline gadget, which you do by changing its content type setting to . Of course, this type of gadget has other limitations; for example, you can't use HTML-inline gadgets with other Google properties, and HTML-inline gadgets can't be included in the content directory. There are other major drawbacks to inlining, but they are beyond the scope of this article. For more information about inline gadgets I strongly suggest you download and study the related documentation.

devx-admin

devx-admin

Share the Post:
Software Development

Top Software Development Companies

Looking for the best in software development? Our list of Top Software Development Companies is your gateway to finding the right tech partner. Dive in

India Web Development

Top Web Development Companies in India

In the digital race, the right web development partner is your winning edge. Dive into our curated list of top web development companies in India,

USA Web Development

Top Web Development Companies in USA

Looking for the best web development companies in the USA? We’ve got you covered! Check out our top 10 picks to find the right partner

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with

Software Development

Top Software Development Companies

Looking for the best in software development? Our list of Top Software Development Companies is your gateway to finding the right tech partner. Dive in and explore the leaders in

India Web Development

Top Web Development Companies in India

In the digital race, the right web development partner is your winning edge. Dive into our curated list of top web development companies in India, and kickstart your journey to

USA Web Development

Top Web Development Companies in USA

Looking for the best web development companies in the USA? We’ve got you covered! Check out our top 10 picks to find the right partner for your online project. Your

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the state. A Senate committee meeting

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor supply chain and enhance its

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with minimal coding. These platforms not

Cybersecurity Strategy

Five Powerful Strategies to Bolster Your Cybersecurity

In today’s increasingly digital landscape, businesses of all sizes must prioritize cyber security measures to defend against potential dangers. Cyber security professionals suggest five simple technological strategies to help companies

Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019 tech firms, as per data

Huawei Electric Dazzle

Huawei Dazzles with Electric Vehicles and Wireless Earbuds

During a prominent unveiling event, Huawei, the Chinese telecommunications powerhouse, kept quiet about its enigmatic new 5G phone and alleged cutting-edge chip development. Instead, Huawei astounded the audience by presenting

Cybersecurity Banking Revolution

Digital Banking Needs Cybersecurity

The banking, financial, and insurance (BFSI) sectors are pioneers in digital transformation, using web applications and application programming interfaces (APIs) to provide seamless services to customers around the world. Rising

FinTech Leadership

Terry Clune’s Fintech Empire

Over the past 30 years, Terry Clune has built a remarkable business empire, with CluneTech at the helm. The CEO and Founder has successfully created eight fintech firms, attracting renowned

The Role Of AI Within A Web Design Agency?

In the digital age, the role of Artificial Intelligence (AI) in web design is rapidly evolving, transitioning from a futuristic concept to practical tools used in design, coding, content writing

Generative AI Revolution

Is Generative AI the Next Internet?

The increasing demand for Generative AI models has led to a surge in its adoption across diverse sectors, with healthcare, automotive, and financial services being among the top beneficiaries. These

Microsoft Laptop

The New Surface Laptop Studio 2 Is Nuts

The Surface Laptop Studio 2 is a dynamic and robust all-in-one laptop designed for creators and professionals alike. It features a 14.4″ touchscreen and a cutting-edge design that is over

5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in Japan. This innovative approach will

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial intelligence (AI) in journalism. These

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this autumn sale has already created

Cisco Splunk Deal

Cisco Splunk Deal Sparks Tech Acquisition Frenzy

Cisco’s recent massive purchase of Splunk, an AI-powered cybersecurity firm, for $28 billion signals a potential boost in tech deals after a year of subdued mergers and acquisitions in the

Iran Drone Expansion

Iran’s Jet-Propelled Drone Reshapes Power Balance

Iran has recently unveiled a jet-propelled variant of its Shahed series drone, marking a significant advancement in the nation’s drone technology. The new drone is poised to reshape the regional

Solar Geoengineering

Did the Overshoot Commission Shoot Down Geoengineering?

The Overshoot Commission has recently released a comprehensive report that discusses the controversial topic of Solar Geoengineering, also known as Solar Radiation Modification (SRM). The Commission’s primary objective is to

Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing pandemic. This major investment, which

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs that could dramatically change the

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you choose. For example, a self-hosted

Battery Investments

Battery Startups Attract Billion-Dollar Investments

In recent times, battery startups have experienced a significant boost in investments, with three businesses obtaining over $1 billion in funding within the last month. French company Verkor amassed $2.1