Question

我在GWT中创建了一个小部件，我希望能够为用户提供一小段HTML，他们可以将这些小部件嵌入到他们的网站中，这样我的小部件就会在那里呈现。

我不相信iframe是合适的，因为一个要求是点击我的小部件上的任何链接应该将用户带到我的网站（而不仅仅是更改iframe的内容）。

非常感谢任何帮助。

P.S。我尝试嵌入以下内容，但没有运气：＆LT; script src =“http://embeddedapptest.appspot.com/embeddedapp/embeddedapp.nocache.js”＆gt;＆lt; / script＆gt; ＆LT; div id =“foo”/＆gt;

Answer 1

有可能。代码片段需要像

<script src="yourmodule.nocache.js"></script>
<div id="foo"/>

然后在您的切入点执行此操作：

RootPanel root = RootPanel.get("foo");
// add your things here. root.add(...);

你需要注意不要踩到外页的样式，反之亦然，但编译CSS应该有很长的路要走。

这是用于在Google API文档中嵌入API Explorer的技术。

Answer 2

我认为现在不可能这样做。但是将来你可以使用Web Components来做到这一点。

但是可以使用gwt-exporter导出GWT / Java API。这样就可以自动创建JavaScript API。 gwtchismes使用它来导出JavaScript version of GWT widgets。您可以在their wiki中找到有关它的教程。

Answer 3

在NetBeans GWT项目中

<强> mycss.css：

body, html,div.wrap-frame{ 
    margin: 0;
    padding: 0;
    widht: 100%;
    height: 100%;}body{
    background: white;
}

.row1or3 {
    width: 100%;
    height: 10%;
    background: blue;
    text-align: center;
}

.row2{
    width: 100%;
    height: 80%;
    background: yellow;
    text-align: center;
    display:flex;
}

.wrapper{
   width:100%;
   height: 100%;
}

.box{
    float:left; 
    height: 100%;
}

.box:nth-child(1){
    width:25%;
    background-color:red;
}

.box:nth-child(2){
    width:50%;
    background-color:green;
}

.box:nth-child(3){
    width:25%;
    background-color:yellow;
}

<强> welcomeGWT.html

<html>
<head>
    <script id=ft type="text/javascript"  src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
    <meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
    <link rel="stylesheet" href="mycss.css"> 
</head>
<body>
    <div class="row1or3"> Row1
    </div>

    <div class="row2">
        <div class="wrapper">
            <div class="box">
                Left Side Menu
            </div>
            <div class="box" id="mydiv"> 
            </div>
            <div class="box">
                Right Side Menu
            </div>
        </div>
    </div>

    <div class="row1or3">
        Row3
    </div>
</body>

<强> MainEntryPoint.java

public class MainEntryPoint implements EntryPoint {

/**
 * Creates a new instance of MainEntryPoint
 */
public MainEntryPoint() {
}

/**
 * The entry point method, called automatically by loading a module that
 * declares an implementing class as an entry-point
 */
public void onModuleLoad() {
    final Label label = new Label("Hello, GWT!!!");
    final Button button = new Button("Click me!");

    button.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            label.setVisible(!label.isVisible());
        }
    });

    RootPanel root = RootPanel.get("mydiv");
   root.add(button);
    root.add(label);
}
}

现在，您可以将任何html页面的任何div元素命名为id = mydiv，并添加已编译的GWT jscript。我已经测试了。

创建其他人可以嵌入其网站的GWT小部件？

3 个答案: