call javascript or modify css from wicket panel class

StackOverflow https://stackoverflow.com/questions/11584577

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?

Was it helpful?

Solution

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top