Question

是否可以创建一个包含2个按钮的水平面板，一个位于GWT，另一个位于JavaScript？

例如，我有这个对象：

HorizontalPanel panelHeader = new HorizontalPanel();

Button buttonexample = new Button();

现在，我使用按钮创建了一个.js文件：

function javascriptbutton(){
    document.write('<input type="button" name="try" value="try">');
}

并创建了一个jsni方法来调用

public native static void javascriptTest() /*-{
    $wnd.javascriptbutton(); // JSNI 
}-*/;

我的问题是：如何在水平面板上添加包含按钮的jsni方法？通常对于GWT，我会panelheadr.add(button)，但我怎么能为javascript按钮执行此操作？

Answer 1

您必须将JS与HTML分开。

在GWT中创建两个按钮。为需要外部JavaScript的按钮分配ID。将单击处理程序附加到按钮，并从此单击处理程序调用本机JS：

myButton.getElement().setId("jsButton");
myButton.addClickHandler(new ClickHandler() {

    @Override
    public void onClick(ClickEvent event) {
        // Here you call your JSNI native method
        javascriptTest();
    }

});

在您的原生JS方法中，您可以通过其ID引用此按钮。

Answer 2

在javascript中创建像Button这样的简单小部件并在GWT中使用应该是你的最后手段，因为它可能会导致跨浏览器兼容性问题。此外，如果您必须调试该代码将很困难。无论如何，有一个更好的解决方案。

您的自定义按钮应该是GWT窗口小部件，以便将其添加到布局容器中。这意味着按钮类应该至少实现IsWidget这允许添加按钮的布局容器调用asWidget方法并返回一个简单的按钮包装容器，允许您轻松地布局按钮。以下示例使用SimplePanel作为包装器。



public class MyTextButton implements IsWidget, HasClickHandlers
{
    private SimplePanel panel = new SimplePanel();
    private Button button;
    public MyTextButton()
    {
        button = Button.create(panel.getElement());
    }

    @Override
    public Widget asWidget()
    {
        return panel;
    }
    //Use JavaScriptObject to create the DOM element for button which resides in the SimplePanel
    private static class Button extends JavaScriptObject
    {
        private static native Button create(Element parent)/*-{
            //create your javascript button here using parent element as the wrapper.
            //ex: if your function is correct
            //$wnd.javascriptbutton(parent);
        }-*/;
    }

    @Override
    public void fireEvent(GwtEvent<?> event)
    {
    }

    @Override
    public HandlerRegistration addClickHandler(ClickHandler handler)
    {
        //bind this handler to native button's onClick, return the registration for removal, on remove you need to reset the onClick
        return null;
    }
}

public class MyTextButton implements IsWidget, HasClickHandlers { private SimplePanel panel = new SimplePanel(); private Button button; public MyTextButton() { button = Button.create(panel.getElement()); } @Override public Widget asWidget() { return panel; } //Use JavaScriptObject to create the DOM element for button which resides in the SimplePanel private static class Button extends JavaScriptObject { private static native Button create(Element parent)/*-{ //create your javascript button here using parent element as the wrapper. //ex: if your function is correct //$wnd.javascriptbutton(parent); }-*/; } @Override public void fireEvent(GwtEvent<?> event) { } @Override public HandlerRegistration addClickHandler(ClickHandler handler) { //bind this handler to native button's onClick, return the registration for removal, on remove you need to reset the onClick return null; } }

但理想情况下，类可以通过MyTextButton或任何其他特定类扩展，如果您想要内置功能。</ p>

我可以在GWT按钮旁边放一个JavaScript按钮吗？

2 个答案: