DynAPI 3.0 Tutorial

	search for in the

Menu

Home

Developer Site

Wiki

DynAPI 2

DynAPI 3

Tutorial

Release 3.0.0 beta 2

Log In

DynAPI 3.0 Tutorial

Introduction

This tutorial is a work in progress by Andrew Gillett. Stay tuned for additional content (9 May, 2005).

DynAPI: What is it?

DynAPI is a JavaScript library that uses an object model for creating HTML documents.

I began using the DynAPI library in early 2003. I have found it to be a remarkably good library, although not well documented. Because of the lack of documentation, I have often found it necessary at times to delve into the inner workings of the library to understand how it works. These notes document my understanding of DynAPI.

To begin with, I am not a JavaScript guru - I am a Java programmer. But in order to build compelling Java web applications, I've had to delve into the worlds of HTML, JavaScript and DOM.

There are three major releases of DynAPI. At the time of writing (August 2004), version 3 is still in beta. The development, documentation and testing of the library have been stalled for quite some time. The original authors appear to have moved on to other efforts and there has been a lack of cross-browser JavaScript experts with the time needed to pick up the baton.

Get the latest version 3. Don't get the June 2003 version from the SourceForge page but instead get either the nightly snapshot or the CVS head.

The latest snapshot is at http://dynapi.sourceforge.net/snapshot/dynapi3x.zip.

The nightly build hasn't been working for a while, so your best bet is to get the latest version from CVS:

cvs -d ":pserver:anonymous@cvs.sourceforge.net:/cvsroot/dynapi" login
cvs -d ":pserver:anonymous@cvs.sourceforge.net:/cvsroot/dynapi" co dynapi3x

Just press ENTER if you are prompted for a password at the login stage.

A "Hello, World" example

The simplest DynAPI example that I can think of is:

<html>
 <head>
  <title>Hello, world</title>
  <script language="JavaScript" src="../dynapi3x/src/dynapi.js"></script>
  <script language="JavaScript">
   dynapi.library.setPath('../dynapi3x/src/');
   dynapi.library.include('DynLayer');
   function myInit(){
    dynapi.document.addChild(
      new DynLayer('Hello, world',50,50,100,40,'#c0c0c0'));
   };
   dynapi.onLoad(myInit);
  </script>
 </head>
 <body>
 </body>
</html>

The first thing to do is to include dynapi.ps, like this:

<script language="JavaScript" src="../dynapi3x/src/dynapi.js"></script>

Don't try doing the XHTML thing of combining the opening and closing "script" tags, it doesn't work:

<script language="JavaScript" src="../dynapi3x/src/dynapi.js"/>

dynapi.js defines the following core classes:

DynObject: is the root of the DynAPI class hierarchy. The DynObject class maintains a global counter that is used for setting a unique id for each new object. It also maintains a global Map (keyed on id) of all DynObjects
DynAPIObject: a subclass of DynObject, is a global placeholder for DynAPI related information. A global instance of this class, named dynapi, is the master DynAPI object..
DynAPILibrary: also a subclass of DynObject, is a utility class for loading other scripts. An instance of DynAPILibrary is created and is assigned the name dynapi.library.

The next two lines set up the DynAPILibrary module and use it to load the DynLayer class:

dynapi.library.setPath('../dynapi3x/src/');
dynapi.library.include('DynLayer');

The setPath function tells the library package manager of the location of the DynAPI files. The include function loads the DynLayer class as well as all the classes that DynLayer depends upon.

DynLayer is a fundamental building block of the DynAPI library. It corresponds to an HTML "DIV" element.

Next we define a function that creates a DynLayer with some HTML content and adds it to the document:

function myInit(){
  dynapi.document.addChild(
    new DynLayer('Hello, world',50,50,100,40,'#c0c0c0'));
};

Finally, this function is added to the list of functions that are invoked at startup:

dynapi.onLoad(myInit);

When the document is loaded, a "DIV" element will be appended to the body of the document. This will result in a document with the following structure:

<html>
 <head>
  <title>Hello, world</title>
 </head>
 <body>
  <div id="DynObject1"
    style="left:50px; top:50px; width:100px; height:40px; cursor:auto;
          background-color:#c0c0c0; visibility:inherit;">
    Hello, world
  </div>
 </body>
</html>

Created on 04/30/2005 01:22 PM by agillett
Updated on 05/09/2005 05:24 AM by agillett

Comments

The comments are owned by the poster. We are not responsible for its content.

What's Related

These might interest you as well

Announcements

DynAPI 3

DynAPI 3.0.0 Beta...

Wiki

DynAPI 3

Web Pages

DynAPI 3

DynAPI 3