Hi there, I’m trying to adapt a jmix application to a mobile device. On cuba pltaform there was a property named cuba.web.useDeviceWidthForViewport = true usefull to adapt the zoom of the app to the device. How can i implement it on jmix?
1 Like
Hi,
In Jmix you need to implement a custom BootstrapListener
and modify the head
element of you app’s page, e.g.:
import com.vaadin.server.BootstrapFragmentResponse;
import com.vaadin.server.BootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import org.jsoup.nodes.Element;
import org.springframework.stereotype.Component;
@Component("demo_CustomBootstrapListener")
public class CustomBootstrapListener implements BootstrapListener {
@Override
public void modifyBootstrapFragment(BootstrapFragmentResponse response) {
}
@Override
public void modifyBootstrapPage(BootstrapPageResponse response) {
Element head = response.getDocument().getElementsByTag("head").get(0);
// initial-scale can be changes for better UX
includeMetaViewport("width=device-width, initial-scale=" + 0.8, response, head);
}
protected void includeMetaViewport(String content, BootstrapPageResponse response, Element head) {
Element meta = response.getDocument().createElement("meta");
meta.attr("name", "viewport");
meta.attr("content", content);
head.appendChild(meta);
}
}
Regards,
Gleb
Hi Gleb,
Thnak you very much…i have to understand how to implempent a listener
Is there a reference in the manual?
Just create a class CustomBootstrapListener
and put the code above in it. Framework will find all beans that implement BootstrapListener
and call them.