Section 13.2. Creating Windows Live Gadgets with Atlas


13.2. Creating Windows Live Gadgets with Atlas

With the launch of the new Windows Live portal at http://www.live.com, the term "live" is omnipresent in Microsoft siteseven the Passport ID service has been renamed Windows Live ID. The Windows Live portal itself is full of Ajax, being one of the first Atlas-enabled web applications to use Gadgets, which are self-contained components that users can add to their Windows Live portal. Examples of Gadgets are a weather map, a stock-price feed, a sports summary, and so on. Windows Live is one site that can host Gadgets; Start.com is another.

There are several gadgets available at http://microsoftgadgets.com (there's a whole gallery of them at http://microsoftgadgets.com/Gallery), and using Atlas, you can create your own Gadgets. You can add your Gadget to your own Windows Live home page, and you can make your Gadget available to other Windows Live users as well.

In this section, we will create a simple Gadget and show how to incorporate this in your (or someone's) customized home page at Live.com. For the Gadget, we reuse the Timer Atlas control from Chapter 1 to print out the current time, once per second. This small component will then be used on Live.com.

The main differences between creating a Gadget and "ordinary" Atlas controls are that the content of the Gadget must be contained within an <atlas:Gadget> element, and that no server-side components are allowed. So you have to rely on HTML, JavaScript, and of course Atlas client-side elements.

Example 13-2 contains the markup for the Gadget. Notice the <span> element that will hold the current time. In the xml-script section, a <timer> element generates a Tick event every 1,000 milliseconds that calls an UpdateContents() function. This function is embedded in the file Gadget.js, which is referenced within the Gadget element.

Example 13-2. The HTML portion of the Atlas Gadget

 Gadget.aspx <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">   <title>Atlas</title> </head> <body>   <form  runat="server">     <atlas:ScriptManager  runat="server" />     <atlas:Gadget runat="server"  Title="Client Time"     Description="Updated every five seconds">       <ContentTemplate>         <p>     <span >calculating ...</span>         </p>         <script type="text/xml-script">            <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">              <components>      <timer  interval="1000" tick="UpdateContents"     enabled="true" />              </components>            </page>         </script>       </ContentTemplate>     <Scripts>     <atlas:ScriptReference Path="Gadget.js" />     </Scripts>     </atlas:Gadget>   </form> </body> </html> 

The client code to determine the current time and display it in the ClientTime <span> element is put in an external file, Gadget.js. This code is called whenever the timer fires a Tick event and also when the page loads. See Example 13-3 for the complete code.

Example 13-3. The JavaScript portion of the Atlas Gadget

 Gadget.js function pageLoad() {   UpdateContents(); } function twoDigits(s) {   if (s < 10) {     return "0" + s;   } else {     return s;   } } function UpdateContents() {   var label = new Sys.UI.Label($('ClientTime'));   var d = new Date();   var time = twoDigits(d.getHours()) + ":" +             twoDigits(d.getMinutes()) + ":" +              twoDigits(d.getSeconds());   label.set_text(time); } 

Resizing Gadgets

A nice feature of Live.com Gadgets is that they can be resized whenever the browser window is resized. To add this functionality, use a timer to call the Sys.Runtime.resize() method every second or so. If the browser windows size has changed, your Gadget will be resized automatically.


Test the Gadget first by running it in the browser. You'll see that it works as you'd expect: the time is updated every second.

The real beauty of the Gadget can be seen when you add it to Live.com. Run the example page in the browser and append ?gadget=true to the URL of your gadget. (If you had more than one Gadget on the page, you would append &gadgetid=<ID of your gadget> for each Gadget.)

You get a result similar to the one in Figure 13-2, namely, an RSS feed containing information about your Gadget. This information can now be used to add the Gadget to your personal Live.com home page.

Figure 13-2. The RSS feed of your Gadget


However before going to Live.com, make sure that you are using Internet Explorer, because security restrictions prevent Firefox from using this functionality. Also, the following steps work better in Internet Explorer 6 than in Internet Explorer 7, but more on that later.

First of all, add *.live.com (and, if you want to use the Gadget there as well, also *.start.com) to the list of trusted sites in your copy of Internet Explorer. To do this, choose Tools Internet Options Security tab Trusted Sites Sites, then add the two sites to the list. Make sure you uncheck "Require server verification (https://) for all sites in this zone." Figure 13-3 shows you the dialog box you will see.

Figure 13-3. Adding Live.com to the list of trusted sites


When you have finished, close the dialog box. Now, go to http://www.live.com and add the new Gadget to your personalized home page. If you don't already have a Live.com home page, you will need to create one. The Live.com site starts with an invitation to create a personalized home page, as shown in Figure 13-4. Click the Get Started button and follow the instructions to create a home page.

Figure 13-4. Windows Live home page


On the Live.com home page, click on the "add stuff" link in the top-left corner of the portal (see Figure 13-5). Then, click on Advanced Options. If you can't see this link, close the "Click here to add more stuff to your page!" pop-up, because it might be obscuring the view.

Figure 13-5. Opening the UI to add elements to Live.com


You will then be presented with the UI shown in Figure 13-6. There, you can add the URL of the Gadget's RSS feed and then click on the Subscribe button. Then, the text in the text box changes into "verifying feed...". Internally the Live.com web site is using XMLHttpRequest to access the feed and interpret it.

Figure 13-6. Adding a Gadget by entering its RSS URL


If everything worked fine (which is the case if you do not have a syntax error in the Gadget and the browser can anonymously access the URL), the Client Time Gadget appears in the "my stuff" list (see Figure 13-7). When you click on it, a window opens at the bottom of the page that enables you to install this Gadget to your personal Live.com home page, as Figure 13-8 shows.

Figure 13-7. The Gadget appears in the list


Figure 13-8. Installing the Gadget


Ignore the security warnings and click Install Gadget. The custom Gadget is shown in the browser and you can see whether it works as expected or not (see Figure 13-9). If so, you may want to click the "add to my page" link. Doing so will put the Client Time Gadget on the Live.com home pageof course only for the current user and the current browser.

Figure 13-9. The Gadget can now be included in the user's personal Live.com home page


And this is just the beginning: more complex Gadgets, either revamped Atlas components or external Gadgets from http://microsoftgadgets.com can really make Live.com a truly personalized web portal.

Gadgets and Internet Explorer 7

The native XMLHttpRequest object in IE 7 does not allow requests to external web sites, even when they are coming from a trusted site. Therefore, you will likely get a JavaScript error message when trying to subscribe to the Gadget's RSS feed in IE7. However, a forum entry from Live.com team member Todd Krabach (http://microsoftgadgets.com/forums/3921/ShowPost.aspx) presents a possible solution. Create the new registry key HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE XMLHTTP_RESPECT_ZONEPOLICY and then create a new DWORD entry named "Iexplore.exe" with a value of 0x00000001. Figure 13-10 shows the result.

But make sure you understand what you are doing: after you add this registry key, XMLHttpRequest calls may access other servers, bringing a potential security risk to your machine.

You can find other browser settings that control calls to other domains at Tools Internet Options Security Internet Custom Settings. The setting "Access data sources across domains is under Miscellaneous (see Figure 13-11). Set this to Prompt to allow the JavaScript code to access external data, but again consider the security implications. If you do make this change to test your Gadget in Internet Explorer 7, consider removing the new registry key as soon as you are finished testing.


Figure 13-10. Creating the registry key to make Internet Explorer 7 work with Gadgets


Figure 13-11. Changing the Security settings


Useful Gadget APIs

For some scenarios, the following methods for Gadgets defined in the GadgetRuntime.js file come in handy for persisting data (which will then be stored on the Live.com server, which identifies a user via cookies):

  • Sys.Runtime.getPreference(name) loads the given profile information from the user.

  • Sys.Runtime.setPreference(name, value) creates or updates the given profile information from the user with the given value.

  • Sys.Runtime.savePreferences() saves all profile data of the user to the server. This can, for instance, be used to remember the user's last search term.





Programming Atlas
Programming Atlas
ISBN: 0596526725
EAN: 2147483647
Year: 2006
Pages: 146

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net