从检票口面板类调用 javascript 或修改 css答案

【问题标题】：call javascript or modify css from wicket panel class从检票口面板类调用 javascript 或修改 css
【发布时间】：2012-07-20 17:58:57
【问题描述】：

在我的项目中，我遇到了从渲染类调用 javascript 代码的问题
在 wicket.html 中。假设我们有一个 ExamplePanel 类，其中包含以下代码用于 wicket 面板

 public final class ExamplePanel extends Panel {

      public ExamplePanel(String id) {
          super(id);
          add(new Label("someText", "hello"));
      }}

和html文件'ExamplePanel'

 <html xmlns:wicket>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>ExamplePanel</title>
        <wicket:head>
            <link href="panel.css" rel="stylesheet"/>
            <script src="jquery.min.js"></script>
            <script src="jquery-ui.min.js"></script>

        </wicket:head>
    </head>
    <body>
        <wicket:panel>
            <div id="parentContainer">
                <div id="box" wicket:id="someText"></div>
            </div>
        </wicket:panel>
    </body>
</html>

和下面的css

    #box{
    background: #f0f0f0;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 200px;
    left: 200px;
    font-size: 1.5em;
    word-wrap: break-word; 
}

#parentContainer{
    width:500px;
    height: 500px;
     background:RGB(57,51,51);
     position:relative;
}

从这段代码中，我们在 parentContainer div 中有框，我需要在初始化 ExamplePanel 类时将位置坐标传递给框，例如：

public ExamplePanel(String id) {
    super(id);
    add(new Label("someText", "hello"));
    // add some code for css positioning of box div
    // $('#div').css({position:'relative',top:'5px',left='29px'}) for example
}

有什么建议吗？

【问题讨论】：

标签： java wicket panel wicketstuff

【解决方案1】：

ExamplePanel 必须实现 IHeaderContributor，它提供了一个方法 renderHead(IHeaderResponse)。通过此方法，您可以调用 response.renderString() 并将您想要应用的样式传递给它。在您的情况下，您没有添加样式，而是添加了添加一些样式的 JS 调用。这样做会使 java 调用更简单一些，因为不需要创建作为渲染字符串的一部分，您只需要调用 response.renderJavascript()...

public class ExamplePanel implements IHeaderContributor {
    public ExamplePanel(String id) {
        super(id);

        add(new Label("someText", "hello"));
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        // use this if you want to add only the styles
        response.renderString("<style>#div {position:'relative'; top:'5px'; left='29px';}</style>");

        // or, use this if you still want the JS selector
        // the uniqueId should not be null if you want Wicket to check if the script has already been rendered
        response.renderJavascript("$('#div').css({position:'relative',top:'5px',left='29px'})", null);
    }
}

IHeaderContributor 接口旨在促进 JavaScript 和 CSS 等资源的添加。

【讨论】：

哇，这比我想象的要容易！谢谢您的回答！还有一个问题：有没有办法从java类中获取javascript变量值？
当然，您只需要在调用 renderJavascript() 之前使用该变量构建字符串...您可以在调用 renderJavascript() 之前使用 StringBuffer 附加脚本片段。
不，我的意思是从 java 中的 javascript 变量中获取值，例如在 html 文件中，我们有并在我的 ExamplePanel 类中获取 x 的值。
啊，我不知道直接支持这一点。但是，您可以添加一个隐藏的 TextField（使用 css，而不是 setVisible(false)），然后使用 JS 更新它的值。如果您将 AjaxFormComponentUpdatingBehavior 附加到该字段，当您在 JS 中触发该字段的 onChange 时，它将验证输入，并且它将在 java 中作为该字段的模型值可用

【解决方案2】：

您可以使用SimpleAttributeModifier 或AttributeAppender 从检票口中设置css 值或类。可以在here 找到有关如何执行此操作的说明。

【讨论】：