Basics Flashcards
View
What you see on the screen. View can be composed of subviews
https://vaadin.com/docs/latest/_astro/view-navigation-hi.DVdzUaY5_tSioD.webp
View Schematic Diagram
https://vaadin.com/docs/latest/_astro/ui-schematic.CHVtZzt8_xsX6R.webp
Route
Each view is associated with a route, a part of the URL that signals to Vaadin to show a particular view.
Composing a view
A view is a composite component. This means that you build it hierarchically from other components
Menu
You can build a menu in many ways, by using the Tabs, Button, or Link components in a layout, or a component such as Grid.
Main View
The App Layout component gives a basic layout for the main view of an application. It has a menu area, as well as a content area controlled by the menu. It provides full navigation functionality between content views using routing.
Element
Vaadin allows Java code to control the DOM in the web
browser, with a server-side Java representation of the same
DOM tree. All changes are automatically synchronized to the
real DOM tree in the browser.
The DOM tree is built up from Element instances: each
instance represents a DOM element in the browser. The root
of the server-side DOM tree is the Element of the UI instance.
You can access it using the ui.getElement() method. This
element represents the <body> tag.
Elements on the server are implemented as flyweight
instances. This means that you cannot compare elements
using the == and != operators. Instead, you need to use the
element.equals(otherElement) method to check whether
two instances refer to the same DOM element in the
browser.
Element Hierarchy
A web app is structured as a tree of elements, with the UI
instance element as the root. An element can be added as a
child of another element, using methods such as:
element.appendChild(Element) to add an element at
the end of a parent’s child list, or
* element.insertChild(int, Element) to add an element
to any position in a child list.
You can use element.getParent() to navigate upwards in
the element hierarchy, and element.getChildren() to
navigate downwards.
Component Hierarchy
The Component class wraps the Element and provides a
higher level of abstraction. You can obtain the element
representation of a component using the
Component.getElement() method.
The component’s element can optionally contain any
number of child elements. In addition to the low-level
element, the component itself can also support child
components, and methods similar to
Component.add(Component… ) are provided for this
purpose.
You can navigate through the component’s hierarchy using
component.getParent() to navigate upwards, and
component.getChildren() to navigate downwards.
Vaadin Components
Each component consists of a client-side Web
Component (with CSS styles), and an associated Java
class, providing the server-side API.
