【问题标题】:How to capture a click event on a link inside a HTML widget in GWT?如何在 GWT 中的 HTML 小部件内的链接上捕获点击事件?
【发布时间】:2011-09-19 02:43:19
【问题描述】:

我正在评估 GWT 作为为我未来的项目开发 AJAX 应用程序的备选方案之一。到现在为止,它已经做得很好了,但现在我一直在寻找一种方法来捕获对 HTML 小部件内标签的点击。我想在 HTML 中编写链接,但我想在我的应用程序中处理点击,而不是重新加载页面。假设我有以下 HTML:

<p>GWT is a great tool and I think it will be my preferred tool to develop web applications. To check out my samples <a id='mylink'>click here</a></p>

我想捕获对文本“单击此处”部分的点击。到目前为止,我所做的是尝试将 ID“mylink”附加到某种可点击的小部件并使用 ClickHandler 处理该小部件的点击,但没有任何效果。

有没有办法做到这一点?顺便说一句,我对 Javascript 知之甚少。

提前谢谢你。

【问题讨论】:

    标签: html gwt widget


    【解决方案1】:

    你也可以这样做:

    Anchor.wrap(DOM.getElementById("mylink")).addClickHandler(yourClickHandler);
    

    DOM 类是com.google.gwt.user.client.DOM


    在 cmets 之后编辑。

    好的,该方法适用于 GWT 小部件之外的元素(元素带有 HTML 文件)。如果您需要在 GWT 代码中生成它,那么您可以单独添加链接元素。但是,如果您的内容例如来自 DB,它将不起作用。

    HTMLPanel html = new HTMLPanel("GWT 是一个很棒的工具,我认为它将是我开发 Web 应用程序的首选工具。查看我的示例");` Anchor a = new Anchor("点击这里"); a.addClickHandler(你的ClickHandler); html.add(a);

    如果它是完全动态的,我现在不知道。我正在尝试使用 HTML() 小部件,您可以在其中插入点击处理程序,但我找不到确定点击是否在 A 元素中的正确方法。奇怪。


    最后的方法(我希望)

    这个应该终于可以工作了。而且我认为这是应该这样做的方式,尤其是它允许 HTML 的任何结构。有两种方式:

    1.在 HTMLPanel 中转换链接

    这个会找到所有的 A 元素并将它们转换为 Anchors。它会忽略href 属性,但您可以轻松添加它:)

    HTMLPanel html = new HTMLPanel("

    多链接示例 2:link1link2

    "); NodeList 锚点 = html.getElement().getElementsByTagName("a"); for ( int i = 0 ; i

    2。将链接插入准备好的位置

    只需在应插入小部件的位置插入占位符。您也可以使用 addAndReplaceElement() 方法,但使用字符串 ID。

    锚 a1 = 新锚(“a1”); a1.addClickHandler(...); 锚 a2 = 新锚(“a2”); a2.addClickHandler(...); HTMLPanel html = new HTMLPanel("

    多链接示例: and

    "); html.add(a1, "a1"); html.add(a2, "a2");

    【讨论】:

    • 谢谢你 Okrasz!您的建议非常简单明了,但它发出了异常(也许我没有理解正确)。也许是因为我在不同的场景中使用它。虽然我没有在简短的解释中说明,但 HTML 将动态创建并放置在 gwt 弹出面板中。想想一个弹出面板,它向用户解释一些事情,然后建议他点击一个链接(而不是一个按钮)。我的申请中有几十个这种情况。
    • 当我应用你的建议时,我得到了以下异常:原因:java.lang.AssertionError:具有现有父小部件的小部件可能不会添加到分离列表中
    • 更新了另一个解决方案尝试。
    • 太棒了!!它有效......我测试了这种方法,它工作正常。但是...(总是有一个“但是”)。当我试图用两个链接构建一个更大的句子时,对齐发生了一些事情。尝试构建这样的东西:
    • GWT 是一个很棒的工具。我认为它将是我开发 Web 应用程序的首选工具。点击此处和此处查看一些示例。

    【解决方案2】:

    试试这样的。

    对于你的网页,你可以使用 UiBinder:

    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui">
        <g:HTMLPanel ui:field="panel">
            <p>
                GWT is a great tool and I think it will be my preferred tool to
                develop web applications. To check out my samples
                <g:Anchor ui:field="myLink" text="click here" />
            </p>
        </g:HTMLPanel>
    </ui:UiBinder> 
    

    请注意,我已将您的标签替换为 Anchor 小部件。还有一个超链接小部件,它与历史系统挂钩。

    Anchor 的 id 为“myLink”,用于 XML 文件的 GWT 伴侣:

    public class So extends Composite {
    
        private static SoUiBinder uiBinder = GWT.create(SoUiBinder.class);
    
        interface SoUiBinder extends UiBinder<Widget, So> {
        }
    
        @UiField
        Anchor myLink;
    
        public So() {
            initWidget(uiBinder.createAndBindUi(this));
    
            myLink.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    GWT.log("caught the click");
                }
            });
        }
    
    }
    

    我添加了一个 ClickHandler 来捕获并作用于点击事件。

    主程序很简单:

    public class SOverflow implements EntryPoint {
    
        public void onModuleLoad() {
    
            RootLayoutPanel.get().add(new So());
        }
    }
    

    运行此之后,会出现一个带有文本和超链接的网页。点击它,“caught the click”出现在控制台窗口中(我使用的是Eclipse)。

    我希望这就是你所追求的。如果不完全正确,它至少可以为您提供一些关于如何解决问题的想法。

    【讨论】:

    • 谢谢史蒂夫,但我仍然需要一些帮助,因为我无法在动态情况下弄清楚这一点。虽然我没有在简短的解释中说明,但 HTML 将动态创建并放置在 gwt 弹出面板中。想想一个弹出面板,它向用户解释一些事情,然后建议他点击一个链接(而不是一个按钮)。我的申请中有几十个这种情况。
    • 当我应用你的建议时,我得到了以下异常:原因:java.lang.AssertionError:具有现有父小部件的小部件可能不会添加到分离列表中
    • 对不起,史蒂夫,评论的最后一部分(例外)与 Okrasz 的有关。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-12
    • 2011-07-17
    相关资源
    最近更新 更多