/*
 * Copyright 2000-2016 Vaadin Ltd.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

package com.vaadin.annotations;

import java.lang.annotation.ElementType;
import java.lang.annotation.Inherited;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

import com.vaadin.ui.UI;

/**
 * Defines a specific widgetset for a {@link UI}.
 */
@Retention(RetentionPolicy.RUNTIME)
@Target(ElementType.TYPE)
@Inherited
public @interface Widgetset {
    /**
     * @return name of the widgetset
     */
    public String value();

}
 value='7.7'>7.7</option>
<option value='7.7.45-changelog'>7.7.45-changelog</option>
<option value='8.0'>8.0</option>
<option value='8.1'>8.1</option>
<option value='8.10'>8.10</option>
<option value='8.11'>8.11</option>
<option value='8.12'>8.12</option>
<option value='8.13'>8.13</option>
<option value='8.14'>8.14</option>
<option value='8.2'>8.2</option>
<option value='8.3'>8.3</option>
<option value='8.4'>8.4</option>
<option value='8.5'>8.5</option>
<option value='8.6'>8.6</option>
<option value='8.7'>8.7</option>
<option value='8.8'>8.8</option>
<option value='8.9'>8.9</option>
<option value='JS-RPC-docs-link-syntax' selected='selected'>JS-RPC-docs-link-syntax</option>
<option value='OlliTietavainenVaadin-patch-1'>OlliTietavainenVaadin-patch-1</option>
<option value='OlliTietavainenVaadin-patch-2'>OlliTietavainenVaadin-patch-2</option>
<option value='add-deprecation-warning-20241105'>add-deprecation-warning-20241105</option>
<option value='changelog-7.7.47-changes'>changelog-7.7.47-changes</option>
<option value='changelog-8.27.1'>changelog-8.27.1</option>
<option value='changelog-8.27.2'>changelog-8.27.2</option>
<option value='changelog-8.27.3'>changelog-8.27.3</option>
<option value='changelog-8.27.4'>changelog-8.27.4</option>
<option value='changelog-8.27.6'>changelog-8.27.6</option>
<option value='changelog-8.28.1'>changelog-8.28.1</option>
<option value='chore-mention-8.14.4'>chore-mention-8.14.4</option>
<option value='chore-readme-8-14-4'>chore-readme-8-14-4</option>
<option value='context-menu'>context-menu</option>
<option value='datefield-set-invalid-value'>datefield-set-invalid-value</option>
<option value='declarative'>declarative</option>
<option value='dependabot/maven/org.eclipse.jetty-jetty-server-10.0.14'>dependabot/maven/org.eclipse.jetty-jetty-server-10.0.14</option>
<option value='dependabot/maven/org.eclipse.jetty-jetty-webapp-9.4.44.v20210927'>dependabot/maven/org.eclipse.jetty-jetty-webapp-9.4.44.v20210927</option>
<option value='dependabot/maven/org.eclipse.jgit-org.eclipse.jgit-3.5.3.201412180710-r'>dependabot/maven/org.eclipse.jgit-org.eclipse.jgit-3.5.3.201412180710-r</option>
<option value='dependabot/maven/org.eclipse.jgit-org.eclipse.jgit-7.2.1.202505142326-r'>dependabot/maven/org.eclipse.jgit-org.eclipse.jgit-7.2.1.202505142326-r</option>
<option value='dependabot/maven/org.hsqldb-hsqldb-2.7.1'>dependabot/maven/org.hsqldb-hsqldb-2.7.1</option>
<option value='documentation'>documentation</option>
<option value='documentation-7.6'>documentation-7.6</option>
<option value='downgrade-snapshot-version-20241105'>downgrade-snapshot-version-20241105</option>
<option value='exclude-element-screenshot'>exclude-element-screenshot</option>
<option value='feature/atmosphere-pure-javascript'>feature/atmosphere-pure-javascript</option>
<option value='feature/bootstrap-annotation'>feature/bootstrap-annotation</option>
<option value='feature/combobox-communication'>feature/combobox-communication</option>
<option value='feature/dalvik'>feature/dalvik</option>
<option value='feature/databinding'>feature/databinding</option>
<option value='feature/dnd'>feature/dnd</option>
<option value='feature/elements'>feature/elements</option>
<option value='feature/eventbus'>feature/eventbus</option>
<option value='feature/karaf-feature-file'>feature/karaf-feature-file</option>
<option value='feature/nullrepresentation'>feature/nullrepresentation</option>
<option value='feature/standard-gwt'>feature/standard-gwt</option>
<option value='feature/standard-sass'>feature/standard-sass</option>
<option value='feature/vaadin8'>feature/vaadin8</option>
<option value='feature/vaadin8-book'>feature/vaadin8-book</option>
<option value='feature/vaadin8-book-vol2'>feature/vaadin8-book-vol2</option>
<option value='feature/vaadin8-sass-valo-only'>feature/vaadin8-sass-valo-only</option>
<option value='fileToFilesReplacement'>fileToFilesReplacement</option>
<option value='fix11576'>fix11576</option>
<option value='fix_event_router_prototype'>fix_event_router_prototype</option>
<option value='grid'>grid</option>
<option value='grid_dnd_autoscroller'>grid_dnd_autoscroller</option>
<option value='grid_dragger'>grid_dragger</option>
<option value='issue/8307_select_using_collection'>issue/8307_select_using_collection</option>
<option value='master'>master</option>
<option value='mobile_drag_image_offset'>mobile_drag_image_offset</option>
<option value='pr/11306'>pr/11306</option>
<option value='remote-run/flow-atmosphere-test'>remote-run/flow-atmosphere-test</option>
<option value='snapshot/7.5'>snapshot/7.5</option>
<option value='snapshot/7.6'>snapshot/7.6</option>
<option value='tmattsso-patch-1'>tmattsso-patch-1</option>
<option value='update-minor-deps'>update-minor-deps</option>
<option value='vaadin-icons-3.0.1'>vaadin-icons-3.0.1</option>
<option value='wip-date-time-datatype'>wip-date-time-datatype</option>
<option value='wip-java-10-compat'>wip-java-10-compat</option>
</select> <input type='submit' value='switch'/></form></td></tr>
<tr><td class='sub'>Vaadin 6, 7, 8 is a Java framework for modern Java web applications: https://github.com/vaadin/framework</td><td class='sub right'>www-data</td></tr></table>
<table class='tabs'><tr><td>
<a href='/vaadin-framework.git/about/?h=JS-RPC-docs-link-syntax'>about</a><a href='/vaadin-framework.git/?h=JS-RPC-docs-link-syntax'>summary</a><a href='/vaadin-framework.git/refs/?h=JS-RPC-docs-link-syntax&amp;id=624a9594b55f0b35e75b9aefd80a97049bc51eed'>refs</a><a href='/vaadin-framework.git/log/documentation/layout/layout-overview.asciidoc?h=JS-RPC-docs-link-syntax'>log</a><a class='active' href='/vaadin-framework.git/tree/documentation/layout/layout-overview.asciidoc?h=JS-RPC-docs-link-syntax&amp;id=624a9594b55f0b35e75b9aefd80a97049bc51eed'>tree</a><a href='/vaadin-framework.git/commit/documentation/layout/layout-overview.asciidoc?h=JS-RPC-docs-link-syntax&amp;id=624a9594b55f0b35e75b9aefd80a97049bc51eed'>commit</a><a href='/vaadin-framework.git/diff/documentation/layout/layout-overview.asciidoc?h=JS-RPC-docs-link-syntax&amp;id=624a9594b55f0b35e75b9aefd80a97049bc51eed'>diff</a><a href='/vaadin-framework.git/stats/documentation/layout/layout-overview.asciidoc?h=JS-RPC-docs-link-syntax'>stats</a></td><td class='form'><form class='right' method='get' action='/vaadin-framework.git/log/documentation/layout/layout-overview.asciidoc'>
<input type='hidden' name='h' value='JS-RPC-docs-link-syntax'/><input type='hidden' name='id' value='624a9594b55f0b35e75b9aefd80a97049bc51eed'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/vaadin-framework.git/tree/?h=JS-RPC-docs-link-syntax&amp;id=624a9594b55f0b35e75b9aefd80a97049bc51eed'>root</a>/<a href='/vaadin-framework.git/tree/documentation?h=JS-RPC-docs-link-syntax&amp;id=624a9594b55f0b35e75b9aefd80a97049bc51eed'>documentation</a>/<a href='/vaadin-framework.git/tree/documentation/layout?h=JS-RPC-docs-link-syntax&amp;id=624a9594b55f0b35e75b9aefd80a97049bc51eed'>layout</a>/<a href='/vaadin-framework.git/tree/documentation/layout/layout-overview.asciidoc?h=JS-RPC-docs-link-syntax&amp;id=624a9594b55f0b35e75b9aefd80a97049bc51eed'>layout-overview.asciidoc</a></div><div class='content'>blob: 9e6a58a836d0a24268295d4d7eb577f60f4340ff (<a href='/vaadin-framework.git/plain/documentation/layout/layout-overview.asciidoc?h=JS-RPC-docs-link-syntax&amp;id=624a9594b55f0b35e75b9aefd80a97049bc51eed'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
<a id='n28' href='#n28'>28</a>
<a id='n29' href='#n29'>29</a>
<a id='n30' href='#n30'>30</a>
<a id='n31' href='#n31'>31</a>
<a id='n32' href='#n32'>32</a>
<a id='n33' href='#n33'>33</a>
<a id='n34' href='#n34'>34</a>
<a id='n35' href='#n35'>35</a>
<a id='n36' href='#n36'>36</a>
<a id='n37' href='#n37'>37</a>
<a id='n38' href='#n38'>38</a>
<a id='n39' href='#n39'>39</a>
<a id='n40' href='#n40'>40</a>
<a id='n41' href='#n41'>41</a>
<a id='n42' href='#n42'>42</a>
<a id='n43' href='#n43'>43</a>
<a id='n44' href='#n44'>44</a>
<a id='n45' href='#n45'>45</a>
<a id='n46' href='#n46'>46</a>
<a id='n47' href='#n47'>47</a>
<a id='n48' href='#n48'>48</a>
<a id='n49' href='#n49'>49</a>
<a id='n50' href='#n50'>50</a>
<a id='n51' href='#n51'>51</a>
<a id='n52' href='#n52'>52</a>
<a id='n53' href='#n53'>53</a>
<a id='n54' href='#n54'>54</a>
<a id='n55' href='#n55'>55</a>
<a id='n56' href='#n56'>56</a>
<a id='n57' href='#n57'>57</a>
<a id='n58' href='#n58'>58</a>
<a id='n59' href='#n59'>59</a>
<a id='n60' href='#n60'>60</a>
<a id='n61' href='#n61'>61</a>
<a id='n62' href='#n62'>62</a>
<a id='n63' href='#n63'>63</a>
<a id='n64' href='#n64'>64</a>
<a id='n65' href='#n65'>65</a>
<a id='n66' href='#n66'>66</a>
<a id='n67' href='#n67'>67</a>
<a id='n68' href='#n68'>68</a>
<a id='n69' href='#n69'>69</a>
<a id='n70' href='#n70'>70</a>
<a id='n71' href='#n71'>71</a>
<a id='n72' href='#n72'>72</a>
<a id='n73' href='#n73'>73</a>
<a id='n74' href='#n74'>74</a>
<a id='n75' href='#n75'>75</a>
<a id='n76' href='#n76'>76</a>
<a id='n77' href='#n77'>77</a>
<a id='n78' href='#n78'>78</a>
</pre></td>
<td class='lines'><pre><code><style>pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span>---
title: Overview
order: 1
layout: page
---

[[layout.overview]]
= Overview

The user interface components in Vaadin can roughly be divided in two groups:
components that the user can interact with and layout components for placing the
other components to specific places in the user interface.
The layout components are identical in their purpose to layout managers in regular desktop frameworks for Java.
You can use plain Java to accomplish sophisticated component layouts.

[[figure.layout.intro.simple]]
.Layout example
image::img/layout-intro-example-1.png[width=75%, scaledwidth=100%]

You start by creating a content layout for the UI and then add other layout
components hierarchically, and finally the interaction components as the leaves
of the component tree.

[[figure.layout.intro.schematic]]
.Layout schematic
image::img/layout-schematic.png[width=100%, scaledwidth=100%]

Let us look at building a bit simplified version of the layout in &lt;&lt;figure.layout.intro.simple&gt;&gt;:

[source, java]
----
// Set the root layout for the UI
VerticalLayout content = new VerticalLayout();
setContent(content);

HorizontalLayout titleBar = new HorizontalLayout();
titleBar.setWidth(&quot;100%&quot;);
root.addComponent(titleBar);

Label title = new Label(&quot;The Ultimate Cat Finder&quot;);
titleBar.addComponent(title);
titleBar.setExpandRatio(title, 1.0f); // Expand

Label titleComment = new Label(&quot;for Vaadin&quot;);
titleComment.setSizeUndefined(); // Take minimum space
titleBar.addComponent(titleComment);

... build rest of the layout ...
----

Or in the declarative format (roughly):

[source, html]
----
&lt;vaadin-vertical-layout&gt;
  &lt;vaadin-label&gt;The Ultimate Cat Finder&lt;/vaadin-label&gt;

  &lt;vaadin-horizontal-layout&gt;
    &lt;vaadin-radio-button-group caption=&quot;Possible Places&quot;/&gt;
    &lt;vaadin-panel/&gt;
    ...
  &lt;/vaadin-horizontal-layout&gt;
&lt;/vaadin-vertical-layout&gt;
----

You will usually need to tune the layout components a bit by setting sizes,
expansion ratios, alignments, spacings, and so on. The general settings are
described in
&lt;&lt;dummy/../../../framework/layout/layout-settings#layout.settings,&quot;Layout
Formatting&quot;&gt;&gt;.

Layouts are coupled with themes that specify various layout features, such as
backgrounds, borders, text alignment, and so on. Definition and use of themes is
described in
&lt;&lt;dummy/../../../framework/themes/themes-overview.asciidoc#themes.overview,&quot;Themes&quot;&gt;&gt;.

You can see a finished version of the above example in
&lt;&lt;figure.layout.intro.simple&gt;&gt;.
</pre></div>
</code></pre></td></tr></table>
</div> <!-- class=content -->
<div class='footer'>generated by <a href='https://git.zx2c4.com/cgit/about/'>cgit v1.2.3</a> (<a href='https://git-scm.com/'>git 2.39.1</a>) at 2025-07-29 06:46:41 +0000</div>
</div> <!-- id=cgit -->
</body>
</html>
