diff options
| -rw-r--r-- | documentation/advanced/advanced-navigator.asciidoc | 28 | ||||
| -rw-r--r-- | documentation/application/application-declarative.asciidoc | 62 | ||||
| -rw-r--r-- | documentation/layout/layout-overview.asciidoc | 16 |
3 files changed, 53 insertions, 53 deletions
diff --git a/documentation/advanced/advanced-navigator.asciidoc b/documentation/advanced/advanced-navigator.asciidoc index a03c05367f..4d74c683e5 100644 --- a/documentation/advanced/advanced-navigator.asciidoc +++ b/documentation/advanced/advanced-navigator.asciidoc @@ -170,17 +170,17 @@ following declarative design for the view: [source, html] ---- -<v-vertical-layout size-full> - <v-horizontal-layout size-full :expand> - <v-panel caption="List of Equals" height-full width-auto> - <v-vertical-layout _id="menuContent" width-auto margin/> - </v-panel> +<vaadin-vertical-layout size-full> + <vaadin-horizontal-layout size-full :expand> + <vaadin-panel caption="List of Equals" height-full width-auto> + <vaadin-vertical-layout _id="menuContent" width-auto margin/> + </vaadin-panel> - <v-panel _id="equalPanel" caption="An Equal" size-full :expand/> - </v-horizontal-layout> + <vaadin-panel _id="equalPanel" caption="An Equal" size-full :expand/> + </vaadin-horizontal-layout> - <v-button _id="logout">Logout</v-button> -</v-vertical-layout> + <vaadin-button _id="logout">Logout</vaadin-button> +</vaadin-vertical-layout> ---- The view's logic code would be as follows: @@ -269,11 +269,11 @@ The animal sub-view would have the following declarative design: [source, html] ---- -<v-vertical-layout size-full> - <v-label _id="watching" size-auto :middle :center/> - <v-embedded _id="pic" :middle :center :expand/> - <v-label _id="back" size-auto :middle :center/> -</v-vertical-layout> +<vaadin-vertical-layout size-full> + <vaadin-label _id="watching" size-auto :middle :center/> + <vaadin-embedded _id="pic" :middle :center :expand/> + <vaadin-label _id="back" size-auto :middle :center/> +</vaadin-vertical-layout> ---- See the http://demo.vaadin.com/book-examples-vaadin7/book#advanced.navigator.basic[on-line example, window="_blank"]. diff --git a/documentation/application/application-declarative.asciidoc b/documentation/application/application-declarative.asciidoc index 316d6d7633..3e6fea7633 100644 --- a/documentation/application/application-declarative.asciidoc +++ b/documentation/application/application-declarative.asciidoc @@ -32,11 +32,11 @@ You could define it declaractively with the following equivalent design: [source, html] ---- -<v-vertical-layout> - <v-text-field caption="Name"/> - <v-text-field caption="Street address"/> - <v-text-field caption="Postal code"/> -</v-vertical-layout> +<vaadin-vertical-layout> + <vaadin-text-field caption="Name"/> + <vaadin-text-field caption="Street address"/> + <vaadin-text-field caption="Postal code"/> +</vaadin-vertical-layout> ---- See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"]. @@ -67,17 +67,17 @@ to variables in the Java code, as well as optional attributes. <!DOCTYPE html> <html> <body> - <v-vertical-layout size-full> + <vaadin-vertical-layout size-full> <!-- Label with HTML content --> - <v-label><b>Hello!</b> - How are you?</v-label> + <vaadin-label><b>Hello!</b> - How are you?</vaadin-label> - <v-horizontal-layout size-full :expand> - <v-tree _id="mytree" caption="My Tree" + <vaadin-horizontal-layout size-full :expand> + <vaadin-tree _id="mytree" caption="My Tree" width-auto height-full/> - <v-table _id="mytable" caption="My Table" + <vaadin-table _id="mytable" caption="My Table" size-full :expand/> - </v-horizontal-layout> - </v-vertical-layout> + </vaadin-horizontal-layout> + </vaadin-vertical-layout> </body> </html> ---- @@ -98,12 +98,12 @@ Hierarchical UI">>. HTML elements of the declarative syntax are directly mapped to Vaadin components according to their Java class names. The tag of a component element has a namespace prefix separated by a dash. Vaadin core components, which are defined -in the [package]#com.vaadin.ui# package, have [literal]#++v-++# prefix. The rest +in the [package]#com.vaadin.ui# package, have [literal]#++vaadin-++# prefix. The rest of an element tag is determined from the Java class name of the component, by making it lower-case, while adding a dash ( [literal]#++-++#) before every previously upper-case letter as a word separator. For example, [classname]#ComboBox# component has declarative element tag -[literal]#++<v-combo-box>++#. +[literal]#++<vaadin-combo-box>++#. [[application.declarative.elements.prefix]] === Component Prefix to Package Mapping @@ -144,12 +144,12 @@ You would make the package prefix mapping and then use the component as follows: </head> <body> - <v-vertical-layout> - <v-label><b>Hello!</b> - How are you?</v-label> + <vaadin-vertical-layout> + <vaadin-label><b>Hello!</b> - How are you?</vaadin-label> <!-- Use it here --> **<my-example-component/>** - </v-vertical-layout> + </vaadin-vertical-layout> </body> </html> ---- @@ -163,7 +163,7 @@ caption. For example: [source, html] ---- -<v-button><b>OK</b></v-button> +<vaadin-button><b>OK</b></vaadin-button> ---- Some components, such as selection components, allow defining inline data within @@ -172,11 +172,11 @@ the element. For example: [source, html] ---- -<v-native-select> +<vaadin-native-select> <option>Mercury</option> <option>Venus</option> <option selected>Earth</option> -</v-native-select> +</vaadin-native-select> ---- The declarative syntax of each component type is described in the JavaDoc API @@ -205,7 +205,7 @@ classes. [source, html] ---- -<v-text-field caption="Name" input-prompt="Enter Name"/> +<vaadin-text-field caption="Name" input-prompt="Enter Name"/> ---- @@ -230,7 +230,7 @@ example, the [literal]#++enabled++# attribute is boolean and has default value " [source, html] ---- -<v-button enabled="false">OK</v-button> +<vaadin-button enabled="false">OK</vaadin-button> ---- @@ -246,19 +246,19 @@ component [parameter]#c# is equivalent to calling [methodname]#setExpandRatio(c, [subs="normal"] ---- -<v-vertical-layout size-full> +<vaadin-vertical-layout size-full> <!-- Align right in the containing layout --> - <v-label width-auto **:right**>Hello!</v-label> + <vaadin-label width-auto **:right**>Hello!</vaadin-label> <!-- Expands to take up all remaining vertical space --> - <v-horizontal-layout size-full **:expand**> + <vaadin-horizontal-layout size-full **:expand**> <!-- Automatic width - shrinks horizontally --> - <v-tree width-auto height-full/> + <vaadin-tree width-auto height-full/> <!-- Expands horizontally to take remaining space --> - <v-table size-full **:expand**/> - </v-horizontal-layout> -</v-vertical-layout> + <vaadin-table size-full **:expand**/> + </vaadin-horizontal-layout> +</vaadin-vertical-layout> ---- Again, compare the above declaration to the Java code given in <<dummy/../../../framework/application/application-architecture#application.architecture,"Building @@ -286,7 +286,7 @@ design. This is the recommended way to identifying components. [source, html] ---- -<v-tree _id="mytree" caption="My Tree"/> +<vaadin-tree _id="mytree" caption="My Tree"/> ---- @@ -337,7 +337,7 @@ public class MyViewDesign extends VerticalLayout { See the http://demo.vaadin.com/book-examples-vaadin7/book#application.declarative.designroot[on-line example, window="_blank"]. The design root class must match or extend the root element class of the design. -For example, earlier we had [literal]#++<v-vertical-layout>++# element in the +For example, earlier we had [literal]#++<vaadin-vertical-layout>++# element in the HTML file, which can be bound to a class extending [classname]#VerticalLayout#. diff --git a/documentation/layout/layout-overview.asciidoc b/documentation/layout/layout-overview.asciidoc index ba1bb603ae..6481db6229 100644 --- a/documentation/layout/layout-overview.asciidoc +++ b/documentation/layout/layout-overview.asciidoc @@ -42,14 +42,14 @@ Or in the declarative format: [source, html] ---- -<v-vertical-layout> - <v-label>The Ultimate Cat Finder</v-label> - - <v-horizontal-layout> - <v-tree caption="Major Planets and Their Moons"/> - <v-panel/> - </v-horizontal-layout> -</v-vertical-layout> +<vaadin-vertical-layout> + <vaadin-label>The Ultimate Cat Finder</vaadin-label> + + <vaadin-horizontal-layout> + <vaadin-tree caption="Major Planets and Their Moons"/> + <vaadin-panel/> + </vaadin-horizontal-layout> +</vaadin-vertical-layout> ---- You will usually need to tune the layout components a bit by setting sizes, |