examples.html

html gwtproject.org collected 2026-09-24 06:23:38 UTC 36,245 bytes, 754 lines download raw bytes

1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6        <meta name="viewport" content="width=device-width, initial-scale=1"/>
7
8        <title>GWT Project</title>
9
10        <link rel="stylesheet" href='./assets/build/css/style.css'>
11        <link rel="stylesheet" href='./assets/build/fonts/icons/icons.css'>
12        <link rel="shortcut icon" type="image/x-icon" href='./images/favicon.png'>
13
14

14<script type="text/javascript" src="https://use.typekit.net/wwv3dxt.js"></script>

14
15

15<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

15
16
17

17<script type="text/javascript" src='./gwtproject/gwtproject.nocache.js'></script>

17
18

18<script>
19            (function () {
20                var cx = '008698606704604874043:or32ypbnrfu';
21                var gcse = document.createElement('script');
22                gcse.type = 'text/javascript';
23                gcse.async = true;
24                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
25                        '//www.google.com/cse/cse.js?cx=' + cx;
26                var s = document.getElementsByTagName('script')[0];
27                s.parentNode.insertBefore(gcse, s);
28            })();
29        </script>

29
30    </head>
31
32    <body>
33
34        <!--[if lt IE 7]>
35            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
36        <![endif]-->
37
38        <nav role="navigation" id="nav" class="closed">
39            <div class="wrapper">
40                <ul>
41                    <li class="logo"><a href='./'>GWT homepage</a></li>
42                    <li><a href='./overview.html'><i class="icon_overview"></i>Overview</a></li>
43                    <li class="sep"><a href='./gettingstarted-v2.html'><i class="icon_getstarted"></i>Get started</a></li>
44                    <li><a href='./doc/latest/tutorial/index.html' class="active"><i class="icon_tutorials"></i>Tutorials</a></li>
45                    <li><a href='./doc/latest/DevGuide.html'><i class="icon_doc"></i>Docs</a></li>
46                    <li><a href='./examples.html'><i class="icon_resources"></i>Resources</a></li>
47                    <li><a href='./makinggwtbetter.html'><i class="icon_makeGWTBetter"></i>Make GWT Better</a></li>
48                    <li class="sep"><a href='./terms.html'><i class="icon_terms"></i>Terms</a></li>
49                    <li class="btn"><a href='./download.html'><i class="icon_download"></i>Download</a></li>
50                    <li class="btn"><a href='./javadoc/latest/'><i class="icon_jd"></i>Java Doc</a></li>
51                </ul>
52                <div id="social">
53                    <a href="https://gitter.im/gwtproject/gwt" target="_blank" title="Access our Gitter community">
54                        <img src='./images/gitter-logo-mark-white.png' height="100%" alt="GWT Gitter community"></img>
55                    </a>
56                </div>
57                <a id="cc" href="#">Creative Commons Attribution 3.0 License.</a>
58            </div>
59        </nav>
60
61        <div class="holder">
62            <aside id="submenu">
63                <nav>
64                    <ul>
65<li><a href='./gettingstarted-v2.html'>Get Started</a>
66<ul>
67<li><a href='./gettingstarted-v2.html' title="Getting Started with GWT SDK">Overview</a></li>
68<li><a href='./learnmore-sdk.html' title="Learn more about the GWT SDK">SDK Learn More</a></li>
69<li><a href='./usingeclipse.html'>Configure Eclipse</a></li>
70<li><a href='./usingintellij.html'>Configure IntelliJ</a></li>
71</ul>
72</li>
73<li><a href='./doc/latest/tutorial/index.html'>Tutorials</a>
74<ul>
75<li><a href='./doc/latest/tutorial/index.html'>Overview</a></li>
76<li><a href="#" title="Create, build and run a GWT application">Build a GWT App.</a>
77<ul>
78<li><a href='./doc/latest/tutorial/gettingstarted.html'>Introduction</a></li>
79<li><a href='./doc/latest/tutorial/create.html'>Create</a></li>
80<li><a href='./doc/latest/tutorial/design.html'>Design</a></li>
81<li><a href='./doc/latest/tutorial/buildui.html'>Build the UI</a></li>
82<li><a href='./doc/latest/tutorial/manageevents.html'>Manage Events</a></li>
83<li><a href='./doc/latest/tutorial/codeclient.html'>Coding Client side</a></li>
84<li><a href='./doc/latest/tutorial/debug.html'>Debugging</a></li>
85<li><a href='./doc/latest/tutorial/style.html'>Styling</a></li>
86<li><a href='./doc/latest/tutorial/compile.html'>Compilation</a></li>
87</ul>
88</li>
89<li><a href="#">AJAX Communication</a>
90<ul>
91<li><a href='./doc/latest/tutorial/clientserver.html'>Introduction</a></li>
92<li><a href='./doc/latest/tutorial/RPC.html'>Using GWT RPC</a></li>
93<li><a href='./doc/latest/tutorial/JSON.html'>Retrieving JSON</a></li>
94<li><a href='./doc/latest/tutorial/Xsite.html'>Cross-site Requests</a></li>
95<li><a href='./doc/latest/tutorial/JSONphp.html'>JSON php</a></li>
96</ul>
97</li>
98<li><a href='./doc/latest/tutorial/i18n.html'>Internationalization</a></li>
99<li><a href='./doc/latest/tutorial/JUnit.html'>JUnit Testing</a></li>
100<li><a href='./doc/latest/tutorial/appengine.html' title="Deploy to Google App Engine">Deploy to GAE</a></li>
101<li><a href='./doc/latest/polymer-tutorial/introduction.html'>GWT &amp; Polymer</a>
102<ul>
103<li><a href='./doc/latest/polymer-tutorial/create.html'>Create Project</a></li>
104<li><a href="#">Opt A: Widgets UI</a>
105<ul>
106<li><a href='./doc/latest/polymer-tutorial/widgets-buildui.html'>Build the UI</a></li>
107<li><a href='./doc/latest/polymer-tutorial/widgets-applogic.html'>Events &amp; Logic</a></li>
108</ul>
109</li>
110<li><a href="#">Opt B: Elements UI</a>
111<ul>
112<li><a href='./doc/latest/polymer-tutorial/elements-buildui.html'>Build the UI</a></li>
113<li><a href='./doc/latest/polymer-tutorial/elements-applogic.html'>Events &amp; Logic</a></li>
114</ul>
115</li>
116</ul>
117</li>
118</ul>
119</li>
120<li><a href='./doc/latest/DevGuide.html'>Documentation</a>
121<ul>
122<li><a href='./doc/latest/DevGuide.html'>Overview</a></li>
123<li><a href="#">Coding Basics</a>
124<ul>
125<li><a href='./doc/latest/DevGuideCodingBasics.html'>Introduction</a></li>
126<li><a href='./doc/latest/DevGuideOrganizingProjects.html'>Organize Projects</a></li>
127<li><a href='./doc/latest/DevGuideCompilingAndDebugging.html'>Compile &amp;

127 Debug</a></li>
128<li><a href='./doc/latest/DevGuideCodingBasicsClient.html'>Client-side</a></li>
129<li><a href='./doc/latest/DevGuideCodingBasicsCompatibility.html'>JRE Compatibility</a></li>
130<li><a href='./doc/latest/DevGuideServerCommunication.html' title="Communicate with a server">Ajax Communication</a></li>
131<li><a href='./doc/latest/DevGuideCodingBasicsHistory.html'>History Mechanism</a></li>
132<li><a href='./doc/latest/DevGuideCodingBasicsFormatting.html' title="Number and Date Formatting">Formatting</a></li>
133<li><a href='./doc/latest/DevGuideCodingBasicsDelayed.html'>Delayed Logic</a></li>
134<li><a href='./doc/latest/DevGuideCodingBasicsJSON.html'>Working with JSON</a></li>
135<li><a href='./doc/latest/DevGuideCodingBasicsXML.html'>Working with XML</a></li>
136<li><a href='./doc/latest/DevGuideCodingBasicsJSNI.html' title="JavaScript Native Interface">JavaScript: JSNI</a></li>
137<li><a href='./doc/latest/DevGuideCodingBasicsJsInterop.html' title="JsInterop">JavaScript: JsInterop</a></li>
138<li><a href='./doc/latest/DevGuideCodingBasicsOverlay.html'>Overlay Types</a></li>
139<li><a href='./doc/latest/DevGuideCodingBasicsDeferred.html'>Deferred Binding</a></li>
140</ul>
141</li>
142<li><a href="#">Build User Interfaces</a>
143<ul>
144<li><a href='./doc/latest/DevGuideUi.html'>Contents</a></li>
145<li><a href='./doc/latest/DevGuideUiBrowser.html'>Cross-Browser Support</a></li>
146<li><a href='./doc/latest/DevGuideUiPanels.html'>Layout with Panels</a></li>
147<li><a href='./doc/latest/DevGuideUiWidgets.html'>Widgets</a></li>
148<li><a href='./doc/latest/DevGuideUiCustomWidgets.html'>Custom Widgets</a></li>
149<li><a href='./doc/latest/DevGuideUiCellWidgets.html'>Cell Widgets</a></li>
150<li><a href='./doc/latest/DevGuideUiCellTable.html'>Cell Tables</a></li>
151<li><a href='./doc/latest/DevGuideUiCustomCells.html'>Custom Cells</a></li>
152<li><a href='./doc/latest/DevGuideUiEditors.html'>Editors</a></li>
153<li><a href='./doc/latest/DevGuideUiDom.html'>Using the DOM</a></li>
154<li><a href='./doc/latest/DevGuideUiHandlers.html'>Events &amp; Handlers</a></li>
155<li><a href='./doc/latest/DevGuideUiCss.html'>Css Styling</a></li>
156<li><a href='./doc/latest/DevGuideUiBinder.html'>UIBinder</a></li>
157<li><a href='./doc/latest/DevGuideUiImageBundles.html'>Image Bundles</a></li>
158</ul>
159</li>
160<li><a href="#">Html5 Support</a>
161<ul>
162<li><a href='./doc/latest/DevGuideHtml5.html'>Contents</a></li>
163<li><a href='./doc/latest/DevGuideHtml5Storage.html'>Html5 Storage</a></li>
164</ul>
165</li>
166<li><a href="#">Test with JUnit</a>
167<ul>
168<li><a href='./doc/latest/DevGuideTesting.html'>Guide</a></li>
169<li><a href='./doc/latest/DevGuideTestingHtmlUnit.html'>HtmlUnit</a></li>
170<li><a href='./doc/latest/DevGuideTestingRemoteTesting.html'>Remote Testing</a></li>
171<li><a href='./doc/latest/DevGuideTestingCoverage.html'>Code Coverage</a></li>
172</ul>
173</li>
174<li><a href='./doc/latest/DevGuideDeploying.html'>Deploy</a></li>
175<li><a href="#">Advanced Topics</a>
176<ul>
177<li><a href='./doc/latest/DevGuideLogging.html'>Logging</a></li>
178<li><a href="#">Security</a>
179<ul>
180<li><a href='./doc/latest/DevGuideSecurity.html'>Contents</a></li>
181<li><a href='./doc/latest/DevGuideSecuritySafeHtml.html'>Using SafeHtml</a></li>
182<li><a href='./doc/latest/DevGuideSecurityRpcXsrf.html'>XSRF Protection</a></li>
183</ul>
184</li>
185<li><a href='./doc/latest/DevGuideAutoBeans.html'>AutoBeans</a></li>
186<li><a href='./doc/latest/DevGuideRequestFactory.html'>Request Factory</a></li>
187<li><a href='./doc/latest/DevGuideMvpActivitiesAndPlaces.html'>Activities And Places</a></li>
188<li><a href='./doc/latest/DevGuideValidation.html'>Validation</a></li>
189<li><a href="#">Internationalization</a>
190<ul>
191<li><a href='./doc/latest/DevGuideI18n.html' title="I18N">Introduction</a></li>
192<li><a href='./doc/latest/DevGuideI18nLocale.html'>Locale</a></li>
193<li><a href='./doc/latest/DevGuideI18nConstants.html'>Constants</a></li>
194<li><a href='./doc/latest/DevGuideI18nMessages.html'>Messages</a></li>
195<li><a href='./doc/latest/DevGuideI18nPluralForms.html'>Plural Forms</a></li>
196<li><a href='./doc/latest/DevGuideUiBinderI18n.html'>UI Binder</a></li>
197</ul>
198</li>
199<li><a href='./doc/latest/DevGuideA11y.html'>Accessibility</a></li>
200<li><a href="#">Optimize</a>
201<ul>
202<li><a href='./doc/latest/DevGuideOptimizing.html'>Overview</a></li>
203<li><a href='./doc/latest/DevGuideCodeSplitting.html'>Code Splitting</a></li>
204<li><a href='./doc/latest/DevGuideCompileReport.html'>Compile Report</a></li>
205<li><a href='./doc/latest/DevGuideClientBundle.html'>

205Client Bundle</a></li>
206<li><a href='./doc/latest/DevGuideGssVsCss.html'>GSS vs CSS Syntax</a></li>
207<li><a href='./doc/latest/DevGuideLightweightMetrics.html'>Lightweight Metrics</a></li>
208</ul>
209</li>
210<li><a href='./doc/latest/DevGuideLinkers.html'>Linkers</a></li>
211</ul>
212</li>
213<li><a href="#">Reference</a>
214<ul>
215<li><a href='./doc/latest/RefCommandLineTools.html'>Command Line Tools</a></li>
216<li><a href='./doc/latest/RefGWTClassAPI.html'>GWT Class API</a></li>
217<li><a href='./doc/latest/RefJreEmulation.html'>JRE Emulation</a></li>
218<li><a href='./doc/latest/RefJreMissingEmulation.html'>Missing parts of JRE Emulation</a></li>
219<li><a href='./doc/latest/RefWidgetGallery.html'>Widgets Gallery</a></li>
220</ul>
221</li>
222<li><a href="#">FAQ</a>
223<ul>
224<li><a href='./doc/latest/FAQ.html'>Contents</a></li>
225<li><a href='./doc/latest/FAQ_GettingStarted.html'>Getting Started</a></li>
226<li><a href='./doc/latest/FAQ_DebuggingAndCompiling.html'>Debug &amp; Compile</a></li>
227<li><a href='./doc/latest/FAQ_UI.html'>Build UI</a></li>
228<li><a href='./doc/latest/FAQ_Client.html'>Client</a></li>
229<li><a href='./doc/latest/FAQ_Server.html'>Server</a></li>
230<li><a href='./doc/latest/FAQ_Troubleshooting.html'>Troubleshooting</a></li>
231</ul>
232</li>
233<li><a href='./doc/latest/DevGuideGlossary.html'>Glossary</a></li>
234</ul>
235</li>
236<li><a href='./examples.html'>Resources</a>
237<ul>
238<li><a href='./examples.html'>Examples</a></li>
239<li><a href='./presentations.html' title="Different Presentations on GWT">Presentations</a></li>
240<li><a href="#">Articles</a>
241<ul>
242<li><a href='./articles/articles.html'>Overview</a></li>
243<li><a href='./articles/gss_migration.html' title="Migrating CssResources from CSS to GSS">GSS Migration</a></li>
244<li><a href='./articles/fragment_merging.html'>Fragment Merging</a></li>
245<li><a href='./articles/superdevmode.html'>Super Dev Mode</a></li>
246<li><a href='./articles/elemental.html'>Elemental</a></li>
247<li><a href='./articles/dynamic_host_page.html' title="Running GWT in dynamic host pages">Dynamic Host Page</a></li>
248<li><a href="#">Building MVP apps</a>
249<ul>
250<li><a href='./articles/mvp-architecture.html'>MVP Part I</a></li>
251<li><a href='./articles/mvp-architecture-2.html'>MVP Part II</a></li>
252</ul>
253</li>
254<li><a href='./articles/using_gwt_with_hibernate.html'>GWT &amp; Hibernate</a></li>
255<li><a href='./articles/testing_methodologies_using_gwt.html' title="Best practices on Testing GWT applications">Testing</a></li>
256<li><a href='./articles/dom_events_memory_leaks_and_you.html' title="How GWT tackles memory leaks">DOM Memory Leaks</a></li>
257<li><a href='./articles/security_for_gwt_applications.html' title="Security for GWT applications">Security</a></li>
258<li><a href='./articles/using_gwt_for_json_mashups.html' title="Using GWT for JSON Mashups">JSON &amp; Mashups</a></li>
259<li><a href='./articles/gwt-iphone.html'>GWT iPhone</a></li>
260</ul>
261</li>
262<li><a href='./books.html' title="GWT Books">Books</a></li>
263<li><a href='./casestudies.html' title="Case Studies for using GWT">Case Studies</a></li>
264<li><a href="#">Community</a>
265<ul>
266<li><a href='./community.html'>Community &amp; Forums</a></li>
267<li><a href='./community-group-charter.html' title="Community Group Charter">Community Group</a></li>
268<li><a href='./developer_spotlight.html'>Developer Spotlight</a></li>
269</ul>
270</li>
271</ul>
272</li>
273<li><a href='./makinggwtbetter.html'>Making GWT Better</a>
274<ul>
275<li><a href='./makinggwtbetter.html' title="Learn how to contribute to GWT">Contributing</a></li>
276<li><a href='./lifeofanissue.html' title="Learn about GWT and the issue tracker">Life of an Issue</a></li>
277<li><a href='./steering.html' title="The GWT Steering Committee">Steering Committee</a>
278<ul>
279<li><a href='./meetingnotes.html'>Meeting Notes</a></li>
280</ul>
281</li>
282</ul>
283</li>
284<li><a href='./terms.html'>Terms</a>
285<ul>
286<li><a href='./terms.html'>GWT License</a></li>
287<li><a href='./GWTPolicy.html'>GWT Name Use Policy</a></li>
288<li><a href='./privacy.html'>Privacy</a></li>
289</ul>
290</li>
291</ul>
292
293                </nav>
294            </aside>
295
296            <a id="logo-mobile" href="#"><span>>Back to GWT homepage</span></a>
297
298            <div class="menu-button">Menu</div>
299
300            <nav id="nav-mobile" class="flexnav">
301                <ul>
302<li><a href='./gettingstarted-v2.html'>Get Started</a>
303<ul>
304<li><a href='./gettingstarted-v2.html' title="Getting Started with GWT SDK">Overview</a></li>
305<li><a href='./learnmore-sdk.html' title="Learn more about the GWT SDK">SDK Learn More</a></li>
306<li><a href='./usingeclipse.html'>Configure Eclipse</a></li>
307<li><a href='./usingintellij.html'>Configure IntelliJ</a></li>
308</ul>
309</li>
310<li><a href='./doc/latest/tutorial/index.html'>Tutorials</a>
311<ul>
312<li><a href='./doc/latest/tutorial/index.html'>Overview</a></li>
313<li><a href="#" title="Create, build and run a GWT application">Build a GWT App.</a>
314<ul>
315<li><a href='./doc/latest/tutorial/gettingstarted.html'>Introduction</a></li>
316<li><a href='./doc/latest/tutorial/create.html'>Create</a></li>
317<li><a href='./doc/latest/tutorial/design.html'>Design</a></li>
318<li><a href='./doc/latest/tutorial/buildui.html'>Build the UI</a></li>
319<li><a href='./doc/latest/tutorial/manageevents.html'>Manage Events</a></li>
320<li><a href='./doc/latest/tutorial/codeclient.html'>Coding Client side</a></li>
321<li><a href='./doc/latest/tutorial/debug.html'>Debugging</a></li>
322<li><a href='./doc/latest/tutorial/style.html'>Styling</a></li>
323<li><a href='./doc/latest/tutorial/compile.html'>Compilation</a></li>
324</ul>
325</li>
326<li><a href="#">AJAX Communication</a>
327<ul>
328<li><a href='./doc/latest/tutorial/clientserver.html'>Introduction</a></li>
329<li><a href='./doc/latest/tutorial/RPC.html'>Using GWT RPC</a></li>
330<li><a href='./doc/latest/tutorial/JSON.html'>Retrieving JSON</a></li>
331<li><a href='./doc/latest/tutorial/Xsite.html'>Cross-site Requests</a></li>
332<li><a href='./doc/latest/tutorial/JSONphp.html'>JSON php</a></li>
333</ul>
334</li>
335<li><a href='./doc/latest/tutorial/i18n.html'>Internationalization</a></li>
336<li><a href='./doc/latest/tutorial/JUnit.html'>JUnit Testing</a></li>
337<li><a href='./doc/latest/tutorial/appengine.html' title="Deploy to Google App Engine">Deploy to GAE</a></li>
338<li><a href='./doc/latest/polymer-tutorial/introduction.html'>GWT &amp; Polymer</a>
339<ul>
340<li><a href='./doc/latest/polymer-tutorial/create.html'>Create Project</a></li>
341<li><a href="#">Opt A: Widgets UI</a>
342<ul>
343<li><a href='./doc/latest/polymer-tutorial/widgets-buildui.html'>Build the UI</a></li>
344<li><a href='./doc/latest/polymer-tutorial/widgets-applogic.html'>Events &amp; Logic</a></li>
345</ul>
346</li>
347<li><a href="#">Opt B: Elements UI</a>
348<ul>
349<li><a href='./doc/latest/polymer-tutorial/elements-buildui.html'>Build the UI</a></li>
350<li><a href='./doc/latest/polymer-tutorial/elements-applogic.html'>Events &amp; Logic</a></li>
351</ul>
352</li>
353</ul>
354</li>
355</ul>
356</li>
357<li><a href='./doc/latest/DevGuide.html'>Documentation</a>
358<ul>
359<li><a href='./doc/latest/DevGuide.html'>Overview</a></li>
360<li><a href="#">Coding Basics</a>
361<ul>
362<li><a href='./doc/latest/DevGuideCodingBasics.html'>Introduction</a></li>
363<li><a href='./doc/latest/DevGuideOrganizingProjects.html'>Organize Projects</a></li>
364<li><a href='./doc/latest/DevGuideCompilingAndDebugging.html'>Compile &amp;

364 Debug</a></li>
365<li><a href='./doc/latest/DevGuideCodingBasicsClient.html'>Client-side</a></li>
366<li><a href='./doc/latest/DevGuideCodingBasicsCompatibility.html'>JRE Compatibility</a></li>
367<li><a href='./doc/latest/DevGuideServerCommunication.html' title="Communicate with a server">Ajax Communication</a></li>
368<li><a href='./doc/latest/DevGuideCodingBasicsHistory.html'>History Mechanism</a></li>
369<li><a href='./doc/latest/DevGuideCodingBasicsFormatting.html' title="Number and Date Formatting">Formatting</a></li>
370<li><a href='./doc/latest/DevGuideCodingBasicsDelayed.html'>Delayed Logic</a></li>
371<li><a href='./doc/latest/DevGuideCodingBasicsJSON.html'>Working with JSON</a></li>
372<li><a href='./doc/latest/DevGuideCodingBasicsXML.html'>Working with XML</a></li>
373<li><a href='./doc/latest/DevGuideCodingBasicsJSNI.html' title="JavaScript Native Interface">JavaScript: JSNI</a></li>
374<li><a href='./doc/latest/DevGuideCodingBasicsJsInterop.html' title="JsInterop">JavaScript: JsInterop</a></li>
375<li><a href='./doc/latest/DevGuideCodingBasicsOverlay.html'>Overlay Types</a></li>
376<li><a href='./doc/latest/DevGuideCodingBasicsDeferred.html'>Deferred Binding</a></li>
377</ul>
378</li>
379<li><a href="#">Build User Interfaces</a>
380<ul>
381<li><a href='./doc/latest/DevGuideUi.html'>Contents</a></li>
382<li><a href='./doc/latest/DevGuideUiBrowser.html'>Cross-Browser Support</a></li>
383<li><a href='./doc/latest/DevGuideUiPanels.html'>Layout with Panels</a></li>
384<li><a href='./doc/latest/DevGuideUiWidgets.html'>Widgets</a></li>
385<li><a href='./doc/latest/DevGuideUiCustomWidgets.html'>Custom Widgets</a></li>
386<li><a href='./doc/latest/DevGuideUiCellWidgets.html'>Cell Widgets</a></li>
387<li><a href='./doc/latest/DevGuideUiCellTable.html'>Cell Tables</a></li>
388<li><a href='./doc/latest/DevGuideUiCustomCells.html'>Custom Cells</a></li>
389<li><a href='./doc/latest/DevGuideUiEditors.html'>Editors</a></li>
390<li><a href='./doc/latest/DevGuideUiDom.html'>Using the DOM</a></li>
391<li><a href='./doc/latest/DevGuideUiHandlers.html'>Events &amp; Handlers</a></li>
392<li><a href='./doc/latest/DevGuideUiCss.html'>Css Styling</a></li>
393<li><a href='./doc/latest/DevGuideUiBinder.html'>UIBinder</a></li>
394<li><a href='./doc/latest/DevGuideUiImageBundles.html'>Image Bundles</a></li>
395</ul>
396</li>
397<li><a href="#">Html5 Support</a>
398<ul>
399<li><a href='./doc/latest/DevGuideHtml5.html'>Contents</a></li>
400<li><a href='./doc/latest/DevGuideHtml5Storage.html'>Html5 Storage</a></li>
401</ul>
402</li>
403<li><a href="#">Test with JUnit</a>
404<ul>
405<li><a href='./doc/latest/DevGuideTesting.html'>Guide</a></li>
406<li><a href='./doc/latest/DevGuideTestingHtmlUnit.html'>HtmlUnit</a></li>
407<li><a href='./doc/latest/DevGuideTestingRemoteTesting.html'>Remote Testing</a></li>
408<li><a href='./doc/latest/DevGuideTestingCoverage.html'>Code Coverage</a></li>
409</ul>
410</li>
411<li><a href='./doc/latest/DevGuideDeploying.html'>Deploy</a></li>
412<li><a href="#">Advanced Topics</a>
413<ul>
414<li><a href='./doc/latest/DevGuideLogging.html'>Logging</a></li>
415<li><a href="#">Security</a>
416<ul>
417<li><a href='./doc/latest/DevGuideSecurity.html'>Contents</a></li>
418<li><a href='./doc/latest/DevGuideSecuritySafeHtml.html'>Using SafeHtml</a></li>
419<li><a href='./doc/latest/DevGuideSecurityRpcXsrf.html'>XSRF Protection</a></li>
420</ul>
421</li>
422<li><a href='./doc/latest/DevGuideAutoBeans.html'>AutoBeans</a></li>
423<li><a href='./doc/latest/DevGuideRequestFactory.html'>Request Factory</a></li>
424<li><a href='./doc/latest/DevGuideMvpActivitiesAndPlaces.html'>Activities And Places</a></li>
425<li><a href='./doc/latest/DevGuideValidation.html'>Validation</a></li>
426<li><a href="#">Internationalization</a>
427<ul>
428<li><a href='./doc/latest/DevGuideI18n.html' title="I18N">Introduction</a></li>
429<li><a href='./doc/latest/DevGuideI18nLocale.html'>Locale</a></li>
430<li><a href='./doc/latest/DevGuideI18nConstants.html'>Constants</a></li>
431<li><a href='./doc/latest/DevGuideI18nMessages.html'>Messages</a></li>
432<li><a href='./doc/latest/DevGuideI18nPluralForms.html'>Plural Forms</a></li>
433<li><a href='./doc/latest/DevGuideUiBinderI18n.html'>UI Binder</a></li>
434</ul>
435</li>
436<li><a href='./doc/latest/DevGuideA11y.html'>Accessibility</a></li>
437<li><a href="#">Optimize</a>
438<ul>
439<li><a href='./doc/latest/DevGuideOptimizing.html'>Overview</a></li>
440<li><a href='./doc/latest/DevGuideCodeSplitting.html'>Code Splitting</a></li>
441<li><a href='./doc/latest/DevGuideCompileReport.html'>Compile Report</a></li>
442<li><a href='./doc/latest/DevGuideClientBundle.html'>

442Client Bundle</a></li>
443<li><a href='./doc/latest/DevGuideGssVsCss.html'>GSS vs CSS Syntax</a></li>
444<li><a href='./doc/latest/DevGuideLightweightMetrics.html'>Lightweight Metrics</a></li>
445</ul>
446</li>
447<li><a href='./doc/latest/DevGuideLinkers.html'>Linkers</a></li>
448</ul>
449</li>
450<li><a href="#">Reference</a>
451<ul>
452<li><a href='./doc/latest/RefCommandLineTools.html'>Command Line Tools</a></li>
453<li><a href='./doc/latest/RefGWTClassAPI.html'>GWT Class API</a></li>
454<li><a href='./doc/latest/RefJreEmulation.html'>JRE Emulation</a></li>
455<li><a href='./doc/latest/RefJreMissingEmulation.html'>Missing parts of JRE Emulation</a></li>
456<li><a href='./doc/latest/RefWidgetGallery.html'>Widgets Gallery</a></li>
457</ul>
458</li>
459<li><a href="#">FAQ</a>
460<ul>
461<li><a href='./doc/latest/FAQ.html'>Contents</a></li>
462<li><a href='./doc/latest/FAQ_GettingStarted.html'>Getting Started</a></li>
463<li><a href='./doc/latest/FAQ_DebuggingAndCompiling.html'>Debug &amp; Compile</a></li>
464<li><a href='./doc/latest/FAQ_UI.html'>Build UI</a></li>
465<li><a href='./doc/latest/FAQ_Client.html'>Client</a></li>
466<li><a href='./doc/latest/FAQ_Server.html'>Server</a></li>
467<li><a href='./doc/latest/FAQ_Troubleshooting.html'>Troubleshooting</a></li>
468</ul>
469</li>
470<li><a href='./doc/latest/DevGuideGlossary.html'>Glossary</a></li>
471</ul>
472</li>
473<li><a href='./examples.html'>Resources</a>
474<ul>
475<li><a href='./examples.html'>Examples</a></li>
476<li><a href='./presentations.html' title="Different Presentations on GWT">Presentations</a></li>
477<li><a href="#">Articles</a>
478<ul>
479<li><a href='./articles/articles.html'>Overview</a></li>
480<li><a href='./articles/gss_migration.html' title="Migrating CssResources from CSS to GSS">GSS Migration</a></li>
481<li><a href='./articles/fragment_merging.html'>Fragment Merging</a></li>
482<li><a href='./articles/superdevmode.html'>Super Dev Mode</a></li>
483<li><a href='./articles/elemental.html'>Elemental</a></li>
484<li><a href='./articles/dynamic_host_page.html' title="Running GWT in dynamic host pages">Dynamic Host Page</a></li>
485<li><a href="#">Building MVP apps</a>
486<ul>
487<li><a href='./articles/mvp-architecture.html'>MVP Part I</a></li>
488<li><a href='./articles/mvp-architecture-2.html'>MVP Part II</a></li>
489</ul>
490</li>
491<li><a href='./articles/using_gwt_with_hibernate.html'>GWT &amp; Hibernate</a></li>
492<li><a href='./articles/testing_methodologies_using_gwt.html' title="Best practices on Testing GWT applications">Testing</a></li>
493<li><a href='./articles/dom_events_memory_leaks_and_you.html' title="How GWT tackles memory leaks">DOM Memory Leaks</a></li>
494<li><a href='./articles/security_for_gwt_applications.html' title="Security for GWT applications">Security</a></li>
495<li><a href='./articles/using_gwt_for_json_mashups.html' title="Using GWT for JSON Mashups">JSON &amp; Mashups</a></li>
496<li><a href='./articles/gwt-iphone.html'>GWT iPhone</a></li>
497</ul>
498</li>
499<li><a href='./books.html' title="GWT Books">Books</a></li>
500<li><a href='./casestudies.html' title="Case Studies for using GWT">Case Studies</a></li>
501<li><a href="#">Community</a>
502<ul>
503<li><a href='./community.html'>Community &amp; Forums</a></li>
504<li><a href='./community-group-charter.html' title="Community Group Charter">Community Group</a></li>
505<li><a href='./developer_spotlight.html'>Developer Spotlight</a></li>
506</ul>
507</li>
508</ul>
509</li>
510<li><a href='./makinggwtbetter.html'>Making GWT Better</a>
511<ul>
512<li><a href='./makinggwtbetter.html' title="Learn how to contribute to GWT">Contributing</a></li>
513<li><a href='./lifeofanissue.html' title="Learn about GWT and the issue tracker">Life of an Issue</a></li>
514<li><a href='./steering.html' title="The GWT Steering Committee">Steering Committee</a>
515<ul>
516<li><a href='./meetingnotes.html'>Meeting Notes</a></li>
517</ul>
518</li>
519</ul>
520</li>
521<li><a href='./terms.html'>Terms</a>
522<ul>
523<li><a href='./terms.html'>GWT License</a></li>
524<li><a href='./GWTPolicy.html'>GWT Name Use Policy</a></li>
525<li><a href='./privacy.html'>Privacy</a></li>
526</ul>
527</li>
528</ul>
529
530            </nav>
531
532            <div id="search">
533                <form onsubmit="javascript:void(0)">
534                    <input type="text"/>
535                    <button type="submit"><i class="icon_search"></i> <span>Search</span></button>
536                </form>
537            </div>
538
539            <div style="visibility:hidden">
540                <gcse:searchresults-only gname="searchresults"></gcse:searchresults-only>
541            </div>
542
543            <div id="content" role="main">
544                <div class="container">

545                    <span id="editLink" title="Edit this page on GitHub">
546                        <a class="icon_editGithub" href="https://github.com/gwtproject/gwt-site/edit/main/src/main/markdown/examples.md"></a>
547                    </span>
548                    <style>
549    div.demo {
550      padding: 3px;
551      padding-left: 20px;
552      background-image: url("images/newwindow.gif");
553      background-repeat: no-repeat;
554      background-position: left center;
555    }
556
557    ul.demo {
558      margin-top: 20px;
559      margin-bottom: 10px;
560    }
561
562    ul.demo li {
563      list-style-image: url("images/newwindow.gif");
564      list-style-type: disc;
565    }
566
567    .project {
568      clear: both;
569      margin-bottom: 1.25em;
570      padding: 10px 0 10px 0;
571    }
572
573    .project .screenshot {
574      float: left;
575    }
576
577    .project .name {
578      font-size: medium;
579      background-image: url("/webtoolkit/images/newwindow.gif");
580      background-repeat: no-repeat;
581      background-position: left center;
582    }
583
584    .project .screenshot img {
585      width: 125px;
586      height: 109px;
587      border: 1px solid;
588      margin-right: 10px;
589    }
590
591    .project .info .apis {
592      margin-top: 0.5em;
593    }
594
595    .project .head {
596      font-size: .8em;
597    }
598
599    .project .info .apis .item {
600      margin-left: 10px;
601      font-size: .8em;
602    }
603
604    .example {
605      margin-top: 1em;
606    }
607
608    .project .snippet {
609      font-size: .8em;
610    }
611
612    .project .snippet a {
613      font-size: .8em;
614    }
615</style>
616<h1>Examples</h1>
617<p>If you're like us, the first thing you want to do is see examples of what you can do with GWT.</p>
618<ul>
619<li><a href="#samples">Samples</a> are included in the SDK for you to play around with and build off of. A few are below. Some are from the <a href="https://developers.google.com/appengine/">App Engine SDK</a> that use GWT for their front end.</li>
620<li><a href="#real-world-projects">Real world projects</a> let you see the real power of GWT, with complex applications that developers are building.</li>
621</ul>
622<p>You can also find a wide variety of open source <a href="https://github.com/search?q=GWT">projects related to GWT</a> hosted on Github.</p>
623<p>Please note that the applications linked from this page are provided by third-parties and are not endorsed by Google.</p>
624<h2>Samples<a id="samples"></a></h2>
625<div class="section">
626  <div class="example">
627  <div class="project">
628    <div class="screenshot">
629      <a href="https://samples.gwtproject.org/samples/Showcase/Showcase.html" target="_blank"><img src="images/showcase.jpg" alt="Screenshot"/></a>
630    </div>
631    <div class="info">
632      <div class="name"><a href="https://samples.gwtproject.org/samples/Showcase/Showcase.html" target="_blank">GWT Showcase</a></div>
633      <div class="snippet">A showcase of GWT features with accompanying source code and CSS styles.</div>
634      <div class="apis">
635        <div class="head">GWT features used:</div>
636        <div class="item"><a href="doc/latest/DevGuideUiWidgets.html">UI widgets</a></div>
637        <div class="item"><a href="doc/latest/DevGuideI18n.html">Internationalization</a></div>
638      </div>
639    </div>
640  </div>
641  <div class="project">
642    <div class="screenshot">
643      <a href="https://samples.gwtproject.org/samples/Mail/Mail.html" target="_blank"><img src="images/mail.jpg" alt="Screenshot"/></a>
644    </div>
645    <div class="info">
646      <div class="name"><a href="https://samples.gwtproject.org/samples/Mail/Mail.html" target="_blank">Mail Application</a></div>
647      <div class="snippet">A replica of the UI of a desktop email application.</div>
648      <div class="apis">
649        <div class="head">GWT features used:</div>
650        <div class="item"><a href="doc/latest/DevGuideUiWidgets.html">UI widgets</a></div>
651        <div class="item"><a href="doc/latest/DevGuideCodingBasics.html#DevGuideHistory">History management</a></div>
652      </div>
653    </div>
654  </div>
655<p>The source for these examples as well as others can be found in your GWT distribution under the <code>samples/</code> directory. If you haven't downloaded GWT yet, you can download it <a href="download.html">here</a>.</p>
656  </div>
657</div>
658<h2>Real world projects<a id="real-world-projects"></a></h2>
659<p>GWT is being used by tens of thousands of projects around the world. Take a look at just a few example of GWT in action:</p>
660<div class="project">
661  <div class="screenshot">
662    <a href="https://ruxit.com" target="_blank"><img src="images/ruxit.png" alt="ruxit"/></a>
663  </div>
664  <div class="info">
665    <div class="name"><a href="https://ruxit.com" target="_blank">ruxit</a></div>
666    <div class="snippet">ruxit is a cloud-based application performance management solution that offers unified monitoring of

667user experience, servers, applications, infrastructure and networks &ndash; all with simple auto-configuration. The entire product UI
668was built using GWT. Use the free trial to see it in action.</div>
669  </div>
670</div>
671<div class="project">
672  <div class="screenshot">
673    <a href="https://www.cloudorado.com" target="_blank"><img src="images/cloudorado.png" alt="cloudorado"/></a>
674  </div>
675  <div class="info">
676    <div class="name"><a href="https://www.cloudorado.com" target="_blank">Cloudorado</a></div>
677    <div class="snippet">Cloudorado is a free cloud computing comparison tool, which makes cloud provider selection a quick and easy task.
678	The interactive comparison is done fully client-side and it is written in GWT. No login required &ndash; just go and try it.</div>
679  </div>
680</div>
681<div class="project">
682  <div class="screenshot">
683    <a href="http://gaestudio.arcbees.com" target="_blank"><img src="images/gaestudio.png" alt="Gae-Studio"/></a>
684  </div>
685  <div class="info">
686    <div class="name"><a href="http://gaestudio.arcbees.com" target="_blank">Gae-Studio</a></div>
687    <div class="snippet">GAE Studio helps you optimize applications hosted on Google App Engine. GAE Studio
688    allows datastore exploration, modification, deletion, import and export. Think of it as your swiss army knife for developing GAE applications!</div>
689  </div>
690</div>
691<div class="project">
692  <div class="screenshot">
693    <a href="https://getbookedin.com/?cid=256" target="_blank"><img src="images/bookedin.png" alt="BookedIN"/></a>
694  </div>
695  <div class="info">
696    <div class="name"><a href="https://getbookedin.com/?cid=256" target="_blank">BookedIN</a></div>
697    <div class="snippet">BookedIN is an online appointment booking, scheduling and payment system for small business.
698      Customers can book and pay for appointments online, and the business owner can automate their internal booking
699      process, reducing their administrative workload. BookedIN uses <a href="https://gwtp.arcbees.com">GWTP</a>. </div>
700    </div>
701</div>
702<div class="project">
703  <div class="screenshot">
704    <a href="http://www.gogrid.com" target="_blank"><img src="images/go_grid.jpg" alt="Go Grid"/></a>
705  </div>
706  <div class="info">
707    <div class="name"><a href="http://www.gogrid.com" target="_blank">Go Grid</a></div>
708    <div class="snippet">GoGrid is a cloud computing infrastructure service provider which
709enables you to deploy and scale load-balanced cloud server networks via a

710unique multi-server control panel. Visit our <a href="developer_spotlight.html">Developer Spotlight</a> to see Justin Kitagawa, senior product manager and lead
711developer on GoGrid, share how they used GWT to build GoGrid, what he
712likes and would like to see from GWT, and his tips and learnings from
713developing with GWT.</div>
714  </div>
715</div>
716<div class="project">
717  <div class="screenshot">
718    <a href="https://www.scenechronize.com" target="_blank"><img src="images/scenechronize.jpg" alt="scenechronize"/></a>
719  </div>
720  <div class="info">
721    <div class="name"><a href="https://www.scenechronize.com" target="_blank">Scenechronize</a></div>
722    <div class="snippet">Scenechronize is a production management web application for film,
723television and commercials. Visit our <a href="developer_spotlight.html">Developer Spotlight</a> to see Rob Powers, director of engineering, share
724how they used GWT to build scenechronize, what he likes and would like to
725see from GWT, and his tips and learnings from developing with GWT.</div>
726  </div>
727</div>
728<div class="project">
729  <div class="screenshot">
730    <a href="http://www.whirled.com/" target="_blank"><img src="images/whirled.jpg" alt="Whirled"/></a>
731  </div>
732  <div class="info">
733    <div class="name"><a href="http://www.whirled.com/" target="_blank">Whirled</a></div>
734    <div class="snippet">Built by <a href="http://www.threerings.net">Three Rings</a>, Whirled
735is a social virtual world website which includes multi-player games.
736Visit our <a href="developer_spotlight.html">Developer Spotlight</a> to see Michael Bayne, CTO of Three Rings and lead engineer on Whirled, share
737how they used GWT to build Whirled, what he likes and would like to see
738from GWT, and his tips and learnings from developing with GWT.</div>
739  </div>
740</div>
741
742
743                </div>
744            </div>
745        </div>
746
747

747<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

747
748

748<script>window.jQuery || document.write("

748<script src='./assets/build/js/vendor/jquery-1.11.0.min.js'><\/script>")</script>

748
749
750

750<script src='./assets/build/js/vendor/jquery.flexnav.js'></script>

750
751

751<script src='./assets/build/js/global.min.js'></script>

751
752
753    </body>
754</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.