Gadgets are web-based software components based on HTML, CSS, and JavaScript. They allow developers to easily write useful web applications that work anywhere on the web without modification. They are defined using a declarative XML syntax that is processed by a gadget server into a format that allows them to be embedded into various contexts: standalone web pages, web applications, even other gadgets. A context into which a gadget is embedded is called a gadget container. The container is responsible for managing the gadgets' layout and controls, as well as for supporting various functionality on behalf of the gadget. A gadget may be a simple widget, a reusable component, or a full-blown application, possibly utilizing or communicating with other gadgets.
A gadget and its XML are synonymous. The gadget XML contains all information needed to identify and render a web application.
Metadata. Several pieces of metadata are specified by the gadget developer in the gadget XML, such as author information, gadget title, and description. This data gives hints to the gadget container on how to identify it, in addition to providing data to gadget directories, which are databases that help users find gadgets useful for their needs
Gadget Features. A list of all gadget features that are either required for the gadget to operate, or may optionally be utilized if available. Gadget features are the primary extensibility mechanism employed by gadgets. They often direct a gadget server to make new JavaScript APIs available to rendering code, but may also manipulate the gadget's contents, for example to add extended syntax. Examples of gadget features include OpenSocial (provides gadgets with a rich set of social APIs), dynamic-height (enables gadgets to resize themselves to an appropriate height), and tabs (a UI library facilitating tabular navigation).
User Preferences. These are key/value pairs that form the basis of gadget configuration and persistence. They are most often manipulable by users of the gadget, and are persisted on behalf of a user so that the gadget has access to them across multiple rendering requests. The gadget container is typically responsible for providing their persistence for this data and an interface to edit it.
Message Bundles. Message bundles allow developers to internationalize their gadgets simply by adding name/message mappings corresponding to whatever languages the developer chooses to support. These messages may be accessed programmatically through the core JavaScript APIs provided to all gadgets, or may be statically substituted into code using simple syntax.
Content. Provides the actual HTML, CSS, and JavaScript to be rendered by the gadget. Two delivery mechanisms are supported:
Multiple Content sections may be specified in gadget XML. Each is labeled with one or more optional view identifiers, which allow the gadget to behave or appear differently depending on the context in which it's rendered. This context is provided by the gadget container.
This document describes the gadget XML syntax and how it is processed by a compliant gadget server. In addition, it describes the core JavaScript APIs that must be made available to every gadget as it is rendered. While compliance can be attained by supporting only these core APIs, doing so severely limits a gadget server's usefulness. Gadget servers should support as many features as possible. Widely used, highly recommended features are listed at the end of this document.
To be gadgets-compliant, a server must be able to satisfy a Gadget Rendering Request and a JavaScript Request in the manner described. The server should be able to satisfy the Gadget Metadata Request in the manner described.
The core gadget API, this translates gadget XML into content that can be rendered in a browser, typically in an IFRAME.
nocache.__<TYPE>_<ID>__, and are replaced with string values.
There are four types of hangman variables, which are defined as
follows.
__MSG_foo__ hangman
variables.
foo with value
bar, hangman
expansion __MSG_foo__ = bar.foo and value
bar,
hangman expansion __UP_foo__ = bar.__MODULE_ID__ = <provided module
ID>.
mid for this.__BIDI_START_EDGE__ = "right", __BIDI_END_EDGE__
= "left", __BIDI_DIR__ = "rtl",
__BIDI_REVERSE_DIR__ = "ltr".
Otherwise __BIDI_START_EDGE__ = "left", __BIDI_END_EDGE__ =
"right", __BIDI_DIR__ = "ltr",
__BIDI_REVERSE_DIR__ = "rtl".Module.ModulePrefs attributes,
Module.Content@href,
Module.Content,
UserPref@display_name,
UserPref@default_value, and
UserPref.EnumValue@display_value<Require> or
<Optional> in the gadget XML.
<Require> block, the server MUST emit a standard error
message indicating that it cannot satisfy the rendering
request.
<Optional> features:
gadgets.util.hasFeature(featureName)
featureName, false otherwise. Gadget
developers can use this functionality to enhance their gadgets if
features are available without disabling their gadget if the
features are missing.<html> tag and
<body>
tag. <head> information is optional. Gadgets run in browser
quirks mode. gadgets.util.runOnLoadHandlers();up_<name>=<value> for each provided user
preference.lang=<language> and
country=<country>, from the
provided request Locale.libs=<jsLib>, where <jsLib> is a comma-separated
list of URL path fragments relative to the server's JavaScript
request handler path. These fragments are added to the JS path by
the type URL target to load gadget API JavaScript into its
execution context.
This API tells a gadget container how to render a gadget on a page, and gives it the container-side JavaScript it needs to support the gadget's features.
It is often the case that the gadget container's support is
required to satisfy gadget API requests due to the browser security
model. For example, the dynamic-height feature allows a
gadget to request that it be resized to fit its contents,
particularly when it is in an IFRAME. Most often, the gadget
is rendered on a different domain than its container, so it cannot
modify the height itself. Rather, it makes an inter-domain
procedure call to its container requesting that it be resized. This
communication occurs through the core gadgets.rpc.* APIs, which use
browser-specific techniques to pass messages between frames on
different domains located in the same browser context. The
container needs to be able to receive this request and respond
accordingly - this is the function of the container-side
JavaScript.
Rather than a Gadget Rendering Request URL, the Gadget Metadata Request API may return a version of the gadget output sanitized for security. The Caja project provides this sanitization by rewriting HTML, CSS, and JavaScript through static analysis techniques to preclude unsafe DOM or cookie access to the gadget content, while maintaining expressiveness nearly equivalent to content running simply inside an IFRAME. This functionality is still experimental, however, so is not included in the core spec at this time.
<Require> or
<Optional> in the gadget XML.
In order to satisfy type URL gadgets' JavaScript library loading requests, a server MUST provide an HTTP service for retrieving core and feature-linked JavaScript.
All core APIs MUST be provided by the server in such a way as to conform to the Gadgets API Reference. Gadget developers should not have to request any of these features, as the container should provide them all automatically.
| File | JsDoc |
|---|---|
| prefs.js | Documentation |
| io.js | Documentation |
| json.js | Documentation |
| util.js | Documentation |
The vast majority of gadgets include one or more features. The more features a gadget server supports, the more gadgets it supports. Thus, each gadget server strongly SHOULD support as many such features as possible, especially the following features that have high usage rates. Each supplies a JavaScript API to be made available to the gadget. Features are listed with their name(s) and their associated API:
| Feature | File | JsDoc |
|---|---|---|
| tabs | tabs.js | Documentation |
| minimessage | minimessage.js | Documentation |
| flash | flash.js | Documentation |
| rpc | rpc.js | Documentation |
| views | views.js | Documentation |
| skins | skins.js | Documentation |
| dynamic-height | dynamic-height.js | Documentation |
| settitle | settitle.js | Documentation |