Basic documentation of the declarative format for ordered layouts.

Change-Id: Ie12ff05f8dd22677727127bec33cf2c4ba046c6b

documentation/layout/layout-orderedlayout.asciidoc

@@ -20,7 +20,6 @@ vertically. [classname]#HorizontalLayout# has undefined size in both dimensions.
 
 Typical use of the layouts goes as follows:
 
-
 [source, java]
 ----
 VerticalLayout vertical = new VerticalLayout ();
@@ -39,10 +38,20 @@ image::img/orderedlayout_vertical.png[width=30%, scaledwidth=65%]
 
 image::img/orderedlayout_horizontal.png[width=80%, scaledwidth=100%]
 
-[[layout.orderedlayout.properties]]
-== Properties or Attributes
+ifdef::web[]
+[[layout.orderedlayout.declarative]]
+== Declarative Format
 
-Ordered layouts have the following properties:
+Ordered layouts have the following declarative elements:
+
+|===============
+|Component|Element Name
+|[classname]#VerticalLayout#|[elementname]#v-verticallayout#
+|[classname]#HorizontalLayout#|[elementname]#v-horizontallayout#
+|[classname]#FormLayout#|[elementname]#v-formlayout#
+|===============
+
+The have the following declarative attributes:
 
 [[layout.orderedlayout.properties.table]]
 .Properties and Declarative Attributes
@@ -54,9 +63,37 @@ Ordered layouts have the following properties:
 |[parameter]#spacing#|[parameter]##spacing##++[=++[replaceable]##<boolean>##++]++
 |[parameter]#margin#|[parameter]##margin##++[=++[replaceable]##<boolean>##++]++
 |[parameter]#expandRatio#|Expand ratio of a child component is specified in the child with: [parameter]#:expand#++[=++[replaceable]##<integer>##++]++ or [parameter]#:expand# (implies ratio 1)
-
 |===============
 
+They can also have any attributes applicable to super classes.
+
+For example:
+
+[source, html]
+----
+<!-- Use margin and spacing -->
+<v-vertical-layout size-full margin spacing>
+  <v-label><b>Hello!</b> - How are you?</v-label>
+
+  <!-- Use expand ratio -->
+  <v-horizontal-layout size-full :expand>
+    ...
+
+    <!-- Use expand ratio -->
+    <v-table _id="mytable" caption="My Table"
+             size-full :expand/>
+  </v-horizontal-layout>
+
+  <v-horizontal-layout width-full>
+    ...
+
+    <!-- Use alignment -->
+    <v-button :right><b>OK</b></v-button>
+  </v-horizontal-layout>
+</v-vertical-layout>
+----
+endif::web[]
+
 [[layout.orderedlayout.spacing]]
 == Spacing in Ordered Layouts