JxLib Examples

Quick Start

The JxLib examples are a set of web pages that illustrate specific JxLib components. Simply click on a page in the tree to the left to load the appropriate sample and get started exploring JxLib right away. Come back to this page later by clicking the About page in the tree.

The Example Toolbar

At the top of each page, there is a small toolbar on the right hand side of the page that contains three buttons:

Page Grid
This is a toggle button that turns on and off the display of a background graphic on the body of the example page. The background graphic contains a pixel grid that can be used to compare size and placement of components between browsers and examples.
Event Log
This button opens a dialog that contains a log of any event messages that have been generated on the current example page. Many of the components in JxLib use events to communicate user actions between themselves and to the application developer using JxLib. Most of the examples include samples of attaching to the events triggered by the components and place a message in the event log.
Theme
The theme selection allows you to change between JxLib skins on the fly. Simply click this button to expose a list of available skins and select a new skin to see the effect immediately. Only background graphics on open dialogs are not immediately changed by the theme selector, they will only update after being closed and open so the dialog examples include extra code to detect when a new theme has been selected and close open dialogs. We store a cookie in your browser so you don't have to keep changing skins every time you load a new example.

Show Source

Within each example page, there are one or more individual examples designed to highlight specific aspects of using a component. Typically, these progress from basic to more advanced as you go down the page. Each individual example has a brief title and a short introduction. On the far right of each title, there is a button that can be clicked to pop open the javascript source for that specific example. We are using the Google code prettifier to provide syntax highlighting of code snippets - its not perfect, but its pretty darn goode. To close a code snippet, just hit the ESC key or click anywhere outside of the snippet.

Getting More Help

While there are pages that cover all the components, each example is not necessarily exhaustive and there will often be more options or configurations that are possible than are shown. We have tried to cover what we think are the most common use cases of the various components and to touch on some of the more likely needs for customization, but this is based on our own experience and use.

If you find that the examples don't provide you with what you need, please contact the development team via the Mailing List and we'll try to add your needs to the examples.