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:

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: * 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: 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): 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/