8.1. Richer PluginActiveX, Applet, Extension, Flash, Greasemonkey, Hack, Java, Mashup, Plugin, ProgressiveEnhancement, Remix Figure 8-1. Richer Plugin8.1.1. Goal StorySasha is using an online photo-sharing web site. Since she's become a big fan, she's taking the time to install some optional plugins from the site: an in-browser photo editor, a screen capture tool, and a browser toolbar. 8.1.2. ProblemHow can you make an Ajax App even richer? 8.1.3. Forces
8.1.4. SolutionMake your application "more Ajax than Ajax" with a Richer Plugin. Ajax is certainly a step up in richness, but sometimes you need more than Ajax can offer. That's when you release a Richer Plugin that users install to get even more out of your application. The concept here is "progressive enhancement"the application works fine in standard web browsers, but by installing the Richer Plugin, users can take the interaction to the next level. What are the things that a Richer Plugin can achieve that an Ajax App can't? Here's a summary:
The browser security model imposes these restrictions on web sites because it lets users freely surf the Web with no risk of being compromised (well, low risk). In its absence, users' systems would be in constant danger from malicious web site owners, complacent web site programmers, and devious users. By releasing a Richer Plugin, you allow users to say, "I trust this site to do certain things with my computer or browser," while keeping all other web sites tied down as before. This pattern uses a loose definition of Richer Plugin to mean anything outside standard web technologies, which can take several forms:
The main browsers all have a standard "plugin" mechanism, often used for standard third-party platforms like Java and Flash. There are simpler ways to extend behavior if you are building your own plugin. In IE, you can include ActiveX Controls, and Firefox has its own extension framework[*] (http://developer.mozilla.org/en/docs/Extensions).
A Richer Plugin should be implemented with caution. It breaks browser portability, one of the great advantages of Ajax Apps. It creates a layer of complexity to the web site, which must target users who do and don't have the plugin installed. It also demands a different skill set from standard web development. As a rule of thumb, use Richer Plugins only when there's no standard way to implement the same functionality. 8.1.5. Decisions8.1.5.1. Will you reuse a third-party plugin or develop your own?Having decided that you need extra functionality, the biggest decision is whether or not you'll to build a browser-specific plugin or to build on a standard plugin platform like Java or Flash. A standard plugin platform has the following advantages:
However, there are also advantages of writing your own plugin:
8.1.5.2. What will happen if the plugin's not installed?You'll need to consider the user experience when the plugin's not installed. How will you treat contentand links to contentthat requires the plugin? For example, you could hide it altogether, explain what would be present if the plugin is installed, or perhaps provide an alternative representation. You also need to consider what to say if the plugin's not available on the user's platform. In extreme cases, you could make the plugin mandatory. This might be plausible in an intranet setting and is really quite similar to a standard desktop application. However, it might be preferred to a desktop application if users are more comfortable in a web environment. 8.1.6. Real-World Examples8.1.6.1. Amazon Mini ShopAmazon Mini Shop (http://extensionroom.mozdev.org/more-info/amazonsearch) is a Firefox extension that lets users search within the sidebar and summarizes the results (Figure 8-2). Figure 8-2. Amazon Mini Shop8.1.6.2. Google Toolbar and Google Suggest for FirefoxGoogle makes available a toolbar (http://toolbar.google.com) for both IE and Firefox. The toolbar augments standard browser behavior with a convenient search entry as well as several other features, including Google's page rank metric for the page. Google openly notes that they may collect information about web pages being viewed, data that many people assume is used to help fine-tune their search algorithms. Google also offers a "Google Suggest for Firefox" extension (http://toolbar.google.com/firefox/extensions/suggest/install.html). This is a toolbar version of the Ajax Google Suggest web site (http://www.google.com/webhp?complete=1&hl=en). 8.1.6.3. OdeoOdeo (http://odeo.com) is a podcast manager (Figure 8-3). The main web site interactionfunctionality like subscribing and tagginguses standard web technologies, with many Ajax techniques. In addition, Odeo offers a number of Richer Plugins. Flash is used to play and record podcasts in the browser. For pulling down podcasts to a local machine, there's an Odeo "Syncr" desktop tool and also a more specialized Apple Dashboard widget. Figure 8-3. Odeo8.1.6.4. TiddlyWikiJeremy Ruston's TiddlyWiki (http://tiddlywiki.com) is a SPA application (defined in the section "Alternatives," later in this chapter), an interesting variant of Richer Plugin. It's an entire wiki within a single HTML file, including the wiki script and the wiki content itself. Tiddlywiki is similar to Richer Plugin because it overcomes the local storage barrier by requiring users to save the wiki page locally and point the browser to that file. 8.1.7. Code Example: Amazon Mini ShopIt's beyond the scope of this book to cover plugins in detail, but this example gives an insight into the components of a Firefox extension, Paul Millar's Amazon Mini Shop Firefox extension (http://extensionroom.mozdev.org/more-info/amazonsearch). If you want to grab the code, visit the link with Firefox and install the extension. Then, look at Extensions.rdf in your firefox profile directory (e.g., under ~/.mozilla/firefox/ in Unix or under c:\Windows\Profiles\%USER%/Mozilla/Firefox). Search for "amazoncomsearch" and you should see a nearby tag beginning with RDF:Description. Within that tag, the extension ID is in curly braces, and you need to go into a directory by that name, which is where the extension code is. The extension contains several components. To start with, chrome/amazoncomsearch.jar is a jar file that can be opened with a standard unzipping utility. It contains the main resources for the extension. In Firefox, user-interfaces are set up with the XML User Language (XUL) (http://xulplanet.com/tutorials/xultu/intro.html), a format that looks similar to HTML. The sidebar UI is captured in one XUL file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <page style="background-color: #ffffff;" title= "Amazon Search" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html= "http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" onload= "disable();javascript:document.getElementById('txtAmazonSearch').focus( )"> <script type="application/x-javascript" src="/books/2/755/1/html/2/chrome://amazoncomsearch/content/amazonsearch.js"/> <hbox pack="center"> <menulist flex="1" label="Search Category" onChange= "change( )"> <menupopup onpopupshowing="popamazon( )"/> </menulist> </hbox> ... </page> There is also JavaScript code, which populates the UI and handles user-interface interaction similarly to a normal browser script. For example, an XMLHttpRequest Call is used to gather data from Amazon's web service: aURL = "http://xml-"+value+".amznxslt.com/onca/xml?Service=AWSECommerceService&..." ... httpReq.open("GET", aURL, true); httpReq.send(null); httpReq.onload = httpLoaded; Among the remaining components, chrome.manifest is a meta-information file that points to the resources above. install.rdf provides meta-information about the application, such as its ID and creator. install.js is a script to handle initial installation of the extension. defaults/preferences/ams.jar provides defaults that are stored as standard Firefox preferences. In this case, there is only one preference: the Amazon site being searched (U.S., U.K., etc.). (You can see the settings in prefs.js.) 8.1.8. Alternatives8.1.8.1. Desktop ClientThe desktop client runs as a standard application in the user's operating system and connects to one or more servers using HTTP or any other protocol. It would make sense to use a Desktop Client if the required user interface is very different than a standard browser interface, or if it's difficult to extend the browser as desired. While the plugin frameworks provide more control than regular web applications have, the developer is still restricted relative to a standalone desktop client. A variant is a "Richer Desktop Client." That is, an Ajax App to do most basic things, and a richer desktop client with extra features and improved usability. This is the strategy Microsoft might follow with Office Live. 8.1.9. Related Patterns8.1.9.1. Fat ClientFat Clients (Chapter 13) are sometimes replacements for desktop applications, used frequently and for long sessions. A Richer Plugin will enhance their experience, and the effort to set it up will eventually provide users with ample payback. 8.1.9.2. Single Page ApplicationSingle Page Application (SPA) is a newer-than-Ajax term that describes an application whose entire logic and data are embedded in a single HTML file. Point the browser to the HTML file on a local drive; editing the data will update the file accordingly. In the extended case of Single Page Application and Development Environment (SPADE) (http://trimpath.com/project/wiki/SinglePageApplicationAndDevelopmentEnvironment), you can even update the code via the page itself! SPA is useful for certain specialized local applications where you want a web interface and local storage. A nice way to use it is to load it onto a USB key along with a web browser, which allows you to maintain the content anywhere, even in the absence of a Net connection. 8.1.9.3. BookmarkletA bookmarklet (or "favelet") is a link that references JavaScript instead of a web location. For example, you can create a link like this: <a href="javascript:alert('You are at' + document.location.href + '.');">Bookmark Me!</a>. The user will be able to drag it to their toolbar, and when they click on it later on, it will run the script, which pops up the current location in this example. With a bookmarklet, you can build a custom Ajax App inside other web sites. Display Manipulation (Chapter 5) patterns and Dynamic Behavior (Chapter 7) patterns work as on a local site, so you can, for example, tweak any web site whenever the user clicks on the bookmarklet. One thing you can't do is issue XMLHttpRequest Calls (Chapter 6), due to the same-origin policy, but you can work around that with On-Demand JavaScript (Chapter 6). WizLite (http://wizlite.com), a collaborative annotation tool, is a great example of how powerful bookmarklets can be. 8.1.9.4. Browser-Side CacheA Richer Plugin, with access to the local filesystemor at least more sophisticated browser-based storage than normal cookiescan be a useful data repository for a Browser-Side Cache (Chapter 13). 8.1.10. MetaphorConsider a regular web app as a black-and-white movie. Ajax adds color; Richer Plugin adds 3-D (or Smell-O-Rama if you wish). 8.1.11. Want to Know More?
|