{"id":36844,"date":"2016-05-03T15:00:52","date_gmt":"2016-05-03T12:00:52","guid":{"rendered":"http:\/\/examples.javacodegeeks.com\/?p=36844"},"modified":"2019-04-09T13:12:18","modified_gmt":"2019-04-09T10:12:18","slug":"vaadin-layouts-tutorial","status":"publish","type":"post","link":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/","title":{"rendered":"Vaadin Layouts Tutorial"},"content":{"rendered":"<p>When you need an Application to work with different screen sizes, or you don&#8217;t know the screen size of your application, UI frameworks provide layout managers facilities to help position components on the screen.<\/p>\n<p>The layout manager has the ability to automatic determine the position and size of the widgets on the screen. In most cases the layout manager is an invisible and important component that is in charge of other widgets.<\/p>\n<h2>1. The tools<\/h2>\n<ul>\n<li>Java JDK 8<\/li>\n<li>Latest Eclipse Mars<\/li>\n<li>Vaadin 7.6.5<\/li>\n<li>Tomcat Server 8<\/li>\n<\/ul>\n<h2>2. Introduction<\/h2>\n<p>Vaadin provides useful layout managers for all your needs. In this example we are going to show how to use these layout managers. In modern web applications you ofter need to use responsive design and its easy to make your application responsive with the Vaadin layout managers, to fit multiple screen sizes without too much worry on your side.<\/p>\n<ul>\n<li>Each Item has the same number of Properties.<\/li>\n<li>Each Item has an ID property.<\/li>\n<li>All Properties in different items must have the same data type.<\/li>\n<li>The Item ID of a container id unique and non-null.<\/li>\n<\/ul>\n<p>In this example I am going to show how to use a Vaadin Container.<\/p>\n<h2>3. Prerequisites<\/h2>\n<ul>\n<li>JDK installed<\/li>\n<li>Eclipse Mars installed and working<\/li>\n<li>Vaadin plug-in installed<\/li>\n<li>Tomcat 8 installed and running<\/li>\n<\/ul>\n<h2>4. Set up the project<\/h2>\n<p>In the file menu choose File -&gt; New -&gt; Other<\/p>\n<p><figure id=\"attachment_34378\" aria-describedby=\"caption-attachment-34378\" style=\"width: 646px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/01-New-Project-1.png\" rel=\"attachment wp-att-34378\"><img decoding=\"async\" class=\"size-full wp-image-34378\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/01-New-Project-1.png\" alt=\"01 New Project\" width=\"646\" height=\"422\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/01-New-Project-1.png 646w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/01-New-Project-1-300x196.png 300w\" sizes=\"(max-width: 646px) 100vw, 646px\" \/><\/a><figcaption id=\"caption-attachment-34378\" class=\"wp-caption-text\">01 New Project<\/figcaption><\/figure><\/p>\n<p>Now from the list choose Vaadin 7 project<\/p>\n<p><figure id=\"attachment_34379\" aria-describedby=\"caption-attachment-34379\" style=\"width: 524px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/02-Vaadin-Project-1.png\" rel=\"attachment wp-att-34379\"><img decoding=\"async\" class=\"size-full wp-image-34379\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/02-Vaadin-Project-1.png\" alt=\"02 Vaadin Project\" width=\"524\" height=\"499\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/02-Vaadin-Project-1.png 524w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/02\/02-Vaadin-Project-1-300x286.png 300w\" sizes=\"(max-width: 524px) 100vw, 524px\" \/><\/a><figcaption id=\"caption-attachment-34379\" class=\"wp-caption-text\">02 Vaadin Project<\/figcaption><\/figure><\/p>\n<p>Press next and name your project then press finish.<\/p>\n<h2>5. Coding the example<\/h2>\n<h3>5.1 The main layout<\/h3>\n<p><span style=\"text-decoration: underline;\"><em>Main layout<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tfinal GridLayout mainLayout = new GridLayout(3,2);\n\t\tmainLayout.setSpacing(true);\n\t\tmainLayout.setStyleName(\"black\");\n\t\tmainLayout.setWidth(\"90%\");\n\t\tmainLayout.setHeight(\"90%\");\n\t\tsetContent(mainLayout);\n<\/pre>\n<p>We need a layout to show different layouts types. We are going to use a grid layout to show the example, this is a <code>GridLayout<\/code> and we will get into it later.<\/p>\n<h3>5.2 Vertical Layout<\/h3>\n<p><figure id=\"attachment_36846\" aria-describedby=\"caption-attachment-36846\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/03-Vertical-Layout.png\"><img decoding=\"async\" class=\"size-full wp-image-36846\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/03-Vertical-Layout.png\" alt=\"03 Vertical Layout\" width=\"400\" height=\"500\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/03-Vertical-Layout.png 400w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/03-Vertical-Layout-240x300.png 240w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/a><figcaption id=\"caption-attachment-36846\" class=\"wp-caption-text\">03 Vertical Layout<\/figcaption><\/figure><\/p>\n<p>The <code>VerticalLayout<\/code>, lays out components vertically, each component in a different row.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Label grey<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tLabel lVerticalBlue = new Label(\"VerticalLayout\");\n\t\tlVerticalBlue.setSizeFull();\n\t\tlVerticalBlue.addStyleName(\"grey\");\n<\/pre>\n<p>Here we create a label and style it with a gray color.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Green Label<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tLabel lVerticalGreen = new Label(\"VerticalLayout\");\n\t\tlVerticalGreen.setSizeFull();\n\t\tlVerticalGreen.addStyleName(\"green\");\n<\/pre>\n<p>Here we create a label and style it with a green color.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Red Label<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tLabel lVerticalRed = new Label(\"VerticalLayout\");\n\t\tlVerticalRed.setSizeFull();\n\t\tlVerticalRed.addStyleName(\"red\");\n<\/pre>\n<p>Here we create a label and style it with a red color.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>VerticalLayout<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tVerticalLayout verticalLayout = new VerticalLayout();\n\t\tverticalLayout.setSpacing(true);\n\t\tverticalLayout.addComponent(lVerticalBlue);\n\t\tverticalLayout.addComponent(lVerticalGreen);\n\t\tverticalLayout.addComponent(lVerticalRed);\n<\/pre>\n<p>We create the <code>VerticalLayout<\/code>, then we set the space between widgets inside the layout to true, just for the example purpose and then we add the three labels created before to this layout. This layout has 100% default width and undefined height and it means that the layout it&#8217;s going to fill the parent container width and begin to lay out children controls vertically.<\/p>\n<h3>5.3 Horizontal Layout<\/h3>\n<p><figure id=\"attachment_36848\" aria-describedby=\"caption-attachment-36848\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/04-Horizontal-Layout.png\"><img decoding=\"async\" class=\"size-full wp-image-36848\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/04-Horizontal-Layout.png\" alt=\"04 Horizontal Layout\" width=\"500\" height=\"400\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/04-Horizontal-Layout.png 500w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/04-Horizontal-Layout-300x240.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><figcaption id=\"caption-attachment-36848\" class=\"wp-caption-text\">04 Horizontal Layout<\/figcaption><\/figure><\/p>\n<p><span style=\"text-decoration: underline;\"><em>Labels<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tLabel lHorizontalBlue = new Label(\"HorizontalLayout\");\n\t\tlHorizontalBlue.setSizeFull();\n\t\tlHorizontalBlue.addStyleName(\"grey\");\n\n\t\tLabel lHorizontalGreen = new Label(\"HorizontalLayout\");\n\t\tlHorizontalGreen.setSizeFull();\n\t\tlHorizontalGreen.addStyleName(\"green\");\n\n\t\tLabel lHorizontalRed = new Label(\"HorizontalLayout\");\n\t\tlHorizontalRed.setSizeFull();\n\t\tlHorizontalRed.addStyleName(\"red\");\n<\/pre>\n<p>Here we create some labels to show the layout.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<p><span style=\"text-decoration: underline;\"><em>HorizontalLayout<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tHorizontalLayout horizontalLayout = new HorizontalLayout();\n\t\thorizontalLayout.setSpacing(true);\n\t\thorizontalLayout.addComponent(lHorizontalBlue);\n\t\thorizontalLayout.addComponent(lHorizontalGreen);\n\t\thorizontalLayout.addComponent(lHorizontalRed);\n<\/pre>\n<p>First we create the layout, then we set the spacing to true and then we add the three labels into the layout. This is simple, you create the layout and then you add the components into it and the layout get in charge of all the details.&nbsp;<code>HorizontalLayout<\/code> has undefined width and height.<\/p>\n<h3>5.4 Grid Layout<\/h3>\n<p><figure id=\"attachment_36849\" aria-describedby=\"caption-attachment-36849\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/05-Grid-Layout.png\"><img decoding=\"async\" class=\"size-full wp-image-36849\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/05-Grid-Layout.png\" alt=\"05 Grid Layout\" width=\"500\" height=\"400\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/05-Grid-Layout.png 500w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/05-Grid-Layout-300x240.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><figcaption id=\"caption-attachment-36849\" class=\"wp-caption-text\">05 Grid Layout<\/figcaption><\/figure><\/p>\n<p><span style=\"text-decoration: underline;\"><em>GridLayout<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tButton bt00 = new Button(\"0,0\");\n\t\tButton bt01 = new Button(\"0,1\");\n\t\tButton bt10 = new Button(\"1,0\");\n\t\tButton bt11 = new Button(\"1,1\");\n\n\t\tGridLayout gridLayout = new GridLayout(2, 2);\n\t\tgridLayout.setSpacing(true);\n\t\tgridLayout.addComponent(bt00,0,0);\n\t\tgridLayout.addComponent(bt01,0,1);\n\t\tgridLayout.addComponent(bt10,1,0);\n\t\tgridLayout.addComponent(bt11,1,1);\n<\/pre>\n<p>Here we use buttons to show the layout. First we create the buttons and then we create the <code>GridLayout<\/code> with two columns and two rows, then we add the buttons to the layout beginning with the position <code>0,0<\/code> that is the upper left position of the layout.<\/p>\n<h3>5.5 Absolute Layout<\/h3>\n<p><figure id=\"attachment_36851\" aria-describedby=\"caption-attachment-36851\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/06-Absolute-Layout.png\"><img decoding=\"async\" class=\"size-full wp-image-36851\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/06-Absolute-Layout.png\" alt=\"06 Absolute Layout\" width=\"500\" height=\"400\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/06-Absolute-Layout.png 500w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/06-Absolute-Layout-300x240.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><figcaption id=\"caption-attachment-36851\" class=\"wp-caption-text\">06 Absolute Layout<\/figcaption><\/figure><\/p>\n<p><span style=\"text-decoration: underline;\"><em>Absolute Layout<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tAbsoluteLayout absoluteLayout = new AbsoluteLayout();\n\t\tabsoluteLayout.setWidth(\"200px\");\n\t\tabsoluteLayout.setHeight(\"200px\");\n\t\tabsoluteLayout.setStyleName(\"grey\");\n\t\tLabel l50 = new Label(\"Absolute x=10\/y=10\");\n\t\tl50.setStyleName(\"green\");\n\t\tabsoluteLayout.addComponent(l50, \"left: 10px; top: 10px;\");\n<\/pre>\n<p>In the absolute layout we put all children components with absolute coordinates which are specified by a CSS absolute position string, using the left, right, top, bottom, and z-index. Z-index is used when you want overlapping components and this index tells the layout manager what component is showed over each other. The left, right, top and bottom indicates the relative border where you want to position the component and the coordinates in units or proportional coordinates if you want. In this case we create an absolute layout of 200 pixels width and 200 pixels height, fill the background of the layout with a gray color and then put a label <code>l50<\/code> ten pixels from the top and ten pixels from the left side of the layout.<\/p>\n<h3>5.6 CSS Layout<\/h3>\n<p><figure id=\"attachment_36852\" aria-describedby=\"caption-attachment-36852\" style=\"width: 593px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/07-CSS-Layout.png\"><img decoding=\"async\" class=\"size-full wp-image-36852\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/07-CSS-Layout.png\" alt=\"07 CSS Layout\" width=\"593\" height=\"147\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/07-CSS-Layout.png 593w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/07-CSS-Layout-300x74.png 300w\" sizes=\"(max-width: 593px) 100vw, 593px\" \/><\/a><figcaption id=\"caption-attachment-36852\" class=\"wp-caption-text\">07 CSS Layout<\/figcaption><\/figure><\/p>\n<p><span style=\"text-decoration: underline;\"><em>CSS Layout<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tCssLayout cssLayout = new CssLayout();\n\t\tLabel lCssGrey = new Label(\"Css Layout\");\n\t\tlCssGrey.addStyleName(\"grey\");\n\t\tLabel lCssGreen = new Label(\"Css Layout\");\n\t\tlCssGreen.addStyleName(\"green\");\n\t\tLabel lCssRed = new Label(\"Css Layout\");\n\t\tlCssRed.addStyleName(\"red\");\n\t\tcssLayout.addComponent(lCssRed);\n\t\tcssLayout.addComponent(lCssGrey);\n\t\tcssLayout.addComponent(lCssGreen);\n<\/pre>\n<p>This is the fastest and customizable layout because Vaadin put all components contained in this layout inside an HTML.&nbsp;<code>div<\/code> is fully customizable through CSS and by default it puts the components laid out horizontally and wrap at the end of the container. We create some labels and the add it to the layout.<\/p>\n<h3>5.7 Custom Layout<\/h3>\n<p><span style=\"text-decoration: underline;\"><em>Custom Layout<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tLabel lCustomGrey = new Label(\"Custom Layout\");\n\t\tlCustomGrey.addStyleName(\"grey\");\n\t\tLabel lCustomGreen = new Label(\"Custom Layout\");\n\t\tlCustomGreen.addStyleName(\"green\");\n\t\tLabel lCustomRed = new Label(\"Custom Layout\");\n\t\tlCustomRed.addStyleName(\"red\");\n\t\tCustomLayout customLayout = new CustomLayout(\"customlayout\");\n\t\tcustomLayout.addComponent(lCustomRed, \"redloc\");\n\t\tcustomLayout.addComponent(lCustomGreen, \"greenloc\");\n\t\tcustomLayout.addComponent(lCustomGrey, \"greyloc\");\n<\/pre>\n<p><span style=\"text-decoration: underline;\"><em>customLayout.html<\/em><\/span><\/p>\n<pre class=\"brush:xml\">&lt;table width=\"100%\" height=\"100%\"&gt;\n\t&lt;tr&gt;\n\t\t&lt;td&gt;&lt;div location=\"redloc\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n\t&lt;\/tr&gt;\n\t&lt;tr&gt;\n\t\t&lt;td&gt;&lt;div location=\"greenloc\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n\t&lt;\/tr&gt;\n\t&lt;tr&gt;\n\t\t&lt;td&gt;&lt;div location=\"greyloc\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n\t&lt;\/tr&gt;\n&lt;\/table&gt;\n<\/pre>\n<p>With the CustomLayout you use an HTML template to layout the components. You need to create the template into a fixed location in the project, in the folder <code>VAADIN\/themes\/vaadinlayouts\/layout<\/code> as shown in the image:<\/p>\n<p><figure id=\"attachment_36853\" aria-describedby=\"caption-attachment-36853\" style=\"width: 339px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/08-CustomLayout-location.png\"><img decoding=\"async\" class=\"size-full wp-image-36853\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/08-CustomLayout-location.png\" alt=\"08 CustomLayout location\" width=\"339\" height=\"518\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/08-CustomLayout-location.png 339w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/08-CustomLayout-location-196x300.png 196w\" sizes=\"(max-width: 339px) 100vw, 339px\" \/><\/a><figcaption id=\"caption-attachment-36853\" class=\"wp-caption-text\">08 CustomLayout location<\/figcaption><\/figure>[ulp id=&#8217;YBvYYzEYBUrADqmI&#8217;]<\/p>\n<p>In the HTML template you define the placeholders with the attribute <code>location<\/code> in the HTML tag that you want to put the component, and then when you add the component to the container <code>customLayout.addComponent(lCustomRed, \"redloc\");<\/code> you need to specify the location tag where you want to put the component.<\/p>\n<h3>5.8 Add the layouts to the main layout<\/h3>\n<p><span style=\"text-decoration: underline;\"><em>Add layouts<\/em><\/span><\/p>\n<pre class=\"brush:java\">\t\tmainLayout.addComponent(verticalLayout, 0, 0);\n\t\tmainLayout.addComponent(horizontalLayout, 1, 0);\n\t\tmainLayout.addComponent(gridLayout, 2, 0);\n\t\tmainLayout.addComponent(absoluteLayout, 0, 1);\n\t\tmainLayout.addComponent(cssLayout, 1, 1);\n\t\tmainLayout.addComponent(customLayout, 2, 1);\n<\/pre>\n<p>We add all the layouts created to the main layout that is a <code>GridLayout<\/code> and as you can see is possible to stack the layouts in a hierarchical fashion to build your dream UI but be careful of the overhead because it is always better to keep things simple.<\/p>\n<h3>5.9 The styles<\/h3>\n<p>The style used in the labels are defined in the file <code>VAADIN\/themes\/vaadinlayouts\/vaadinlayouts.scss<\/code> and we will only change the color of the text and the background color of the labels for our tutorial purpose.<\/p>\n<h2>6. The complete source code<\/h2>\n<p><span style=\"text-decoration: underline;\"><em>vaadinlayouts.scss<\/em><\/span><\/p>\n<pre class=\"brush:java\">@import \"..\/valo\/valo.scss\";\n\n@mixin vaadinlayouts {\n  @include valo;\n\n.black {\n\tcolor: white;\n\tbackground: #3A3A38;\n}\n\n.grey {\n\tcolor: white;\n\tbackground: #808069;\n}\n\n.green {\n\tcolor: white;\n    background: #79973F;\n}\n.red {\n\tcolor: white;\n    background: #C67171;\n}\n}\n<\/pre>\n<p><span style=\"text-decoration: underline;\"><em>customLayout.html<\/em><\/span><\/p>\n<pre class=\"brush:xml\">&lt;table width=\"100%\" height=\"100%\"&gt;\n\t&lt;tr&gt;\n\t\t&lt;td&gt;&lt;div location=\"redloc\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n\t&lt;\/tr&gt;\n\t&lt;tr&gt;\n\t\t&lt;td&gt;&lt;div location=\"greenloc\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n\t&lt;\/tr&gt;\n\t&lt;tr&gt;\n\t\t&lt;td&gt;&lt;div location=\"greyloc\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n\t&lt;\/tr&gt;\n&lt;\/table&gt;\n<\/pre>\n<p><span style=\"text-decoration: underline;\"><em>VaadinLayoutsUI.java<\/em><\/span><\/p>\n<pre class=\"brush:java\">package com.example.vaadinlayouts;\n\nimport javax.servlet.annotation.WebServlet;\n\nimport com.vaadin.annotations.Theme;\nimport com.vaadin.annotations.VaadinServletConfiguration;\nimport com.vaadin.server.VaadinRequest;\nimport com.vaadin.server.VaadinServlet;\nimport com.vaadin.ui.AbsoluteLayout;\nimport com.vaadin.ui.Button;\nimport com.vaadin.ui.CssLayout;\nimport com.vaadin.ui.CustomLayout;\nimport com.vaadin.ui.GridLayout;\nimport com.vaadin.ui.HorizontalLayout;\nimport com.vaadin.ui.Label;\nimport com.vaadin.ui.UI;\nimport com.vaadin.ui.VerticalLayout;\n\n@SuppressWarnings(\"serial\")\n@Theme(\"vaadinlayouts\")\npublic class VaadinlayoutsUI extends UI {\n\n\t@WebServlet(value = \"\/*\", asyncSupported = true)\n\t@VaadinServletConfiguration(productionMode = false, ui = VaadinlayoutsUI.class, widgetset = \"com.example.vaadinlayouts.widgetset.VaadinlayoutsWidgetset\")\n\tpublic static class Servlet extends VaadinServlet {\n\t}\n\n\t@Override\n\tprotected void init(VaadinRequest request) {\n\t\tfinal GridLayout mainLayout = new GridLayout(3,2);\n\t\tmainLayout.setSpacing(true);\n\t\tmainLayout.setStyleName(\"black\");\n\t\tmainLayout.setWidth(\"90%\");\n\t\tmainLayout.setHeight(\"90%\");\n\t\tsetContent(mainLayout);\n\n\t\tLabel lVerticalBlue = new Label(\"VerticalLayout\");\n\t\tlVerticalBlue.setSizeFull();\n\t\tlVerticalBlue.addStyleName(\"grey\");\n\n\t\tLabel lVerticalGreen = new Label(\"VerticalLayout\");\n\t\tlVerticalGreen.setSizeFull();\n\t\tlVerticalGreen.addStyleName(\"green\");\n\n\t\tLabel lVerticalRed = new Label(\"VerticalLayout\");\n\t\tlVerticalRed.setSizeFull();\n\t\tlVerticalRed.addStyleName(\"red\");\n\n\t\tVerticalLayout verticalLayout = new VerticalLayout();\n\t\tverticalLayout.setSpacing(true);\n\t\tverticalLayout.addComponent(lVerticalBlue);\n\t\tverticalLayout.addComponent(lVerticalGreen);\n\t\tverticalLayout.addComponent(lVerticalRed);\n\n\n\t\tLabel lHorizontalBlue = new Label(\"HorizontalLayout\");\n\t\tlHorizontalBlue.setSizeFull();\n\t\tlHorizontalBlue.addStyleName(\"grey\");\n\n\t\tLabel lHorizontalGreen = new Label(\"HorizontalLayout\");\n\t\tlHorizontalGreen.setSizeFull();\n\t\tlHorizontalGreen.addStyleName(\"green\");\n\n\t\tLabel lHorizontalRed = new Label(\"HorizontalLayout\");\n\t\tlHorizontalRed.setSizeFull();\n\t\tlHorizontalRed.addStyleName(\"red\");\n\n\t\tHorizontalLayout horizontalLayout = new HorizontalLayout();\n\t\thorizontalLayout.setSpacing(true);\n\t\thorizontalLayout.addComponent(lHorizontalBlue);\n\t\thorizontalLayout.addComponent(lHorizontalGreen);\n\t\thorizontalLayout.addComponent(lHorizontalRed);\n\n\t\tButton bt00 = new Button(\"0,0\");\n\t\tButton bt01 = new Button(\"0,1\");\n\t\tButton bt10 = new Button(\"1,0\");\n\t\tButton bt11 = new Button(\"1,1\");\n\n\t\tGridLayout gridLayout = new GridLayout(2, 2);\n\t\tgridLayout.setSpacing(true);\n\t\tgridLayout.addComponent(bt00,0,0);\n\t\tgridLayout.addComponent(bt01,0,1);\n\t\tgridLayout.addComponent(bt10,1,0);\n\t\tgridLayout.addComponent(bt11,1,1);\n\n\n\t\tAbsoluteLayout absoluteLayout = new AbsoluteLayout();\n\t\tabsoluteLayout.setWidth(\"200px\");\n\t\tabsoluteLayout.setHeight(\"200px\");\n\t\tabsoluteLayout.setStyleName(\"grey\");\n\t\tLabel l50 = new Label(\"Absolute x=10\/y=10\");\n\t\tl50.setStyleName(\"green\");\n\t\tabsoluteLayout.addComponent(l50, \"left: 10px; top: 10px;\");\n\n\t\tCssLayout cssLayout = new CssLayout();\n\t\tLabel lCssGrey = new Label(\"Css Layout\");\n\t\tlCssGrey.addStyleName(\"grey\");\n\t\tLabel lCssGreen = new Label(\"Css Layout\");\n\t\tlCssGreen.addStyleName(\"green\");\n\t\tLabel lCssRed = new Label(\"Css Layout\");\n\t\tlCssRed.addStyleName(\"red\");\n\t\tcssLayout.addComponent(lCssRed);\n\t\tcssLayout.addComponent(lCssGrey);\n\t\tcssLayout.addComponent(lCssGreen);\n\n\t\tLabel lCustomGrey = new Label(\"Custom Layout\");\n\t\tlCustomGrey.addStyleName(\"grey\");\n\t\tLabel lCustomGreen = new Label(\"Custom Layout\");\n\t\tlCustomGreen.addStyleName(\"green\");\n\t\tLabel lCustomRed = new Label(\"Custom Layout\");\n\t\tlCustomRed.addStyleName(\"red\");\n\t\tCustomLayout customLayout = new CustomLayout(\"customlayout\");\n\t\tcustomLayout.addComponent(lCustomRed, \"redloc\");\n\t\tcustomLayout.addComponent(lCustomGreen, \"greenloc\");\n\t\tcustomLayout.addComponent(lCustomGrey, \"greyloc\");\n\n\n\t\tmainLayout.addComponent(verticalLayout, 0, 0);\n\t\tmainLayout.addComponent(horizontalLayout, 1, 0);\n\t\tmainLayout.addComponent(gridLayout, 2, 0);\n\t\tmainLayout.addComponent(absoluteLayout, 0, 1);\n\t\tmainLayout.addComponent(cssLayout, 1, 1);\n\t\tmainLayout.addComponent(customLayout, 2, 1);\n\n\t}\n\n}\n<\/pre>\n<h2>7. Running the example<\/h2>\n<p>Right click on the project folder and choose Run as -&gt; Run on server choose Tomcat 8 server and hit finish.<\/p>\n<h2>8. Results<\/h2>\n<p>As you can see in the image below &nbsp;we have all the layouts we created in action in a single application:<\/p>\n<p><figure id=\"attachment_36854\" aria-describedby=\"caption-attachment-36854\" style=\"width: 781px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/09-results.png\"><img decoding=\"async\" class=\"size-full wp-image-36854\" src=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/09-results.png\" alt=\"09 results\" width=\"781\" height=\"456\" srcset=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/09-results.png 781w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/09-results-300x175.png 300w, https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/09-results-768x448.png 768w\" sizes=\"(max-width: 781px) 100vw, 781px\" \/><\/a><figcaption id=\"caption-attachment-36854\" class=\"wp-caption-text\">09 results<\/figcaption><\/figure><\/p>\n<p><code>VerticalLayout<\/code> is on the top left of the image.<br \/>\n<code>HorizontalLayout<\/code> is on the top center of the image.<br \/>\n<code>GridLayout<\/code> is on the top right of the image.<br \/>\n<code>AbsoluteLayout<\/code> is on the bottom left of the image.<br \/>\n<code>CssLayout<\/code> is on the bottom center of the image.<br \/>\n<code>CustomLayout<\/code> is on the bottom right of the image.<\/p>\n<h2>9. Download the Source Code<\/h2>\n<p>This was an example of Vaadin Layouts.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the Eclipse project here:&nbsp;<strong><a href=\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/05\/VaadinLayouts.zip\">VaadinLayouts<\/a><br \/>\n<\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When you need an Application to work with different screen sizes, or you don&#8217;t know the screen size of your application, UI frameworks provide layout managers facilities to help position components on the screen. The layout manager has the ability to automatic determine the position and size of the widgets on the screen. In most &hellip;<\/p>\n","protected":false},"author":77,"featured_media":33079,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1358],"tags":[],"class_list":["post-36844","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vaadin"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vaadin Layouts Tutorial - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"When you need an Application to work with different screen sizes, or you don&#039;t know the screen size of your application, UI frameworks provide layout\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vaadin Layouts Tutorial - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"When you need an Application to work with different screen sizes, or you don&#039;t know the screen size of your application, UI frameworks provide layout\" \/>\n<meta property=\"og:url\" content=\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Examples Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-03T12:00:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-09T10:12:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jesus Boadas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@jboadas\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jesus Boadas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/\"},\"author\":{\"name\":\"Jesus Boadas\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/506f9c2b38156c7f94bba77757206dd7\"},\"headline\":\"Vaadin Layouts Tutorial\",\"datePublished\":\"2016-05-03T12:00:52+00:00\",\"dateModified\":\"2019-04-09T10:12:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/\"},\"wordCount\":1084,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg\",\"articleSection\":[\"Vaadin\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/\",\"url\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/\",\"name\":\"Vaadin Layouts Tutorial - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg\",\"datePublished\":\"2016-05-03T12:00:52+00:00\",\"dateModified\":\"2019-04-09T10:12:18+00:00\",\"description\":\"When you need an Application to work with different screen sizes, or you don't know the screen size of your application, UI frameworks provide layout\",\"breadcrumb\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#primaryimage\",\"url\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg\",\"contentUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/examples.javacodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Java Development\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/java-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Enterprise Java\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/java-development\/enterprise-java\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Vaadin\",\"item\":\"https:\/\/examples.javacodegeeks.com\/category\/java-development\/enterprise-java\/vaadin\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Vaadin Layouts Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#website\",\"url\":\"https:\/\/examples.javacodegeeks.com\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Examples and Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/examples.javacodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/examples.javacodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/javacodegeeks\",\"https:\/\/x.com\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/506f9c2b38156c7f94bba77757206dd7\",\"name\":\"Jesus Boadas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/10\/Jesus-Boadas_avatar_1476120926-96x96.jpg\",\"contentUrl\":\"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/10\/Jesus-Boadas_avatar_1476120926-96x96.jpg\",\"caption\":\"Jesus Boadas\"},\"description\":\"I'm a self taught programmer, I began programming back in 1991 using an IBM A10 mainframe with Pascal an Assembler IBM 360\/70 emulator and Turbo C on a X86 PC, since that I work for the banking industry with emerging technologies like Fox Pro, Visual Fox Pro, Visual Basic, Visual C++, Borland C++, lately I moved out to the Airline industry, leading designing and programming in-house web applications with Flex, Actionscript, PHP, Python and Rails and in the last 7 years I focused all my work in Java, working on Linux servers using GlassFish, TomCat, Apache and MySql.\",\"sameAs\":[\"http:\/\/www.javacodegeeks.com\/\",\"https:\/\/ve.linkedin.com\/in\/jesus-boadas\",\"https:\/\/x.com\/jboadas\"],\"url\":\"https:\/\/examples.javacodegeeks.com\/author\/jesus-boadas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vaadin Layouts Tutorial - Java Code Geeks","description":"When you need an Application to work with different screen sizes, or you don't know the screen size of your application, UI frameworks provide layout","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Vaadin Layouts Tutorial - Java Code Geeks","og_description":"When you need an Application to work with different screen sizes, or you don't know the screen size of your application, UI frameworks provide layout","og_url":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/","og_site_name":"Examples Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2016-05-03T12:00:52+00:00","article_modified_time":"2019-04-09T10:12:18+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg","type":"image\/jpeg"}],"author":"Jesus Boadas","twitter_card":"summary_large_image","twitter_creator":"@jboadas","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Jesus Boadas","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#article","isPartOf":{"@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/"},"author":{"name":"Jesus Boadas","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/506f9c2b38156c7f94bba77757206dd7"},"headline":"Vaadin Layouts Tutorial","datePublished":"2016-05-03T12:00:52+00:00","dateModified":"2019-04-09T10:12:18+00:00","mainEntityOfPage":{"@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/"},"wordCount":1084,"commentCount":0,"publisher":{"@id":"https:\/\/examples.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg","articleSection":["Vaadin"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/","url":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/","name":"Vaadin Layouts Tutorial - Java Code Geeks","isPartOf":{"@id":"https:\/\/examples.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg","datePublished":"2016-05-03T12:00:52+00:00","dateModified":"2019-04-09T10:12:18+00:00","description":"When you need an Application to work with different screen sizes, or you don't know the screen size of your application, UI frameworks provide layout","breadcrumb":{"@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#primaryimage","url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg","contentUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/01\/vaadin-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/examples.javacodegeeks.com\/java-development\/enterprise-java\/vaadin\/vaadin-layouts-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/examples.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Java Development","item":"https:\/\/examples.javacodegeeks.com\/category\/java-development\/"},{"@type":"ListItem","position":3,"name":"Enterprise Java","item":"https:\/\/examples.javacodegeeks.com\/category\/java-development\/enterprise-java\/"},{"@type":"ListItem","position":4,"name":"Vaadin","item":"https:\/\/examples.javacodegeeks.com\/category\/java-development\/enterprise-java\/vaadin\/"},{"@type":"ListItem","position":5,"name":"Vaadin Layouts Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/examples.javacodegeeks.com\/#website","url":"https:\/\/examples.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Examples and Code Snippets","publisher":{"@id":"https:\/\/examples.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/examples.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/examples.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/examples.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/506f9c2b38156c7f94bba77757206dd7","name":"Jesus Boadas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/examples.javacodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/10\/Jesus-Boadas_avatar_1476120926-96x96.jpg","contentUrl":"https:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2016\/10\/Jesus-Boadas_avatar_1476120926-96x96.jpg","caption":"Jesus Boadas"},"description":"I'm a self taught programmer, I began programming back in 1991 using an IBM A10 mainframe with Pascal an Assembler IBM 360\/70 emulator and Turbo C on a X86 PC, since that I work for the banking industry with emerging technologies like Fox Pro, Visual Fox Pro, Visual Basic, Visual C++, Borland C++, lately I moved out to the Airline industry, leading designing and programming in-house web applications with Flex, Actionscript, PHP, Python and Rails and in the last 7 years I focused all my work in Java, working on Linux servers using GlassFish, TomCat, Apache and MySql.","sameAs":["http:\/\/www.javacodegeeks.com\/","https:\/\/ve.linkedin.com\/in\/jesus-boadas","https:\/\/x.com\/jboadas"],"url":"https:\/\/examples.javacodegeeks.com\/author\/jesus-boadas\/"}]}},"_links":{"self":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/36844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=36844"}],"version-history":[{"count":0,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/36844\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/media\/33079"}],"wp:attachment":[{"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=36844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=36844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/examples.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=36844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}