Framework documentation IN

Change-Id: I767477c1fc3745f9e1f58075fe30c9ac8da63581

1 files changed, 81 insertions, 0 deletions

diff --git a/documentation/components/components-overview.asciidoc b/documentation/components/components-overview.asciidoc
new file mode 100644
index 0000000000..c1d133f9f9
--- /dev/null
+++ b/documentation/components/components-overview.asciidoc
@@ -0,0 +1,81 @@
+---
+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.
+
+====
+
+
+
+
+