Labs/Jetpack/JEP/33: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
{{draft}}
{{draft}}


== JEP 33 - Window ==
== JEP 33 - Gadget ==


* Champion: Daniel Buchner <daniel@mozilla.com>
* Champion: Daniel Buchner <daniel@mozilla.com>
Line 7: Line 7:
* Type: API Track
* Type: API Track
* Created: 2 Dec 2009
* Created: 2 Dec 2009
* Reference Implementation: new Window({options})
* Reference Implementation: new Gadget({options})
* [[Labs/Jetpack/JEPs|JEP Index]]
* [[Labs/Jetpack/JEPs|JEP Index]]


=== Introduction and Rationale ===
=== Introduction and Rationale ===


Window for Jetpack is a crucial API enhancement that allows developers using the Jetpack extension development platform to extend both functional and presentational capabilities of their Jetpacks. Window abilities are the gateway to a large, uncharted mass of applications that can be developed in concert with the other useful tools provided by Jetpack.
Gadget for Jetpack is a crucial API enhancement that allows developers using the Jetpack extension development platform to extend both functional and presentational capabilities of their Jetpacks. Gadget abilities are the gateway to a large, uncharted mass of applications that can be developed in concert with the other useful tools provided by Jetpack.


=== Proposal ===
=== Proposal ===


A new Window instantiation:
A new Gadget instantiation:
<code>new Window({options})</code>
<code>new Gadget({options})</code>


Where <tt>options</tt> is an object:
Where <tt>options</tt> is an object:


Properties
Properties
* <tt>icon</tt> <i>uri</i> - icon to show in the title bar section of the window
* <tt>icon</tt> <i>uri</i> - icon to show in the title bar section of the Gadget
* <tt>html</tt> <i>text/xml</i> - html content for the feature
* <tt>html</tt> <i>text/xml</i> - html content for the feature
* <tt>url</tt> <i>uri</i> - url to load content for the feature
* <tt>url</tt> <i>uri</i> - url to load content for the feature
* <tt>width</tt> <i>num</i> - initial width of the Window (defaults: 320px - standard smartphone width resolution)
* <tt>width</tt> <i>num</i> - initial width of the Gadget (defaults: 320px - standard smartphone width resolution)
* <tt>height</tt> <i>num</i> - initial height of the Window (defaults: 480px - standard smartphone height resolution)
* <tt>height</tt> <i>num</i> - initial height of the Gadget (defaults: 480px - standard smartphone height resolution)
* <tt>persist</tt> <i>bool</i> - specifies whether or not a Window stay open when a user closes the browser instance
* <tt>allowMaximize</tt> <i>bool</i> - specifies whether or not a Gadget will have the ability to maximize
* <tt>allowMaximize</tt> <i>bool</i> - specifies whether or not a Window will have the ability to maximize
* <tt>allowResize</tt> <i>bool</i> - specifies whether or not a user can resize a Gadget
* <tt>allowResize</tt> <i>bool</i> - specifies whether or not a user can resize a window


Events
Events
* <tt>onFocus</tt> <i>func</i> - event triggered when the Window is focused
* <tt>onFocus</tt> <i>func</i> - event triggered when the Gadget is focused
* <tt>onBlur</tt> <i>func</i> - event triggered when the Window losses focus
* <tt>onBlur</tt> <i>func</i> - event triggered when the Gadget losses focus
* <tt>onReady</tt> <i>func</i> - event triggered when the Window's content is loaded and ready for manipulation
* <tt>onReady</tt> <i>func</i> - event triggered when the Gadget's content is loaded and ready for manipulation
* <tt>onMinimize</tt> <i>func</i> - event triggered when the Window is minimized to the task bar
* <tt>onMinimize</tt> <i>func</i> - event triggered when the Gadget is minimized to the task bar
* <tt>onMaximize</tt> <i>func</i> - event triggered when the Window is maximized
* <tt>onMaximize</tt> <i>func</i> - event triggered when the Gadget is maximized
* <tt>onRestore</tt> <i>func</i> - event triggered when the Window is restored from the task bar
* <tt>onRestore</tt> <i>func</i> - event triggered when the Gadget is restored from the task bar


   All events are passed the following property hash:
   All events are passed the following property hash:
   * <tt>icon</tt> - a pointer to the icon used in the Window title bar.
   * <tt>icon</tt> - a pointer to the icon used in the Gadget title bar.
   ** <tt>icon.toDefault()</tt> - reload icon to original icon
   ** <tt>icon.toDefault()</tt> - reload icon to original icon
   * <tt>contentDocument</tt> - document element of the content area
   * <tt>contentDocument</tt> - document element of the content area
   * <tt>position</tt> - an object that includes the Window's position on the screen: {x: 400, y: 500}
   * <tt>position</tt> - an object that includes the Gadget's position on the screen: {x: 400, y: 500}
   * <tt>location</tt> - the URL of the window, http://, chrome://
   * <tt>location</tt> - the URL of the Gadget's window object, http://, chrome://


=== Example ===
=== Example ===


Show mozilla.com in a Window and change the background color of the document when clicked.
Show mozilla.com in a Gadget and change the background color of the document when clicked.


<pre class="brush:js;toolbar:false;">
<pre class="brush:js;toolbar:false;">
new Window({,
new Gadget({,
     url: "http://www.mozilla.com/",
     url: "http://www.mozilla.com/",
     width: 300,
     width: 300,
     onFocus: function(window) {
     onFocus: function(gadget) {
         window.contentWindow.document.body.style.background = '#ffffff';
         gadget.contentWindow.document.body.style.background = '#ffffff';
     },
     },
     onBlur: function(){
     onBlur: function(gadget){
         window.contentWindow.document.body.style.background = '#ff0000';
         gadget.contentWindow.document.body.style.background = '#ff0000';
     }
     }
});
});
</pre>
</pre>
1,273

edits

Navigation menu