---
title: Creating a Server-Side Component
order: 3
layout: page
---

[[gwt.server-side]]
= Creating a Server-Side Component

Typical server-side Vaadin applications use server-side components that are
rendered on the client-side using their counterpart widgets. A server-side
component must manage state synchronization between the widget on the
client-side, in addition to any server-side logic.

[[gwt.server-side.basic]]
== Basic Server-Side Component

The component state is usually managed by a __shared state__, described later in
<<dummy/../../../framework/gwt/gwt-shared-state#gwt.shared-state,"Shared
State">>.


----
public class MyComponent extends AbstractComponent {
    public MyComponent() {
        getState().setText("This is MyComponent");
    }

    @Override
    protected MyComponentState getState() {
        return (MyComponentState) super.getState();
    }
}
----




-stable</option>
<option value='1.2-stable'>1.2-stable</option>
<option value='1.3-stable'>1.3-stable</option>
<option value='1.4-stable'>1.4-stable</option>
<option value='2.0-stable'>2.0-stable</option>
<option value='2.1-stable'>2.1-stable</option>
<option value='2.2-stable'>2.2-stable</option>
<option value='2.3-stable'>2.3-stable</option>
<option value='2.4-stable'>2.4-stable</option>
<option value='2.5-stable'>2.5-stable</option>
<option value='2.6-stable'>2.6-stable</option>
<option value='3.0-stable'>3.0-stable</option>
<option value='3.1-stable'>3.1-stable</option>
<option value='3.2-stable'>3.2-stable</option>
<option value='3.3-stable'>3.3-stable</option>
<option value='3.4-stable'>3.4-stable</option>
<option value='4.0-stable'>4.0-stable</option>
<option value='4.1-stable'>4.1-stable</option>
<option value='4.2-stable'>4.2-stable</option>
<option value='5.0-stable'>5.0-stable</option>
<option value='5.1-stable'>5.1-stable</option>
<option value='6.0-stable'>6.0-stable</option>
<option value='integration-to-svn-stable-1.0'>integration-to-svn-stable-1.0</option>
<option value='integration-to-svn-trunk'>integration-to-svn-trunk</option>
<option value='master' selected='selected'>master</option>
<option value='nbc'>nbc</option>
<option value='plugin-hooks'>plugin-hooks</option>
<option value='swistak'>swistak</option>
<option value='work'>work</option>
</select> <input type='submit' value='switch'/></form></td></tr>
<tr><td class='sub'>Mirror of redmine code source: https://github.com/redmine/redmine</td><td class='sub right'>www-data</td></tr></table>
<table class='tabs'><tr><td>
<a href='/redmine.git/'>summary</a><a href='/redmine.git/refs/?id=be7f5e21faa05bdc483d1b58c8887ff499082073'>refs</a><a href='/redmine.git/log/config.ru'>log</a><a class='active' href='/redmine.git/tree/config.ru?id=be7f5e21faa05bdc483d1b58c8887ff499082073'>tree</a><a href='/redmine.git/commit/config.ru?id=be7f5e21faa05bdc483d1b58c8887ff499082073'>commit</a><a href='/redmine.git/diff/config.ru?id=be7f5e21faa05bdc483d1b58c8887ff499082073'>diff</a><a href='/redmine.git/stats/config.ru'>stats</a></td><td class='form'><form class='right' method='get' action='/redmine.git/log/config.ru'>
<input type='hidden' name='id' value='be7f5e21faa05bdc483d1b58c8887ff499082073'/><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='/redmine.git/tree/?id=be7f5e21faa05bdc483d1b58c8887ff499082073'>root</a>/<a href='/redmine.git/tree/config.ru?id=be7f5e21faa05bdc483d1b58c8887ff499082073'>config.ru</a></div><div class='content'>blob: 5bc2a619e83ea182b17e2507c5e0f2f07f7cf18c (<a href='/redmine.git/plain/config.ru?id=be7f5e21faa05bdc483d1b58c8887ff499082073'>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>
</pre></td>
<td class='lines'><pre><code>