© 2006 IBM Corporation JDojo & ScriptEngine Agile Planning’s Scripting Tools

© 2006 IBM Corporation Agile Planning’s JavaScript Experience  > 3 years of experience with JavaScript and Dojo  Used WTP (JSDT), Aptana, Dashcode, Text Editors  Writing JavaScript code is easy...  …evolving and refactoring a large codebase is not  requires disciplined programming  hard for new team members to get started  component based development is very hard due to the lack of clear interface definitions

© 2006 IBM Corporation Ways to Improve - Requirements  Need a growth-path from existing code  No lock-in  Must fit in existing infrastructure  Do not introduce new layers / indirections  Should leverage existing tooling

© 2006 IBM Corporation Ways to Improve - Options  Tooling for (Dojo flavored) JavaScript –This still doesn’t solve the problem of component based development  Enhance JavaScript with typed variable declarations –Support typed variable declarations to allow clear interface definitions  Translate from another language –GWT –Eclipse E4

© 2006 IBM Corporation Introducing JDojo  JDojo provides a pragmatic solution  JDojo brings JavaScript to the Java tooling, NOT Java to JavaScript –It is a typed/extended JavaScript using Java as its syntax –Not all Java language features are supported –Data types are JS not Java oriented  No new layers or abstractions: –Use dojo as the widget toolkit –Allow working with the DOM  Implemented as a compiler participant in Eclipse’s JDT

© 2006 IBM Corporation JDojo Code Example

© 2006 IBM Corporation JDojo Code Example (1/3) package jdojo.example; import static com.ibm.jdojo.dom.BrowserEnvironment.window; import com.ibm.jdojo.base.dojo;... public class PersonRecordWidget extends _Widget { public static class PersonRecord { public String name; public int age; } private PersonRecord[] records= {}; private HTMLTableElement table; public void addPerson(String name, int age) { PersonRecord record= new PersonRecord(); record.name= name; record.age= age; JSArrays.push(records, record); } // to be continued on next slide... // NOTE: THIS IS A GENERATED FILE. DO NOT EDIT DIRECTLY! dojo.provide("jdojo.example.PersonRecordWidget"); dojo.require("dijit._Widget"); (function() { var _Widget= dijit._Widget; dojo.declare("jdojo.example.PersonRecordWidget", _Widget, { records: null, table: null, constructor: function() { this.records= []; }, addPerson: function(name, age) { var record= {}; record.name= name; record.age= age; this.records.push(record); }, // to be continued on next slide...

© 2006 IBM Corporation JDojo Code Example public void postCreate() { super.postCreate(); HTMLDocument doc= window.document; table= (HTMLTableElement) doc.createElement("table"); domNode.appendChild(table); HTMLButtonElement button= doc.createElement(HTMLTags.BUTTON); button.appendChild(doc.createTextNode("Add")); connect(button, MouseEventType.CLICK, new IEventHandler () { public void handle(MouseEvent e) { addPerson( window.prompt("Name?", ""), (int) (100 * JSMath.random())); refresh(); } }); domNode.appendChild(button); } // to be continued on next slide... postCreate: function() { this.inherited("postCreate", arguments, []); var doc= window.document; this.table= doc.createElement("table"); this.domNode.appendChild(this.table); var button= doc.createElement("button"); button.appendChild(doc.createTextNode("Add")); this.connect(button, 'click', dojo.hitch(this, function(e) { this.addPerson( window.prompt("Name?", ""), (((100 * Math.random()))|0)); this.refresh(); }) ); this.domNode.appendChild(button); }, // to be continued on next slide...

© 2006 IBM Corporation JDojo Code Example (3/3) private void _refresh() { dojo.empty(table); for (int i= 0; i < records.length; i++) { _createRow(records[i]); } private void _createRow(PersonRecord personRecord) { HTMLDocument doc= window.document; HTMLTableRowElement recordRow= doc.createElement(HTMLTags.TR); HTMLTableCellElement nameCell= doc.createElement(HTMLTags.TD); nameCell.appendChild(doc.createTextNode( personRecord.name)); recordRow.appendChild(nameCell); HTMLTableCellElement ageCell= doc.createElement(HTMLTags.TD); ageCell.appendChild(doc.createTextNode( JSNumbers.toString(personRecord.age))); recordRow.appendChild(ageCell); table.appendChild(recordRow); } _refresh: function() { dojo.empty(this.table); for (var i= 0; i < this.records.length; i++){ this._createRow(this.records[i]); } }, _createRow: function(personRecord) { var doc= window.document; var recordRow= doc.createElement("tr"); var nameCell= doc.createElement("td"); nameCell.appendChild(doc.createTextNode( personRecord.name)); recordRow.appendChild(nameCell); var ageCell= doc.createElement("td"); ageCell.appendChild(doc.createTextNode( personRecord.age.toString())); recordRow.appendChild(ageCell); this.table.appendChild(recordRow); } }); })();

© 2006 IBM Corporation Calculator Demo

© 2006 IBM Corporation JDojo Benefits  Takes full advantage of the JDT tooling –Compiler helps finding API breakages –Eclipse’s API tooling –Refactoring, Search, …  Allows components to specify API –Document API using  Interoperable with existing JavaScript code  No overhead in generated JavaScript code

© 2006 IBM Corporation Java based JavaScript Runtime  Developed for RTC 2.0  Improved for optimal interoperability with JDojo  Allows sharing code between Web and Eclipse

© 2006 IBM Corporation Sharing Code using the ScriptEngine UI Data Source Business Logic JavaScript

© 2006 IBM Corporation Sharing Code using the ScriptEngine UI Data Source Business Logic JavaScript

© 2006 IBM Corporation Sharing Code using the ScriptEngine Data Source Business Logic UI JavaScript Java

© 2006 IBM Corporation Sharing Code using the ScriptEngine Data Source Business Logic UI ScriptEngine JavaScript Java ?

© 2006 IBM Corporation Use Case: Tempo Simulation

© 2006 IBM Corporation ScriptEngine Features  Hide low-level Rhino API  Avoid using LiveConnect due to security  Initialize Dojo runtime  True bidirectional seamless integration  Supports debugging using Eclipse E4 debugger  Very simple usage  In progress: Web environment for WebUI testing

© 2006 IBM Corporation Calculator Demo

© 2006 IBM Corporation Bundle Design EclipseSharedWeb API

© 2006 IBM Corporation Agile Planning Scripting Tools and You!  Give it a try –Wiki Page –Install the JDojo compiler from updatesite –Download the samples, try it yourself –Grab the source from the JDojo stream on jazzdev –Follow on Twitter

© 2006 IBM Corporation Thank You! Questions?