Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GXT and ExtJs Example using JsInterop and Jsni rendering a Toolbar
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.core.client.Scheduler.RepeatingCommand;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gwt.jsinterop.examples.processor.Example;
import com.sencha.gxt.core.client.dom.XElement;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.container.SimpleContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import com.sencha.gxt.widget.core.client.toolbar.ToolBar;
import jsinterop.annotations.JsMethod;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;
@Example(name = "Toolbar Example", category = "Toolbar", icon = "java")
public class ToolbarExample implements EntryPoint, IsWidget {
@JsType(isNative = true, name = "Ext", namespace = JsPackage.GLOBAL)
public static class Ext {
@JsProperty(name = "isChrome")
public static native boolean isChrome();
@JsMethod()
public static native java.lang.Object create(String className, java.lang.Object config);
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class ToolbarConfig {
@JsProperty
Object renderTo;
@JsProperty
String width;
@JsProperty
Object[] items;
}
// http://docs.sencha.com/extjs/6.2.0-classic/Ext.toolbar.Toolbar.html#methods
@JsType(isNative = true, namespace = "Ext.toolbar")
public static class Toolbar {
@JsMethod
public native void add(Object o);
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class Text {
@JsProperty
String text;
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class XType {
@JsProperty
String xtype;
}
private VerticalLayoutContainer vlc;
private SimpleContainer containerForJsni;
private SimpleContainer containerForJsInterop;
private JavaScriptObject extJsToolbar;
private Toolbar toolbarJsinterop;
@Override
public Widget asWidget() {
if (vlc == null) {
TextButton gxtButton = new TextButton("Add Something to ExtJs Toolbar");
gxtButton.addSelectHandler(new SelectHandler() {
@Override
public void onSelect(SelectEvent event) {
addSomethingToJsniToolbar();
}
});
ToolBar gxtToolbar = new ToolBar();
gxtToolbar.add(gxtButton);
containerForJsni = new SimpleContainer();
containerForJsInterop = new SimpleContainer();
vlc = new VerticalLayoutContainer();
vlc.add(gxtToolbar);
vlc.add(containerForJsni, new VerticalLayoutData(1, 50));
vlc.add(containerForJsInterop, new VerticalLayoutData(1, 50));
// Check if ExtJs api has been loaded and then render ExtJs parts
// No need for a scheduler if you're sure it's loaded.
Scheduler.get().scheduleEntry(new RepeatingCommand() {
@Override
public boolean execute() {
boolean ready = isExtJsReady();
if (ready) {
renderExtJs();
renderJsInterop();
}
return !ready;
}
});
}
return vlc;
}
private void addSomethingToJsniToolbar() {
addItemToJsniObject(extJsToolbar);
addItemToJsInterop();
}
private void addItemToJsInterop() {
XType fileUploadXType = new XType();
fileUploadXType.xtype = "filefield";
toolbarJsinterop.add(fileUploadXType);
}
private void renderJsInterop() {
Text text = new Text();
text.text = "jsinterop text";
Object[] items = new Object[1];
items[0] = text;
// skipping getters and setters
ToolbarConfig config = new ToolbarConfig();
config.renderTo = containerForJsInterop.getElement();
config.width = "100%";
config.items = items;
toolbarJsinterop = (Toolbar) Ext.create("Ext.toolbar.Toolbar", config);
};
private void renderExtJs() {
extJsToolbar = renderExtJsToolbar(containerForJsni.getElement());
}
private native JavaScriptObject renderExtJsToolbar(XElement el) /*-{
return $wnd.Ext.create('Ext.toolbar.Toolbar', {
renderTo : el,
width : "100%",
items : [ {
text : 'jsni text'
} ]
});
}-*/;
private native void addItemToJsniObject(JavaScriptObject toolbar) /*-{
toolbar.add({
xtype : 'filefield'
});
}-*/;
private native boolean isExtJsReady() /*-{
return !!$wnd.Ext;
}-*/;
@Override
public void onModuleLoad() {
RootPanel.get().add(this);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment