1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vaadin @version@</title>
<link rel="stylesheet" type="text/css" href="demo/css/styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="demo/css/ie.css" />
<![endif]-->
</head> <!-- /head -->
<body>
<div id="header">
<h1>Vaadin – thinking of U and I</h1>
<div id="version">
<strong>Version @version@</strong>
<a href="release-notes.html" class="release-notes" title="Read the release notes for this Vaadin version">Release Notes »</a>
<span class="version-check">(<a href="http://www.itmill.com/downloads/itmill-toolkit.htm?checkVersion" title="Check if you have the latest Vaadin version (requires Internet connection)">check for latest version</a>)</span>
</div>
</div> <!-- /header -->
<div id="subheader">
<ul id="menu">
<li><a href="#sampler">Sampler</a></li>
<li>•</li>
<li><a href="#addons">Add-ons</a></li>
<li>•</li>
<li><a href="#code-examples">Code Examples</a></li>
<li>•</li>
<li><a href="#getting-started">Getting Started</a></li>
<li>•</li>
<li><a href="#docs">Documentation</a></li>
<li>•</li>
<li><a href="#support">Support</a></li>
</ul>
<ul id="links">
<li><a href="http://vaadin.com/forum" title="Open vaadin.com/forum">Discussion Forum »</a></li>
<li><a href="http://dev.vaadin.com" title="Open dev.vaadin.com">Issue Tracker »</a></li>
<li><a href="http://www.vaadin.com" title="Open www.vaadin.com">Vaadin Home »</a></li>
</ul>
</div> <!-- /subheader -->
<div id="upfront">
<div id="sampler">
<a href="sampler/" class="demoapp">
<div id="sampler-slideshow">
<ul>
<li class="active"><img src="demo/img/sampler/home.png" alt="Sampler home screen" /></li>
<li><img src="demo/img/sampler/category.png" alt="Sampler category screen" /></li>
<li><img src="demo/img/sampler/sample.png" alt="Sampler individual sample screen" /></li>
<li><img src="demo/img/sampler/source.png" alt="Sampler example source code" /></li>
</ul>
<span class="mask"></span>
</div>
<h2>Sampler</h2>
<p>The Sampler contains examples of all Vaadin core components and their features with example source code available for copy-pasting.</p>
<strong class="start">Start Sampler »</strong>
<strong class="new"><em>Notable In This Release</em> • Drag'n'drop • Keyboard Shortcuts • AbsoluteLayout • GWT 2.0</strong>
</a>
</div>
</div> <!-- /upfront -->
<div id="content">
<div id="addons">
<h3>Vaadin Add-on Demos</h3>
<ul>
<li><a href="http://demo.vaadin.com/timeline" title="Open Timeline demo (online)"><img src="demo/img/addons/timeline.png" alt="" /><span><h4>Timeline</h4> Interactive lazy-loading graphs</span></a></li>
<li><a href="http://demo.vaadin.com/colorpicker" title="Open ColorPicker demo (online)"><img src="demo/img/addons/colorpicker.png" alt="" /><span><h4>ColorPicker</h4> Cross-browser color picking</span></a></li>
<li><a href="http://demo.vaadin.com/chameleontheme" title="Open Cameleon Theme demo (online)"><img src="demo/img/addons/chameleon.png" alt="" /><span><h4>Chameleon Theme</h4>Create your own theme in seconds</span></a></li>
<li><a href="http://demo.vaadin.com/jpacontainer" title="Open JPAContainer demo (online)"><img src="demo/img/addons/jpacontainer.png" alt="" /><span><h4> JPAContainer</h4></span></a></li>
</ul>
</div> <!-- /addons -->
<div id="directory-teaser">
<a href="http://vaadin.com/directory">
<h4>Download these add-ons <em>and hundreds more...</em></h4>
<h3>Vaadin Add-on Directory</h3>
<p>The Directory collects add-ons for Vaadin in one central on-line repository. It makes them easy to browse, evaluate, download, integrate and buy.</p>
<p>Some of the add-ons are Open Source and free – some require a commercial per developer license.</p>
<p>You can also distribute your own add-ons
in the Directory, free or commercial.</p>
<span>Go to the Directory at vaadin.com »</span>
</a>
</div>
<div id="code-examples">
<h3>Code Examples</h3>
<p>Below are some examples of Vaadin UI code. The applications themselves are useless, but you can see how the actual code looks like by clicking the "sources" links.</p>
<ul class="link-list">
<li><a class="demoapp" href="HelloWorld/">Hello world</a> (<a href="docs/example-source/com/vaadin/demo/HelloWorld.java.html">sources</a>)</li>
<li><a class="demoapp" href="Calc/">Calculator</a> (<a href="docs/example-source/com/vaadin/demo/Calc.java.html">sources</a>)</li>
<li><a class="demoapp" href="VaadinTunesLayout/">VaadinTunes – advanced layout & theme</a> (<a href="docs/example-source/com/vaadin/demo/VaadinTunesLayout.java.html">sources</a>)</li>
<li><a class="demoapp" href="Coverflow/">Coverflow – Flex integration</a> (<a href="docs/example-source/com/vaadin/demo/coverflow">sources</a>)</li>
<li><a class="demoapp" href="ReindeerTheme">Reindeer theme – see available styles</a></li>
</ul>
</div> <!-- /code-examples -->
<div id="getting-started">
<h3>Getting Started</h3>
<div id="eclipse">
<a href="http://www.vaadin.com/eclipse">
<h4>Vaadin Eclipse Plugin</h4>
<p>The easiest way to start working with Vaadin is to use Eclipse IDE and download the Vaadin Eclipse plugin from our website.</p>
<span>How to install the Vaadin Eclipse Plugin »</span>
</a>
</div>
<div id="tutorial">
<h4>Tutorial - Address Book</h4>
<p class="tutorial">Read the step-by-step tutorial and learn how to build a simple contact management app.</p>
<ul>
<li><a href="http://www.vaadin.com/tutorial/">Step-by-step Tutorial »</a></li>
<li><a href="AddressBook/" class="demoapp">See Address Book application »</a></li>
</ul>
</div>
</div> <!--/getting-started -->
<div id="docs">
<h3>Documentation</h3>
<p class="documentation">Need help using Vaadin? Look no further. Everything you need to know is here.</p>
<ul class="link-list">
<li><a href="docs/book-of-vaadin.pdf">Book of Vaadin (manual) »</a></li>
<li><a href="docs/api/index.html">JavaDoc API »</a></li>
<li><a href="http://www.vaadin.com/forum">Discussion Forum »</a></li>
</ul>
</div> <!-- /docs -->
<div id="support">
<div id="open-source">
<h4>Open Source Development</h4>
<p>Vaadin is developed as an Open Source software and its core is licensed under
the liberal Apache 2.0 License. Commercial licenses that include support are also available.</p>
<ul class="link-list">
<li><a href="http://dev.vaadin.com" title="Open dev.vaadin.com">Developer Website »</a></li>
<li><a href="license/licensing-guidelines.html">Licensing Guidelines »</a></li>
</ul>
</div>
<div id="pro">
<h4>Support & Services</h4>
<p>The commercial products complement Vaadin and make it possible for you to get better results quicker – both from a development perspective as well as from a business perspective.</p>
<p>We are also glad to help you hands on or even do the work for you – which ever you prefer.</p>
<p>Read more about the <a href="http://www.vaadin.com/services/">Services</a> or the <a href="http://www.vaadin.com/support/">Support</a> alternatives.</p>
</div>
</div> <!-- /support -->
</div> <!-- /content -->
<script type="text/javascript" src="demo/js/jquery.min.js"></script>
<script src="demo/js/fonts.js" type="text/javascript"></script>
<script type="text/javascript">
var slideSwitch = function() {
var $active = $('#sampler-slideshow li.active');
if ( $active.length == 0 ) $active = $('#sampler-slideshow li:last-child');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#sampler-slideshow li:first-child');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 500, function() {
$active.removeClass('active last-active');
});
}
window.onload = function() {
try {
if(window.location.search && (window.location.search.indexOf('gwt.hosted') != -1 || window.location.search.indexOf('gwt.codesvr') != -1)) {
var hostedParam = window.location.search;
var demolinks = document.getElementsByTagName("a");
for (var k = 0; k < demolinks.length; k++) {
var link = demolinks[k];
if(link.className.indexOf
("demoapp") != -1) {
link.href = link.href + hostedParam;
}
}
}
} catch(e) {}
setInterval( "slideSwitch()", 2200 );
}
Cufon.replace(["h2","h3","#sampler .start","#directory-teaser h4"], {fontFamily: "HelveticaRounded"});
</script>
</body>
</html>
|
