GWT和JSNI将Javascript按钮添加到HTML面板中 [英] GWT and JSNI add Javascript button into HTML panel

问题描述

  function testfuncion（）{
 document.write （'< input type =buttonname =hellovalue =hello>'）; 
} 
  

然后我创建了一个gwt的HTML面板。

  HTML panelHtmlTry = new HTML（）; 
  

如何将Javascript按钮放到HTML面板中？

在这个实验中，我不能在gwt中创建按钮，只能将一个Javascript对象放到gwt面板中。

PS：我可以使用html面板或水平面板。我的目标是在每个GWT面板上放置一个JavaScript按钮并显示它

解决方案

鉴于JS文件不允许修改，并假设输入 是文档中唯一的输入，则可以扩展 HTML 来包装输入元素：

  public class MyInputHtml extends HTML {
 $ b $ public MyInputHtml（）{
 
 //用外部脚本内容初始化DOM 
 testfunction（）; 
 
 //将DOM元素设置为构件的元素
元素body = RootPanel.get（）。getElement（）; 
 Element el = body.getElementsByTagName（input）。getItem（0）; 
 setElement（el）; 
 
 
 private native void testfunction（）/ *  -  {
 $ wnd.testfuncion（）; 
}  -  * /; 
} 
  

当然，如果您将 input 与 id 。这样，您只需调用 RootPanel.get（id）即可查看它，从而避免需要基于索引的搜索。这将强化您的代码，因为DOM中的更改不会影响此查找。

I create a simple Javascript file containing a simple button.

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

Then I created a HTML panel in gwt.

HTML panelHtmlTry = new HTML();

How can put the Javascript button into the HTML panel?

In this experiment I can't create the button in gwt but only put a Javascript object into the gwt panel.

PS: i can use html panel or horizzontal panel. My objective is put a javascript button on each GWT panel and show it

解决方案

Given that no modifications are allowed to the JS file, and assuming the input is the only input in the document, you could extend HTML to wrap the input element:

public class MyInputHtml extends HTML {

    public MyInputHtml() {

        // initialize DOM with external script content
        testfunction();

        // set the DOM element as the widget's element
        Element body = RootPanel.get().getElement();
        Element el = body.getElementsByTagName("input").getItem(0);
        setElement(el);
    }

    private native void testfunction() /*-{
        $wnd.testfuncion();
    }-*/;
}

It'll be best, of course, if you assign the input with an id. That way you can look it up simply by calling RootPanel.get(id), thus avoiding the need for an index based search. This will robust your code, as changes in the DOM won't affect this lookup.

这篇关于GWT和JSNI将Javascript按钮添加到HTML面板中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！