Should there be an option to set the viewport for a screen agent?

b.tel · January 30, 2017, 8:57pm

I’m wondering whether it should be possible to set a viewport based on the screen agent? It seems that when using the screen agents for the login and main window, it would be great to also set the viewport and thereby gain control over the sizing of the application on different devices.

What’s your idea on such an approach?

b.tel · February 3, 2017, 10:52am

Any comments on this?

artamonov · February 3, 2017, 12:27pm

Hi,

Currently we cannot change view port for concrete window, because our application uses single HTML page. It can be done only for entire application using BootstrapListener bean. See the example in the dashboard sample:

github.com

cuba-platform/sample-dashboard/blob/master/modules/web/src/com/company/dashboard/web/bootstrap/BootstrapListener.java

/*
 * Copyright (c) 2016 Haulmont
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.company.dashboard.web.bootstrap;

import com.haulmont.cuba.web.sys.CubaBootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import org.jsoup.nodes.Element;

This file has been truncated. show original

There the BootstrapListener class extends the CubaBootstrapListener to add viewport metatag with device-width option, it is defined in web-spring.xml config: sample-dashboard/web-spring.xml at master · cuba-platform/sample-dashboard · GitHub

b.tel · February 3, 2017, 1:32pm

Hi Yuriy,

I understand that this is something that needs to be set for the application but when applied to the main window, this could actually work if you have these PHONE / TABLET agents especially for the main window.

Anyway, I tried to look at the bootstrap approach but I am not sure what to do with it. Can I just copy the BootstrapListener.java to my own project and would it work? I downloaded the dashboard app as a whole, imported it in Studio but I cannot see the BootstrapListener in Studio.

When running the dashboard application, I can see the meta tag. And when I copy this tag to my own application using the brwoser console, the behaviour of my own application improves significantly (in terms of working on phones/tablets). Better yet, just adding this tag makes it a whole lot better:


<meta name="viewport" content="width=device-width">

If I could use the bootstrap technique in my own project I am happy to go with that.

So, please explain what to do with the BootstrapListener.

b.tel · February 3, 2017, 1:41pm

Well - answered this my self. I had to modify the BootstrapListener.java slightly to comply to my package structure, then copied that one into my project and added the bean reference to my web-spring.xml.

After compilation I got the meta tag as mentioned above in my application and it works brilliantly!

Thanks a lot and hope this may help others as well.