yui4java
Sebastian Gurin
I had published my work porting YUI javascript toolkit to java2script. I have created a small research project at http://yui4java.sourceforge.net/ and uploaded my eclipse project copy to http://sourceforge.net/projects/yui4java/files/yui4java/yui.tgz.
Also there is a demo with some of the supported YUI widgets and tools at http://yui4java.sourceforge.net/yuidemo/ (please be patient while loading and please report if you have anyproblems). This is a java2script application wich presentation was entirely made with YUI in java.
some interesting packages:
org.sgx.j2s.yui.YAHOO : yahoo java api
org.sgx.j2s.yui.test.widget : for each widget there is a test written both in jative javascript and in java to show the correspondence of yui api usage.
org.sgx.j2s.yui.test.yuidemo : the java yui demo program at http://yui4java.sourceforge.net/yuidemo/
Currently I think most of yui api was "ported" to java. There is still lot of refining and grasping code stuff that needs to be done, but I thought it will be nice if I can share this demo and ask for opinions now...
If you don't know YUI widgets, please take a look at rich widgets like datatable, tabview, editor, etc in http://yui4java.sourceforge.net/yuidemo/.
Perhaps when/if this project gets mature we can mix it in java2script...
Well, I wait for opinions....
--
Sebastian Gurin <sgu...@softpoint.org>
Sebastian Gurin
Basically, the initial idea is to have a java yui api that wraps to actual yui javascript objects. The user creates yui objects using a factory. These objects are actually native javascirpt yui objects so the user is currently using a javascript API from java... Since the user is currently accesing javascript objects from java code, it is responsible of creating the correct native javascript objects in java. I have made simple java helper classes that let the user create and manipulate javascript native types (like Object and Function). These utilities also allow the user to use javascript language characteristics (like Object literals and function type) in java.
For example, consider the following javascript code for creating a yui button:
var oButton = new YAHOO.widget.Button({
id: "mybuttonid",
type: "push",
label: "My Button",
container: document.body
});
b2.on("click", function(){
alert("clicked");
});
Now, using using the simple utilties JsUtils.buildJsObject and JsUtils.buildJsFunctionFrom the java user can "emulate" the same native objects:
Button b2 = YuiFactory.getInstance().newButton(JsUtils.buildJsObject(new Object[][]{
{"id", "mybuttonid"},
{"type", "push" },
{"label", "My Button", },
{"container", document.body}
}));
b2.on("click", JsUtils.buildJsFunctionFrom(new Runnable() {
public void run() {
System.out.println("but clicked");
}
}));
(I know the java code can look dirty, but I didn't figure out a better way of defining Object literals and Function objects in java...)
This initial attempt is this simplistic because it allow me write a java yui api with minimal work and exactly based on yui api (made for javascript). The objective of this project is to provide yui widgets and utilities support in java2script but also to understand and create tools that allow java users to manipulate javascript elements in java language. I think this experience can help for porting other Javascript toolkits to java2script.
Currently I think most of yui api is ported and now I'm trying to write yui examples in java and identifying dificulties... Lot of things need to be grasped and I think more high level Java facilities can be done.
The demo page will be updated for reflecting current progress.
Sebastian Gurin <sgu...@softpoint.org>
Zhou Renjian
Need to seperate some *.jar files for yui4java API, so anyone who want to build a demo may just import Java libraries and JavaScript *.js and work on his YUI applicatoin.
More comments, see below.
Basically, the initial idea is to have a java yui api that wraps to actual yui javascript objects. The user creates yui objects using a factory. These objects are actually native javascirpt yui objects so the user is currently using a javascript API from java... Since the user is currently accesing javascript objects from java code, it is responsible of creating the correct native javascript objects in java. I have made simple java helper classes that let the user create and manipulate javascript native types (like Object and Function). These utilities also allow the user to use javascript language characteristics (like Object literals and function type) in java.
For example, consider the following javascript code for creating a yui button:
var oButton = new YAHOO.widget.Button({
id: "mybuttonid",
type: "push",
label: "My Button",
container: document.body
});
b2.on("click", function(){
alert("clicked");
});
Now, using using the simple utilties JsUtils.buildJsObject and JsUtils.buildJsFunctionFrom the java user can "emulate" the same native objects:
Button b2 = YuiFactory.getInstance().newButton(JsUtils.buildJsObject(new Object[][]{
{"id", "mybuttonid"},
{"type", "push" },
{"label", "My Button", },
{"container", document.body}
}));
b2.on("click", JsUtils.buildJsFunctionFrom(new Runnable() {
public void run() {
System.out.println("but clicked");
}
}));
I might want to write something in Java, like the following:
package org.sgx.j2s.yui.test.j2s;
import org.sgx.j2s.yui.YAHOO.util.Resize;
import org.sgx.j2s.yui.YAHOO.util.YuiEvent;
import org.sgx.j2s.yui.YAHOO.widget.Panel;
import static org.sgx.j2s.yui.test.j2s.YUIProperty.*;
@SuppressWarnings("unused")
public class MyYUITest {
public static void main(String[] args) {
/*
Object obj1 = new Object[] {
name, 3,
J2SObject.done
};
J2SObject obj2 = (J2SObject) (Object) new Object[] {
name, 3,
underlay, true
};
*/
Object panelConfig = (J2SObject) (Object) new Object[] {
draggable, true,
close, false,
autofillheight, "body",
underlay, "none",
width, "800px",
height, "650px",
xy, new Object[]{200, 100}
};
final Panel panel = new Panel("demo", panelConfig);
panel.setHeader("Yui widgets in java");
panel.setBody("<div id=\"layout\"></div>");
panel.renderEvent.subscribe(new J2SRunnable() {
public void run() {
YuiEvent.onAvailable("layout", new J2SRunnable() {
///////////////layout initialization ////////////
public void run() {
// ..
}
});
}
});
panel.render();
Resize resize = new Resize("demo",
(J2SObject) (Object) new Object[] {
handles, new String[]{"br"},
autoRatio, true,
status, false,
minWidth, 380,
minHeight, 300
});
resize.on("resize", new J2SRunnable() {
public Object run(J2SObject args) {
Object panelHeight = args.get(height);
panel.cfg.setProperty(height, panelHeight + "px");
return null;
}
});
}
}
Currently, the above code pass compiler, with following classes:
J2SObject.java
package org.sgx.j2s.yui.test.j2s;
public class J2SObject {
static Object done;
public native void set(Object property, Object value);
public native Object get(Object property);
}
J2SRunnable.java
package org.sgx.j2s.yui.test.j2s;
public class J2SRunnable {
}
YUIProperty.java
package org.sgx.j2s.yui.test.j2s;
public class YUIProperty {
public static final String name = "name";
public static final String left = "left";
public static final String top = "top";
public static final String width = "width";
public static final String height = "height";
public static final String handles = "handles";
public static final String status = "status";
public static final String autoRatio = "autoRatio";
public static final String minWidth = "minWidth";
public static final String minHeight = "minHeight";
public static final String draggable = "draggable";
public static final String close = "close";
public static final String autofillheight = "autofillheight";
public static final String underlay = "underlay";
public static final String xy = "xy";
}
The above code could not be run right now. But with additional compiler supports, it may be run as expected. Here are the tricks:
1. Compiler may detect "J2SObject" object instantiation, and wrap the object with extra "Clazz.wrap2NativeObject(...)" in compiler level. The above code contains examples that Java2Script compiler might recognize J2SObject-wrapping-needed scenarios in the future.
2. Compiler should wrap "J2SRunnable" with its "run" method (no matter what parameters are there) into a native JavaScript "function". This is the same trick played in SWT's RunnableCompatiabilty instances. See /net.sf.j2s.java.org.eclipse.swt/src/org/eclipse/swt/widgets/Button.java line 512, something like btnHandle.onmouseover = new RunnableCompatibility() { ... };
3. new Resize(...) or new Panel(...) instead of "YuiFactory.getInstance().newResize/newPanel". This might require modifying Java2Script classloader and compiler to get everything loaded and run correctly. Things like:
YuiUtils.loadYui(FULLDEPENDENCIES, new Runnable() {
public void run() {
makeMainLayout();
System.out.println("end tests");
}
});
should not be required.
4. "import static ....*;" is the trick the make code more readable:
(J2SObject) (Object) new Object[] {
handles, new String[]{"br"},
autoRatio, true,
status, false,
minWidth, 380,
minHeight, 300
};
I just paste part of current YUIDemo codes here for someone who does not know what I am talking about.
public static void main(String[] args) {
YuiUtils.loadYui(FULLDEPENDENCIES, new Runnable() {
public void run() {
makeMainLayout();
System.out.println("end tests");
}
});
}
private static void makeMainLayout() {
initMarkup();
YuiEvent.onDOMReady(JsUtils.buildJsFunctionFrom(new Runnable() {
@SuppressWarnings("unchecked")
public void run() {
Object panelConfig = JsUtils.buildJsObject(new Object[][]{
{"draggable", true},{"close", false}, {"autofillheight", "body"},
{"underlay", "none"}, {"width", "800px"}, {"height", "650px"},
{"xy", new Object[]{200, 100}}
});
panel = YuiFactory.getInstance().newPanel("demo", panelConfig);
panel.setHeader("Yui widgets in java");
panel.setBody("<div id=\"layout\"></div>");
panel.renderEvent.subscribe(JsUtils.buildJsFunctionFrom(new Runnable() {
public void run() {
YuiEvent.onAvailable("layout", JsUtils.buildJsFunctionFrom(new Runnable() {
///////////////layout initialization ////////////
public void run() {
layout = YuiFactory.getInstance().newLayout("layout", JsUtils.buildJsObject(new Object[][]{
{"height",panel.body.offsetHeight - 20},
{"width",800-20},
{"units",new Object[]{
JsUtils.buildJsObject(new Object[][]{{"position","top"},{"height","40"},{"resize",false},
{"id","main-layout-top"},{"body",""},{"gutter","2"}}),
JsUtils.buildJsObject(new Object[][]{{"position","left"},{"width",250},{"resize",true},
{"id", MAIN_LAYOUT_LEFT_ID },{"body","Left"},{"gutter","0 5 0 2"},{"minWidth","150"},
{"maxWidth",300}}),
JsUtils.buildJsObject(new Object[][]{ {"position","bottom"},{"height",25},{"body",""},
{"id","main-layout-bottom"}, {"gutter","2"}}),
JsUtils.buildJsObject(new Object[][]{{"position","center"},{"body",""},
{"id","main-layout-center"}, {"gutter","0 2 0 0"}})
}},
}));
layout.render();
makeLeftTree(layout.getUnitByPosition("left").body);
makeOptionButtons(layout.getUnitByPosition("top").body);
}
}));
}
}));
panel.render();
resize = YuiFactory.getInstance().newResize("demo", JsUtils.buildJsObject(new Object[][]{
{"handles", new String[]{"br"}}, {"autoRatio", true},
{"status", false}, {"minWidth", 380}, {"minHeight", 300}
}));
resize.on("resize", JsUtils.buildJsFunctionFromArgRunn(new AbstractRunnable<Object>(null){
@Override
public Object run1(Object args) {
Object panelHeight = JsUtils.jsObjectGet(args, "height");
int padding = 20;
panel.cfg.setProperty("height", panelHeight + "px");
layout.set("width", panel.body.offsetWidth - padding);
layout.set("height", panel.body.offsetHeight - padding);
layout.resize();
return null;
}
}, 1));
}
}));
}
(I know the java code can look dirty, but I didn't figure out a better way of defining Object literals and Function objects in java...)
This initial attempt is this simplistic because it allow me write a java yui api with minimal work and exactly based on yui api (made for javascript). The objective of this project is to provide yui widgets and utilities support in java2script but also to understand and create tools that allow java users to manipulate javascript elements in java language. I think this experience can help for porting other Javascript toolkits to java2script.
Currently I think most of yui api is ported and now I'm trying to write yui examples in java and identifying dificulties... Lot of things need to be grasped and I think more high level Java facilities can be done.
The demo page will be updated for reflecting current progress.
Maybe, writing some tutorials to tell people to write a YUI application in Java step by step may help too.
Hope to see more improvements soon!
On Fri, 3 Jul 2009 23:13:01 -0300
Sebastian Gurin <sgu...@softpoint.org> wrote:
>
> Hi all.
>
> I had published my work porting YUI javascript toolkit to java2script. I have created a small research project at http://yui4java.sourceforge.net/ and uploaded my eclipse project copy to http://sourceforge.net/projects/yui4java/files/yui4java/yui.tgz.
>
> Also there is a demo with some of the supported YUI widgets and tools at http://yui4java.sourceforge.net/yuidemo/ (please be patient while loading and please report if you have anyproblems). This is a java2script application wich presentation was entirely made with YUI in java.
>
> some interesting packages:
>
> org.sgx.j2s.yui.YAHOO : yahoo java api
>
> org.sgx.j2s.yui.test.widget : for each widget there is a test written both in jative javascript and in java to show the correspondence of yui api usage.
>
> org.sgx.j2s.yui.test.yuidemo : the java yui demo program at http://yui4java.sourceforge.net/yuidemo/
>
> Currently I think most of yui api was "ported" to java. There is still lot of refining and grasping code stuff that needs to be done, but I thought it will be nice if I can share this demo and ask for opinions now...
>
> If you don't know YUI widgets, please take a look at rich widgets like datatable, tabview, editor, etc in http://yui4java.sourceforge.net/yuidemo/.
>
> Perhaps when/if this project gets mature we can mix it in java2script...
>
> Well, I wait for opinions....
> --
> Sebastian Gurin <sgu...@softpoint.org>
>
> >
--
Sebastian Gurin <sgu...@softpoint.org>
Regards,
Zhou Renjian
--
http://webuzz.im/ Web IMs (G/A/M/Y)
http://j2s.sourceforge.net/ Java2Script
Sebastian Gurin
On Sat, 4 Jul 2009 15:26:45 +0800
Zhou Renjian <zhour...@gmail.com> wrote:
>
> I might want to write something in Java, like the following:
>
> package org.sgx.j2s.yui.test.j2s;
>
> import org.sgx.j2s.yui.YAHOO.util.Resize;
> import org.sgx.j2s.yui.YAHOO.util.YuiEvent;
> import org.sgx.j2s.yui.YAHOO.widget.Panel;
>
> import static org.sgx.j2s.yui.test.j2s.YUIProperty.*;
> ......
> .......
>
yes, defenitly your code looks better. I think It would be nice to have these kind of compiler tricks like J2sObject, J2sRunnable, org.eclipse.swt.internal.xhtml somewhat independent of swt so no-swt apps can make use of them... I have updated my JsUtils file for supporting your suggested java code format and also using java varargs methods for creating javascript native obejcts. I'm sendind attached a code snippet with utilities that allow to create the same javascript object in three diferent ways:
Object js1 = buildJsObject(new Object[][]{
{"name", "Carl"},
{"male", true}
});
Object js2 = buildJsObject2("name", "Carl", "male", true);
Object js3 = buildJsObject2(new Object[]{"name", "Carl", "male", true});
> The above code could not be run right now. But with additional compiler
> supports, it may be run as expected. Here are the tricks:
>
> 1. Compiler may detect "J2SObject" object instantiation, and wrap the object
> with extra "Clazz.wrap2NativeObject(...)" in compiler level. The above code
> contains examples that Java2Script compiler might recognize
> J2SObject-wrapping-needed scenarios in the future.
Yes that would be nice. Nevertheless, in my experience, we have to make sure to avoid problems with java enclosing types like Integer, Boolean, etc. For example when representing a javascript object with a java object array like:
J2SObject obj2 = (J2SObject) (Object) new Object[] {
name, 3,
underlay, true
};
the expression new Object[] {} makes an array of Objects. This means that we don't have 3 and true values, but new Integer(3) and new Boolean(true) values. When the resulting object is passed to a native javascript function, javascript code will fail because passed value are not number/boolean but objects. In java it is not posible to have an array (or any other container type) of String, int, boolean, etc together. So in my sollution, in the case of Integer, Float, Boolean, Character, etc value types I have to convert them to native int, boolean, etc values when building the native javascript object. In fact this topic is not entirely resolved yet (arbitrary nested arrays that contains native values must also be converted).
>
> 2. Compiler should wrap "J2SRunnable" with its "run" method (no matter what
> parameters are there) into a native JavaScript "function". This is the same
> trick played in SWT's RunnableCompatiabilty instances. See
> /net.sf.j2s.java.org.eclipse.swt/src/org/eclipse/swt/widgets/Button.java
> line 512, something like btnHandle.onmouseover = new RunnableCompatibility()
> { ... };
I wasn't aware of RunnableCompatiabilty existence... :( Well, nevertheless the problem I see when representing a js function with a runnable object is with the this pointer usage. for example, the following code will fail if NativeObject.nativeRegister method change the context of the passed function handler (like several toolkits and even pure html do with, for example, event handlers):
class MyEventJHandler extends Runnable {
String data;
public MyEventJHandler(String data) {
this.data=data;
}
}
...
Runnable myFunction = new MyEventJHandler(){
public Object run(Object param) {
System.out.println("clicked button and prop is "+data);
}
}
NativeObject.nativeRegister(button, "click", myFunction);
My opinion about this is to force the user to use a final class J2sRunnable extends Runnable so the user cannot extend it. Since J2sRunnable will be "empty" the user won't need to use "this" keyworkd in run() method
> 3. new Resize(...) or new Panel(...) instead of
> "YuiFactory.getInstance().newResize/newPanel". This might require modifying
> Java2Script classloader and compiler to get everything loaded and run
> correctly.
In this sollution my objective was that org.sgx.j2s.yui.YAHOO.* classes to collide with real yui objects. But the yui api contains also static methods, so for example for org.sgx.j2s.yui.YAHOO.util.YuiEvent.addListener static method to work I also have to change names like:
/**@j2sNative
* org.sgx.j2s.yui.YAHOO.util.YuiEvent=YAHOO.util.Event;
*/{}
so all "static request" to org.sgx.j2s.yui.YAHOO.util.YuiEvent are actually dispatched by native YAHOO.util.Event object.
This sollution force me to extract instance creation responsability outside yui java wrapper classes (yuiFactory). In fact, java wrapper classes compiled javascript is virtually none. (since all are native methods, they can be annotated with @j2sIgnore. In fact I don't see why j2s compiler just can ignore native methods definitions )
> Things like:
> YuiUtils.loadYui(FULLDEPENDENCIES, new Runnable() {
> public void run() {
> makeMainLayout();
> System.out.println("end tests");
> }
> });
> should not be required.
I'm not agree. Current sollution use YAHOO.util.YUILoader (http://developer.yahoo.com/yui/yuiloader/) for loading yui dependencies. In fact the only YUI .js file that needs to be included in the html's <head> is "yui/build/yuiloader/yuiloader.js". All the rest are dynamically loaded by yuiloader and that is what this code do (a yui use case):
String base="yui/build";
boolean loadOptional=true, combine= true;
String filter= "MIN";
boolean allowRollup = true;
YUILoaderConfig config = new YUILoaderConfig(base, require, loadOptional,
combine, filter, allowRollup, onSuccessCallback);
YUILoader loader = YuiFactory.getInstance().newYUILoader(config);
loader.insert();
Note that in my demo I load all the demo yui dependencies at once, but using yuiloader I can load components only when they are needed.
>
>
> Maybe, writing some tutorials to tell people to write a YUI application in
> Java step by step may help too.
>
Yes, a lot of work needs to be done. I started the project about 2 weeks about and all I have is code, almost no documentation. I thought your comments would be important for rethink the java tools for accesing javascript apis before reaching to a concrete java code format. Once I make sure what will be the final format for code accessing javascript, then I will start writing user documentation ;)
> Hope to see more improvements soon!
>
>
--
Sebastian Gurin <sgu...@softpoint.org>
Sebastian Gurin
Sebastian Gurin <sgu...@softpoint.org>