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

是否可以创建一个带有两个按钮的水平面板，一个在

GWT

中，一个在

JavaScript

中

例如，我有一个对象：

HorizontalPanel panelHeader = new HorizontalPanel();

Button buttonexample = new Button();

现在，我用按钮创建了一个

.js

文件：

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

---

我的问题是：如何添加在水平面板上包含按钮的

jsni

方法？通常对于

GWT

，我会使用

panelheadr.add（button）

，但是如何使用

javascript

按钮呢？

您必须将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引用此按钮。

在javascript中创建这样一个简单的类似于按钮的小部件并在GWT中使用应该是您最后的选择，而且很棘手，因为它可能会导致跨浏览器兼容性问题。此外，如果您必须调试该代码，这将很困难。无论如何，有一个更好的解决办法

您的自定义按钮应该是GWT小部件，以便将其添加到布局容器中。这意味着button类至少应该实现

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类MyTextButton实现IsWidget，hasClickHandler
{
私有SimplePanel=新SimplePanel（）；
私人按钮；
公共MyTextButton（）
{
button=button.create（panel.getElement（））；
}
@凌驾
公共小部件asWidget（）
{
返回面板；
}
//使用JavaScriptObject为位于SimplePanel中的button创建DOM元素
私有静态类按钮扩展了JavaScriptObject
{
专用静态本机按钮创建（元素父级）/*-{
//使用父元素作为包装器在此处创建javascript按钮。
//如果你的功能是正确的
//$wnd.javascriptbutton（父级）；
}-*/;
}
@凌驾
公共无效火灾事件（GwtEvent事件）
{
}
@凌驾
公共句柄注册addClickHandler（ClickHandler处理程序）
{
//将此处理程序绑定到本机按钮的onClick，返回删除注册，在删除时需要重置onClick
返回null；
}
}

---

但理想情况下，

MyTextButton

类可以通过

UIObject

或任何其他特定类进行扩展，如果您想获得内置功能。

为什么？我只是好奇这是一个什么样的真实场景。我的场景是将旧javascript GUI的某些部分集成到一个新的GWT GUI中！！如此低的整合水平将令人头痛。可以导入一个奇怪的小部件，比如颜色选择器或日期选择器，但在js和gwt按钮级别混合和匹配可能不可行！！！请删除，因为它与此方法的内容重复，并且现在已过时。请注意，该方法不包含按钮，而是将按钮写入文档。这可能会使您很难扩展代码以添加更多小部件。

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;
    }
}