如何在 GWT 中的 HTML 小部件内捕获链接上的单击事件?

发布于 2024-12-05 09:14:41 字数 404 浏览 5 评论 0原文

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

GWT 是一个很棒的工具,我认为它将成为我开发 Web 应用程序的首选工具。要查看我的示例,请单击此处

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

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

先感谢您。

I´m evaluating GWT as one of the alternatives to develop AJAX applications for my future projects. Untill now it is as good as it gets, but now I´m stuck looking for a way to capture a click on a tag inside HTML widget. I want to write links inside the HTML but I want to process the clicks in my application, withou reloading the page. Imagine I have the following 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>

I want to capture the click over the "click here" part of the text. What I´ve done so far is to try to attach the id "mylink" to some sort of clickable widget and process the click with a ClickHandler for that widget, but nothing is working.

Is there a way to do that? By the way, I know very little about Javascript.

Thank you in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

谁的年少不轻狂 2024-12-12 09:14:41

您也可以这样做:

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

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


评论后编辑。

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

HTMLPanel html = new HTMLPanel("GWT is a great tool and I think it will be my preferred tool to develop web applications. To check out my samples ");`
Anchor a = new Anchor("click here");
a.addClickHandler(yourClickHandler);
html.add(a);

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


最终方法(我希望)

这个方法最终应该有效。我认为这就是它应该完成的方式,特别是它允许任何 HTML 结构。有两种方法:

1。在 HTMLPanel 中转换链接

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

HTMLPanel html = new HTMLPanel("<p>Multilink example 2: <a>link1</a> and <a>link2</a></p>");
NodeList<Element> anchors = html.getElement().getElementsByTagName("a");
for ( int i = 0 ; i < anchors.getLength() ; i++ ) {
    Element a = anchors.getItem(i);
    Anchor link = new Anchor(a.getInnerHTML());
    link.addClickHandler(...);
    html.addAndReplaceElement(link, a);
}

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

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

Anchor a1 = new Anchor("a1");
a1.addClickHandler(...);
Anchor a2 = new Anchor("a2");
a2.addClickHandler(...);

HTMLPanel html = new HTMLPanel("<p>Multilink example: <span id='a1'></span> and <span id='a2'></span></p>");
html.add(a1, "a1");
html.add(a2, "a2");

You can also do it like this:

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

DOM class is com.google.gwt.user.client.DOM.


Edit after comments.

OK, the method works for elements out of GWT widgets (element comes with HTML file). If you need to generate it in GWT code then you can add link element separately. But it won't work if your content goes for instance from DB.

HTMLPanel html = new HTMLPanel("GWT is a great tool and I think it will be my preferred tool to develop web applications. To check out my samples ");`
Anchor a = new Anchor("click here");
a.addClickHandler(yourClickHandler);
html.add(a);

If it is fully dynamic I don't have an idea at this point. I was trying with HTML() widget, where you can plug your click handler, but I couldn't find a right way to determine whether the click was in A element. Strange.


The final approach (I hope)

This one should work finally. And I think this is the way it should be done, especially that it allows any structure of the HTML. The are two ways:

1. Convert links within HTMLPanel

This one will find all A elements and convert them into Anchors. It ignores href attribute, but you can add it easily :)

HTMLPanel html = new HTMLPanel("<p>Multilink example 2: <a>link1</a> and <a>link2</a></p>");
NodeList<Element> anchors = html.getElement().getElementsByTagName("a");
for ( int i = 0 ; i < anchors.getLength() ; i++ ) {
    Element a = anchors.getItem(i);
    Anchor link = new Anchor(a.getInnerHTML());
    link.addClickHandler(...);
    html.addAndReplaceElement(link, a);
}

2. Insert links into prepared spots

Just insert placeholders, where the widgets should be inserted. You could also use the addAndReplaceElement() method but with string ID.

Anchor a1 = new Anchor("a1");
a1.addClickHandler(...);
Anchor a2 = new Anchor("a2");
a2.addClickHandler(...);

HTMLPanel html = new HTMLPanel("<p>Multilink example: <span id='a1'></span> and <span id='a2'></span></p>");
html.add(a1, "a1");
html.add(a2, "a2");
深白境迁sunset 2024-12-12 09:14:41

尝试这样的事情。

对于您的网页,您可以使用 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 小部件。还有一个超链接小部件,它可以连接到历史记录系统。

锚点的 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)。

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

Try something like this.

For your web page, you can use 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> 

Notice that I've replaced your tag with an Anchor widget. There is also a Hyperlink widget, which has hooks into the history system.

The Anchor has a id of "myLink", which is used in the GWT companion to the XML file:

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

}

I've added a ClickHandler that captures and acts on the click event.

The main program is simple:

public class SOverflow implements EntryPoint {

    public void onModuleLoad() {

        RootLayoutPanel.get().add(new So());
    }
}

Run this after and a webpage appears with the text and hyperlink. Click on it and "caught the click" appears in the console window (I'm using Eclipse).

I hope this is what you're after. If not exactly, it might at least give you some ideas of how to attack your problem.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文