ion - vaadin-framework.git - Vaadin 6, 7, 8 is a Java framework for modern Java web applications: https://github.com/vaadin/framework</title>
<meta name='generator' content='cgit v1.2.3'/>
<meta name='robots' content='index, nofollow'/>
<link rel='stylesheet' type='text/css' href='/cgit.css'/>
<link rel='shortcut icon' href='/favicon.ico'/>
<link rel='alternate' title='Atom feed' href='https://source.dussan.org/vaadin-framework.git/atom/documentation/clientsidewidgets/clientsidewidgets-overview.asciidoc?h=master' type='application/atom+xml'/>
</head>
<body>
<div id='cgit'><table id='header'>
<tr>
<td class='logo' rowspan='2'><a href='/'><img src='/cgit.png' alt='cgit logo'/></a></td>
<td class='main'><a href='/'>index</a> : <a href='/vaadin-framework.git/'>vaadin-framework.git</a></td><td class='form'><form method='get'>
<input type='hidden' name='id' value='927cb26c510dec1b7348760a65ca4e9522651960'/><select name='h' onchange='this.form.submit();'>
<option value='7.0'>7.0</option>
<option value='7.1'>7.1</option>
<option value='7.2'>7.2</option>
<option value='7.3'>7.3</option>
<option value='7.4'>7.4</option>
<option value='7.5'>7.5</option>
<option value='7.6'>7.6</option>
<option 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'>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' selected='selected'>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/'>about</a><a href='/vaadin-framework.git/'>summary</a><a href='/vaadin-framework.git/refs/?id=927cb26c510dec1b7348760a65ca4e9522651960'>refs</a><a href='/vaadin-framework.git/log/documentation/clientsidewidgets/clientsidewidgets-overview.asciidoc'>log</a><a class='active' href='/vaadin-framework.git/tree/documentation/clientsidewidgets/clientsidewidgets-overview.asciidoc?id=927cb26c510dec1b7348760a65ca4e9522651960'>tree</a><a href='/vaadin-framework.git/commit/documentation/clientsidewidgets/clientsidewidgets-overview.asciidoc?id=927cb26c510dec1b7348760a65ca4e9522651960'>commit</a><a href='/vaadin-framework.git/diff/documentation/clientsidewidgets/clientsidewidgets-overview.asciidoc?id=927cb26c510dec1b7348760a65ca4e9522651960'>diff</a><a href='/vaadin-framework.git/stats/documentation/clientsidewidgets/clientsidewidgets-overview.asciidoc'>stats</a></td><td class='form'><form class='right' method='get' action='/vaadin-framework.git/log/documentation/clientsidewidgets/clientsidewidgets-overview.asciidoc'>
<input type='hidden' name='id' value='927cb26c510dec1b7348760a65ca4e9522651960'/><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/?id=927cb26c510dec1b7348760a65ca4e9522651960'>root</a>/<a href='/vaadin-framework.git/tree/documentation?id=927cb26c510dec1b7348760a65ca4e9522651960'>documentation</a>/<a href='/vaadin-framework.git/tree/documentation/clientsidewidgets?id=927cb26c510dec1b7348760a65ca4e9522651960'>clientsidewidgets</a>/<a href='/vaadin-framework.git/tree/documentation/clientsidewidgets/clientsidewidgets-overview.asciidoc?id=927cb26c510dec1b7348760a65ca4e9522651960'>clientsidewidgets-overview.asciidoc</a></div><div class='content'>blob: 75206944edacf4731c3ec37095e9f1bafb4e18f8 (<a href='/vaadin-framework.git/plain/documentation/clientsidewidgets/clientsidewidgets-overview.asciidoc?id=927cb26c510dec1b7348760a65ca4e9522651960'>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>
</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
---

[[clientsidewidgets.overview]]
= Overview

The Vaadin client-side API is based on the Google Web Toolkit. It involves
__widgets__ for representing the user interface as Java objects, which are
rendered as a HTML DOM in the browser. Events caused by user interaction with
the page are delegated to event handlers, where you can implement your UI logic.

In general, the client-side widgets come in two categories - basic GWT widgets
and Vaadin-specific widgets. The library includes __connectors__ for integrating
the Vaadin-specific widgets with the server-side components, thereby enabling
the server-side development model of Vaadin. The integration is described in
&lt;&lt;dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,&quot;Integrating
with the Server-Side&quot;&gt;&gt;.

The layout of the client-side UI is managed with __panel__ widgets, which
correspond in their function with layout components in the Vaadin server-side
API.

In addition to the rendering API, the client-side API includes facilities for
making HTTP requests, logging, accessibility, internationalization, and testing.

For information about the basic GWT framework, please refer to
https://developers.google.com/web-toolkit/overview.
</pre></div>
