CODEWITHSUNDEEP
javaandroidgwtresizesmartgwt
milind_db
milind_db

Reputation: 1294

How to re-size application components based on client's resolution?

I am having one GWT Web application, It is running perfectly in the full window size browser but when I re-size the window, it will not looking good, all the components are not on there respective place.

So whenever I changed the window size or If I will run the application on tab or mobile device, I want to make changes to all the component's sizes.

Is there any another way available?

How can I achieve this?

Upvotes: 0

Views: 377

Answers (4)

sidney3172
sidney3172

Reputation: 86

You can use something like gwt-bootstrap (it can change view depending on viewport size and user-agent). But basically you could (and I think should) use @media selectors of CSS when you are creating your components.

You can handle all resize event via GWT and do manual resize of each component, but this is not very good idea because of performance of your app.

Upvotes: 1

Sithsu
Sithsu

Reputation: 2219

Is it pure GWT or are you using SmartGWT components?

If you are using SmartGWT you should be able to use Layout classes to better manage components.

Its not wise to hard code component sizes using Canvas.setWidth(int) and Canvas.setHeight(int) methods.

See how layouts can help resize components dynamically in this example.

Upvotes: 0

MarioP
MarioP

Reputation: 3832

You can use Window.getClientHeight and Window.getClientWidth - while this doesn't return the real screen size in pixel, it returns the size of the area your GWT application can use, so it also respects the current size of the browser window.

You can listen to changes to the browser window size using Window.addWindowResizeListener.

Maybe this also solves your problem for mobile devices. If you really need to know if and what mobile device your application is running on, your best chance would be the User-Agent string, which you can obtain with Window.Navigator.getUserAgent(). You can also make a new property if you want to use deferred binding, like this:

<define-property name="mobile.user.agent" values="mobilesafari, none"/>
<property-provider name="mobile.user.agent"><![CDATA[
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("webkit") != -1 && ua.indexOf("mobile") != -1) {
        return "mobilesafari";
    }
    // Additional checks go here
    return "none";
]]></property-provider>

You may also take a look at the LayoutPanel, which natively supports width and height in percents.

Another option would be to use CSS instead of GWT code and let the browser handle the resizing. While this isn't always a viable option, one should opt to go for it, if possible.

Upvotes: 0

Jan Cajthaml
Jan Cajthaml

Reputation: 403

try

public static Window getWindow(Component c)
{
    while (c != null)
    {
        if (c instanceof Window) break;
        c = c.getParent();
    }
    return (Window)c;
}

public static int getResolution(Component c)
{
    return getWindow(c).getBounds();    
}

so it should be something like this

Rectangle bounds getScreenResolution(this);
Dimension resolution = new Dimension(bounds.width,bounds.height);

placed in component you want to resize.

then combine this with resize listener

getWindow(this).addComponentListener(new ComponentAdapter()
{
    public void componentResized(ComponentEvent e)
    {
       Rectangle bounds = getScreenResolution(this);
       setPrefferedSize(new Dimension(bounds.width,bounds.height));
    }
 }

Upvotes: 0

Related Questions