Dynamic Languages User Group Feb 7, 20061

DynApi Javascript LibraryDynApi Javascript Library

Dynamic Languages User Group Feb 7, 20062

Introduction Introduction

DynApi Javascript LibraryEasily create dynamic cross-browser

content for your website or applicationA complete Object oriented solution

written completely in javascript

Dynamic Languages User Group Feb 7, 20063

AgendaAgenda

Supported BrowsersNon-Dynamic FeaturesDynDocumentDynLayerDynObjectDynLibraryEvent handling

Dynamic Languages User Group Feb 7, 20064

Overview Overview

Using the DynApi can accelerate your dynamic content

Automatically handles cross-browser content

DynLibrary

Events

DynObjectDynDocument

DynLayer

Dynamic Languages User Group Feb 7, 20065

DynApi LibraryDynApi Library

Created by Dan SteinmanOpen source development available at

http://Dynapi.sourceforge.netIncludes additional toolsOrganized in a clear folder structureDistributed under GNU Public License

Dynamic Languages User Group Feb 7, 20066

Supported BrowsersSupported BrowsersOpera 7+Internet Explorer 4+Konqueror 3+SafariNetscape 4+Mozilla 1+Phoenix 0.5Firefox

Dynamic Languages User Group Feb 7, 20067

Non-Dynamic FeaturesNon-Dynamic Features

Browser SniffingURL ParsingImage Preloading Rollovers etc.DynApi functions (dynapi.functions)Cookie handlingNon-Gui WidgetsEvent handling for Non-Gui Widgets

Dynamic Languages User Group Feb 7, 20068

DynDocumentDynDocument

Replaces the DOM Uses js files to include in page Example:<script language="JavaScript"

src="../src/dynapi.js"></script><script language="Javascript">dynapi.library.setPath('../src/');dynapi.library.include('dynapi.api');</script>

Dynamic Languages User Group Feb 7, 20069

DynObjectDynObject

Dynamically create objects in memoryString getClassName() // returns the classNameFunction getClass() // returns constructor (class) of the

// object

boolean isClass(sClassName) // returns true if the object is //inherited from, or of the type sClassName

void addMethod(sMethodName, function)void removeMethod(sMethodName)void setID(id) // sets the id of the object

String toString() // returns [ClassName]

Dynamic Languages User Group Feb 7, 200610

Add your own FunctionsAdd your own Functions

Adding functions to your objects

Examplefunction MyObject() {

this.DynObject = DynObject;this.DynObject();

} var p = dynapi.setPrototype('MyObject','DynObject'); // ^ returns the prototype p.methodName = function() {};

Dynamic Languages User Group Feb 7, 200611

OnLoad() OnUnload()OnLoad() OnUnload()

OnLoad and OnUnload

p.onLoad(init);function init(){

alert(‘loaded’); }

Dynamic Languages User Group Feb 7, 200612

DynLibraryDynLibrary

Assists with dependency issuesLoad scripts by nameLoad scripts in packages

Dynamic Languages User Group Feb 7, 200613

setPath() and add()setPath() and add()

setPath(“path to dynlibrary object”) dynapi.library.setPath('path'); // path to

dynapi library (eg // "dynapi/src/lib");

add(“object name”)

dynapi.library.add('objectName', '../file.js', 'dependentObject');

Dynamic Languages User Group Feb 7, 200614

Load as a PackageLoad as a Package

Load scripts in as a package <script language="JavaScript"

src="../src/dynapi.js"></script><script language="Javascript"> dynapi.library.setPath('../src/lib/'); // includes...</script>

Dynamic Languages User Group Feb 7, 200615

Using include for individual Using include for individual scriptsscriptsLoading scripts individually with include dynapi.library.include('dynapi'); // includes debug and library

// functionsdynapi.library.include('dynapi.debug');dynapi.library.include('dynapi.library');

Dynamic Languages User Group Feb 7, 200616

Attach EventsAttach Events

Attach Events to Child Objectsfunction MyWidget() {

this.DynLayer = DynLayer;this.Dynlayer(); this.pdlyr = new Dynlayer();this.dlyr = this.pdlyr.addChild(new DynLayer());this.dlyr.widget = this;this.dlyr.addEventListener(MyWidget.childEvents);

}MyWidget.childEvents = {

oncreate : function(e) {e.getSource().widget.update();

}};MyWidget.prototype = new DynLayer;

MyWidget.prototype.update = function() {};

Dynamic Languages User Group Feb 7, 200617

Attach EventsAttach Events

Create an event listener in the constructorfunction MyWidget() {

this.DynLayer = DynLayer;this.Dynlayer();

  this.pdlyr = new Dynlayer();this.dlyr = this.pdlyr.addChild(new DynLayer());

  var widget = this;  var el = {

oncreate : function(e) {widget.update();}}this.dlyr.addEventListener(el);

}MyWidget.prototype = new DynLayer;MyWidget.prototype.update = function() {};

Dynamic Languages User Group Feb 7, 200618

DynLayerDynLayer

The Constructornew DynLayer(html, x, y, width, height, bgColor)

PositioningsetLocation(x,y) - replaces moveTo

Dynamic Languages User Group Feb 7, 200619

ExamplesExamples

Dynamic Languages User Group Feb 7, 200620

SummarySummary

DynApiAllows for easy object creationCross browser scripting

Dynamic Languages User Group Feb 7, 200621

Where to Get More InformationWhere to Get More Information

http://dynapi.sourceforge.net/http://www.hacksrus.com/~ginda/venkmanhttp://x-celerator.com/