--- title: Overview order: 1 layout: page --- [[application.overview]] = Overview A Vaadin Framework application runs as a Java Servlet in a servlet container. The Java Servlet API is, however, hidden behind the framework. The user interface of the application is implemented as a __UI__ class, which needs to create and manage the user interface components that make up the user interface. User input is handled with event listeners, although it is also possible to bind the user interface components directly to data. The visual style of the application is defined in themes as CSS or Sass. Icons, other images, and downloadable files are handled as __resources__, which can be external or served by the application server or the application itself. [[figure.application.architecture]] .Vaadin Framework Application Architecture image::img/application-architecture.png[width=75%, scaledwidth=90%] <> illustrates the basic architecture of an application made with the Vaadin Framework, with all the major elements, which are introduced below and discussed in detail in this chapter. First of all, a Vaadin Framework application must have one or more UI classes that extend the abstract [classname]#com.vaadin.ui.UI# class and implement the [methodname]#init()# method. A custom theme can be defined as an annotation for the UI. [source, java] ---- @Theme("hellotheme") public class HelloWorld extends UI { protected void init(VaadinRequest request) { ... initialization code goes here ... } } ---- A UI is a viewport to the application running in a web page. A web page can actually have multiple such UIs within it. Such situation is typical especially with portlets in a portal. An application can run in multiple browser windows, each having a distinct [classname]#UI# instance. The UIs of an application can be the same UI class or different. Vaadin Framework handles servlet requests internally and associates the requests with user sessions and a UI state. Because of this, you can develop applications with Vaadin Framework much like you would develop desktop applications. The most important task in the initialization is the creation of the initial user interface. This, and the deployment of a UI as a Java Servlet in the Servlet container, as described in <>, are the minimal requirements for an application. Below is a short overview of the other basic elements of an application besides UI: UI:: A __UI__ represents an HTML fragment in which a Vaadin application runs in a web page. It typically fills the entire page, but can also be just a part of a page. You normally develop an application with Vaadin Framework by extending the [classname]#UI# class and adding content to it. A UI is essentially a viewport connected to a user session of an application, and you can have many such views, especially in a multi-window application. Normally, when the user opens a new page with the URL of the UI, a new [classname]#UI# (and the associated [classname]#Page# object) is automatically created for it. All of them share the same user session. + The current UI object can be accessed globally with [methodname]#UI.getCurrent()#. The static method returns the thread-local UI instance for the currently processed request ifdef::web[] (see <>) endif::web[] . Page:: A [classname]#UI# is associated with a [classname]#Page# object that represents the web page as well as the browser window in which the UI runs. + The [classname]#Page# object for the currently processed request can be accessed globally from a Vaadin application with [methodname]#Page.getCurrent()#. This is equivalent to calling [methodname]#UI.getCurrent().getPage()#. Vaadin Session:: A [classname]#VaadinSession# object represents a user session with one or more UIs open in the application. A session starts when a user first opens a UI of a Vaadin application, and closes when the session expires in the server or when it is closed explicitly. User Interface Components:: The user interface consists of components that are created by the application. They are laid out hierarchically using special __layout components__, with a content root layout at the top of the hierarchy. User interaction with the components causes __events__ related to the component, which the application can handle. __Field components__ are intended for inputting values and can be directly bound to data using the data model of the framework. You can make your own user interface components through either inheritance or composition. For a thorough reference of user interface components, see <>, for layout components, see <>, and for compositing components, see <>. Events and Listeners:: Vaadin Framework follows an event-driven programming paradigm, in which events, and listeners that handle the events, are the basis of handling user interaction in an application (although also server push is possible as described in <>). <> gave an introduction to events and listeners from an architectural point-of-view, while <> later in this chapter takes a more practical view. Resources:: A user interface can display images or have links to web pages or downloadable documents. These are handled as __resources__, which can be external or provided by the web server or the application itself. <> gives a practical overview of the different types of resources. Themes:: The presentation and logic of the user interface are separated. While the UI logic is handled as Java code, the presentation is defined in __themes__ as CSS or SCSS. Vaadin includes some built-in themes. User-defined themes can, in addition to style sheets, include HTML templates that define custom layouts and other theme resources, such as images. Themes are discussed in detail in <>, custom layouts in <>, and theme resources in <>. Data Binding:: With data binding, any field component in Vaadin Framework can be bound to the properties of business objects such as JavaBeans and grouped together as forms. The components can get their values from and update user input to the data model directly, without the need for any control code. Similarly, any select component can be bound to a __data provider__, fetching its items from a Java Collection or a backend such as an SQL database. For a complete overview of data binding in Vaadin, please refer to <>.>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 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432