Creating a User Interface

  • Revision slug: Mozilla/Add-ons/Firefox_for_Android/Creating_a_User_Interface
  • Revision title: Creating a User Interface
  • Revision id: 501101
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment Moved From Extensions/Mobile/Creating_a_User_Interface to Mozilla/Add-ons/Firefox_for_Android/Creating_a_User_Interface

Revision Content

The NativeWindow object enables developers of Firefox for Android add-ons to create UI components.

It supports the following components:

/*
label: menu label
icon: file:// or data: URI for an icon
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
menuID = NativeWindow.menu.add(label, icon, callback);
NativeWindow.menu.remove(menuID);

Doorhangers

/*
message: displayed text
value: string based tag
buttons: array of JS objects used to create buttons in the notification
tabID: tab associated with this notification
options: JS object that has 'persistence' and 'timeout' options
*/
NativeWindow.doorhanger.show(message, value, buttons, tabID, options);
NativeWindow.doorhanger.hide(value, tabID);

Context menu items

/*
label: menu label
selector: JS object that has a 'matches(element)' function. Used to show the menu.
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
menuID = NativeWindow.contextmenu.add(label, selector, callback);
NativeWindow.contextmenu.add(menuID);

Toast notifications

/*
message: displayed text
duration: "short" or "long"; Used for alert timeout
*/
NativeWindow.toast.show(message, duration);

Revision Source

<p>The <code>NativeWindow</code> object enables developers of Firefox for Android add-ons to create UI components.</p>
<p>It supports the following components:</p>
<ul>
  <li><a href="http://developer.android.com/guide/topics/ui/menus.html" title="http://developer.android.com/guide/topics/ui/menus.html">Menu items</a></li>
  <li>Doorhanger notifications</li>
  <li>Context menus items</li>
  <li><a class="external" href="http://developer.android.com/guide/topics/ui/notifiers/toasts.html" title="http://developer.android.com/guide/topics/ui/notifiers/toasts.html">Android toast alerts</a></li>
</ul>
<h2 id="Menu_items">Menu items</h2>
<pre>
/*
label: menu label
icon: file:// or data: URI for an icon
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
menuID = NativeWindow.menu.add(label, icon, callback);
NativeWindow.menu.remove(menuID);
</pre>
<h2 id="Doorhangers">Doorhangers</h2>
<pre>
/*
message: displayed text
value: string based tag
buttons: array of JS objects used to create buttons in the notification
tabID: tab associated with this notification
options: JS object that has 'persistence' and 'timeout' options
*/
NativeWindow.doorhanger.show(message, value, buttons, tabID, options);
NativeWindow.doorhanger.hide(value, tabID);
</pre>
<h2 id="Context_menu_items">Context menu items</h2>
<pre>
/*
label: menu label
selector: JS object that has a 'matches(element)' function. Used to show the menu.
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
menuID = NativeWindow.contextmenu.add(label, selector, callback);
NativeWindow.contextmenu.add(menuID);
</pre>
<h2 id="Toast_notifications">Toast notifications</h2>
<pre>
/*
message: displayed text
duration: "short" or "long"; Used for alert timeout
*/
NativeWindow.toast.show(message, duration);
</pre>
Revert to this revision