Date post: | 03-Jan-2016 |
Category: |
Documents |
Upload: | sandra-bertina-bates |
View: | 225 times |
Download: | 0 times |
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, 200620
SummarySummary
DynApiAllows for easy object creationCross browser scripting