123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- ---
- title: Overview
- order: 1
- layout: page
- ---
-
- [[components.overview]]
- = Overview
-
- Vaadin provides a comprehensive set of user interface components and allows you
- to define custom components. <<figure.uicomponents>> illustrates the inheritance
- hierarchy of the UI component classes and interfaces. Interfaces are displayed
- in gray, abstract classes in orange, and regular classes in blue. An annotated
- version of the diagram is featured in the __Vaadin Cheat Sheet__.
-
- [[figure.uicomponents]]
- .User Interface Component Class Hierarchy
- image::img/component-diagram-hi.png[]
-
- ((("[classname]#Component#")))
- At the top of the interface hierarchy, we have the [classname]#Component#
- interface.
- ((("[classname]#AbstractComponent#")))
- At the top of the class hierarchy, we have the [classname]#AbstractComponent#
- class.
- ((("[classname]#AbstractField#")))
- ((("[classname]#AbstractComponentContainer#")))
- It is inherited by two other abstract classes: [classname]#AbstractField#,
- inherited further by field components, and
- [classname]#AbstractComponentContainer#, inherited by various container and
- layout components. Components that are not bound to a content data model, such
- as labels and links, inherit [classname]#AbstractComponent# directly.
-
- ((("layout")))
- ((("[classname]#Layout#")))
- The layout of the various components in a window is controlled, logically, by
- layout components, just like in conventional Java UI toolkits for desktop
- applications. In addition, with the [classname]#CustomLayout# component, you can
- write a custom layout as an HTML template that includes the locations of any
- contained components. Looking at the inheritance diagram, we can see that layout
- components inherit the [classname]#AbstractComponentContainer# and the
- [classname]#Layout# interface. Layout components are described in detail in
- <<dummy/../../../framework/layout/layout-overview.asciidoc#layout.overview,"Managing
- Layout">>.
-
- ((("[classname]#Window#")))
- Looking at it from the perspective of an object hierarchy, we would have a
- [classname]#Window# object, which contains a hierachy of layout components,
- which again contain other layout components, field components, and other visible
- components.
-
- ((("Sampler")))
- ((("JavaDoc")))
- You can browse the built-in UI components of Vaadin library in the Sampler
- application of the Vaadin Demo. The Sampler shows a description, JavaDoc
- documentation, and a code samples for each of the components.
-
- In addition to the built-in components, many components are available as
- add-ons, either from the Vaadin Directory or from independent sources. Both
- commercial and free components exist. The installation of add-ons is described
- in
- <<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using
- Vaadin Add-ons">>.
-
-
- [NOTE]
- .Vaadin Cheat Sheet and Refcard
- ====
- <<figure.uicomponents>> is included in the Vaadin Cheat Sheet that illustrates
- the basic relationship hierarchy of the user interface components and data
- binding classes and interfaces. You can download it at http://vaadin.com/book.
-
- The diagram is also included in the six-page DZone Refcard, which you can find
- at https://vaadin.com/refcard.
-
- ====
-
-
-
-
|