| Overall Design of the Ortho Library |
| |
Ortho uses DOM elements to render all its core graphic objects. Specifically, the <div>
element is used to create lines and rectangles.
|
| |
A Rectangle is a <div> element of a defined size which
has a visible border or background color defined in the associated CSS class.
|
| |
A Horizontal Line
is a <div> with a defined Width that has only
its Top border defined in its CSS class.
|
| |
A Vertical Line is
a <div> with a defined Height and that has only
its Left border defined.
|
| |
These simple conventions allow you to create complex graphics using a small set of
core Ortho objects. The use of <div> border styles
restricts the objects to having only horizontal and vertical components. The
orthogonality of the
graphics led to the name Ortho.
|
| |
More ... |
| |
| Ortho init( ) and User main( ) |
| |
Pages that use Ortho should include a call to ortho.init( ) in the <body> tag.
User JavaScript code with calls to Ortho drawing functions should be placed in a 'main( )' function,
which is called by ortho.init( ).
|
| |
<body onload="ortho.init()">
|
| |
This convention ensures that any Images used in the page will be preloaded before calling your main( ) function,
which in turn avoids certain issues with Internet Explorer.
The default name for the main user function is 'main( );'. If you want to use another name then specify
that in the call the ortho.init( ), thus:
|
| |
<body onload="ortho.init(my_main_function)">
|
| |
| Ortho Core JavaScript Classes |
| |
The Core library (ortho_core.js) contains the basic static Ortho objects and defines five classes. Click the class names for more documentation.
|
| |
orthoPanel |
| | |
new orthoPanel(panel_id, left, top, width, height [, options]) |
| |
orthoRectangle |
| |
new orthoRectangle(parent, left, top, width, height [, options]) |
| |
orthoLine |
| |
new orthoLine(parent, left, top, width, height [, options]) |
| |
orthoLabel |
| |
new orthoLabel(parent, left, top, string, placement [, options]) |
| |
orthoImage |
| |
new orthoImage(parent, left, top, name, placement [, options]) |
| |
orthoImage.loadImages([list of image URLs]) |
| |
| Ortho CSS Classes |
| |
Each Ortho Core object has a corresponding default CSS class defined in the
file ortho.css. Users can edit these or replace the classes with their own.
|
| |
CSS Class names are the same as the corresponding Ortho class, with the important
exception that classes for Horizontal and Vertical lines are called
orthoLineHorizontal and
orthoLineVertical. In both these classes it is critical
that you not remove the border-left and
border-top style rules
|
| |
A safe way to experiment with these styles is to copy and rename the classes and then
specify the new class when you create the Ortho object using the option string
{cssClass: 'your-class'}.
|
| |
Be aware that some of the default classes include style rules that appear
to be superfluous. Specifically, the rule font-size: 0px;
appears several times. This is a fix for an issue that occurs with Internet Explorer.
|
| |
| Ortho Composite Objects Classes |
| |
Composite Objects are groupings of Core objects that represent commonly
used graphic elements, such as the axes (rulers) of graphs, tooltips, etc.
|
| |
orthoRuler |
| | |
new orthoRuler(panel, left, top, rulertype, length [, options]) |
| |
| Integration with Prototype |
| |
Ortho is built on top of Prototype and would not
be possible were it not for the
excellent work of the Prototype team making JavaScript easier to use and dealing with
the many browser incompatibilities that we are saddled with.
Thank you!
|
| |
This means that developers can leverage the full power of Prototype with Ortho objects.
You access the Prototype extended element that is part of each Ortho object through the
element member.
|
| |
var rect = new orthoRectangle(panel, 100, 100, 400, 200);
rect.element.setStyle({color: red; fontSize: '16px'});
var dims = rect.element.getDimensions();
|
| |
| Integration with Scriptaculous |
| |
The Scriptaculous JavaScript library of visual effects,
and other great functions, is itself built on top of Prototype. That makes it easy to apply Scriptaculous
functions to Ortho objects.
|
| |
var rect = new orthoRectangle(panel, 100, 100, 400, 200);
var drag = new Draggable(rect.element);
|
