yui4java - a way of writing yui applications in java.

Author: Sebastián Gurin - sgurin at montevideo dot com dot uy

Contents
  1. yui4java - a way of writing yui applications in java.
    1. First of all
    2. Downlaod
    3. What is this?
    4. Getting started
    5. javascript in java
    6. HTML in java
    7. Sample applications
      1. Advanced Image Viewer
      2. yui4java demo
      3. raphael4java demo
      4. soundmanager4java demo
      5. javascript to java object translator
    8. About the Author

First of all

This is currently a research, work-in-progress project. So, there is still much work to do for having a production ready release.

Downlaod

You can download java2script plugin supporting yui4java library here
You can download yui4java source code here
You can download yui4java.jar library here

What is this?

In one side we have YUI - yahoo User Interface toolkit: is a rich javascript library that provide a base for web developer, several widgets, and tools. On the other side, thanks to the great framework java2script we can write our web pages in java using eclipse.

This project, yui4java, exposes YUI to a pure java API using java2script so the user can use yiu from java code. Along with yui there are other javascript toolkits portlet 100% to java like raphaeljs and soundmanager2.

I hope these libraries together available from java make a rich foundation for web applications and I think in the future more javascript toolkits will be supported. 

Getting started

The easiest way of getting started is described in the quick guide .

javascript in java

When using javascript toolkits from java language, we will often need to define javascript objects, functions, etc like we do in javascript. Think for example on the following problem: in html/javascript you pass a function object as an event handler for a html element. But in java we don't have anything like a function object, and also many other javascript characteristics like object literals, function literals, eval, etc

In this section we examine yui4java project utilities for making javascript oriented stuff from java, like creating and manipulating a javascript functions and objects literally and other things.

These utilities are encapsulated on class org.sgx.j2s.utils.JSProperty so the user can :

import static org.sgx.j2s.utils.JSProperty.*;

With that import statement, the following java code is equivalent to the javascript given code:

javascript

java

description

var f = function(a1, a2) {/* here goes your code */}

JsFunction f = JSFUNC(new AbstractRunnable<Object>() {

@Override

public Object run2(Object o1, Object o2) {

/* here goes your code */

return null;

}

@Override

public int getParamCount() {

return 2;

}

});

Javascript Function object definition

var o = {

name: “sebastian”,

account : {

username: “sg”,

pass: “foo”

}

}

JsObject o = OBJ(new Object[] {

"name", "sebastian",

"account", OBJ(new Object[] {

"username", "sg",

"pass", "foo" })

});

Javascript object Literal definition

var name = o.get(“name”), psswd = o.get(“account”).pass;

o.account.pass=”var”

String name = (String)JSGET(o, "name"),

psswd = (String)JSGET(JSGET(o, "account"), "pass");

JSPUT(JSGET(o, "account"), "pass", "var");

Javascript Object manipulatino




For complex javascript objects, the application javascript to java object translator can translate a javascript object literal to a java object literal. See the example section called “Sample applications” for more details about javascript to java object translator usage.

HTML in java

Like the tools for javascript manipulation in java mentioned in the last setion, we also have tools for html elements manipulation. The package org.eclipse.swt.internal.xhtml contains a basic api for accessing the html dom natively. For the following to work, java user must:

import static org.sgx.j2s.utils.JSProperty.*;

import org.eclipse.swt.internal.xhtml.*;

import org.sgx.j2s.htmlWidgets.HTMLUtils;

Like we have done for javascript, these are the java and ajaascript code equialencies:

javascript

java

description

var el = document.getElementById(“foo”)

Element el = document.getElementById("foo");

Getting element by id

var newEl = document.createElement(“div”);

newEl.id=”foo”;

document.body.appendChild(newEl);

Element newEl = document.createElement("div");

newEl.id="foo1";

document.body.appendChild(newEl);

Creating element

var nodes = document.body.childNodes;

for (var i = 0; i < nodes.length; i++) {

alert(nodes[i].id);

}

Element[] nodes = document.body.childNodes;

for (int i = 0; i < nodes.length; i++) {

System.out.println(nodes[i].id);

}

Iterating over elements

??

 
Element comboBox = HTML(OBJ(new Object[]{
            "tagName", "select",
            "parent", document.body,
            "style", OBJ(new Object[]{"borderTop", "2px solid blue"}),
            "children", ARR(new Object[]{
                OBJ(new Object[]{"tagName", "option",
                    "innerHTML", "Option 1",
                    "value", "opt1"}),
                OBJ(new Object[]{"tagName", "option",
                    "innerHTML", "Option 2",
                    "value", "opt2"}),
                OBJ(new Object[]{"tagName", "option",
                    "innerHTML", "Option 3",
                    "value", "opt3", 
                    "style", OBJ(new Object[]{"borderTop", "2px solid red"})
                })
            })
        }));

creating nested objects and setting style on the fly

Sample applications

a word of caution: in some of these sample applications, you will be downloaded a lot of non-compressed javascript, so be patient.

Advanced Image Viewer

An advanced Image Viewer. Some capabilities only available in SVG enabled browsers (mozilla,chrome,opera, -not IE). Here I use YUI widgets for the application GUI, and raphaeljs for drawing images and do advance operations over them. Demo here.

yui4java demo

In this yui4java application you have several yui4java examples for most yui widgets and utilities, and java source code. Demo here

raphael4java demo

In this yui4java application you have several raphael java api examples and java source code. Demo here

soundmanager4java demo

This is a yui4java application that shows many soundmanager2 java api examples and java source code. Demo here.

javascript to java object translator

This application can translate a javascript object literal to a java object literal. You only need to pass it a valid javascript object literal and it will returns the java code that will create the same javascript object. Demo here.

About the Author

I' m a developer with experience in web standars like html,xml,css,xsl,javascript,etc. My motivation for this project is to investigate the use of java for creating rich internet applications reusing javascript toolkits. In this case I choose yui and raphael js but there are many other interesting toolkits. My name is Sebastián Gurin, and you can reach me at “sgurin at montevideo dot com dot uy”. Suggestions and help is very appreciated.