Jx. Button

Jx.Button creates a clickable element in the application that is hooked to an instance of Jx.Action.  When the button is clicked, it activates its associated Jx.Action instance.  When the Jx.Action associated with the button is enabled or disabled, the Jx.Button updates its visual appearance to reflect the current state of the Jx.Action.

Visually, a Jx.Button consists of an <A> tag that may contain either an image, a label, or both (the label appears to the right of the button if both are present).  The default styles for Jx.Button expect the image to be 16 x 16 pixels, with a padding of 4px and a border of 1px which results in an element that is 26 pixels high.  The width of the button automatically accomodates the image and label as required.

When you construct a new instance of Jx.Button, the button does not automatically get inserted into the application.  Typically a button is used as part of building another capability such as a Jx.Toolbar.  However, if you want to manually insert the button into your application, you may use the domObj property of the Jx.Button instance.  In this case, you will use one of the DOM manipulation functions such as appendChild, and pass button.domObj.  For example:

var button = new Jx.Button(myAction, options);
var li = $('myListItem'); //obtain a reference to a DOM element
li.appendChild(button.domObj);

To use a Jx.Button in an application, you must first create an instance of Jx.Action and then pass it as the first parameter to the Jx.Button constructor.  The second argument to a Jx.Button constructor is an options object allows configuring the button.

Example:
function myFunc() { alert('you clicked me'); }
var action = new Jx.Action(myFunc);
var options = {
imgPath: 'images/mybutton.png',
tooltip: 'click me!',
label: 'click me'
}
var button = new Jx.Button(action, options);
Summary
Jx.Button creates a clickable element in the application that is hooked to an instance of Jx.Action.
an array of action listeners that are attached to the button.
the HTML element that is inserted into the DOM for this button
whether the button is enabled or not.
create a new button.
triggered when the user clicks the button, processes the actionPerformed event
add an action listener to the button
remove an action listener from the button
implements the PropertyChangeListener interface for handling the enabled state changing on the action associated with this button
set the image of this button to a new image URL
sets the text of the button.
sets the tooltip displayed by the button
Flyout buttons expose a panel when the user clicks the button.
construct a new instance of a flyout button.
Multi buttons are used to contain multiple buttons in a drop down list where only one button is actually visible and clickable in the interface.
the currently selected button
an array of all available buttons
construct a new instance of Jx.Button.Multi.
adds one or more buttons to the Multi button.
update the menu item to be the requested button.
update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.
A Picker button allows the user to choose an item from a list of items.
the UL element that contains the items to pick from
construct a new instance of Jx.Button.Picker
adds one or more items to the picker, passed as separate arguments.
handle the user selecting an item in the list
updates the button to contain the picked item

Properties

{Array} al

an array of action listeners that are attached to the button.

{Object} domObj

the HTML element that is inserted into the DOM for this button

{Boolean} enabled

whether the button is enabled or not.  This is controlled by the Action object that the button is associated with.

Functions

initialize

initialize : function(action,
options)

create a new button.

Parameters

action {Object} the action to trigger for this button.

options {Object} an object containing optional properties for this button.  It can have the following attributes:

imageoptional.  A string value that is the url to load the image to display in this button.  The default styles size this image to 16 x 16.  If not provided, then the button will have no icon.
tooltipoptional.  A string value to use as the alt/title attribute of the <A> tag that wraps the button, resulting in a tooltip that appears when the user hovers the mouse over a button in most browsers.  If not provided, the button will have no tooltip.
labeloptional.  A string value that is used as a label on the button.
disabledClassoptional.  A string value that is the name of a CSS class to put on the <A> tag if the button is in a disabled state.  If not provided, the default class jxButtonDisabled is used.  You may provide your own class or override jxButtonDisabled.
imgClassoptional.  A string value that is the name of a CSS class to put on the <IMG> element.  The default value is jxButtonIcon.

onclick

onclick : function()

triggered when the user clicks the button, processes the actionPerformed event

addActionListener

addActionListener: function(obj)

add an action listener to the button

Parameters: {Object} obj

the object to add as an action listener

removeActionListener

removeActionListener : function(obj)

remove an action listener from the button

Parameter: {Object} obj

the object to remove.

propertyChanged

propertyChanged: function(obj)

implements the PropertyChangeListener interface for handling the enabled state changing on the action associated with this button

Parameter: {Object} obj

the action that is changing state

setImage

setImage: function(path)

set the image of this button to a new image URL

Parameter: {String} path

the new url to use as the image for this button

setLabel

setLabel: function(label)

sets the text of the button.  Only works if a label was supplied when the button was constructed

Parameter: {String} label

the new label for the button

setTooltip

setTooltip: function(tooltip)

sets the tooltip displayed by the button

Parameter: {String} tooltip

the new tooltip

Jx. Button. Flyout

Flyout buttons expose a panel when the user clicks the button.  The panel can have arbitrary content.

The button itself does not trigger an external action.  You must provide any necessary code to hook up elements in the panel to your application.

Summary
construct a new instance of a flyout button.

Functions

initialize

initialize: function(options)

construct a new instance of a flyout button.  The single options argument takes the same parameters as Jx.Button.initialize plus content loading options as per Jx.ContentLoader.

Parameters: {Object} options

an options object used to initialize the button

Jx. Button. Multi

Multi buttons are used to contain multiple buttons in a drop down list where only one button is actually visible and clickable in the interface.

When the user clicks the active button, it performs its normal action.  The user may also click a drop-down arrow to the right of the button and access the full list of buttons.  Clicking a button in the list causes that button to replace the active button in the toolbar and performs the button’s regular action.

Other buttons can be added to the Multi button using the add function.

Summary
the currently selected button
an array of all available buttons
construct a new instance of Jx.Button.Multi.
adds one or more buttons to the Multi button.
update the menu item to be the requested button.
update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.

Properties

{<Jx. Button>} activeButton

the currently selected button

{Array} buttons

an array of all available buttons

Functions

initialize

initialize: function(options)

construct a new instance of Jx.Button.Multi.  The constructor takes a single options parameter which is the same as the Jx.Button.initialize options object.

Parameters: {Object} options

an options object used to initialize the button

add

add: function()

adds one or more buttons to the Multi button.  The first button added becomes the active button initialize.  This function takes a variable number of arguments, each of which is expected to be an instance of Jx.Button.

Parameter: {Jx.Button} button

a Jx.Button instance, may be repeated in the parameter list

setActiveButton

setActiveButton: function(button)

update the menu item to be the requested button.

Parameter: {Jx.Button} button

a Jx.Button instance that was added to this multi button.

setButton

setButton: function(button)

update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.

Parameter: {Jx.Button} button

The button to set as the active button

Jx. Button. Picker

A Picker button allows the user to choose an item from a list of items.  The items can be any HTML element.  The chosen item is placed into the menu item.

Summary
the UL element that contains the items to pick from
construct a new instance of Jx.Button.Picker
adds one or more items to the picker, passed as separate arguments.
handle the user selecting an item in the list
updates the button to contain the picked item

Properties

{HTMLElement} ul

the UL element that contains the items to pick from

Functions

initialize

initialize: function()

construct a new instance of Jx.Button.Picker

add

add: function()

adds one or more items to the picker, passed as separate arguments.

Parameter: {Object} item

can be present one or more times in the argument list.  The item to be added can be a Jx object with a domObj property, a string, or an HTML element reference.

clickHandler

clickHandler: function(e)

handle the user selecting an item in the list

Parameter: {Event} e

the event object associated with the click event

updateButton

updateButton: function(a)

updates the button to contain the picked item

Parameter: {HTMLElement} a

the A tag that the user clicked on

initialize : function(action,
options)
create a new button.
onclick : function()
triggered when the user clicks the button, processes the actionPerformed event
addActionListener: function(obj)
add an action listener to the button
removeActionListener : function(obj)
remove an action listener from the button
propertyChanged: function(obj)
implements the PropertyChangeListener interface for handling the enabled state changing on the action associated with this button
setImage: function(path)
set the image of this button to a new image URL
setLabel: function(label)
sets the text of the button.
setTooltip: function(tooltip)
sets the tooltip displayed by the button
initialize: function(options)
construct a new instance of a flyout button.
initialize: function(options)
construct a new instance of Jx.Button.Multi.
add: function()
adds one or more buttons to the Multi button.
setActiveButton: function(button)
update the menu item to be the requested button.
setButton: function(button)
update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons.
initialize: function()
construct a new instance of Jx.Button.Picker
A Picker button allows the user to choose an item from a list of items.
add: function()
adds one or more items to the picker, passed as separate arguments.
clickHandler: function(e)
handle the user selecting an item in the list
updateButton: function(a)
updates the button to contain the picked item
ContentLoader is a mix-in class that provides a consistent mechanism for other Jx controls to load content in one of four different ways:
Jx.Button creates a clickable element in the application that is hooked to an instance of Jx.Action.