| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- ---
- 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.
-
- The component hierarchy of Vaadin is presented in the next four diagrams:
-
- * <<figure.uicomponents>>
- illustrates the inheritance
- hierarchy of the UI component classes and interfaces not bound directly to
- business objects.
-
- * <<figure.uifields>>
- presents fields bound to single values
-
- * <<figure.uiselects>>
- presents components that show a list of data and allow selection
-
- * <<figure.uicontainers>>
- layouts and other component containers
-
- Interfaces are displayed
- with a dotted outline, abstract classes in gray, and regular classes in blue.
- ////
- TODO outdated information. Uncomment when fixed.
- An annotated
- version of the diagram is featured in the __Vaadin Cheat Sheet__.
- ////
-
-
- [[figure.uicomponents]]
- .Basic Components
- image::img/component-class-hierarchy.png[width=100%, scaledwidth=100%]
-
- [[figure.uifields]]
- .Field Components
- image::img/field-class-hierarchy.png[width=100%, scaledwidth=100%]
-
- [[figure.uiselects]]
- .Selection Components
- image::img/selects-class-hierarchy.png[width=100%, scaledwidth=100%]
-
- [[figure.uicontainers]]
- .Layouts and Component Containers
- image::img/component-container-class-hierarchy.png[width=100%, scaledwidth=100%]
-
-
- ((("[classname]#Component#")))
- The [classname]#Component# is interface implemented by all components.
- ((("[classname]#AbstractComponent#")))
- In practice, all components extend the [classname]#AbstractComponent#
- abstract class.
-
- ((("[classname]#AbstractField#")))
- ((("[classname]#AbstractComponentContainer#")))
- ((("[classname]#AbstractListing#")))
- There are three more specific types of components.
-
- Field Components:: allow user to edit a value in the UI. All extend [classname]#AbstractField#. Field components are described in detail in <<components-fields#components.fields,"Field Components">>.
-
- Selection Component:: show a list of data that the user can select from. All extend [classname]#AbstractListing#. Selection components are described in detail in
- <<components-selection#components.selection,"Selection Components">>.
-
- Layouts and Component Containers:: Components that can contain other components. All layouts and containers implement the [interfacename]#HasComponents# interface. Layout components are described in detail in
- <<../layout/layout-overview#layout.overview,"Managing
- Layout">>.
-
- ((("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 <<../addons/addons-overview#addons.overview,"Using
- Vaadin Add-ons">>.
-
- ////
- TODO outdated information. Uncomment when fixed.
- [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.
-
- ====
- ////
|
