GWT : set style property to element

Question

In order to scale elements in my div, I'm using this css (JSFiddle Example here):

.scaled {
    transform: scale(0.5);
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Safari and Chrome */
    -o-transform: scale(0.5); /* Opera */
    -moz-transform: scale(0.5); /* Firefox */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
        M11=0.5, M12=0,
        M21=0, M22=0.5);
}

This is supported by all major browsers (including IE8).

Now when I try to apply this css dynamically in GWT:

public void setZoom(double val) {
    if (val != 1) {
        surface.getElement().getStyle().setProperty("transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-ms-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-webkit-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-o-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-moz-transform", "scale(" + val + ")");
        surface.getElement().getStyle()
                .setProperty("filter", "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=" + val + ", M12=0,M21=0, M22=" + val + ")");
    }

}

I get the following error:

Caused by: java.lang.AssertionError: The style name '-ms-transform' should be in camelCase format
    at com.google.gwt.dom.client.Style$.assertCamelCase$(Style.java:1603)
    at com.google.gwt.dom.client.Style$.setProperty$(Style.java:1512)

How can I set these browser dependent styles dynamically in GWT? (especially IE's filter..)

Solution 1

You can use value function in CSS ResourceBundle or conditional CSS:

https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Value_function

But I don't understand from your code why you need to use transform: scale at all. You can simply set the size of this element directly, like

surface.setSize("100px", "200px")

If you set size relative to something, you can first measure that something (window or element), and calculate the size you need. This solution works in all browsers and you don't have to rely on CSS3 being supported.

EDIT:

You can have a div ("surface" in your example) which does not change its size. This div will include another div (for example, "wrapper"), which contains all internal content. All content can be set in either percents or em relative to the wrapper div. When you need to scale your content, you simply change the size of the wrapper div - and all of its contents will scale accordingly.

Solution 2

Here is an issue tracker entry for GWT that talks about the restriction and workarounds.

http://code.google.com/p/google-web-toolkit/issues/detail?id=5152&q=assertCamelCase&colspec=ID%20Type%20Status%20Owner%20Milestone%20Summary%20Stars

Here is another article that talks about it in Javascript; http://www.javascriptkit.com/javatutors/setcss3properties.shtml

Basically, convert that letter after a dash (-) to upper case, so -moz-transform is 'MozTransform'

so this should work;

    surface.getElement().getStyle().setProperty("MozTransform", "scale(" + val + ")");

Solution 3

why are you trying to set the property using java code. Though GWT supports it through coding, it has lot of restriction. Try giving a CSS classname, and do what you want in the CSS.

To add a classname through GWT you can use the following.

getElement().setClassName( "className" );
getElement().addClassName( "className" );

Here provide the CSS classname( it can be any name). Use the same className in your CSS file and do all the manipulation you need.

Comments

[Oussama Zoghlami]

camelCase does mean that you should not use '-', then for example to specify '-moz-transform' just replace it with 'mozTransform'

[Majid Laissi]

thank you for the link, i'll look into it. For the second part of your answer, i don't need to change the width and height of the div, but i need to scale all its contents like when you zoom in and out with your browser..

[Andrei Volgin]

You can set the contents of the div in percents or in em - relative to its parent div. Then all you need to do is to change the size of the div, and all elements inside will scale accordingly. When I say "change size of div" it does not have to be the outside div which does not change. You can include one div inside the other for that purpose.

[Majid Laissi]

that won't make the inner objets (images, text, etc..) to scale. I don't want to make smaller divs but even the image and text inside..

[Majid Laissi]

following up your edit : i can resize the inner elements like divs and images but how about the text size, iframes, padding values...? It's not the same effect as actually zooming, and that's the reason why transform: scale() exists in first place

[Majid Laissi]

But as I can have a zoom range of 1-100% I'll need to create 100 classe names classZoom1, classZoom2, ... classZoom100 and apply the class name for every value the user choose..

[Andrei Volgin]

You can set font sizes and paddings in em. Setting a new em size on the parent will trigger resizing of inner elements. Note that I do no oppose CSS3 - I love it. And if you need a true "zoom" effect, "scale" is the best solution. This why I provided a link to CssResource as a solution to your problem.

[Majid Laissi]

well thank you very much. I'll try your solution when i understand how it should be implemented.