Mashup Designer for Vista Sidebar Gadgets
 
Mashups
It’s been called the essence of Web 2.0. It’s the ability to combine pieces of different web sites to create something new, something meaningful.  Something for you and the people who have your tastes. Your social network. Not some mass market portal built by corporate programmers who think that they know you and your personal tastes.
 
Referred to as a composite web site by some and Mashup site by others, we call it amalgamating web data through the process of transcoding. Whatever. It’s about giving you the data that you want on your mobile phone or desktop browser. It’s Web 2.0. It’s about you.
 
Gadgets
Sliding onto your desktop, they provide you with easy access to important information. Any piece of web data, it’s there at a glance. No need to launch your browser. No need to scroll a web page to find that chunk of important data. No clicking. It’s always there. No need to refresh. It constantly updates itself. It’s your Vista Sidebar Gadget powered by <alt> Mashup technologies and infused with a bit of AJAX.
 
 
 
Screen Cast and PDF Version
 
A screen cast of the Mashup Designer for Vista Sidebar Gadgets is available here:
http://altmobile.com/Screencasts/1173873451589.html
 
If you are viewing an HTML version of this document, some images may have been corrupted during the conversion process. For best viewing, a PDF version is available here:
 
http://altmobile.com/pdf/Mashup%20Designer%20for%20Vista%20Sidebar%20Gadgets.pdf

 
Vista Sidebar Gadget Designer Features
 
The Mashup Designer for Vista Sidebar Gadgets extends the reach of our Mashup development tools to include Vista Sidebar Gadgets as deployment clients.
 
To understand the underlying technology of our Mashup tools—and in fact to build a Mashup Gadget—you will use our StableDOM technology. The StableDOM product documentation is located at http://altmobile.com/pdf/StableDOM.pdf. The XML Transcoding product documentation is located at http://altmobile.com/pdf/XML%20Transcoding.pdf. Review the DOM Browser product document to understand how to create enterprise Mashups that integrate SQL data, Web Services data, and HTML content. It is located at http://altmobile.com/pdf/DOM%20Browser.pdf. And finally, our Mashup monitoring and metadata implementation is documented here:  http://altmobile.com/pdf/Mashup%20Tools.pdf.
 
Leveraging the StableDOM and code generation technologies, our Mashup Designer for Vista Sidebar Gadgets provides the following major capabilities:
 
  1. 1.An Opera browser-based design tool.
  2. 2.Fill-in-the-blank form to define your Mashup content properties.
    1
     
  3. 3.Fill-in-the-blank form to define your Gadget layout styles.
  4. 4.Fill-in-the-blank form to define your Gadget properties.
  5. 5.Fill-in-the-blank form to define your AJAX properties.
  6. 6.Testing a prototype of your Gadget accessing live data.
  7. 7.Generation of your Gadget files.
 
The following is a screen shot of the Mashup Designer for Vista Sidebar Gadgets when first launched:
 
 
 
Defining Content Style Properties
    
The Mashup Designer for Vista Sidebar Gadgets allows you to define the following content properties:
 
1
 
  1. 1.Background color.
  2. 2.Foreground color.
  3. 3.Background image color.
  4. 4.Font family.
  5. 5.Font size.
  6. 6.Text-To-Speech options.
 
The following screen shot shows the content properties section of Mashup Designer:
 
 
 
Defining Gadget Layout Styles
 
The Mashup Designer for Vista Sidebar Gadgets allows you to define the following Gadget layout styles:
 
1
 
  1. 1.No footer. This option will remove the CSS property border-top of the footer. The “flip” icon will remain and is unchanged.
  2. 2.Footer updated with time stamp. On each update from the Mashup server, a JavaScript will update the footer with the local time. This ensures that the Gadget user will know when the last content update took place.
  3. 3.Footer with static HTML. This will default to the following HTML:
<a href='http://altmobile.com'>ALT</a> mashup technologies and <a href='http://microsoftgadgets.com/'>Vista</a> gadgets
 
You should probably place your company support information or the Gadget name and version.
 
The following screen shot shows the Gadget layout styles section of the Designer:
 
 
 
Defining Gadget Properties
1
 
    
The Mashup Designer for Vista Sidebar Gadgets allows you to define the following Gadget properties:
 
  1. 1.Gadget name.
  2. 2.Gadget namespace.
  3. 3.Gadget description.
  4. 4.Gadget width.
  5. 5.Gadget height.
  6. 6.Web link to Gadget.
  7. 7.Author’s name.
  8. 8.Gadget version.
 
The official Vista Sidebar Gadget configuration documentation is located at the following URL: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sidebar/sidebar/overviews/gdo.asp.
 
1
 
 
 
Defining AJAX Properties
 
The Mashup Designer for Vista Sidebar Gadgets allows you to define the following AJAX properties:
 
  1. 1.Mashup server URL. This field is auto-populated with the value of the Vista Sidebar Gadget Object Server URL. This is a special Object Server as is discussed later. This specified URL is used in the JavaScript source code generation to support AJAX calls to the Mashup server.
  2. 2.Gadget content refresh specified in minutes. This field is auto-populated with the value of one minute. It is important to specify a realistic value as not to overwhelm the Mashup server’s resources and consequently the servers from which it fetches its data. This number is used in the JavaScript source code generation to support a JavaScript timer used by AJAX calls to the Mashup server.
  3. 3.The AJAX JavaScript source code to access the Mashup Server, update the content area of the Gadget, announce the Mashup result, and set a JavaScript timer. This allows you to quickly change any of XMLHttpRequest (XHR) properties such as setting any custom headers.
    1
     
 
Testing Your Mashup Gadget
 
As a Gadget provides a fixed size canvas, it is important to correctly size your Gadget to contain all your data. Rather than delaying testing the fit of your content until deployment, the Mashup Designer for Vista Sidebar Gadgets provides a resizable Gadget Prototype which displays the Mashup content.
 
To fetch the Mashup content and place it into the Gadget Prototype, select the "Fetch Content" link as highlighted in this screen shot:
1
 

    
 
 
You can then resize the Gadget Prototype to ensure your content fits. The width and height data – expressed in pixels—is placed in the title bar of the Gadget Prototype for easy reference. The Gadget Prototype is highlighted in this screen shot:
 
 
And a resized Gadget Prototype is displayed in this screen shot:
 
1
 

Generating Your Mashup Gadget Files
 
The Mashup Designer for Vista Sidebar Gadgets generates a unique directory containing:
  1. 1.The gadget.xml file specifying your Mashup Gadget properties.
  2. 2.An images directory containing the images for the “switch” button.
  3. 3.A JavaScript file named mashupWorld.js containing the AJAX code needed to fetch and display the Mashup data. It also contains the behavior needed to change the configuration information.
  4. 4.A CSS file named mashupWorld.css containing rules for the generic Mashup Gadget such as colors, fonts and layout.
  5. 5.A CSS file named designer-generated.css containing the size information calculated from the Gadget Prototype size. It also sets the body CSS properties for the font-size, font-family, color, and background-color as specified in the Designer.
  6. 6.The index.html file containing the static portions of the Mashup Gadget.
  7. 7.The mashup.gadget file containing the previously mentioned files ready for deployment.
  8. 8.Additional JavaScript libraries.
 
This service is accessed through the "Generate Gadget" link as highlighted in this screen shot:
 
1
 
 
 
Here is a screen shot of the directory with the Mashup Gadget files:
 
 
To view your newly created Mashup gadget, you can double-click mashup.gadget file.
 
1
 
Microsoft has defined the "ZIP" file format as the container format for Gadget related files. It seems that there is some incompatibility between our Java technology-based packaging tool and Microsoft's Gadget installation program. There were similar incompatibilities with the Opera Widget package format until Opera fixed the problem. Therefore, it is best to use the operating system to create a ZIP file and rename the file extension to ".gadget" as defined here: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sidebar/sidebar/overviews/gdo.asp
 
 
A screen shot of the “front” of a sample Mashup Gadget is seen here:
 
 
And, the "back" of the Mashup Gadget looks like this:
 
 
Microsoft has defined an alternative technique to display configuration information. In our current release, we support a cross-platform Widget/Gadget configuration technique that is generated by our Mashup tools for Opera Widgets, Apple Dashboard Widgets, and Adobe Apollo applications.
 
 
And, installed with other Gadgets in the Sidebar:
 
1
 

 
 
 
 
And viewed in the Gadgets gallery panel:
1
 


 
 
The sample Mashup Gadget demonstrates several important concepts and provides the skeleton needed for you to create aesthetically pleasing Mashup Gadgets:
 
  1. 1.The segmentation of the Gadget into two visual areas: the content area and the status/control area. In the sample Mashup Gadget, the status/control area contains marketing information and the configuration "switch".
 
Rather than static marketing information, e-commerce Gadgets might fetch a banner ad. The web advertisement association or Google/Yahoo will probably define a special banner ad size for Gadgets much as they have done for mobile ads. More importantly it’s best to specify Mashup related data such as the last time data was fetched, for example, or perhaps the Mashup title or version.
  1. 2.A configuration "panel". In addition to the reasons mentioned in the Vista Sidebar Gadget tutorial, enterprise users will want to define a standard configuration look and feel. With cross-domain scripting restrictions removed in Gadgets, a generic Mashup Gadget can be deployed and remotely administered.
  2. 3.A start and stop capability. The generic Mashup Gadget internally uses a JavaScript timer to invoke the AJAX code to fetch the Mashup data. The generated JavaScript code will remove any previously set timers.
  3. 4.The URL of the Mashup server providing content to this Gadget. Internally, the generated Mashup Gadget internally will store this URL as a Gadget preference enabling persistence and customization.
    1
     
  4. 5.The interval to refresh the content and announce the Mashup result. As mentioned earlier, it is important to fetch at reasonable intervals. Internally, the generated Mashup Gadget internally will store the refresh increment as a Gadget preference enabling persistence and customization.
 
 
Launching the Mashup Designer for Vista Sidebar Gadgets
    
As mentioned earlier, the Mashup Designer for Vista Sidebar Gadgets extends the reach of our Mashup development tools to include Vista Sidebar Gadgets as deployment clients. To launch the Designer, you should have already created a Mashup and generated the Dynamic XSL.
 
The StableDOM HTML transcoding product documentation is located at http://altmobile.com/pdf/StableDOM.pdf. The XML Transcoding product documentation is located at http://altmobile.com/pdf/XML%20Transcoding.pdf. Review the DOM Browser product document to understand how to create enterprise Mashups that integrate SQL data, Web Services data, and HTML content. It is located at http://altmobile.com/pdf/DOM%20Browser.pdf. And finally, our Mashup monitoring and metadata implementation is documented here:  http://altmobile.com/pdf/Mashup%20Tools.pdf.
 
Once a Dynamic XSL has been created, you should launch a Vista Sidebar Gadget Object Server by selecting the menu item “Vista Sidebar Gadget Object Server…” from the popup menu as seen in the following screen shot:
 
 
 
Much like a normal Object Server provides a micro web server enabling remote access to the XML or XSL content of the text editor—transcoding as needed from remote sites—the Vista Sidebar Gadget Object Server also allows you to launch a micro web server. This is seen in this screen shot:
1
 
 
 
In the above screen shot, you see how to launch an Object Server on a specific port. Unix users will be alerted about using restricted ports.
 
Review the DOM Browser product document to understand how to use the Object Server functionality: http://altmobile.com/pdf/DOM%20Browser.pdf.
 
 
In addition to all the features, HTTP debugging/monitoring, and manageability of a standard Object Server, the Vista Sidebar Gadget Object Server provides the following additional capabilities:
 
  1. 1.Generates the Mashup Designer for Vista Sidebar Gadgets web page customized to support Gadget development.
  2. 2.Launches Opera 9—which should be your default web browser—to view the Mashup Designer web page using the Opera command line API.
  3. 3.Implements the previously described "Fetch Content" service which is accessible through the Mashup Designer for Vista Sidebar Gadgets. The Fetch Content service returns the first child element of the BODY element generated by the Dynamic XSL. As such, it is important that your deployment Mashup server performs a similar element stripping or your JavaScript client does this. This is also a concern for any global CSS rules that your Mashup defines.
 
To reinforce this concept, let’s visualize a hypothetical XHTML document that was generated by a Dynamic XSL Mashup:
 
1
 
 
Since we want to dynamically update just the Gadget’s content area and not the entire canvas, the Vista Sidebar Gadget Object Server will just return the highlighted elements. Also note that the table element defines its border explicitly rather than defining a global CSS rule. This is highlighted in this screen shot:
 
 
Of course, an inline CSS rule would also work.
 
  1. 4.Implements the previously described "Generate Gadget" service which is accessible through the Mashup Designer for Vista Sidebar Gadgets.
 
 
 
The Mashup Development Process for Vista Sidebar Gadgets
 
To create Mashup Gadgets, you should follow these steps:
  1. 1.If you are a web developer who prefers to use WYSIWYG HTML editors such as found in popular blog tools, then
    1. a.Define your Mashup content by launching the StableDOM Browser from the "Mashup" menu as seen here:

              
    This will launch the StableDOM browser enabling you to navigate to the remote URL     just as you would with a traditional desktop web browser. Here is a screen shot of the     StableDOM Browser:
 
1
 



The StableDOM Browser differs from the HTML Transformation Browser-- which is described later in the enterprise XML developer section-- in that the HTML Transformation Browser extracts remote HTML content and transforms that content to the target document language. So for example, if the remote content is an HTML table and the target document is a WML document, then the HTML Transformation Browser and its engine will dynamically create a WML table. The StableDOM Browser and its engine will not perform any node or content adaptation and will only extract the remote HTML content. Both browsers use a similar user interface, though.
    1. b.Generate the semantic metadata for the remote HTML element by selecting the menu item "Display Transcoding Metadata for xxx" (where xxx will be the element name) from the popup menu as seen here:


              
      1
       

    A window will be displayed containing the metadata as seen here:

    

You may tweak the XPath statement defined in the RDF metadata to best locate the HTML element.
    1. c.Launch the Mashup Monitor from the "Mashups" menu as seen here:

              
    2. d.Drag and drop the RDF metadata onto the Mashup Monitor as seen here:

      1
       

    3. e.Construct your target HTML document in the WYSIWYG Mashup Designer by launching it from the Mashup menu as seen here:
 
 
    1. f.You will be prompted to specify a port to run a special object server that is used to communicate with the WYSIWYG Mashup Designer. The WYSIWYG Mashup Designer will be launched in your default browser, as seen here:
      1
       
 
The <alt> WYSIWYG Mashup Designer is based on TinyMCE, the industry leading HTML blog editor. We have created several TinyMCE plug-ins supporting the creation of Mashup content for blogs, web sites, and widget systems. For information TinyMCE, visit http://tinymce.moxiecode.com/.
 
    1. g.Create your static content as you normally would. When you want to add dynamic content, select the "Mash" button to select previously defined Mashup content, as seen here:
 
 
    1. h.The Mashup plug-in will launch a list of monitored Mashups, as seen here:
 
1
 
 
allowing you to view the remote content and insert it either as static or dynamic HTML content as seen here:
 
 
The option to view the remote content in the "Content Viewer" is only available when using the latest version of the Opera web browser.
 
    1. i.Insert the remote content either as static or dynamic content by selecting the appropriate hyperlink which will fetch the remote content and place it into the WYSIWYG Mashup Designer as seen here:
 
1
 
 
If you use a browser other than the latest Opera web browser, you will need to subsequently click on the Monitored Mashup dialog to close it. This seems to be a bug in the underlying TinyMCE plug-in code.
 
    1. j.You can now save the Mashup as a Dynamic XSL by selecting the "XSLT" button as seen here:
 
1
 
 
This invokes the Dynamic XSLT plug-in which makes AJAX calls to save the HTML content and in the process convert it to an XSLT document. The XSLT is displayed in a window as seen here: