migrated from 7.0 to 7.1 now "100%" does not fill.

Sorry first post. I typically find everything I need on the forums and or google, but I am stumped on this one.

So I updated all of my Vaadin libraries from 7.0 to 7.1 yesterday. Upon doing so my application has roughly become 200 px in width and 100px in height. This is to compensate for a few components that do not have setSizeFull() defined.

So this morning I thought I would see if I can track down the issue more and the end result is even more perplexing.

I started by creating a generic view with an empty menu bar.


public class CTestView extends CustomComponent implements View {

	/*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */

	@AutoGenerated
	private AbsoluteLayout mainLayout;
	@AutoGenerated
	private MenuBar menuBar_1;

	/**
	 * The constructor should first build the main layout, set the composition
	 * root and then do any custom initialization.
	 * 
	 * The constructor will not be automatically regenerated by the visual
	 * editor.
	 */
	public CTestView() {
		buildMainLayout();
		setCompositionRoot(mainLayout);
	}

	@AutoGenerated
	private AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		mainLayout.setImmediate(false);
		mainLayout.setWidth("100%");
		mainLayout.setHeight("100%");

		// top-level component properties
		setWidth("100.0%");
		setHeight("100.0%");

		// menuBar_1
		menuBar_1 = new MenuBar();
		menuBar_1.setImmediate(false);
[b]
		menuBar_1.setWidth("100.0%");
[/b]
		menuBar_1.setHeight("-1px");
		mainLayout.addComponent(menuBar_1, "top:0.0px;left:0.0px;");

		return mainLayout;
	}

	@Override
	public void enter(ViewChangeEvent p_event) {
		// TODO Auto-generated method stub
	}
}

I set the content of my UI to this view.


public class CTestUI extends UI {
	@Override
	protected void init(VaadinRequest request) {
		this.setImmediate(true);
		this.setResizeLazy(false);
		this.setWidth("100%");
		this.setContent(new CTestView());
	}
}

I am presented with a menubar that is roughly 10px in width.

However, I can go back and set the width of the menubar to say 800px and it works fine.

Am I missing something?

Also I do not know if this helps, but I am in a Maven-Vaadin environment with the following POM references.


	<dependency>
		<groupId>com.vaadin</groupId>
		<artifactId>vaadin-server</artifactId>
		<version>7.1.0</version>
	</dependency>
	<dependency>
		<groupId>com.vaadin</groupId>
		<artifactId>vaadin-client-compiled</artifactId>
		<version>7.1.0</version>
	</dependency>
	<dependency>
		<groupId>com.vaadin</groupId>
		<artifactId>vaadin-themes</artifactId>
		<version>7.1.0</version>
	</dependency>
	<dependency>
		<groupId>org.eclipse.jetty</groupId>
		<artifactId>jetty-webapp</artifactId>
		<version>9.0.0.M5</version>
	</dependency>
	<dependency>
		<groupId>com.vaadin</groupId>
		<artifactId>vaadin-theme-compiler</artifactId>
		<version>7.1.0</version>
	</dependency>
  </dependencies>
  <build>
  	<plugins>
  		<plugin>
  			<groupId>com.vaadin</groupId>
  			<artifactId>vaadin-maven-plugin</artifactId>
  			<version>1.0.2</version>
  		</plugin>
  	</plugins>

Does the same thing happen when you try to make a new maven Project with Vaadin 7.1.0?

In all honesty I am not sure how to even make a vaadin 7.1.0 project. I have been working in this Maven fashion for so long that I cannot figure out how to create the project as I need it.

Also I am required to create this project in a Maven fashion.
The reason being is that I need to be able to deploy this project as a jar with embedded jetty. In many cases the UI portion of this project will not presented to the user and the jar itself needs to be run as a service.

I will continue to attempt to make the Vaadin 7.1.0 project, but from a project management stand point it will not suffice.

If you use eclipse with the maven plugin you go to New → Other… → Maven Project
Then you add your artifactid, … and later choose your archetype. Here you choose vaadin-archetype-sample (or application depending on which one is with vaadin 7.1.0) when you then finish the wizard it will create a new maven vaadin project with vaadin 7.1.0.
If you don’t use the maven plugin (or eclipse) you can also use the maven commands.
More Information

This should create a project in a “Maven fashion”. Then you can try if the problem still exists.

Ok. I finally got the project made, but I still end up with the exact same result. The only difference I get is a console output:


2013-07-16 11:06:41.118:INFO:oejs.Server:Thread-0: jetty-9.0.0.M5
2013-07-16 11:06:41.412:INFO:oejw.StandardDescriptorProcessor:Thread-0: NO JSP Support for /, did not find org.apache.jasper.servlet.JspServlet
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework addAtmosphereHandler
INFO: Installed AtmosphereHandler com.vaadin.server.communication.PushHandler mapped to context-path: /*
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.DefaultBroadcaster <init>
INFO: /* support Out Of Order Broadcast: false
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework autoDetectWebSocketHandler
INFO: Auto detecting WebSocketHandler in /WEB-INF/classes/
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework initWebSocket
INFO: Installed WebSocketProtocol org.atmosphere.websocket.protocol.SimpleHttpProtocol 
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework autoDetectContainer
INFO: Atmosphere is using async support: org.atmosphere.container.Servlet30CometSupport running under container: jetty/9.0.0.M5 using javax.servlet/3.0
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework configureAtmosphereInterceptor
INFO: Installed Default AtmosphereInterceptor [Android Interceptor Support, SSE Interceptor Support, JSONP Interceptor Support, Atmosphere JavaScript Protocol, Browser disconnection detection]
. Set org.atmosphere.cpr.AtmosphereInterceptor.disableDefaults in your xml to disable them.
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework init
WARNING: No BroadcasterCache configured. Broadcasted message between client reconnection will be LOST. It is recommended to configure the org.atmosphere.cache.UUIDBroadcasterCache
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework init
INFO: Shared ExecutorService supported: true
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework init
INFO: HttpSession supported: true
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework init
INFO: Using BroadcasterFactory: org.atmosphere.cpr.DefaultBroadcasterFactory
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework init
INFO: Using WebSocketProcessor: org.atmosphere.websocket.DefaultWebSocketProcessor
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework init
INFO: Using Broadcaster: org.atmosphere.cpr.DefaultBroadcaster
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework init
INFO: Atmosphere Framework 1.0.14.vaadin3 started.
Jul 16, 2013 11:06:41 AM org.atmosphere.cpr.AtmosphereFramework interceptor
INFO: Installed AtmosphereInterceptor  Track Message Size Interceptor using |. 
2013-07-16 11:06:41.827:INFO:oejsh.ContextHandler:Thread-0: started o.e.j.w.WebAppContext@1c8587f{/,file:/home/joshbackstrom/workspace/test/src/,AVAILABLE}
2013-07-16 11:06:41.855:INFO:oejs.ServerConnector:Thread-0: Started ServerConnector@78ea78{HTTP/1.1}{0.0.0.0:8080}

Here is all of my code for my 7.1.0 project:


Main Method:


package testproj.test;

public class main {
	public static void main(String[] args) {
		try {
			Thread uiThread = new Thread(new MyVaadinUI.Server());
			uiThread.start();
		}
		catch (Exception e) {
			e.printStackTrace();
		}
	}
}


My UI:


package testproj.test;

import javax.servlet.annotation.WebServlet;

import org.eclipse.jetty.servlet.ServletHolder;
import org.eclipse.jetty.webapp.WebAppContext;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.UI;

@Theme("reindeer")
@SuppressWarnings("serial")
public class MyVaadinUI extends UI {

	@WebServlet(value = "/*", asyncSupported = true)
	@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "testproj.test.AppWidgetSet")
	public static class Servlet extends VaadinServlet {
	}

	@Override
	protected void init(VaadinRequest request) {
		this.setWidth("500px");
		this.setContent(new TestView());
	}

	public static class Server implements Runnable {
		private static final int PORT = 8080;
		private static final String CONTEXT = "/";
		private static final String RESROUCE_BASE = "./src/";

		@Override
		public void run() {
			org.eclipse.jetty.server.Server server = new org.eclipse.jetty.server.Server(
					PORT);

			WebAppContext webAppContext = new WebAppContext();
			webAppContext.setContextPath(CONTEXT);
			webAppContext.setResourceBase(RESROUCE_BASE);

			ServletHolder vaadinLoader = new ServletHolder(new VaadinServlet());
			vaadinLoader.setInitParameter("UI", "testproj.test.MyVaadinUI");
			vaadinLoader.setInitParameter("productionMode", "true");

			webAppContext.addServlet(vaadinLoader, "/*");

			try {
				server.setHandler(webAppContext);

				server.start();
				server.join();
			}
			catch (Exception e) {
				e.printStackTrace();
			}

		}
	}
}


My View:


package testproj.test;

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.MenuBar;

public class TestView extends CustomComponent implements View {

	/*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */

	@AutoGenerated
	private AbsoluteLayout mainLayout;
	@AutoGenerated
	private MenuBar menuBar_1;

	/**
	 * The constructor should first build the main layout, set the composition
	 * root and then do any custom initialization.
	 * 
	 * The constructor will not be automatically regenerated by the visual
	 * editor.
	 */
	public TestView() {
		buildMainLayout();
		setCompositionRoot(mainLayout);
		// TODO add user code here
	}

	@Override
	public void enter(ViewChangeEvent p_event) {
		// TODO Auto-generated method stub
	}

	@AutoGenerated
	private AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		mainLayout.setImmediate(false);
		mainLayout.setWidth("100%");
		mainLayout.setHeight("100%");

		// top-level component properties
		setWidth("100.0%");
		setHeight("100.0%");

		// menuBar_1
		menuBar_1 = new MenuBar();
		menuBar_1.setImmediate(false);
		menuBar_1.setWidth("100.0%");
		menuBar_1.setHeight("-1px");
		mainLayout.addComponent(menuBar_1, "top:0.0px;left:0.0px;");

		return mainLayout;
	}

}

AbsoluteLayout has never really properly supported percentual sizes. However, in earlier Vaadin versions, the few cases I have heard of being used (mostly 100% width spanning the whole layout) happened to work in a way that some people expected and then used. More generally what a percentual size on a component in an AbsoluteLayout would mean is quite unclear.

I believe what you can do instead is to anchor the component relative both to the left edge and to the right edge to get the equivalent effect. (I haven’t tested this anytime recently.)

This resolved the issue, but I am concerned with the fact that my code base hadn’t changed from 7.0 to 7.1 upgrade of Vaadin. This implies to me that something has been broken? I primarily used 100% on all components that I wanted to “resize” with the window which resided within a grid layout, but it appears this will no longer work for the GridLayout itself that resides on top of the initial AbsoluteLayout.

None the less thank you for the help.

I don’t understand the anchor idea. Can you describe it with a code snippet? The bug I submitted (
12228
) sounds to be a similar issue but with absolutelayout 100% height with a tabsheet, and I haven’t found a workaround under the new 7.1 handling of AbsoluteLayout.

Edit: I figured out what you mean:
rootLayout.addComponent(tabSheet, “left:0; top: 0; right: 0; bottom:0”);

That achieves what we were looking for. Great!

Strill, I think that at least the docs could be a little more explicit about achieving that.

Another thought is to by default keep the left right as 0 and top bottom as 0 for the child component if the child component itself is 100% height and/or width. The user could then still override any of the value with the various methods that alter the cssPosition.

Also odd is that for me under 7.1, it seemed to only fail (zero height) when the child component was a tabsheet. The tabsheet contents (a 100% vertical layout) were zero height. If instead the child was just the 100% vertical layout, it worked…