2016-10-09 1 views
0

Il y a peu de solutions dans SO à ce sujet, mais non concerne ma situation. J'ai un fichier css séparé dans mon dossier de guerre.Comment changer le thème CSS dans GWT lors de l'exécution?

w3-theme-blue.css dans mon dossier de guerre

w3-theme-red.css dans mon dossier de guerre.

Maintenant, si je veux charger le thème bleu, j'écrire dans mon fichier project.html

 <link rel="stylesheet" href="/w3-theme-blue.css"> 

si je veux charger le thème rouge, je vous écris dans mon fichier project.html

 <link rel="stylesheet" href="/w3-theme-red.css"> 

Maintenant, ce que je veux accomplir est de passer du bleu au rouge ou vice versa au moment de l'exécution.

j'ai vérifié celui-ci en javascript

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

utilisé cela avec JSNI, mais pas de chance

alors je tente de mettre en œuvre le même code dans GWT, comme celui-ci

 Element s = DOM.createElement("link"); 
    s.setAttribute("type", "text/css"); 
    s.setAttribute("href", "w3-theme-red.css"); 
    DOM.getElementById("body").appendChild(s); 

Mais, toujours pas de chance ...

Pl facilité .. Guide

grâce

Répondre

0

Si vous voulez charger la feuille de style dynamique puis utilisez JSNI

private native void loadCSS (String cssHref) /*-{ 
    $doc.write('<link rel="stylesheet" type="text/css" href="' + 
cssHref + '">'); 
}-*/ 
+0

Merci, mais il dit document.wrtie est pas une fonction, toute suggestion – junaidp

+0

modifié la réponse ... s'il vous plaît vérifier la syntaxe GWT JSNI –

0

Utilisation StyleInjector:

// safe your StyleElement that is returned with injectStyleSheet() 
// so you can override it later with a new style 
public static StyleElement content; 

[...] 

CssResource style = GWT.create(CssBundle.class); 
content = StyleInjector.injectStylesheet(style.css1().getText()); 

Pour remplacer votre style avec un autre, vous pouvez faites ceci:

// overrides the content, that you defined before with your second theme 
    StyleInjector.setContents(content, style.css2().getText()); 

    // setContents docu says that it might not work as expected in IE... 
    // maybe you have to use inject() then and delete the old style, 
    // otherwise you are adding more and more styles after each theme change 

    // StyleInjector.inject(style.css2().getText()); 

J'espère que cela vous va ... se