Core.js

Jx is a global singleton object that contains the entire Jx library within it.  All Jx functions, attributes and classes are accessed through the global Jx object.  Jx should not create any other global variables, if you discover that it does then please report it as a bug

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Element is a global object provided by the mootools library.  The functions documented here are extensions to the Element object provided by Jx to make cross-browser compatibility easier to achieve.  Most of the methods are measurement related.

While the code in these methods has been converted to use MooTools methods, there may be better MooTools methods to use to accomplish these things.  Ultimately, it would be nice to eliminate most or all of these and find the MooTools equivalent or convince MooTools to add them.

ContentLoader is a mix-in class that provides a consistent mechanism for other Jx controls to load content in one of four different ways:

• using an existing element, by id
• using an existing element, by object reference
• using an HTML string
• using a URL to get the content remotely

Use the Implements syntax in your Class to add Jx.ContentLoader to your class.

Option: content content may be an HTML element reference, the id of an HTML element already in the DOM, or an HTML string that becomes the inner HTML of the element.

Option: contentURL the URL to load content from

Mix-in class that provides a method for positioning elements relative to other elements.

A mix-in class that provides chrome helper functions.  Chrome is the extraneous visual element that provides the look and feel to some elements i.e. dialogs.  Chrome is added inside the element specified but may bleed outside the element to provide drop shadows etc.  This is done by absolutely positioning the chrome objects in the container based on calculations using the margins, borders, and padding of the jxChrome class and the element it is added to.

Chrome can consist of either pure CSS border and background colors, or a background-image on the jxChrome class.  Using a background-image on the jxChrome class creates four images inside the chrome container that are positioned in the top-left, top-right, bottom-left and bottom-right corners of the chrome container and are sized to fill 50% of the width and height.  The images are positioned and clipped such that the appropriate corners of the chrome image are displayed in those locations.

A mix-in class that provides a helper function that allows an object to be added to an existing element on the page.

Extends: Object

Implements: Options, Events, Jx.Addable

Jx.Button creates a clickable element that can be added to a web page.  When the button is clicked, it fires a ‘click’ event.

The CSS styling for a button is controlled by several classes related to the various objects in the button’s HTML structure:

<div class="jxButtonContainer">
 <a class="jxButton">
  <span class="jxButtonContent">
   <img class="jxButtonIcon" src="image_url">
   <span class="jxButtonLabel">button label</span>
  </span>
 </a>
</div>

The CSS classes will change depending on the type option passed to the constructor of the button.  The default type is Button.  Passing another value such as Tab will cause all the CSS classes to change from jxButton to jxTab.  For example:

<div class="jxTabContainer">
 <a class="jxTab">
  <span class="jxTabContent">
   <img class="jxTabIcon" src="image_url">
   <span class="jxTabLabel">tab label</span>
  </span>
 </a>
</div>

When you construct a new instance of Jx.Button, the button does not automatically get inserted into the web page.  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 addTo method to append or insert the button into the page.

There are two modes for a button, normal and toggle.  A toggle button has an active state analogous to a checkbox.  A toggle button generates different events (down and up) from a normal button (click).  To create a toggle button, pass toggle: true to the Jx.Button constructor.

To use a Jx.Button in an application, you should to register for the ‘click’ event.  You can pass a function in the ‘onClick’ option when constructing a button or you can call the addEvent(‘click’, myFunction) method.  The addEvent method can be called several times, allowing more than one function to be called when a button is clicked.  You can use the removeEvent(‘click’, myFunction) method to stop receiving click events.

Example

var button = new Jx.Button(options);
button.addTo('myListItem'); // the id of an LI in the page.

Example:
var options = {
    imgPath: 'images/mybutton.png',
    tooltip: 'click me!',
    label: 'click me',
    onClick: function() {
        alert('you clicked me');
    }
};
var button = new Jx.Button(options);
button.addEvent('click', anotherFunction);

function anotherFunction() {
  alert('a second alert for a single click');
}

Events

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Extends: Jx.Button

Implements: Jx.ContentLoader, Jx.AutoPosition, Jx.Chrome

Flyout buttons expose a panel when the user clicks the button.  The panel can have arbitrary content.  You must provide any necessary code to hook up elements in the panel to your application.

When the panel is opened, the ‘open’ event is fired.  When the panel is closed, the ‘close’ event is fired.  You can register functions to handle these events in the options passed to the constructor (onOpen, onClose).

The user can close the flyout panel by clicking the button again, by clicking anywhere outside the panel and other buttons, or by pressing the ‘esc’ key.

Flyout buttons implement Jx.ContentLoader which provides the hooks to insert content into the Flyout element.  Note that the Flyout element is not appended to the DOM until the first time it is opened, and it is removed from the DOM when closed.

It is generally best to specify a width and height for your flyout content area through CSS to ensure that it works correctly across all browsers.  You can do this for all flyouts using the .jxFlyout CSS selector, or you can apply specific styles to your content elements.

A flyout closes other flyouts when it is opened.  It is possible to embed flyout buttons inside the content area of another flyout button.  In this case, opening the inner flyout will not close the outer flyout but it will close any other flyouts that are siblings.

Example

var flyout = new Jx.Button.Flyout({
     label: 'flyout',
     content: 'flyoutContent',
     onOpen: function(flyout) {
         console.log('flyout opened');
     },
     onClose: function(flyout) {
         console.log('flyout closed');
     }
});

Events

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Extends: Object

Implements: Options, Events

Jx.Layout is used to provide more flexible layout options for applications

Jx.Layout wraps an existing DOM element (typically a div) and provides extra functionality for sizing that element within its parent and sizing elements contained within it that have a ‘resize’ function attached to them.

To create a Jx.Layout, pass the element or id plus an options object to the constructor.

Example

var myContainer = new Jx.Layout('myDiv', options);

Events

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Extends: Jx.Button

Implements: Jx.ContentLoader

A single tab in a tab set.  A tab has a label (displayed in the tab) and a content area that is displayed when the tab is active.  A tab has to be added to both a Jx.TabSet (for the content) and Jx.Toolbar (for the actual tab itself) in order to be useful.  Alternately, you can use a Jx.TabBox which combines both into a single control at the cost of some flexibility in layout options.

A tab is a Jx.ContentLoader and you can specify the initial content of the tab using any of the methods supported by Jx.ContentLoader::loadContent.  You can acccess the actual DOM element that contains the content (if you want to dynamically insert content for instance) via the <Jx.Tab::content> property.

A tab is a button of type toggle which means that it emits the up and down events.

Example

var tab1 = new Jx.Button.Tab({
    label: 'tab 1',
    content: 'content1',
    onDown: function(tab) {
        console.log('tab became active');
    },
    onUp: function(tab) {
        console.log('tab became inactive');
    }
});

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Extends: Object

Implements: Options, Events, Jx.Addable

A Jx.ColorPalette presents a user interface for selecting colors.  Currently, the user can either enter a HEX colour value or select from a palette of web-safe colours.  The user can also enter an opacity value.

A Jx.ColorPalette can be embedded anywhere in a web page using its addTo method.  However, a Jx.Button subclass is provided (Jx.Button.Color) that embeds a colour panel inside a button for easy use in toolbars.

Colour changes are propogated via a change event.  To be notified of changes in a Jx.ColorPalette, use the addEvent method.

Example

Events

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Extends: Jx.Button.Flyout

A Jx.ColorPalette wrapped up in a Jx.Button.  The button includes a preview of the currently selected color.  Clicking the button opens the color panel.

A color button is essentially a Jx.Button.Flyout where the content of the flyout is a Jx.ColorPalette.  For performance, all color buttons share an instance of Jx.ColorPalette which means only one button can be open at a time.  This isn’t a huge restriction as flyouts already close each other when opened.

Example

var colorButton = new Jx.Button.Color({
    onChange: function(button) {
        console.log('color:' + button.options.color + ' alpha: ' +
                    button.options.alpha);
    }
});

Events

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Extends: Object

Implements: Options, Events, Jx.AutoPosition, Jx.Chrome, Jx.Addable

A main menu as opposed to a sub menu that lives inside the menu.

TODO: Jx.Menu revisit this to see if Jx.Menu and Jx.SubMenu can be merged into a single implementation.

Example

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Extends: Object

Implements: Options, Events

A ButtonSet manages a set of Jx.Button instances by ensuring that only one of the buttons is active.  All the buttons need to have been created with the toggle option set to true for this to work.

Example

var toolbar = new Jx.Toolbar('bar');
var buttonSet = new Jx.ButtonSet();

var tab1 = new Jx.Button({label: 'b1', toggle:true, contentID: 'content1'});
var tab2 = new Jx.Button({label: 'b2', toggle:true, contentID: 'content2'});
var tab3 = new Jx.Button({label: 'b3', toggle:true, contentID: 'content3'});
var tab4 = new Jx.Button({label: 'b4', toggle:true, contentURL: 'test_content.html'});

buttonSet.add(b1,b2,b3,b4);

Events

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license

Extends: Jx.Button

Implements

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 method.

This is not really a button, but rather a container for buttons.  The button structure is a div containing two buttons, a normal button and a flyout button.  The flyout contains a toolbar into which all the added buttons are placed.  The main button content is cloned from the last button clicked (or first button added).

The Multi button does not trigger any events itself, only the contained buttons trigger events.

Example

var b1 = new Jx.Button({
    label: 'b1',
    onClick: function(button) {
        console.log('b1 clicked');
    }
});
var b2 = new Jx.Button({
    label: 'b2',
    onClick: function(button) {
        console.log('b2 clicked');
    }
});
var b3 = new Jx.Button({
    label: 'b3',
    onClick: function(button) {
        console.log('b3 clicked');
    }
});
var multiButton = new Jx.Button.Multi();
multiButton.add(b1, b2, b3);

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license