Zoom in / Out

I have a requirements to zoom In/Out from the user interface, say using + / - icons. This will zoom in the whole contents of the selected window or alternatively all contents of the application e.g. fonts, table grid, components etc. Thanks for any thoughts or comments.


I think you can apply transform and transform-origin CSS properties to your UI components:

.zoom-2x {
  transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;

Then use Component.setStyleName method with “zoom-2x” value from your zoom 2x button.

Also, I recommend that you put your zoomable content inside of ScrollBoxLayout component (in case of whole UI it is not required).