13.2. Creating Windows Live Gadgets with AtlasWith 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
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
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 GadgetHowever 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 sitesWhen 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 pageOn 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.comYou 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 URLIf 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 listFigure 13-8. Installing the GadgetIgnore 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 pageAnd 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.
Figure 13-10. Creating the registry key to make Internet Explorer 7 work with GadgetsFigure 13-11. Changing the Security settings
|