如何在 onClick() 中禁用/更改检票口按钮链接的样式

发布于 2024-11-06 03:39:38 字数 203 浏览 0 评论 0原文

在 Wicket 应用程序中,我有一堆

In a Wicket app, I have a bunch of <button> elements to which I'm attacking a Link component. Now in the onClick() method of the component I want to disable or change the style of the button. How can I do that? Calling setEnabled(false) has no effect.

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

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

发布评论

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

评论(6

陌伤浅笑 2024-11-13 03:39:38

重复使用 onClick() 是对内存中的同一个对象进行操作。如果您不使用 Ajax,您仍然可以在 Link 的匿名子类中维护某些状态。然后,您可以使用 onBeforeRender() 和 onComponentTag() 来更改每次的显示方式。

Link<Void> link = new Link<Void>("myLink") {

    private String customCSS = null;
    private boolean customEnabled = true;

    public void onClick() {
        if (/* test to determine disabled */) {
            customCSS = "disabled";
            customEnabled = false;
        } else {
            customCSS = null;
            customEnabled = true;
        }
    }

    @Override
    protected void onComponentTag(ComponentTag tag) {
        super.onComponentTag(tag);
        if (customCSS != null)
            tag.put("class", customCSS);
    }

    @Override
    public boolean isEnabled() {
        return super.isEnabled() && customEnabled;
    }
};

AttributeModifiers(或其他行为)不适合这种情况,因为如果您将它们添加到 onClick() 方法中,它们将开始在每次单击时堆叠在同一链接上 - 因为它们是作为链接状态的一部分进行维护的。

您的链接可以跟踪各种状态,允许您的 onClick() 方法通过重复点击来启用/禁用/更改/等。

您还可以重写 onBeforeRender()、isVisible() 以及每次链接显示在页面上时运行的其他方法。无论您单击按钮多少次,构造函数、onConfigure() 和其他构造函数都仅运行一次。

Repeated uses of onClick() are operating on the same object in memory. If you're not using Ajax, you can still maintain some state in an anonymous subclass of Link. Then, you can use onBeforeRender() and onComponentTag() to change how it is displayed each time.

Link<Void> link = new Link<Void>("myLink") {

    private String customCSS = null;
    private boolean customEnabled = true;

    public void onClick() {
        if (/* test to determine disabled */) {
            customCSS = "disabled";
            customEnabled = false;
        } else {
            customCSS = null;
            customEnabled = true;
        }
    }

    @Override
    protected void onComponentTag(ComponentTag tag) {
        super.onComponentTag(tag);
        if (customCSS != null)
            tag.put("class", customCSS);
    }

    @Override
    public boolean isEnabled() {
        return super.isEnabled() && customEnabled;
    }
};

AttributeModifiers (or other behaviors) aren't good for this case because, if you add them in the onClick() method, they will begin stacking on the same link for each click - since they are maintained as part of the Link's state.

Your Link can keep track of all manner of state, allowing your onClick() method to enable/disable/change/etc with repeated clicks.

You can also override onBeforeRender(), isVisible(), and other methods that are run each time the link is displayed on the page. The constructor, onConfigure(), and others are run just once, regardless of how many times you click the button.

风蛊 2024-11-13 03:39:38

我认为这在 Wicket 中并不是一个好主意。当然,这可以通过欺骗来完成,但更简单的是:

  1. 重写 isEnabled() 方法以返回从表单/组件的模型派生的值。
  2. 创建组件时附加一个AttributeModifier,并为其使用一个返回如上所述派生值的模型。

无论您选择哪一个,原则都是让 Wicket“拉”入渲染信息,而不是显式推送它。

I don't think this is an entirely good idea in Wicket. Of course it could be done by trickery, but it's far simpler to either:

  1. Override the isEnabled() method to return a value derived from the model of the form/component.
  2. Attach an AttributeModifier when you create the component, and use a model for it which returns a value derived as above.

Whichever you choose, the principle is to let Wicket "pull" rendering information in rather than pushing it explicitly.

凡尘雨 2024-11-13 03:39:38

Michael Borgwardt 提供的答案几乎是正确的。

问题在于您使用了 Link。禁用链接使用 而不是
/

我想补充一点,您需要使用 HTML 按钮元素而不是 (链接)。最初的答案可能会令人困惑,因为 Wicket 中也存在 Link 和 Button。

The answer provided by Michael Borgwardt is nearly correct.

The problem is that you use Link. Disabled Links use <span> instead of
<a>/<button> and are surrounded with <em> by default. Using Button
component will set 'disabled' attribute in the element.

I would like to add, that you need to use HTML button element instead of <a> (link). Original answer can be counfusing, because Link and Button also exist in Wicket.

踏月而来 2024-11-13 03:39:38

我认为 AjaxCallDecorator 应该是您需要用来禁用/更改按钮样式的类。

I think AjaxCallDecorator should be the class you need to use to disable/change style of the button.

谁人与我共长歌 2024-11-13 03:39:38

The problem is that you use Link. Disabled Links use <span> instead of <a>/<button> and are surrounded with <em> by default.
Using Button component will set 'disabled' attribute in the element.

羁客 2024-11-13 03:39:38

看看 SimpleAttributeModifierAttributeAppender。根据您的实际要求,其中之一应该可以解决问题。 SimpleAttributeModifier 添加或替换在 wicket 中具有预表示的任何 HTML 标签的属性(替换 css 类),而 AttributeAppender 附加到属性(添加另一个 css 类)。这也适用于启用/禁用按钮,但我还没有尝试过。

示例:

Label label = new Label("id", "Some silly text.")
add(label);
label.add(new SimpleAttributeModifier("class", "my-css-class");

对于 Ajax,您还必须将组件添加到目标。

更详细的例子:

Java代码:

import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.model.Model;

public class DemoPage extends WebPage {

    public DemoPage() {
        Form form = new Form("form");
        add(form);
        final WebMarkupContainer wmc = new WebMarkupContainer("greenText");
        form.add(wmc);
        form.add(new Link("redLink"){

            @Override
            public void onClick() {
                wmc.add(new SimpleAttributeModifier("class", "redText"));
            }});
        final Button boldButton = new Button("boldButton"){

            @Override
            public void onSubmit() {
                wmc.add(new AttributeAppender("class", true, new Model<String>("boldText"), " "));
            }};
        form.add(boldButton);
        Link disabler = new Link("buttonDisabler") {

            @Override
            public void onClick() {
                boldButton.add(new AttributeAppender("disabled", true, new Model<String>("disabled"), " "));                
            }

        };
        form.add(disabler);
    }

}

对应的HTML:

<html>
<head>
<style>
.redText {
    color: red;
    }
.greenText {
    color: green;
    }
.boldText {
    font-weight: bold;
    }
</style>
</head>
<body>
<form wicket:id="form">
<div class="greenText" wicket:id="greenText">This is Green.</div><br />
<a href="" wicket:id="redLink">Make it red</a><br />
<input type="submit" wicket:id="boldButton" value="Make it bold" /><br />
<a href="" wicket:id="buttonDisabler">Disable the button</a>
</form>
</body>
</html>

Take a look at SimpleAttributeModifier and AttributeAppender. Depending on your actual requirements one of those should do the trick. SimpleAttributeModifier adds or replaces an attribute of any HTML-Tag that has a prepresentation in wicket (replaces the css class), while AttributeAppender appends to the attributes (adds another css class). This should work for enabling/disabling buttons as well but I haven't tried that.

Example:

Label label = new Label("id", "Some silly text.")
add(label);
label.add(new SimpleAttributeModifier("class", "my-css-class");

For Ajax you'll have to add the component to the target as well.

More detailed example:

Java code:

import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.model.Model;

public class DemoPage extends WebPage {

    public DemoPage() {
        Form form = new Form("form");
        add(form);
        final WebMarkupContainer wmc = new WebMarkupContainer("greenText");
        form.add(wmc);
        form.add(new Link("redLink"){

            @Override
            public void onClick() {
                wmc.add(new SimpleAttributeModifier("class", "redText"));
            }});
        final Button boldButton = new Button("boldButton"){

            @Override
            public void onSubmit() {
                wmc.add(new AttributeAppender("class", true, new Model<String>("boldText"), " "));
            }};
        form.add(boldButton);
        Link disabler = new Link("buttonDisabler") {

            @Override
            public void onClick() {
                boldButton.add(new AttributeAppender("disabled", true, new Model<String>("disabled"), " "));                
            }

        };
        form.add(disabler);
    }

}

corresponding HTML:

<html>
<head>
<style>
.redText {
    color: red;
    }
.greenText {
    color: green;
    }
.boldText {
    font-weight: bold;
    }
</style>
</head>
<body>
<form wicket:id="form">
<div class="greenText" wicket:id="greenText">This is Green.</div><br />
<a href="" wicket:id="redLink">Make it red</a><br />
<input type="submit" wicket:id="boldButton" value="Make it bold" /><br />
<a href="" wicket:id="buttonDisabler">Disable the button</a>
</form>
</body>
</html>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文