We process the stylesheet reference before replacing elements. But what
we do is that we create a link element and add it to header (so the
browser is responsible for loading the stylesheet). The stylesheet
loading is asynchronous so it is possible that it gets loaded after the
component is replaced. But as soon as it's loaded, the component should
reflect it.
I've put a tree in a tabbed panel and it works very. Doesn't it work at
all for you?
-Matej
Alberto Bueno wrote:
> 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
>
-------------------------------------------------------------------------
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
