call javascript or modify css from wicket panel class

Question

in my project i've faced a problem with calling javascript code from class wich renders
html in wicket.Suppose we have a class ExamplePanel with following code for wicket panel

 public final class ExamplePanel extends Panel {

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

and html file '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>

and following 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;
}

from this code we have box inside the parentContainer div, and i need to pass the position coordinates to box when initialize the ExamplePanel class, for example :

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
}

any suggestions?

score 7 · Accepted Answer · answered Jul 20 '12 at 19:32

ExamplePanel must implement IHeaderContributor which provides a method renderHead(IHeaderResponse). From this method, you can call response.renderString() passing it the styles you want to apply. In your case, you are not adding styles, you are adding a JS call that adds some styles. Doing this makes the java call a little more simple because instead of needing to create the as part of the string you render, you will only need to call 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);
    }
}

The IHeaderContributor interface is intended to facilitate the addition of Resources such as JavaScript and CSS.

Wow, that's easier than i thought! thank you for your answer! One more question: is there any solution to get javascript variable value from java class? — ilya.stmn, Jul 21 '12 at 02:34
Sure, you'll just need to build out the String with that variable before you call renderJavascript()... You could use a StringBuffer to append pieces of the script before calling renderJavascript(). — Daniel Semmens, Jul 21 '12 at 02:48
No, i mean get value from javascript variable in java, for example in html file we have and get the value of x in my ExamplePanel class. — ilya.stmn, Jul 21 '12 at 03:26
ah, nothing I know that dirrectly supports this. However, you could add a TextField that you hide (with css, not setVisible(false)) and then you use JS to update it's value. If you attach an AjaxFormComponentUpdatingBehavior to the field, when you fire onChange of the field in JS, it will validate the input and it will be available in java as the field's Model value — Daniel Semmens, Jul 21 '12 at 10:38

score 1 · Answer 2 · answered Jul 23 '12 at 07:30

1

You could use the SimpleAttributeModifier or the AttributeAppender to set the css values or classes from within wicket. A description on how to do so can be found here.

answered Jul 23 '12 at 07:30

Nicktar

5,548
1
28
43

call javascript or modify css from wicket panel class

2 Answers2