1. Dynamic Languages User Group Feb 7, 2006 1 DynApi Javascript Library

2. Dynamic Languages User Group Feb 7, 2006 2 Introduction DynApi Javascript Library Easily create dynamic cross-browser content for your website or application A complete Object oriented solution written completely in javascript

3. Dynamic Languages User Group Feb 7, 2006 3 Agenda Supported Browsers Non-Dynamic Features DynDocument DynLayer DynObject DynLibrary Event handling

4. Dynamic Languages User Group Feb 7, 2006 4 Overview Using the DynApi can accelerate your dynamic content Automatically handles cross-browser content DynLibrar y Events DynObject DynDocument DynLayer

5. Dynamic Languages User Group Feb 7, 2006 5 DynApi Library Created by Dan Steinman Open source development available at http://Dynapi.sourceforge.net http://Dynapi.sourceforge.net Includes additional tools Organized in a clear folder structure Distributed under GNU Public License

6. Dynamic Languages User Group Feb 7, 2006 6 Supported Browsers Opera 7+ Internet Explorer 4+ Konqueror 3+ Safari Netscape 4+ Mozilla 1+ Phoenix 0.5 Firefox

7. Dynamic Languages User Group Feb 7, 2006 7 Non-Dynamic Features Browser Sniffing URL Parsing Image Preloading Rollovers etc. DynApi functions (dynapi.functions) Cookie handling Non-Gui Widgets Event handling for Non-Gui Widgets

8. Dynamic Languages User Group Feb 7, 2006 8 DynDocument Replaces the DOM Uses js files to include in page Example: dynapi.library.setPath('../src/'); dynapi.library.include('dynapi.api');

9. Dynamic Languages User Group Feb 7, 2006 9 DynObject Dynamically create objects in memory String getClassName() // returns the className Function 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]

10. Dynamic Languages User Group Feb 7, 2006 10 Add your own Functions Adding functions to your objects Example function MyObject() { this.DynObject = DynObject; this.DynObject(); } var p = dynapi.setPrototype('MyObject','DynObject'); // ^ returns the prototype p.methodName = function() {};

11. Dynamic Languages User Group Feb 7, 2006 11 OnLoad() OnUnload() OnLoad and OnUnload p.onLoad(init); function init(){ alert(‘loaded’); }

12. Dynamic Languages User Group Feb 7, 2006 12 DynLibrary Assists with dependency issues Load scripts by name Load scripts in packages

13. Dynamic Languages User Group Feb 7, 2006 13 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');

14. Dynamic Languages User Group Feb 7, 2006 14 Load as a Package Load scripts in as a package dynapi.library.setPath('../src/lib/'); // includes...

15. Dynamic Languages User Group Feb 7, 2006 15 Using include for individual scripts Loading scripts individually with include dynapi.library.include('dynapi'); // includes debug and library // functions dynapi.library.include('dynapi.debug'); dynapi.library.include('dynapi.library');

16. Dynamic Languages User Group Feb 7, 2006 16 Attach Events Attach Events to Child Objects function 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() {};

17. Dynamic Languages User Group Feb 7, 2006 17 Attach Events Create an event listener in the constructor function 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() {};

18. Dynamic Languages User Group Feb 7, 2006 18 DynLayer The Constructor new DynLayer(html, x, y, width, height, bgColor) Positioning setLocation(x,y) - replaces moveTo

19. Dynamic Languages User Group Feb 7, 2006 19 Examples

20. Dynamic Languages User Group Feb 7, 2006 20 Summary DynApi Allows for easy object creation Cross browser scripting

21. Dynamic Languages User Group Feb 7, 2006 21 Where to Get More Information http://dynapi.sourceforge.net/ http://www.hacksrus.com/~ginda/venkman http://x-celerator.com/