Changing the css file at runtime

[Kamlesh]

Hi,

I have different css files in my application say user1.css, user2.css
and so on corresponding to each user. My requirement is that when a
particular user logs in the system (consider the LMS application) I
have to apply the css corresponding to that user.

How can I achieve this requirement using GWT?
Is there an API using which I can change css in onModuleLoad()
function itself?
Can I handle module xml file configuration using GWT APIs?

I have also tried GWT linker to achieve something similar to that, but
I am not sure whether that will solve my problem. Please see the
following post.

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/d6a71ca426e2ebde

Regards,
Kamlesh

[Adam T]

I would say you need to use JSNI - do a search for how to change CSS
file using JavaScript and then implement something similar wrapped in
a JSNI method.

You can then call that method to change the style sheet, either
programmatically by just calling it, or if you want to harness the
bootstrapping use Deferred Binding on user type to select a subclass
that calls your method with the appropriate style name, i.e.

public class Basic{

private native void changeStyleSheet(String styleSheetName)/*-{
// some javascript code to activate and use styleSheetName as the
style sheet
}-*/

public setStyle(){
changeStyleSheet("first.css");
}
}


public class Admin extends Basic{
changeStyleSheet("second.css");
}

then in your module XML have something like

<replace-with class "Admin">
<when-type-is class"Basic"/>
<when-property-is name"user.type" value"admin"/>
</replace-with>

<define-property name="user.type" values="basic,admin"/>

You'd have to think of a secure way to ensure people can't just
pretend to be "admin". An unsecure-ish way would be to use a property
provider to read the value from your HTML meta properties in the same
way GWT does for i18n selection. As Bunsen&Beaker (http://
code.google.com/p/bunsenandbeaker/wiki/DevGuideSpecifyingLocale) says:

"A property provider is specified in the module XML file as a
JavaScript fragment that will return the value for the named property
at runtime. In this case, you would want to define the locale property
using a property provider. To see examples of <property-provider>
definitions in action, see the files I18N.gwt.xml and
UserAgent.gwt.xml in the GWT source code. "

//Adam



and a new property provider

//Adam

> http://groups.google.com/group/Google-Web-Toolkit/browse_thread/threa...
>
> Regards,
> Kamlesh

[Lorenzo Nazario]

In order to change the css at runtime (or better not "change" but "append")
try this native method:

    public static native void loadCss(String url) /*-{
        var fileref=document.createElement("link");
        fileref.setAttribute("rel","stylesheet");
        fileref.setAttribute("type","text/css");
        fileref.setAttribute("href",url);
        $doc.getElementsByTagName("head")[0].appendChild(fileref);
    }-*/;








2009/1/14 Adam T <adam...@gmail.com>