SUI

Root namespace of the Scrivo User Interface library.

The SUI namespace is the root namespace of the Scrivo User Interface library. It holds all the classes of the basic UI components as well as some general utility functions. More specialized classes or sets of utility functions will have their own namespace within the SUI namespace.

Defined in: SUI.js

Namespaces
Name	Description
browser	Holds a set of browser specific functions.
color	The SUI.color namespace contains a set of utility functions for working with color codes.
control	The SUI.control namespace holds a set of more advanced user interface controls.
date	The SUI.date namespace contains a set of utility functions for working with dates.
dialog	The SUI.dialog namspace holds a set of common dialog boxes.
form	The SUI.form namspace contains a set of wrappers for the typical HTML form components.
style	Holds a set of CSS/style related utility functions.
xhr	Holds a set of xhr related functions.

Events
Name	Description
onStart	The onStart event handler, is called when all necessary initialization actions are done and the DOM tree is ready to be manipulated.

Member summary
Attr.	Type	Name	Description
private		_initialized	Flag so we won't reinitialize SUI again.
public		i18n	SUI.i18n is a global instance that contains all the internationalization keys and values.
public	String	imgDir	Location of the images relative to the SUI source directory. Change this value if you want to use an external image library.
public		resource	SUI.resource is a global object that contains all the the resource keys and values.

Method summary
Attr.	Type	Name / Description
public		defineClass(arg) Utility function to facilitate JavaScript's prototypal inheritance mechanisms.
public		initialize() Initialize the SUI library.
public	String	ltrim(s) Left trim a string.
public	String	rtrim(s) Right trim a string.
public	String	trim(s) Trim a string.

Classes
Name	Description
Accordion	Construct a SUI.Accordion object. The titles of the headers and (optional) the client boxes are given as argument to this constructor. It is also possible to select the initial box.
ActionList	Construct an action list component. You can add your actions directly by passing them to the constructor as an array.
AnchorLayout	Construct a SUI.AnchorLayout component.
Border	Create a SUI.Border object. The arguments are optional and are given in CSS style: one argument sets all, two arguments set the top/bottom right/left, three arguments the top right/left and bottom and four set the individual border widths.
BorderLayout	Construct a split border object. You can tell the split layOut which areas (north/south/west/east) to set and the dimensions to use. It's also possible to set the child boxes directly.
Box	A SUI.Box represents a box structure and is the basic building block of the SUI library.
Dragger	Create a dragger component.
Event	Construct a SUI.Event object.
ListView	Construct a SUI.ListView object. A large number of variables can be set to customize the listview to your specific needs.
Padding	Create a SUI.Padding object. The arguments are optional and are given in CSS style: one argument sets all, two arguments set the top/bottom right/left, three arguments the top right/left and bottom and four set the individual padding widths.
Panel	Construct a SUI.Panel object. Actually nothing more than a SUI.AnchorLayout but with some extra cosmetical extras.
PopupMenu	Construct a popup menu. A large number of variables can be set to customize the listview to your specific needs.
SplitLayout	Construct a split layOut object. You can tell the split layOut which areas (north/south/west/east) to set and the dimensions to use. It's also possible to set the child boxes directly.
TabPanel	Construct a SUI.TabPanel object. The titles of the tabs and (optional) the client boxes are given as argument to this constructor. It is also possible to select the initial tab.
TextBox	Initialize a SUI.TextBox component.
Toolbar	Create a toolbar.
ToolbarButton	Create a toolbar button.
ToolbarSeparator	Create a toolbar separator.
TreeView	Create a treeview contol. If you want to do your own xhr because of extra error handling f.i. you can pass in your own function.
Window	Create a window, use show to show it in modal mode or draw to display as it modeless window.

Members

private _initialized

Flag so we won't reinitialize SUI again.

View source: SUI.js, line 351

public i18n

SUI.i18n is a global instance that contains all the internationalization keys and values.

View source: i18n.js, line 37

public String imgDir

Location of the images relative to the SUI source directory. Change this value if you want to use an external image library.

View source: SUI.js, line 100

public resource

SUI.resource is a global object that contains all the the resource keys and values.

View source: i18n.js, line 110

Methods

public defineClass( Object arg)

Utility function to facilitate JavaScript's prototypal inheritance mechanisms. The aim is to stay close to the language standard but to sand off some of the rough edges and to create a standard pattern to use within the Scrivo UI library.

Example (boiler plate code):

MyClass = SUI.defineClass({
    initializer: function(arg) {
        // Your constructor code here
    },
    // your prototype members and methods here:
    sampleMethod: function(a) {
        return "[" + a + "]";
    }
});

MySubClass = SUI.defineClass({
    baseClass: MyClass, // your base class
    initializer: function(arg) {
        MySubClass.initializeBase(this, arg); // initialize base class
        // Your constructor code here
    },
    // your prototype members and methods here:
    sampleMethod: function(a) { // override a method
        return "> " + MySubClass.parentMethod(this, "sampleMethod", a);
    }
});

Or more prosaic:

Person = SUI.defineClass({
    initializer: function(arg) {
        if (arg.name) {
            this.name = arg.name;
        }
    },
    name: ""
});

Employee = SUI.defineClass({
    baseClass: Person,
    initializer: function(arg) {
        Employee.initializeBase(this, arg);
    },
    salary: 20000,
    raise: function(percentage) {
        return this.salary * (1 + percentage/(100 * 10));
    }
});

Manager = SUI.defineClass({
    baseClass: Employee,
    initializer: function(arg) {
        Manager.initializeBase(this, arg);
    },
    salary: 40000,
    raise: function(percentage) {
        return 3 * Manager.parentMethod(this, "raise", percentage);
    }
});

Parameters:
Name	Type	Description
Object	arg	An object containing the class definition.

View source: SUI.js, line 175

public initialize()

Initialize the SUI library. Some initial values and event handlers need to be set to ensure that all parts of the SUI library will work correctly. The SUI library was designed to have a minimum footprint so here it is what is does on initialization:

Get the browser type,
Two IE patches (Array.indexOf and String.substr),
Get the viewport size and add an window.onresize handler to keep these values current,
Notify the SUI.onStart event listener.

That was all folks, no lengthy initialization stuff for us!

View source: SUI.js, line 250

public String ltrim( String s)

Left trim a string. Remove the leading whitespace (space, non breaking space, tab, line feed, carriage return) from a string.

Parameters:
Name	Type	Description
String	s	The string to trim.

Returns:

String The trimmed string.

View source: SUI.js, line 306

public String rtrim( String s)

Right trim a string. Remove the trailing whitespace (space, non breaking space, tab, line feed, carriage return) from a string.

Parameters:
Name	Type	Description
String	s	The string to trim.

Returns:

String The trimmed string.

View source: SUI.js, line 321

public String trim( String s)

Trim a string. Remove the leading and trailing whitespace (space, non breaking space, tab, line feed, carriage return) from a string.

Parameters:
Name	Type	Description
String	s	The string to trim.

Returns:

String The trimmed string.

View source: SUI.js, line 336

Namespaces

Classes

SUI

Namespaces

Events

Member summary

Method summary

Classes

Members

Methods

Parameters:

Parameters:

Returns:

Parameters:

Returns:

Parameters:

Returns: