Search completed in 2.07 seconds.
API-provided widgets
possible types are button for simple button
widgets (the default) view for buttons that open a panel or subview, depending on where they are placed.
...this is only used to display the shortcut as part of the tooltip for builtin
widgets (which have strings inside customizable
widgets.properties).
... showinprivatebrowsing whether to show the widget in private browsing mode (optional, default: true) event handlers you can also define several event handlers which will be called at various stages in a widget's lifetime: event handler name description onbuild(adoc) only useful for custom
widgets (and required there); a function that will be invoked with the document in which to build a widget.
...And 7 more matches
An overview of accessible web applications and widgets - Accessibility
most javascript libraries offer a library of client-side
widgets that mimic the behavior of familiar desktop interfaces.
...since the html4 specification doesn't provide built-in tags that semantically describe these kinds of
widgets, developers typically resort to using generic elements such as <div> and <span>.
... aria aria enables developers to describe their
widgets in more detail by adding special attributes to the markup.
...And 6 more matches
Keyboard-navigable JavaScript widgets - Accessibility
overview web applications often use javascript to mimic desktop
widgets such as menus, tree views, rich text fields, and tab panels.
... these
widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do.
... this document describes techniques to make javascript
widgets accessible with the keyboard.
...And 4 more matches
CustomizableUI.jsm
if you want to use it from a jsm or another context without a window reference, you need to import it yourself: components.utils.import("resource:///modules/customizableui.jsm"); introduction the module is intended for two primary purposes: allow adding, moving and removing customizable
widgets.
... manage the areas in which these
widgets are shown.
... areas areas are parts of the user interface in which customizable
widgets can be placed.
...And 26 more matches
widget - Archive of obsolete content
usage "
widgets" are small pieces of content that live in the firefox 4 add-on bar.
... there are a few advantages to using
widgets over an ad hoc user interface.
... first, your users will be accustomed to interacting with add-ons via
widgets and the add-on bar.
...And 16 more matches
Introduction to XUL - Archive of obsolete content
mozilla applications will be built of "small" components like dialog buttons and mail inbox folders, which we collectively term "
widgets." within a widget, drawing and user interactions are completely under control of the individual widget, and set when the widget was built.
... relative placement of
widgets, their interactions with each other, and optionally some of their configuration, will be controlled by a ui layout specified in a script whose structure is defined in this and related documents.
...
widgets are pieces of the application largely self-contained, generally corresponding to a rectangle of window real estate.
...And 11 more matches
Styling web forms - Learn web development
why is styling form
widgets challenging?
... for some form
widgets, it is still difficult to rebuild controls to make them stylable, but we can now use css to style many form features, though we do need to take extra care to ensure we don't break usability.
... not all
widgets are created equal when css is involved at present, some difficulties remain when using css with forms.
...And 11 more matches
Accessibility documentation index - Accessibility
it supplements html so that interactions and
widgets commonly used in applications can be passed to assistive technologies 3 aria screen reader implementors guide aria, accessibility this is just a guide.
...a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the
widgets.
...it is used to establish a relationship between
widgets or groups and text that described them.
...And 10 more matches
The Implementation of the Application Object Model - Archive of obsolete content
xul has language constructs for all of the typical dialog controls, as well as for
widgets like toolbars, trees, progress bars, and menus.
...just let us go off and make our
widgets and build our applications the old-fashioned way!
... we're still cross-platform, since we'd only have to write
widgets like trees and toolbars once!
...And 9 more matches
Accessible Toolkit Checklist
the approaches there are two basic kinds of toolkits, which each provide different challenges when implementing accessibility: native widget toolkits , like eclipse and wx
widgets, already have some accessibility built-in.
... these toolkits wrap the
widgets implemented by the os with a consistent api for each platform.
... since the individual
widgets predominately come from the operating system, they already implement standard keyboard commands and follow the operating system's visual theme.
...And 7 more matches
Basic native form controls - Learn web development
next we will look at the functionality of the different form controls, or
widgets, in detail — studying all the different options available to collect different types of data.
... objective: to understand in detail the original set of native form
widgets available in browsers for collecting data, and how to implement them using html.
... text input fields text <input> fields are the most basic form
widgets.
...And 6 more matches
Index - Learn web development
310 basic native form controls beginner, controls, example, forms, guide, html, input, web,
widgets this article has covered the older input types — the original set introduced in the early days of html that is well supported in all browsers.
... 316 example 2 forms, html this is the second example that explain how to build custom form
widgets.
... 317 example 3 forms, html this is the third example that explain how to build custom form
widgets.
...And 6 more matches
A XUL Bestiary - Archive of obsolete content
xul itself contains very little provision for how
widgets are to be presented in the interface.
... even prior to the skinning that takes place with the global skin, which is loaded in almost every xul file you see in mozilla (and whose absence from your own xul files can make your work look strange, senseless, or invisible altogether), a xul.css file is loaded which provides some very basic presentational information for the
widgets in the toolkit.
...
widgets widgets are the pieces that you assemble to make an interface.
...And 5 more matches
Web applications and ARIA FAQ - Accessibility
aria provides a means to make web applications and
widgets more accessible to a diverse range of users, including those who use assistive technologies such as screen readers or magnifiers.
...aria enables dynamic, javascript-driven applications and
widgets to interoperate with a variety of desktop-based assistive technologies.
... for more information about how to create accessible
widgets with aria, see the overview of accessible web applications and
widgets.
...And 5 more matches
XUL accessibility guidelines - Archive of obsolete content
by default, xul menus, labels, and other
widgets get their font, size, and color settings from the user settings specified in the operating system.
... other issues custom
widgets avoid re-creating functionality that already exists.
...use css system colors to ensure that new
widgets interact well with other
widgets and with user-defined colors and themes.
...And 3 more matches
XML - Archive of obsolete content
using a combination of xul's ready-made
widgets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of such standards as html4, dom1/2, and cascading stylesheets, you can design any interface that you can imagine, using any number of different features, tools, and methodologies.
...in the context of the interface being assembled, these xul elements are referred to as
widgets -- and sometimes collectively as the xptoolkit.
... as a set of interface-defining tags, xulis the
widgets its tags describe.
...And 3 more matches
XForms Input Element - Archive of obsolete content
representations the xforms input element can be represented by the following
widgets for the spcified data types (or types derived from these data types): text field - the default widget when no type is specified or the data is of type xsd:string (xhtml/xul) checkbox - used for xsd:boolean instance data.
...resent data of type xsd:date (xhtml/xul) calendar - used to represent data of type xsd:date when appearance attribute also has the value 'full' (xhtml/xul) month list - used to represent data of type xsd:gmonth (xhtml only) days list - used to represent data of type xsd:gday (xhtml only) number field - used to represent data of numeric type (fx 3.0 only, xul only) more detail about each of these
widgets follows below.
...characteristics a text field is presented to the user when there is no type given for the bound node or a type is specified that is not handled by one of the other
widgets (as documented below).
...And 3 more matches
HTML forms in legacy browsers - Learn web development
let go of css one of the big issues with html forms is styling form
widgets with css.
... to summarize, when it comes to styling form control
widgets, the side effects of styling them with css can be unpredictable.
...as you can see from the complexity of the property compatibility table for form
widgets article, it's very difficult.
...And 3 more matches
CSS property compatibility table for form controls - Learn web development
tra rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables global behaviors some behaviors are common to many browsers at a global level: border, background, border-radius, height using one of these properties can partially or fully turn off the native look & feel of
widgets on some browsers.
... text-decoration this property is not supported by opera on form
widgets.
... text-overflow opera, safari, and ie9 do not support this property on form
widgets.
...And 3 more matches
ARIA - Accessibility
it supplements html so that interactions and
widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism.
... for example, aria enables accessible navigation landmarks in html4, javascript
widgets, form hints and error messages, live content updates, and more.
... many of these
widgets were later incorporated into html5, and developers should prefer using the correct semantic html element over using aria, if such an element exists.
...And 3 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
all on-screen
widgets are laid out using these boxes, making complex interface designs possible.
...
widgets that can be used in xul root elements xul documents use different root elements for different purposes.
...this element takes a number of attributes, and can easily be made to display controls (buttons, etc) using
widgets and layouts native to whatever platform it is running on.
...And 2 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
javascript, considered by many to be the best scripting language ever designed is ideal for specifying the behavior of your interface
widgets.
...what this means to you as the developer is this: you can take advantage of skills you already have with xml or web technologies to design and implement anything from a simple text editor to a comprehensive ide - complete with all of the interface
widgets that you would find in virtually any major application framework.
...in addition to the technologies already mentioned, we go even further by allowing you to even create your own custom interface
widgets.
...And 2 more matches
Using Remote XUL - Archive of obsolete content
it contains elements for all common ui
widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers).
... xul's navigation-oriented
widgets, like toolbars, menus, and trees, are a better way to provide web site navigation because they can fit a lot of navigation into a small space, render quickly, and work well.
...</window> the xml-stylesheet processing instruction references a stylesheet, applying its rules to the
widgets in the xul document into which it is placed.
...And 2 more matches
XForms Select1 Element - Archive of obsolete content
representations the xforms select1 element can be represented by the following
widgets for the specified appearance attribute values: combobox - default representation (xhtml/xul) listbox - used when appearance = 'compact' (xhtml/xul) radio group - used when appearance = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul).
... xhtml widget characteristics analogous
widgets is <html:select/> visual grouping by choices element is supported selection="open" is supported if incremental attribute value is false, the bound node is updated when the select1 control is blurred (i.e.
... loses focus), otherwise it is updated upon item selection xul widget characteristics analogous
widgets are <html:select/> and <xul:menulist/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e.
...And 2 more matches
Widget Wrappers
for xul-provided
widgets, this is always 'custom' provider the provider type of the widget, id est one of provider_api or provider_xul instances an array of all instances (single window wrappers) of the widget.
... areatype the type of the widget's current area isgroup true, will be false for wrappers around single widget nodes source for api-provided
widgets, whether they are built-in to firefox or add-on-provided disabled for api-provided
widgets, whether the widget is currently disabled.
... nb: this property is writable, and will toggle all the
widgets' nodes' disabled states label for api-provided
widgets, the label of the widget tooltiptext for api-provided
widgets, the tooltip of the widget showinprivatebrowsing for api-provided
widgets, whether the widget is visible in private browsing single wrapper properties all of a wrapper's properties are read-only unless otherwise indicated.
...And 2 more matches
Accessibility Information for Web Authors - Accessibility
how-to's key-navigable custom dhtml
widgets in mozilla & ie this document discusses how to use tabindex, element.focus() and onkeypress to make custom dhtml
widgets such as menus or tree views keyboard accessible.
... dynamic web content is not accessible, because it uses vanilla <div>'s and <span>'s combined with javascript rather than declarative markup to describe the behavior of custom
widgets such as menus and tree views.
... these
widgets are usually not even keyboard focusable.
...And 2 more matches
The Joy of XUL - Archive of obsolete content
xbl the extensible bindings language (xbl) is a markup language that defines special new elements, or "bindings" for xul
widgets.
... with xbl, developers can define new content for xul
widgets, add additional event handlers to a xul widget, and add new interface properties and methods.
... by using xbl, developers can easily build custom user interface
widgets such as progress meters, fancy pop-up menus, and even toolbars and search forms.
...but future plans for the calendar include converting many of these ui components to xbl
widgets to further simplify their implementation.
XForms Output Element - Archive of obsolete content
representations the xforms output element can be represented by the following
widgets for the specified data types (or types derived from these data types): text - default representation for instance data of most types, especially static text (xhtml/xul).
...characteristics text is presented to the user when there is no type given for the bound node or a type is specified that is not handled by one of the other
widgets (as documented below).
... analogous
widgets are <xhtml:span/> and <xul:description/> calendar a form author may notice a xforms output element represented by a calendar widget in the mozilla xforms processor if the control meets the following criteria (xhtml/xul).
... characteristics the bound instance node is of type xsd:date or a type derived from it in addition, the appearance attribute must also contain the value "full" firefox 2.0 doesn't currently have any similar
widgets available for use with xhtml or xul.
The HTML5 input types - Learn web development
we cover this in an advanced tutorial: how to build custom form
widgets.
... html date controls are available to handle this specific kind of data, providing calendar
widgets and making the data uniform.
... <label for="mydate">when are you available this summer?</label> <input type="date" name="mydate" min="2013-06-01" max="2013-08-31" step="7" id="mydate"> browser support for date/time inputs you should be warned that the date and time
widgets don't have the best browser support.
...s overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form
widgets ...
Your first form - Learn web development
a web form's html is made up of one or more form controls (sometimes called
widgets), plus some additional elements to help structure the overall form — they are often referred to as html forms.
... in terms of html code we need something like the following to implement these form
widgets: <form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </li> <li> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </li> <li> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> </form> update...
... a click on a reset button resets all the form
widgets to their default value immediately.
... overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form
widgets ...
Gecko info for Windows accessibility vendors
contains more desktop-style
widgets than html and follows a box layout model, rather than being text-flow based.
...this can be used to create the appearance of desktop-style
widgets like menus, spreadsheets and tree views which html lacks.
...previously it was not posible to make this accessible, but firefox 1.5 supports accessible dhtml, which allows authors to make advanced
widgets and web applications accessible.
...contains more desktop-style
widgets than html and follows a box layout model, rather than being text-flow based.
Building the WebLock UI
elements in the xul markup map to
widgets in the interface that gecko renders in a fairly straightforward way - so, for instance, the root element of an application window is the element <window/>, the root element of the dialog we'll be creating here is <dialog/>, and so forth.
...the web lock manager dialog does not deviate from the look of a standard dialog, so it can use a single declaration to import the "global" skin from the browser and make it available to the
widgets you define in weblock.xul.
... <separator class="thin"/> <hbox align="center"> <textbox id="url.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout
widgets in xul.
... the separator that appears at the top of this snippet creates a little divider between
widgets like the kind you see in menus that divide sets of functionality available there.
Building a Thunderbird extension 5: XUL
xul is an xml grammar that provides user interface
widgets like buttons, menus, toolbars, trees etc.
... we add
widgets by inserting new xul dom elements into the application window and modify them using scripts and attaching event handlers.
...xul overlays are a way of attaching other ui
widgets to a xul document at run time.
...these fragments can specify
widgets to be inserted, removed or modified.
ARIA Test Cases - Accessibility
still, dojo's
widgets implement aria, and the noted test files could be used as an "aria test file".
... a screen magnifier should move the current view to the alert or open a new panel with the alert information optional, but desired: if there are
widgets within the alert, their role and any keyboard mnemonic (accesskey) should be spoken.
... as focus is moved, output should be identical to desktop tree
widgets like in e.g.
... - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - property-only test cases these testcases involve aria properties used to enhance html controls (as opposed to javascript-built
widgets).
ARIA: application role - Accessibility
any sort of special interpretation of html structures and
widgets should be suspended, and control should be completely handed over to the browser and web application to handle mouse, keyboard, or touch interaction.
...to be able to interact with a web page, a standard set of
widgets is recognized that, when pressing a certain key (usually the enter key) this mode is switched off.
... the application role is designed to provide a means for
widgets that are not part of the standard set to be accessible for direct interaction in ats that use both browse and focus modes for interacting with web content.
...think hard on if you actually need it and cannot just use a set of other, known,
widgets to accomplish the same task.
Using the standard theme - Archive of obsolete content
at the beginning, there is no style when creating a new xul <tt>window</tt> (or a new <tt>dialog</tt>, for that matter) in your extension, and you do not associate a style sheet with it, your
widgets will be unstyled.
... applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul
widgets of your application use the selected chosen theme.
... adding custom styles in order to provide custom styling for some of your
widgets (apart from the standard global skin) you can take two different routes.
XForms Select Element - Archive of obsolete content
representations the xforms select element can be represented by the following
widgets for the specified appearance attribute values: list - default representation (xhtml/xul) check group- used when appearance = 'full' (xhtml/xul) list displaying a listbox is the default representation (xhtml/xul).
... characteristics analogous
widgets are <html:select size="5" multiple="true"/> and <xul:listbox seltype="multiple"/> visual grouping by choices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e.
...characteristics appearance attribute contains the value full there are no analogue
widgets in xhtml or in xul visual grouping by choices element is supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:model> <xf:select ref="/data/values" appearance="full"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </...
Advanced form styling - Learn web development
these include: elements involved in creating dropdown
widgets, including <select>, <option>, <optgroup> and <datalist>.
... the following libraries aren't just about forms, but they have very interesting features for dealing with html forms: jquery ui offers customizable
widgets such as date pickers (with special attention given to accessibility).
...s overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form
widgets ...
How to structure a web form - Learn web development
the <fieldset> and <legend> elements the <fieldset> element is a convenient way to create groups of
widgets that share the same purpose, for styling and semantic purposes.
...we will cover many of the features introduced here in the next few articles, with the next article looking in more detail at using all the different types of form
widgets you'll want to use to collect information from your users.
...s overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form
widgets ...
Handling common HTML and CSS problems - Learn web development
supporting platforms provide special ui
widgets when these input types are used, such as a calendar widget for entering dates.
... if you view the example on a supporting browser like desktop/android chrome or ios safari, you'll see the special
widgets/features in action as you try to input data.
...for cross browser forms, it is probably better to rely on simple form elements, or selectively use advanced form elements only in supporting browsers, or using a library that provides decent cross browser form
widgets, such as jquery ui or bootstrap datepicker.
Accessibility Information for Core Gecko Developers
html accessibility dynamic web content is not accessible because it uses vanilla <div>s and <span>s combined with javascript rather than declarative markup to describe the behavior of custom
widgets such as menus and tree views.
... these
widgets are often not even keyboard focusable, and assistive technologies do not understand these
widgets.
... this document shows several interactive desktop-style
widgets that are accessible by keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and formats working group (pfwg) to address the issue of dhtml accessibility.
A bird's-eye view of the Mozilla framework
user interface (ui)
widgets and services the x window system toolkit defines the termwidget as a pre-defined object that encapsulates both the command actions and data associated with a graphical user interface (gui) control.
... the various x toolkit implementations provide a set of
widgets for ui controls such as menus, command buttons, dialog boxes and scroll bars.
...a xul package consists of a xul description of the ui widget cascading style sheets customizing appearance javascript services implementing the ui behavior a package (also known as chrome) is really just a bundling of a set of ui
widgets and associated services implementing a particular application feature.
Embedding the editor
composer embedded in a xul application developers need to embed composer
widgets in their xul applications, by using the <editor> tag as we do today.
...the composer chrome (toolbars etc) may be implemented by the embedder using native
widgets, or using some amount of xul.
... that chrome needs to be configurable - dockable floating toolbars, toolbar shared between composer
widgets, or 1 per widget.
Introduction to Layout in Mozilla
clipping, z-order, transparency [0..1] per frame, owned by frame widget native window [0..1] per view, owned by view key data structures the document owns the content model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views,
widgets presentation has media type, dimensions, etc.
...reset style context object is a placeholder for partially computed stylistic data style data is computed lazily, as it is asked for reflow recursively compute geometry (x, y, w, h) for frames, views, and
widgets given w & h constraints of “root frame” compute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired size returned “up” via nshtmlreflowmetrics basic pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes des...
...invalid content) - harishd events - saari, joki block-and-line reflow - waterson, dbaron table reflow - karnaze form controls - rods, bryner style resolution and rule tree - dbaron views,
widgets, and painting - roc, kmcclusk editor - kin, jfrancis xul and box layout - hewitt, ben xbl - hewitt, ben conclusion data flow key data structures detailed walk-through incrementalism q & a?
Index - Archive of obsolete content
the structure layer identifies the
widgets (menus, buttons, etc.) and their position in the ui relative to each other, the style layer defines how the
widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the
widgets behave and how users can use them to accomplish their goals.
...it contains elements for all common ui
widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers).
List of Mozilla-Based Applications - Archive of obsolete content
cess software uses xulrunner and spidermonkey prism (was webrunner) single-site browser xulrunner application pro/engineer wildfire cadcam product psycrunner chat, messenger, multicast toolkit about 1,000 users – xulrunner version of psyczilla extension pyjamas-desktop a python web widget toolkit uses xulrunner dom to implement the
widgets and event handling.
...
widgets desktop
widgets uses mozilla spidermonkey yoono desktop social networking app standalone version of yoono firefox add-on zap sip client status update from august 2008 zimbra desktop email and calendar application uses prism zinc video browser according to faq the standalone version is based on firefox zk web application...
Source code directories overview - Archive of obsolete content
it does not handle
widgets or specific drawing routines; it just provides the primitive operations for drawing.
... widget contains c interfaces and code for platform independent controls (
widgets), such as scroll bars, radio buttons and list boxes.
Finding the file to modify - Archive of obsolete content
the structure layer identifies the
widgets (menus, buttons, etc.) and their position in the ui relative to each other, the style layer defines how the
widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the
widgets behave and how users can use them to accomplish their goals.
...it contains elements for all common ui
widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers).
Mozilla Application Framework - Archive of obsolete content
dom inspector a tool for inspecting and editing the structure and
widgets of your user interface while your application is running.
... xulmaker a gui builder currently under development that lets you drag-and-drop
widgets onto a grid to build your user interface.
XBL - Archive of obsolete content
most xul
widgets are at least partially implemented using xbl.
... you can build your own reusable
widgets from existing xul, html, svg, and other primitives using xbl.
Introduction to XBL - Archive of obsolete content
this language is used for declaring the behavior of xul
widgets.
... binding example the box is generic enough that you can use it to create custom
widgets (although you can use any element, even one you make up yourself).
XUL Structure - Archive of obsolete content
the global part defines the appearance of all of the common xul
widgets, whereas the other directories have files that are specific to those applications.
...it also defines the default appearance and functionality of the various common xul
widgets such as textboxes and buttons.
Using the Editor from XUL - Archive of obsolete content
for text
widgets and composer): nstexteditorkeylistener (as a nsidomkeylistener) nstexteditormouselistener (as a nsidommouselistener) nstexteditorfocuslistener (as a nsidomfocuslistener) nstexteditortextlistener (as a nsidomtextlistener) nstexteditorcompositionlistener (as a nsidomcompositionlistener) nstexteditordraglistener (as a nsidomdraglistener) in nseditorshell::preparedocume...
...not for text
widgets): nseditorshellmouselistener (as a nsidommouselistener) note: starting in gecko 12, the editor refuses any events sent by unprivileged content.
2006-11-17 - Archive of obsolete content
alex vincent ran into some difficulty with xulrunner extension manager not recognizing xul
widgets for verbosio?
... however he found out that it was a result of his flat-chrome version of xul
widgets and works fine with the jarred-chrome version.
XForms Submit Element - Archive of obsolete content
representations the xforms submit element can be represented by the following
widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).
... characteristics analogous
widgets are <html:input type="submit"/> and <xul:button/> link/clickable text xforms authors can use this representation if they want to have a widget like a xhtml anchor (xhtml only).
XForms Trigger Element - Archive of obsolete content
representations the xforms trigger element can be represented by the following
widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).
... characteristics analogous
widgets are <html:input type="button"/> and <xul:button/> link/clickable text xforms authors can use this representation if they want to have a widget like a xhtml anchor (xhtml only).
Mozilla XForms User Interface - Archive of obsolete content
xforms elements almost every xforms element can be presented as one of serveral different kinds of
widgets.
...the xforms specification offers suggestions for some of the representations, but some of the
widgets we use are only available in the mozilla xforms processor.
XUL Parser in Python - Archive of obsolete content
with new
widgets and attributes landing all the time, i wanted to get some quicker way of looking at the xul--at particular builds, at particular
widgets, at which elements had which attributes, etc.
...if you want to look for certain
widgets within the xul files, you can get the filename from the calling method p.feed(data) and create a condition that only gets the elements specified in sys.argv[1].
WAI-ARIA basics - Learn web development
if you are looking for a 3rd party javascript solution for rapid ui development, you should definitely consider the accessibility of its ui
widgets as an important factor when making your choice.
... guiding users through complex
widgets there are a whole host of other roles that can identify non-semantic element structures as common ui features that go beyond what's available in standard html, for example combobox, slider, tabpanel, tree.
Other form controls - Learn web development
autocomplete box you can provide suggested, automatically-completed values for form
widgets using the <datalist> element with child <option> elements to specify the values to display.
...s overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form
widgets ...
IME handling guide
if all sent widgetcompositionevents and
widgetselectionevents are already handled in the remote process, contentcacheinparent sending the notifications to widget.
... contentcacheinparent also manages sent widgetcompositionevents and
widgetselectionevents.
TimerFirings logging
204 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] http://
widgets.outbrain.com/outbrain.js:20:330 135 -495057024[7f74e105ba00]: [7108] fn timer (one_shot 4 ms): [content] https://self-repair.mozilla.org/repair/:7:13669 118 801266240[7f7c1f248000]: [7163] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 103 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] http://static.dynamicyield.c...
... 204 fn timer (one_shot): [content] http://
widgets.outbrain.com/outbrain.js:20:330 186 fn timer (one_shot): nsbrowserstatusfilter::timeouthandler 138 fn timer (one_shot): [content] https://self-repair.mozilla.org/repair/:7:13669 118 fn timer (one_shot): [content] http://a.visualrevenue.com/vrs.js:6:9423 108 fn timer (slack): layeractivitytracker 104 fn timer (slack): nsidocument::selectorcache 104 fn time...
AT APIs Support
widgets such as menus, tab panels, tree views and dialogs are provided via an xml language called xul (extensible user-interface language).
...developing a xul window is not that different from developing a web page, but the elements available to add
widgets are more powerful and designed to be similar to desktop
widgets.
nsIWindowMediator
note: it compares the nsixulwindow to nsi
widgets.
...for that reason this interface requires only objects one step removed from the native window (nsi
widgets), and its implementation must be very understanding of what may be completely invalid pointers in those parameters.
Index
xul is an xml grammar that provides user interface
widgets like buttons, menus, toolbars, trees etc.
... we add
widgets by inserting new xul dom elements into the application window and modify them using scripts and attaching event handlers.
ARIA guides - Accessibility
a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the
widgets.
... error handling in forms labeling
widgets labeling composite
widgets and regions managing focus in composite
widgets (aria-activedescendant vs roving tabindex) using landmark roles handling dynamic updates & live regions virtual vs.
Using the aria-describedby attribute - Accessibility
it is used to establish a relationship between
widgets or groups and text that described them.
... the aria-describedby attribute is not used only for form elements; it is also used to associate static text with
widgets, groups of elements, panes, regions that have a heading, definitions, and more.
ARIA: switch role - Accessibility
assistive technologies may choose to represent switch
widgets with a specialized presentation to reflect the notion of an on/off switch.
... <button role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> javascript this javascript code defines and applies a function to handle click events on switch
widgets.
overview - Accessibility
warning: needs updating introduction here's a look at working examples and best practices in building accessible javascript
widgets.
... general resources dhtml style guide provides keyboard interaction recommendations wai-aria authoring practices guide checkbox aria toggle button and tri-state checkbox examples (from "the paciello group blog") aria example checkbox
widgets from the university of illinois menu using wai-aria roles and states with the yui menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria tab panel example here on codetalks lightbox wcag 2.0 and aria-conformant lightbox application http://majx-js.digissime.net/js/popin/ ...
<select>: The HTML Select element - HTML: Hypertext Markup Language
for further examples, see the native form
widgets: drop-down content.
...if you want to get full control, you should consider using a library with good facilities for styling form
widgets, or try rolling your own dropdown menu using non-semantic elements, javascript, and wai-aria to provide semantics.
Implementing the widget - Archive of obsolete content
main.js now in the lib directory open main.js and add the following code: var
widgets = require('sdk/widget'); var data = require('sdk/self').data; var annotatorison = false; function toggleactivation() { annotatorison = !annotatorison; return annotatorison; } exports.main = function() { var widget =
widgets.widget({ id: 'toggle-switch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: d...
Storing annotations - Archive of obsolete content
finally we need to connect this to the widget's right-click message: var widget =
widgets.widget({ id: 'toggle-switch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: data.url('widget/widget.js') }); widget.port.on('left-click', function() { console.log('activate/deactivate'); widget.contenturl = toggleactivation() ?
Tabbox - Archive of obsolete content
handling onclosetab event assuming the tabbox, tabs, and tabpanels
widgets with id's the same as their nodename, this function will correctly remove the current tab and tab panel for the onclosetab tabs event: function removetab(){ var tabbox = document.getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*work a...
Code snippets - Archive of obsolete content
used to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service svg general general information and utilities svg animation animate svg using javascript and smil svg interacting with script using javascript and dom events to create interactive svg embedding svg in html and xul using svg to enhance html or xul based markup xul
widgets html in xul for rich tooltips dynamically embed html into a xul element to attain markup in a tooltip label and description special uses and line breaking examples tree setup and manipulation of trees using xul and js scrollbar changing style of scrollbars.
Embedding FAQ - Archive of obsolete content
here is the code : import org.eclipse.swt.swt; import org.eclipse.swt.browser.mozillabrowser; import org.eclipse.swt.browser.progressevent; import org.eclipse.swt.browser.progresslistener; import org.eclipse.swt.
widgets.display; import org.eclipse.swt.
widgets.shell; import org.mozilla.xpcom.nsidomdocument; public class test { public static void main(string args[]) { display display = new display(); shell shell = new shell(display); final mozillabrowser browser = new mozillabrowser(shell,wt.border); browser.seturl("http://www.google.com"); ...
Install Wizards (aka: Stub Installers) - Archive of obsolete content
it then proceeds to extract the xpinstall engine and feed it the downloaded software packages to install.) the stub installer code includes: the logic to display the install wizard
widgets and dialogs the code that reads in the configuration file (config.ini) and dynamically installs from the net or from local xpi modules found next to the installer binary the code that processes user selections the code that calls the xpinstall engine through xpistub the libxpnet code that is statically linked in the stub installers are written in code native to the platform using native widg...
Index - Archive of obsolete content
it contains elements for all common ui
widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers).
Popup Guide - Archive of obsolete content
popup types xul provides a number of different types of elements which may be used to create popup menus or other types of popup
widgets, which vary based on the manner in which they are attached to an element and the manner in which they are opened.
dialogheader - Archive of obsolete content
attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other
widgets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
LiveConnect Overview - Archive of obsolete content
there are cases where liveconnect will fail to load a class, and you will need to manually load it like this: var widgetry = java.lang.thread.currentthread().getcontextclassloader().loadclass("org.my
widgets.widgetry"); in javascript 1.3 and earlier, javaclass objects are not automatically converted to instances of java.lang.class when you pass them as parameters to java methods—you must create a wrapper around an instance of java.lang.class.
XForms Repeat Element - Archive of obsolete content
here comes the output: <br/> <xf:output ref="@id"><xf:label>output: </xf:label></xf:output> <div xf:repeat-nodeset="nest"><xf:output ref="."><xf:label>nested output: </xf:label></xf:output></div> </div> repeat in anonymous content (usage in xbl) you can use repeat elements inside anonymous content to create powerful new
widgets.
XForms Secret Element - Archive of obsolete content
characteristics analogous
widgets are <xhtml:input type="password"/> and <xul:textbox type="password"/> if the incremental attribute is present and has the value true, then the bound instance node is updated on every user input.
XForms Upload Element - Archive of obsolete content
representations the xforms upload element is represented by visually combining three
widgets: a text field that shows the uri of the selected file, a button to open the file picker dialog which allows the user to select a file, and a button to clear the text field and the reference to the file from the bound node (xhtml only).
Mobile accessibility - Learn web development
it is also worth considering the use of html5 form input types such as the date on mobile platforms as they handle them well — both android and ios, for example, display usable
widgets that fit well with the device experience.
Client-side form validation - Learn web development
s overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form
widgets ...
UI pseudo-classes - Learn web development
s overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form
widgets ...
Software accessibility: Where are we today?
ensure correct keyboard accessibility when developing new controls: mozilla's xul and html
widgets already support proper keyboard accessibility, so let's not regress in that area.
Mozilla’s UAAG evaluation report
it does, however, support the look and feel of
widgets on various operating systems, when the classic theme is selected (on by default).
Webapps.jsm
importing components.utils.import("resource://gre/modules/webapps.jsm"); // exported symbol is domapplicationregistry method overview init: function() loadcurrentregistry: function() notifyappsregistrystart: function notifyappsregistrystart() notifyappsregistryready: function notifyappsregistryready() sanitizeredirects: function sanitizeredirects(asource) _save
widgetsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(aid, aispreinstalled) updateofflinecacheforapp: function(aid) installpreinstalledapp: function installpreinstalledapp(aid) removeifhttpsduplicate: function(aid) installsystemapps: function() loadandupdateapps: function() updatedatastore: function(aid, aorigin, amanifesturl, amanifes...
FOSS
python http://pypi.python.org/pypi/python-spidermonkey wx
widgets gluescript (formerly wxjavascript) code generators jsapigen - generates bindings for embedding spidermonkey in c applications extensions http://code.google.com/p/jslibs/ - zlib, sqlite, nspr, ode, libpng, libjpeg, libffi, (...) libraries for spidermonkey http://www.jsdb.org/ - a js shell with native objects for files, networks, databases, compression, email, etc.
Gecko object attributes
note some
widgets which appear to be checkboxes might in fact be cyclers (see "cycles" below).
Gecko Roles
role_combobox_option a item of list that is shown by combobox role_image_map an image map -- has child links representing the areas role_option an option in a listbox role_rich_option a rich option in a listbox, it can have other
widgets as children role_listbox a list of options editor's note: use template role_ to get reference on accessible role.
XForms Accessibility
forms controls module some of form control elements may be represented in few ways by different
widgets.
Index
widgets that use role attribute can force a value using the valuenow attribute.
Value
widgets that use role attribute can force a value using the valuenow attribute.
nsIAccessible
widgets that use role attribute can force a value using the valuenow attribute.
nsIAccessibleRole
role_rich_option 118 a rich option in a listbox, it can have other
widgets as children.
Address Book examples
there are 3 address book autocomplete
widgets: "mydomain" - use to autocomplete a domain for an email identity, e.g.
Mail and RDF
in the document's onload= handler the datasources are attached to their respective
widgets by setting the database property on each rdf template's parent element.
Mail client architecture overview
the mail reader gecko (xul and html rendering) rdf (dynamic
widgets) js (menus, events) libmime mail datasources mail javascript folder/message management msgdb imap/nntp/pop3 necko (networking) sections in grey refer to modules outside of mail/news the base module the base module provides a generic interface to a set of protocol-independant messaging services.
Zombie compartments
compartment(http://techcrunch.com/) compartment(http://www.facebook.com/plugins/like.php?...) compartment(https://plusone.google.com/_/+1/fastbutton?...) compartment(http://platform.twitter.com/
widgets/...utton.html?...) compartment(http://cdn.at.atwola.com/_media/uac/tcode3.html) compartment(https://s-static.ak.fbcdn.net/connec..._proxy.php?...) compartment(http://ads.tw.adsonar.com/adserving/getads.jsp?...) (some of those compartment urls are long and have been truncated.) another thing to beware is each compartment is created for an origin (e.g.
Media Session action types - Web APIs
description a media session action may be generated by any media session action source; these sources include anything from ui
widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.
MediaSessionActionDetails - Web APIs
description a media session action may be generated by any media session action source; these sources include anything from ui
widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.
Screen.height - Web APIs
widgets such as taskbars or other special application windows that integrate with the os (e.g., the spinner player minimized to act like an additional toolbar on windows) may reduce the amount of space available to browser windows and other applications.
Screen.width - Web APIs
when other
widgets occupy space that cannot be used by the window object, there is a difference in window.screen.width and window.screen.availwidth.
A simple RTCDataChannel sample - Web APIs
function startup() { connectbutton = document.getelementbyid('connectbutton'); disconnectbutton = document.getelementbyid('disconnectbutton'); sendbutton = document.getelementbyid('sendbutton'); messageinputbox = document.getelementbyid('message'); receivebox = document.getelementbyid('receivebox'); // set event listeners for user interface
widgets connectbutton.addeventlistener('click', connectpeers, false); disconnectbutton.addeventlistener('click', disconnectpeers, false); sendbutton.addeventlistener('click', sendmessage, false); } this is quite straightforward.
Inputs and input sources - Web APIs
gamepad record each input source has a gamepad property which, if not null, is a gamepad object describing the various controls and
widgets available on the controller.
Window.console - Web APIs
console.log("an error occurred while loading the content"); the next example logs an object to the console, with the object's fields expandable using disclosure
widgets: console.dir(someobject); see usage in console for more thorough examples.
Using the aria-labelledby attribute - Accessibility
in addition to form elements, you can use the aria-labelledby attribute to associate static text with
widgets, groups of elements, panes, regions that have a heading, definitions, and other types of objects.
ARIA: document role - Accessibility
generally used in complex composite
widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: the document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.
ARIA: dialog role - Accessibility
in addition to the needed control, dialogs can contain any number of focusable elements, even entire forms or other container
widgets like tabs.
WAI-ARIA Roles - Accessibility
dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).aria: document rolegenerally used in complex composite
widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: the document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.aria: feed rolea feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the us...
Accessibility
keyboard-navigable javascript
widgets until now, web developers who want to make their styled <div> and <span> based
widgets accessible have lacked the proper techniques.
Replaced elements - CSS: Cascading Style Sheets
however, other form controls, including other types of <input> elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term "
widgets").
contain - CSS: Cascading Style Sheets
this property is useful on pages that contain a lot of
widgets that are all independent, as it can be used to prevent each widget's internals from having side effects outside of the widget's bounding-box.
<input type="time"> - HTML: Hypertext Markup Language
using the step attribute you can use the step attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the little arrow
widgets).
HTML elements reference - HTML: Hypertext Markup Language
<input> the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control
widgets are available, depending on the device and user agent.
HTML documentation index - HTML: Hypertext Markup Language
118 <input>: the input (form input) element data entry, element, forms, html, html forms, html input tag, input, makebrowseragnostic, reference, web the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control
widgets are available, depending on the device and user agent.
Using HTTP cookies - HTTP
cookie blocking can cause some third-party components (such as social media
widgets) to not function as intended.