シンプルなボタンを含むシンプルな Javascript ファイルを作成します。
function testfuncion() {
document.write('<input type="button" name="hello" value="hello">');
}
次に、gwt で HTML パネルを作成しました。
HTML panelHtmlTry = new HTML();
Javascript ボタンを HTML パネルに配置するにはどうすればよいですか?
この実験では、gwt でボタンを作成することはできませんが、Javascript オブジェクトを gwt パネルに配置するだけです。
PS: HTML パネルまたは水平パネルを使用できます。私の目的は、各 GWT パネルに JavaScript ボタンを配置して表示することです
ええ、あなたがやりたいことをするもっと簡単な方法があります。しかし、あなたがやりたいことをしたいのなら。JSNIを介してカスタムJavaScriptメソッドを呼び出すことができます。
このJSNIメソッドは、ホストページに含まれているカスタムJSスクリプトを呼び出します。
private native void testfunction() /*-{
$wnd.testfuncion();
}-*/;
$ wndは、ブラウザwindowオブジェクトへの参照です。JSNIのGWTドキュメントを参照してください。
次に、このJSNIメソッドをGWTコードのどこからでも呼び出すことができます。
testfunction();
そして毎回、ファイルのJavaScript関数がJSNIを介して呼び出されます。
document.writeを一時的に再定義して、目的のHTMLウィジェットにボタンを設定することができます。
private native void testfunction(HTML html) /*-{
var originalWriteFunc = $wnd.document.write;
$wnd.document.write = function(str) {
html.@com.google.gwt.user.client.ui.HTML::setHTML(Ljava/lang/String;)(str);
};
$wnd.testfuncion();
$wnd.document.write = originalWriteFunc;
}-*/;
したがって、ボタンを配置する必要があるHTMLウィジェットを使用してtestfunctionを呼び出す必要があります。
JS ファイルへの変更は許可されておらず、ドキュメント内でinput が唯一inputのものであると仮定すると、要素HTMLをラップするように拡張できます。input
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();
}-*/;
}
inputもちろん、 に を割り当てた方がよいでしょうid。そうすれば、単に を呼び出すだけで検索できるRootPanel.get(id)ため、インデックス ベースの検索が不要になります。DOM の変更はこのルックアップに影響しないため、これによりコードが堅牢になります。
testFunction が文字列を返すようにします。これを panelHtmlTry に挿入できます。