Position Design of Custom Components.

Hello:

I attach an image file of my web example presentation,


MAIN CODE:

package com.example.srv_on;

import org.vaadin.addon.borderlayout.BorderLayout;

import com.vaadin.Application;
import com.vaadin.terminal.ThemeResource;
import com.vaadin.ui.*;
import com.vaadin.ui.themes.Reindeer;
import com.vaadin.ui.AbstractComponent;

@SuppressWarnings("serial")
public class Srv_onApplication extends Application {
	 

	public void init() {
		Window mainWindow = new Window("SONLINE");
		mainWindow.setTheme("vaadintunes");
		
		Panel_1 p1 = new Panel_1();
		p1.setHeight("400px");
        p1.setWidth("400px");
        
        Panel_2 p2 = new Panel_2();
        p2.setHeight("400px");
        p2.setWidth("400px");
           
		Embedded e = new Embedded("",new ThemeResource("../myimages/example.png"));
		
		Label l4  = new Label("PANEL4");
		Label l5  = new Label("PANEL5");
		
		VerticalLayout v1 = new VerticalLayout();
        HorizontalLayout h1 = new HorizontalLayout();
        
       //IMAGEPOSITION-TOP_CENTER
        v1.addComponent(e);
        
        //POSITION-MIDDLE-LEFT
        h1.addComponent(p1);
        //POSITION-MIDDLE-CENTER
        h1.addComponent(p2);
      //POSITION-MIDDLE-RIGHT
        h1.addComponent(l4);
        
        
		v1.addComponent(h1);
		
		//POSITION-BOTTOM-CENTER
		v1.addComponent(l5);
        
        setMainWindow(mainWindow);
        mainWindow.setContent(v1);
    }
}


Custom component-1:

package com.example.srv_on;

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.LoginForm;
import com.vaadin.ui.Panel;
import com.vaadin.ui.VerticalLayout;

public class Panel_1 extends CustomComponent {

	@AutoGenerated
	private AbsoluteLayout mainLayout;
	@AutoGenerated
	private Panel panel_1;
	@AutoGenerated
	private VerticalLayout verticalLayout_1;
	@AutoGenerated
	private LoginForm loginForm_1;

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

	

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

	

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

	

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

	

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

	

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

	/**
	 * 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 Panel_1() {
		buildMainLayout();
		setCompositionRoot(mainLayout);

		// TODO add user code here
	}

	@AutoGenerated
	private AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		mainLayout.setImmediate(false);
		mainLayout.setWidth("100%");
		mainLayout.setHeight("100%");
		mainLayout.setMargin(false);
		
		// top-level component properties
		setWidth("100.0%");
		setHeight("100.0%");
		
		// panel_1
		panel_1 = buildPanel_1();
		mainLayout.addComponent(panel_1, "top:0.0px;left:10.0px;");
		
		return mainLayout;
	}

	@AutoGenerated
	private Panel buildPanel_1() {
		// common part: create layout
		panel_1 = new Panel();
		panel_1.setCaption("Login Client");
		panel_1.setImmediate(false);
		panel_1.setWidth("220px");
		panel_1.setHeight("170px");
		
		// verticalLayout_1
		verticalLayout_1 = buildVerticalLayout_1();
		panel_1.setContent(verticalLayout_1);
		
		return panel_1;
	}

	@AutoGenerated
	private VerticalLayout buildVerticalLayout_1() {
		// common part: create layout
		verticalLayout_1 = new VerticalLayout();
		verticalLayout_1.setImmediate(false);
		verticalLayout_1.setWidth("81.2%");
		verticalLayout_1.setHeight("100.0%");
		verticalLayout_1.setMargin(false);
		
		// loginForm_1
		loginForm_1 = new LoginForm();
		loginForm_1.setStyleName("v-loginform");
		loginForm_1.setImmediate(false);
		loginForm_1.setWidth("180px");
		loginForm_1.setHeight("110px");
		verticalLayout_1.addComponent(loginForm_1);
		
		return verticalLayout_1;
	}

}


Custom Component-2

Is a code like a Custom Component-1


QUESTION:

Why in HorizontalLayout() components, much space is left ???
In demo: http://demo.vaadin.com/sampler#HorizontalLayoutBasic not space is left …
Thanks
11835.png

You explicitly define the Panel_1 and Panel_2 (which are actually CustomComponents) sizes as 400x400px. The contained panels are not that big, hence the extra space around them.

You should leave the Panel_1 and Panel_2 at undefined size, and change their composition root components from AbsoluteLayout to VerticalLayout for example, and set the layout size to undefined as well.