1 / 21

JDojo & ScriptEngine

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

halil
Download Presentation

JDojo & ScriptEngine

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JDojo & ScriptEngine Agile Planning’s Scripting Tools

  2. 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

  3. 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

  4. 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

  5. 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

  6. JDojo Code Example

  7. JDojo Code Example (1/3) // 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... package jdojo.example; importstatic com.ibm.jdojo.dom.BrowserEnvironment.window; import com.ibm.jdojo.base.dojo; ... publicclass PersonRecordWidget extends _Widget { publicstaticclass PersonRecord { public String name; publicintage; } private PersonRecord[] records= {}; private HTMLTableElement table; publicvoid 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...

  8. JDojo Code Example (2/3) 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... @Override publicvoid 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>() { publicvoid handle(MouseEvent e) { addPerson( window.prompt("Name?", ""), (int) (100 * JSMath.random())); refresh(); } }); domNode.appendChild(button); } // to be continued on next slide...

  9. JDojo Code Example (3/3) _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); } }); })(); privatevoid _refresh() { dojo.empty(table); for (int i= 0; i < records.length; i++) { _createRow(records[i]); } } privatevoid _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); } }

  10. Calculator Demo

  11. 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

  12. Java based JavaScript Runtime • Developed for RTC 2.0 • Improved for optimal interoperability with JDojo • Allows sharing code between Web and Eclipse

  13. Web Client Sharing Code using the ScriptEngine Data Source Business Logic UI JavaScript

  14. Web Client Sharing Code using the ScriptEngine Data Source UI Business Logic JavaScript

  15. Web Client Sharing Code using the ScriptEngine Data Source Business Logic UI Eclipse Client JavaScript Java

  16. Web Client ScriptEngine ScriptEngine Sharing Code using the ScriptEngine Data Source Business Logic UI Eclipse Client ScriptEngine JavaScript ? Java

  17. Use Case: Tempo Simulation

  18. 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

  19. Calculator Demo

  20. 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

  21. Thank You! Questions?dirk_baeumer@ch.ibm.commartin_aeschlimann@ch.ibm.commichael_schneider@ch.ibm.com

More Related