A box is a special soft of window that has graphics border around the client area (the box body). The box is a resizable window, for this reason the graphics elements for the edges must be tiles. Unlike the edges, the corners are fix-sized elements. Optionally an image can be provided for tilling of the client area.

QBoxCtrl is an abstraction and has no visual representation. It's derived from QWndCtrl class and inherits all its properties and methods. New box class that extends QBoxCtrl must call create method in instance constructor to write DHTML code to the document (after this the box gets materialized in HTML).

To be created, a box needs the following properties are set: properties required by underlying QWndCtrl class plus box resource (res) and the content (body). After created, a box acquires the body dimensions available trough cwidth and cheight properties. These properties are expected to be used in constructor of the box body.

In many respects box control is similar to window control.

This implementation of a box doesn't allow resize operation after the box is created. For this reason setSize method for a box has no effect. For more details on QLIB window implementation refer to QWndCtrl notes.

QBoxRes, QWndCtrl, Windowing

QWndCtrl()
Creates new prototype instance for class that you want to be derived from QBoxCtrl (see JavaScript prototype property for details). Example: to derive MyControl from QBoxCtrl you should assign: MyControl.prototype = new QBoxCtrl();

Property	Access	Description
res	R / W	The box resource (see QBoxRes).
body	R / W	The box content (must be either a string or a function).
cwidth	R	Width in pixels of the box client area.
cheight	R	Height in pixels of the box client area (is null if box is an auto-sized).
Properties inherited from QWndCtrl
x	R / W	X coordinate of the top left corner (pixels).
y	R / W	Y coordinate of the top left corner (pixels).
width	R / W	Width in pixels of the surrounding window.
height	R / W	Height in pixels of the surrounding window (is null if box is an auto-sized).
visible	R / W	Visibility state.
effects	R / W	Effects mask (can be a mix of effects).
opacity	R / W	The window opacity from 0 (transparent) to 100 (opaque).
zindex	R / W	The window stacking order. Can be null for auto-stack.
Properties inherited from QControl
name	R	Name of the control. Serves as a direct reference to this object when evaluated.
id	R	Alphanumerical unique identifier of the control.
parent	R	Reference to the parent control (if any, null otherwise).
tag	R / W	Can refer any value or object, tag is always passed to all event handlers as the last parameter.
window	R	This property is a reference to JavaScript window object in which the control exists.
document	R / W	Refers to document object in which the corresponding HTML elements exist. Normally all elements of a DOM2 compatible browser are children of the top document object. If the control creates new document scope (i.e. printing tags like <IFRAME>, <LAYER>), it should assign this document to this property.

create()
Creates DHTML code for the box. This method is claimed to be protected. That means that only subclasses of QBoxCtrl may call it. This method requires the following properties to be initialized before the call: window position (x, y); dimensions (width, height); initial visibility (visible); effects mask (effects); opacity (opacity); stacking order (zindex); box resource (res) and the body (body).

show(show)
Shows or hides the window. "IN" and "OUT" transitions can be assigned to show and hide actions respectively (see setEffects method). In this case the window does not show/hide promptly, instead the window smoothly changes its visibility through animation. Parameters show - Desirable state as follows: true - make it visible, false - hide the window.

focus()
Gives the focus to the window. This brings it to the top of the stacking order.

center()
Centers the box on page.

moveTo(x, y)
Moves the window to specified position. If the window has been created in document context, it gets positioned in absolute page coordinates. If the window is nested in another one, it's positioned in relative coordinates of the parent window (see CSS positon property for more details). Parameters x - X coordinate in pixels. y - Y coordinate in pixels.

setSize(w, hopt)
This method has no effect for this control, see Implementation Notes.

setZIndex(z)
Changes the stacking order of the window. Window with higher index appear on the screen first obscuring underlying windows with lower indices. Parameters z - Desirable stacking index (starting from 1).

setOpacity(op)
Changes the window opacity. See Implementation Notes for details and how this method is supported. Parameters op - Desirable opacity as follows: 0 - transparent, 100 - opaque.

setEffects(fx)

Sets effects mask. There're two kinds of effects: static and dynamic. Static effects change the default appearance of the window (for example, a window casts shadow when it's set by QWndCtrl.SHADOW). On the other hand, dynamic effects are transitions that get activated when window changes its visibility state. A dynamic effect can be either "IN" or "OUT". The first type is played when a window appears. The second one is activated on the hiding. Effects of all types can be mixed together to bring up a composite effect (example: "QWndCtrl.SHADOW + QWndCtrl.BOXIN + QWndCtrl.FADEOUT" - makes a window to cast shadow, it appears with "box" effect, hides itself fading out from view). Parameters fx - Mix of effects to apply.

onShow(visible, tag)
This handler is fired when the window becomes visible or vanishes. When transitions are enabled, the handler is fired after the animation completes. Parameters visible - Visibility state of the window. tag - Tag is commonly used to parameterize the event handler. Each control can be optionally assigned by a tag. Returns The return value is ignored.

CSS Class	Description	Example (defined in a CSS file)
TABLE.qbox	Defines style of the box TABLE element.	TABLE.qbox { margin: 10px } /* sets margins around the box. */
TABLE TD.body	Defines style of the body cell.	TABLE TD.body { text-align: center } /* sets center alignment of the body. */