Insights on Oracle & Tech: UI Manager

Tuesday, March 24, 2009

Ubiquity's UI Design

At the root folder where Ubiquity Extension is installed, there is a chrome manifest file named chrome.manifest. The content of it looks like this:


 resource ubiquity ./
 content ubiquity chrome/content/
 skin ubiquity skin chrome/skin/
 overlay chrome://browser/content/browser.xul chrome://ubiquity/content/browser.xul

Line 4 (in red) registers an overlay for chrome://browser/content/browser.xul location, allowing you to modify Firefox's main window UI from your overlay XUL file (i.e., chrome://ubiquity/content/browser.xul).

The content of Ubiquity's overlay file looks like this:


<?xml version="1.0"?>
<?xml-stylesheet href="chrome://ubiquity/skin/browser.css" type="text/css"?>

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="http://www.w3.org/2000/svg">
<head></head>
<script type="application/javascript;version=1.7"
src="chrome://ubiquity/content/ubiquity.js"/>
<script type="application/javascript;version=1.7"
src="chrome://ubiquity/content/popupmenu.js"/>
<script type="application/javascript;version=1.7"
src="chrome://ubiquity/content/browser.js"/>
 <popupset id="mainPopupSet">
   <panel id="transparent-msg-panel" class="msgPanel" hidden="true">
     <div id="cmd-panel" xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
       <div id="cmd-frame">
         <div id="cmd-entry-container">
           <input id="cmd-entry"/>
         </div>
         <iframe id="cmd-preview"
           src="chrome://ubiquity/content/preview.html"></iframe>
       </div>
     </div>
   </panel>
 </popupset>
 <popup id="contentAreaContextMenu">
   <menuseparator id="ubiquity-separator"/>
   <menu id="ubiquity-menu" label="Ubiquity">
     <menupopup id="ubiquity-menupopup">
     </menupopup>
   </menu>
 </popup>
</overlay>

It specifies two major UI's (i.e., "Context Popup Menu UI" and "Command Entry UI") managed by Ubiquity UI Manager as shown in the diagram below:

These two UI's are used to support two Ubiquity command input modes:

Command entry mode
Context menu mode

Command entry mode can be entered via hot keys (i.e., "CTRL + SPACE" on Windows and it's changeable from Ubiquity Command Management Page) while context menu mode can be entered via right-mouse click.

The UI of command entry mode consists of:

cmd-entry which is an input field
cmd-preview (an "iframe") which contains ubiquity-preview (a "div") which in turn is composed of

suggestions (a "div")
preview-pane (a "div")
help (a "div")

The layout of it is shown below:

Note that the look-and-feel of this command panel is determined by the skin you apply to. To modify its skin, you can go to "about:ubiquity" > "Your Skins" to edit or change it. However, there is a known bug on Windows (Mac OS X is o.k.) to prevent it from being changed dynamically now.

It's easy to create a Ubiquity command by yourself if you know JavaScript. Using Ubiquity command editor, you can start creating a new command using the following template:


/* This is a template command. */
CmdUtils.CreateCommand({
name: "example",
icon: "http://example.com/example.png",
homepage: "http://example.com/",
author: {name: "Your Name", email: "you@example.com"},
license: "GPL",
description: "A short description of your command",
help: "How to use your command",
takes: {"input": /.*/},
preview: function(pblock, input) {
pblock.innerHTML = "Your input is " + input.text + ".";
},
execute: function(input) {
displayMessage("You selected: " + input.text);
}
});

Notice that argument pblock passed to the preview function is the "preview-pane" as described above. You can create any HTML snippet to be placed in there. It can be an image (see figure below), detailed list, or anything you like.

Cross Column

Tuesday, March 24, 2009

Ubiquity's UI Design