© 2006 ibm corporation jdojo & scriptengine agile planning’s scripting tools

© 2006 IBM Corporation

JDojo & ScriptEngine

Agile Planning’s Scripting Tools


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


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


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


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


JDojo Code Example


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); },




@Override 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<MouseEvent>() { public void handle(MouseEvent e) { addPerson( window.prompt("Name?", ""), (int) (100 * JSMath.random())); refresh(); } }); domNode.appendChild(button); }


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); },




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); }});

})();


Calculator Demo


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 JavaDoc, @Deprecated, ...

Interoperable with existing JavaScript code

No overhead in generated JavaScript code


Java based JavaScript Runtime

Developed for RTC 2.0

Improved for optimal interoperability with JDojo

Allows sharing code between Web and Eclipse


Sharing Code using the ScriptEngine

UIData

Source

Business

Logic

JavaScript



UIData

SourceBusiness

Logic

JavaScript



Data

Source

Business

LogicUI

JavaScript

Java



Data

Source

Business

LogicUI

Scr

iptE

ngin

eS

crip

tEng

ine

Scr

iptE

ngin

e

JavaScript

Java?


Use Case: Tempo Simulation


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


Calculator Demo


Agile Planning Scripting Tools and You!

Give it a try

– Wiki Pagehttps://jazz.net/wiki/bin/view/Main/JDojo

– Install the JDojo compiler from updatesitehttp://w3.zurich.ibm.com/~chn/jdojo-updatesite/

– Download the samples, try it yourself

– Grab the source from the JDojo stream on jazzdev

– Follow on Twitterhttps://twitter.com/JDojo


Thank You!

Questions?

[email protected][email protected][email protected]

© 2006 ibm corporation jdojo & scriptengine agile planning’s scripting tools

Documents