Mashup Designer for Google 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
Integrated into your Google home page or public website, they provide you with easy access to important information. Any piece of web data, it’s there at a glance. 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 Google Universal Gadget powered by <alt> Mashup technologies.
 
 
Google Gadget Designer Features
 
The Mashup Designer for Google Gadgets extends the reach of our Mashup development tools to include Google Gadgets as deployment clients.
 
To understand the underlying technology of our Mashup tools—and in fact to build a Mashup Widget—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 Google Gadgets provides the following major capabilities:
 
  1. 1.An Opera browser-based design tool.
  2. 2.Fill-in-the-blank form to define your Gadget properties.
  3. 3.Fill-in-the-blank form to define your Mashup server properties.
  4. 4.Testing a prototype of your Gadget accessing live data.
  5. 5.Generation of your Gadget files.
 
The following is a screen shot of the Mashup Designer for Google Gadgets when first launched:
 
1
 
 
 
Defining Gadget Properties
    
The Mashup Designer for Google Gadgets allows you to define the following Gadget properties:
 
  1. 1.Gadget title.
  2. 2.Directory title.
  3. 3.Gadget description.
  4. 4.Gadget height.
  5. 5.Gadget version.
  6. 6.Gadget link.
  7. 7.Author's name.
  8. 8.Author's email.
  9. 9.Author's organization.
 
The official Google Gadget configuration documentation is located at the following URL: http://www.google.com/apis/gadgets/docs-home.html.
 
1
 
 
 
 
Defining Server Properties
 
The Mashup Designer for Google Gadgets allows you to define the following server properties:
 
  1. 1.Mashup server URL. This field is auto-populated with the value of the Google Gadget Object Server URL. This is a special Object Server as is discussed later.
 
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 Google 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 Widget Prototype is displayed in this screen shot:
 
1
 
 
Generating Your Mashup Gadget Files
 
The Mashup Designer for Google Gadgets generates a unique directory containing:
  1. 1.A google_mashup_config.xml file specifying your Mashup Module properties.
  2. 2.An images directory which currently is not used.
 
This service is accessed through the “Generate Google Gadget” link as highlighted in this screen shot:
 
 
The browser will display the location of your Google Gadget as seen here:
 
1
 
        
 
 
 
Launching the Mashup Designer for Google Gadgets
    
As mentioned earlier, the Mashup Designer for Google Gadgets extends the reach of our Mashup development tools to include Google 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 Google Gadget Object Server by selecting the menu item “Google Gadget Object Server…” from the popup menu as seen in the following screen shot:
 
 

1
 
 
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 Google Gadget Object Server also allows you to launch a micro web server. This is seen in this screen shot:
 
 
 
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 Google Gadget Object Server provides the following additional capabilities:
 
  1. 1.Generates the Mashup Designer for Google 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 Google 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 Widget’s content area and not the entire canvas, the Google 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 Widget” service which is accessible through the Mashup Designer for Google Gadgets.
 
 
 
The Mashup Development Process for Google Gadgets
 
To create Mashup Widgets, 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 and its engine extract remote HTML content and transform 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 on 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:
 
 
    1. k.And then use the popup from the new "XSL Source" window to launch the Mashup Designer for Google Gadgets as was described earlier in this document.
 
In addition, you can use the various popup menus to interactively test this Mashup in a browser, publish it as an RSS feed perhaps as a data source for a Yahoo! Pipe, or use it as the content for a different widget system… among a few other options as seen here:
 
1
 
 
 
 
 
    1. l.Or invoke the Mashup Designer for Google Gadgets plug-in as seen here:
 
    
which is a short cut to saving first as an XSLT and then manually launching the Google Gadget Object Server. A new window or tab will be created to contain the Mashup Designer for Google Gadgets.
 
 
  1. 2.If you are an enterprise XML developer who requires fine-grained node level control—down to the attribute—of the target XML/XHTML output document, then
    1. a.Construct your target document in the DOM Browser, or load a valid XHTML document into the DOM Browser. If you plan to transcode from multiple web sites or you are extracting a single piece of text content, then create a wrapper DIV as the first child of the BODY element.
    2. b.Determine the styling requirements that your Widget should use. Encode this information directly on your DIV wrapper.
 
The following items are adapted from the StableDOM product documentation located at http://altmobile.com/pdf/StableDOM.pdf.
 
 
    1. c.Decide which elements and text content should be extracted from the external HTML web sites.
      1
       
    2. d.Create any placeholder elements in the target document as necessary depending on the source item and the target DTD requirements.
 
For example, if you want to extract a <table> element from a remote web site and transcode it into an XHTML document, the XHTML DTD requires that the <table> must not be contained by a <p> element. So in this case, you should create a <div> placeholder in the target document as the parent for the new <table>.
 
    1. e.Select the “Import Last Child from HTML Source” menu item from the parent element of the to-be-imported node as seen here:
 
 
1
 
 
 
 
 
 
    1. f.This will launch the HTML Transformation Browser, allowing you to extract an HTML element or text content as needed.
 
In the below screen capture, we want to extract the paragraph text:
 
 
 
1
 
 
 
After selecting the “Extract text: Wed Dec…ST 2005” menu item from the popup, our target document will look like this:
 
 
1
 
 
    1. g.Select the “Transform to Dynamic XSLT Source” menu item which cascades off the “XSLT” menu item which is found in the document node popup menu as seen here:
 
 
 
This displays the Dynamic XSLT source code which contains instructions to create both the static XHTML and dynamic XHTML using the special transcoding function getContent(url, xpath) as seen here:
 
 
 
1
 
 
 
 
 
The XSLT function getContent(url, xpath) simply calls the Java language function in HTMLUtil class as described in the Java language API section of the StableDOM product documentation. This diagram provides a view of HTML parsing pipeline through to the transcoding process and remote access by the desktop Widget via AJAX:
 
 
For server-hosted widgets such as Google Universal Gadgets, the Google's servers access the Mashup server via traditional HTTP Get requests from their servers rather than the widget directly using AJAX to access the Mashup server as diagramed above.
 
During the generation of the Dynamic XSLT, the code generation component inspected the target document and transcoded accordingly. Other examples in the StableDOM product documentation describe how to transcode complex elements such as HTML tables and list.
1
 
Please review the StableDOM product documentation located at http://altmobile.com/pdf/StableDOM.pdf for more information on HTML Mashups. 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.
 
 
Testing Your Mashup Gagdet
  1. 1.Publish the google_mashup_config.xml configuration file to a public location. Alternatively, load this file in an XML text editor window and publish its content via an Object Server.


    According to the Google Universal Gadget documentation, URL arguments are ignored. The default behavior of the Mashup Designer for Google Gadgets is to use the URL argument "mode=xform-content". This is seen here:
 
 
To solve this issue, launch a generic Object Server to serve your Mashup. This can be done from the "Object Server..." popup in the XML text editor editor as seen here:
 
1