Beehive II Beta, Public Demo
Introduction
Thanks for downloading this demo version of Beehive II. This file serves as a kind of
readme with examples and tips for using Beehive II. Note that since this is still a
beta version of Beehive II the examples don't necessarilly represent the
quality of the final version and there may be bugs. Really usable scripts are not
included in these examples. These will be available only in official Beehive II releases.
The zipfile should contain the following files:
- beehive2b.js - the latest beta version of Beehive II.
- example1.html - an example demonstrating moveElement() with events.
- example2.html - an example demonstrating Threads and relateToParent.
- index.html - this file (and beehive.css, the stylesheet).
Although not likely, various methods and properties might be changed, added or removed
in future release versions. These examples are aimed at developers who want to
experiment with Beehive II, or those who are just generally interested in scripting
and dhtml.
Copyright / legal stuff
You are free to use Beehive II for non commercial purposes as long as the
original source files, including comments, are kept intact. You are not required
to include a comment about Beehive II in your HTML code, but it is appreciated if
you do choose to do so.
If you wish to make a change, or add a feature, please mail me, because it might
just be something great that Beehive II should have featured to begin with. If you
don't mail me, then at least put a note in the source pointing out the changes,
along with the date of the changes. Please do not mirror Beehive II from your own site,
since Beehive II is subject to updates you might end up mirrorring an outdated version.
Beehive II is free, and its use is at your own risk. No warrenty whatsoever is
provided. I cannot be held responsible for whatever problems that might arise
from its use.
Beehive II Basics
Introduction
Beehive II is not a dhtml library, it is more like a DOM (document object model)
library or wrapper. It extends on the DOM as proposed by the W3C, and is meant to
enable quick and easy creation of complex behaviours or effects. Beehive II expects
the browser to support standards, and thus since it's not needed, a browsercheck is
not included. In a sense it is not Beehive II that supports the browser, but it's the
browser that supports Beehive II.
Note: this beta version has been succesfully tested on IE5.0 and up, Mozilla 1.4, and Opera 7.11.
So when should, and when should you not use Beehive II? For small effects and minor
user tools on a site you could just as easily code something from the ground up, and I
would encourage you to do so. Beehive II is meant for more complex scripts like
window style components, scrollbars etc.
Although usability issues might favor the use of the Operating System's versions of
these components, sometimes design issues require better looking versions, or versions
that are not provided by the Operating System, but possible using DHTML. The choice
whether to favor design over usability, or usability over design is up to you.
Features
Beehive II offers these features:
- Creating, modifying and removing any html element. *
- Managing events on the document and on individual elements.
- Animation and positioning features for effects or games.
- Drag & drop features for absolutely positioned elements.
- Small in size, fast, and low on preformance requirements.
*
Due to bugs and an exception in the dom you should not create
forms or tables.
Objects
Beehive II is Object Oriented, and also contains custom objects that are either used
internally, or available for you to use throughout scripts. The built in objects are:
- DynObject; the internal object used to manipulate html elements. Although
everything is built around this, you wont notice or need it directly, just its
methods and properties.
- Collection; a kind of box that simply stores properties, in a way it's much like an
array.
- Thread; an object used for animating things
This document wil not explain all properties and functions of each object in Beehive II,
instead, the examples below will simply showcase various features, and you are encouraged
to experiment with them. More Documentation will follow with future releases.
Beehive II Example
Creating elements
In general, html elements have 3 major properties that define it. The tag- or nodename, its
node attributes, and its style attributes. Events could possibly be considered a 4th aspect,
and there might be more, but that's not important right now.
To create an element using Beehive II, all you need are these 3 properties, which can be
passed to a function called
createObject which returns a dynObject:
dynObject = [parent].createObject(nodename, attributes, css);
The [parent] is for nesting purposes, and can be either another dynObject, or simply
document to nest it in the body directly.
Attributes and css can be omited (null, false, 0, or left out altogether), but if used they
should either be a Collection, or simply a basic object with the desired properties as top
level properties for the object. For instance; innerHTML is a valid property for attributes
(as well as className, id, href for links), and color would be a valid property for css. To
create a div in the body, with "Hello world" in red, you would use this:
document.createObject('div', {innerHTML:'Hello world'}, {color:'red'});
Note the {property:value} construction, which is simply the fastest way to define an object
with properties (in case you didn't know).
Example
Use the button below to create a div element with Hello world in red.
Run example 1
Beehive II Example
Events
Both the document as well as dynObjects can have events attached to them. To do this
you can use the
attachEvent function:
[object].attachEvent(type, reference);
Where type is a string, and reference [a reference to] a function. You can attach
multiple events of the same type to one object. For instance, to have a function
executed onload, you would use this:
document.attachEvent('onload', function() {
alert('onload!');
});
because Beehive II keeps track of attached events and remembers them all, individual
scripts running on Beehive II can attach their own event to the onload (or any other
event) without removing the onload event for other scripts in the same page.
The events you can use are not coded into Beehive II. You can simply use the events that
are valid for individual html elements or the document. For instance you can attach events
to the "onmousemove" of the document, or "onmouseover" of elements, etc.
Onload is officially a window related event rather than a document related one, hence
Beehive internally just executes the event on the the true window.onload (same for
onresize). You can even define your own events, and they will work, as long as you execute
them somewhere in your code:
document.attachEvent('some event', function() {
alert('some event executed');
});
// and somewhere else:
document.executeEvents('some event');
To prove this, hit the button below, and the "some event" event will be executed.
Run example 2
Beehive II Example
Combined
Obviously the previous examples can be combined into something more tangible. The
example below resembles something that could one day be a button:
document.attachEvent('onload', function(){
var button = document.createObject('div', 0,
{width:50, height:50, background:'silver', margin:5});
button.attachEvent('onmouseover', function() {
button.setStyle('background', 'gray'); });
button.attachEvent('onmouseout', function() {
button.setStyle('background', 'silver'); });
});
And this would create something like the in the example area below.
Beehive II Example
Drag & drop
A built in feature is drag and drop support for elements with position:absolute. All
you need is one line of code:
[dynObject].enableDragDrop(settings)
Where settings is a string that can contain the following conditions for the dragging
(you can add multiple, separated by a space, but don't combine the last 2):
- dragParent, causes not the element itself, but its parent to be dragged around
(and in doing so taking itself with it). The parent must also be an element with
position:absolute.
- horizontal, enables only horizontal dragging.
- vertical, enables only vertical dragging.
In the example area below you can see an element, with a nested "titlebar" which has
dragging enabled, but dragging its parent. The movement of the parent has been limited to
within the white example area. When you let go of the titlebar, the "ondragstop" event
is triggered, which calls an animation that slides the parent back to its starting position.
And the code is close to this, though simplified a bit:
var settings = css.ABSOLUTE.using({
left:5, top:5, width:80, height:80, background:'silver'});
var victim = document.createObject('div', 0, settings);
var thumb = victim.createObject('div', 0,
settings.using({width:70, height:15, background:'gray'}));
thumb.enableDragDrop('dragParent');
thumb.attachEvent('ondragstop', function() {
victim.run('moveTo', {from:[victim.x, victim.y], to:[5, 5], time:300});
});
Concluding
So much for now
Feel free to try things out and experiment with this beta version of Beehive II. The
source, although not commented, should be reasonably obvious and self explaining, and
a lot of it doesn't even have to be understood; just knowing the name of a method and
the its arguments is enough (most of the time).
Decent documentation has yet to be written though, so it is only logical that you might
not fully understand some of the things in Beehive II. Consider this a tech demo, and
I hope it also serves as a kind of apetiser for the things to come.
Peter Nederlof
http://www.xs4all.nl/~peterned/