The most important is not the example, the important is the concept. The
file is loaded after the rendering of the component.
Another example:
TogglePanePage.class
public class TogglePanePage extends WebPage
{
private static final long serialVersionUID = 1L;
private MyPanel panel = null;
public TogglePanePage(final PageParameters parameters)
{
super();
panel = new MyPanel(this,"panel");
panel.setOutputMarkupId(true);
AjaxLink link = new AjaxLink(this, "link", new Model("link")){
@Override
public void onClick(AjaxRequestTarget target) {
panel.get("mypanel2").setVisible(true);
target.addComponent(panel);
}
};
}
}
TogglePanePage.html
<html>
<body>
<wicket:extend>
<h1>Dialogs</h1>
<div style="padding:20px">
<h4>Inline Accordeon</h4>
<div style="padding-left: 40px;">
<span wicket:id="panel"></span>
<a wicket:id="link">link</a>
</div>
</div>
</wicket:extend>
</body>
</html>
MyPanel.java
public class MyPanel extends Panel {
public MyPanel(MarkupContainer parent, String id) {
super(parent, id);
new MyPanel2(this, "mypanel2").setVisible(false);
}
MyPanel.html
<wicket:panel>
<div wicket:id="mypanel2">test</div>
</wicket:panel>
MyPanel2.java
public class MyPanel2 extends Panel {
public MyPanel2(MarkupContainer parent, String id) {
super(parent, id);
add(HeaderContributor.forCss(this.getClass(), "mycss.css"));
}
}
MyPanel2.html
<wicket:panel>
<script>alert("loaded")</script>
</wicket:panel>
mycss.css
body
{
background-color: red;
}
Thanks
> This doesn't really make sense. You can't create panel in the onClick
> handler without placing it anywhere in page. You can either create the
> panel in advance (and hide it) or create another component and replace
> it by the new panel panel.
>
> -Matej
>
>
> Alberto Bueno wrote:
>
>> Hello,
>>
>> I'm trying to load css files with ajax, but the problem is that the
>> rendering of the components are executed before the loading of the css
>> files.
>> This problem means that if I have to use styles in the component
>> updated, these styles are not executed, because when the component is
>> rendered,
>> the styles are not loaded yet.
>>
>> This is a very simple example where the css file doesn't work correctly:
>>
>> MyPage.java:
>>
>> public class MyPage extends WebPage
>> {
>> private static final long serialVersionUID = 1L;
>>
>> private Component panel = null;
>>
>> public MyPage(final PageParameters parameters)
>> {
>> super();
>>
>> panel = new Label(this,"panel","panel");
>> panel.setOutputMarkupId(true);
>>
>> AjaxLink link = new AjaxLink(this, "link", new Model("link")){
>> @Override
>> public void onClick(AjaxRequestTarget target) {
>>
>> panel = new MyPanel(TogglePanePage.this,"panel");
>> panel.setOutputMarkupId(true);
>>
>> panel.add(HeaderContributor.forCss(this.getClass(),
>> "mycss.css"));
>> target.addComponent(panel);
>>
>> }
>> };
>> }
>> }
>>
>> MyPage.html
>> <html>
>> <body>
>> <h1>Dialogs</h1>
>> <div style="padding:20px">
>> <h4>Inline Accordeon</h4>
>> <div style="padding-left: 40px;">
>> <span wicket:id="panel"></span>
>> <a wicket:id="link">link</a>
>> </div>
>> </div>
>> </body>
>> </html>
>>
>>
>>
>> MyPanel.java
>>
>> public class MyPanel extends Panel {
>>
>> public MyPanel(MarkupContainer parent, String id) {
>> super(parent, id);
>> }
>>
>> private static final long serialVersionUID = 1L;
>>
>> }
>>
>>
>> MyPanel.html
>> <html>
>> <body>
>> <wicket:panel>
>> <script>alert("loaded")</script>
>> <div class="test">test</div>
>> </wicket:panel>
>> </body>
>> </html>
>>
>>
>> mycss.css
>> body
>> {
>> background-color: red;
>> }
>>
>> In the example, the javascript alert() is executed before the
>> background-color has been changed. And the background-color would have
>> to be changed before.
>>
>> I think this is not a correct behavior, because with javascript files
>> work correcty. But javascript files call to the server to load the file
>> and css files don't call to the server.
>>
>> Any suggestion?
>>
>> Thanks
>>
>>
>>
>>
>>
>>
>> -------------------------------------------------------------------------
>> Take Surveys. Earn Cash. Influence the Future of IT
>> Join SourceForge.net's Techsay panel and you'll get the chance to share your
>> opinions on IT & business topics through brief surveys - and earn cash
>> http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV
>> _______________________________________________
>> Wicket-user mailing list
>> Wicket-user@lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/wicket-user
>>
>>
>
>
> -------------------------------------------------------------------------
> Take Surveys. Earn Cash. Influence the Future of IT
> Join SourceForge.net's Techsay panel and you'll get the chance to share your
> opinions on IT & business topics through brief surveys - and earn cash
> http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV
> _______________________________________________
> Wicket-user mailing list
> Wicket-user@lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/wicket-user
>
-------------------------------------------------------------------------
Take Surveys. Earn Cash. Influence the Future of IT
Join SourceForge.net's Techsay panel and you'll get the chance to share your
opinions on IT & business topics through brief surveys - and earn cash
http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV
_______________________________________________
Wicket-user mailing list
Wicket-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/wicket-user
