Custom Widget -> Create HTML Element

[Jan]

Hi,

i like to create a Custom widget with javascript, but did not find a
tutorial for this. I tried to create a simple "div" Elment for the
start. But this does not work. Throws some errors. Can someone tell me
some good tutorial on this or give me some tips to correct my code?



package test.client;

import com.google.gwt.user.client.ui.Widget;

public class CustomWidget extends Widget{


public CustomWidget(){
super();
createElement("sdf");

}

public static native void createElement(String msg) /*-{

var newdiv = $doc.createElement('div');
newdiv.setAttribute('id','testid');

newdiv.innerHTML = 'Test Element';
$doc.appendChild(newdiv);
}-*/;

}


Thanks very much
jan

[mukarev]

Hi jan,

for what reason do you want to create a custom widget. GWT offersalready a lot of controls that you can combine or extend.

In my repo I created for some GWT HTML5 Widgets you can see how I did creating new elements. 

https://code.google.com/p/gwt-html5-widgets/source/browse/src/org/mko/html5/client/basecomponents/figure/FigureFactory.java

Whatever, you should have a look at GWT Docs e.g. http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideUiCustomWidgets.html or http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html .

If this doesn't help, please tell a bit more detailed what you want.

Greetz,

Markus

[Jens]

You would start with:

public class CustomWidget extends Widget {

  public CustomWidget() {

    super();

    setElement(Document.get().createDivElement());

  }

}

This will give you a simple Widget represented by a <div> element. In general just take a look at the GWT source code to see how to write a Widget from scratch.

-- J.

Am Sonntag, 4. März 2012 22:20:01 UTC+1 schrieb Jan: