| 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.
|
| |
The Prototype JavaScript framework makes working with DOM elements much easier than does plain
JavaScript. Ortho builds on this superb framework to wrap Prototype extended Elements in
such a way that you can define and place them on a web page using an API that resembles other
two-dimensional graphics programming libraries.
|
| |
All styling and placement of Ortho graphic elements is achieved with CSS styles. However
a fundamental aspect of Ortho is the separation between the location and size of
objects, which are defined in Ortho constructor functions, and the
visual styling of those
objects, which are defined in CSS style classes. This keeps the JavaScript code
relatively simple and easy to read, while retaining the full flexibility of CSS
to style the elements any way you want.
|
| |
Ortho constructors can be used to manually define graphic objects on a web page.
But more powerfully, they can be used with static or dynamically loaded datasets. In
this way you can build pages that create sophisticated graphic displays on the
fly that can be updated as the source data changes, using AJAX. They can also be bound to
use events such as mouse clicks, dragging and scrolling, to produce graphic
displays that are highly interactive.
|
| |
Because the graphic objects are wrappers around DOM elements, which are directly
accessible to the programmer, it is very easy to integrate Ortho objects with
Prototype functions and to extend them with those in the Scriptaculous library of
visual effects, etc.
|
| |
The Ortho Core objects described here represent the basic graphic elements and do
not directly support user interaction. They can be used to create complex
static graphical displays in this form. Ortho Composite objects, such as orthoRuler,
are built from the Core objects and represent widely used, more complex objects such
as the rulers or axes of graphs, etc.
|
| |
Ortho Core objects have been designed with user interaction in mind but these
capabilities will be provided as extensions to the static core. That way the developer
can load only those libraries that are actually used by their application.
|
| |
The initial release of Ortho (November 2007) will consist of the static Core classes.
Work on the user interaction functions is well underway.
|
| |
