diff options
| author | Marko Gronroos <magi@vaadin.com> | 2016-03-16 15:09:46 +0200 |
|---|---|---|
| committer | Marko Gronroos <magi@vaadin.com> | 2016-03-16 15:09:46 +0200 |
| commit | ce1d609b9cb9fbe0129d91a0fc79d60079d5efae (patch) | |
| tree | 261f59cf65f081de0024be521eb26a140bbed29e /documentation/application | |
| parent | ca2e1a6bda8b5b67b86bdfec9225356ddd0bbada (diff) | |
| download | vaadin-framework-ce1d609b9cb9fbe0129d91a0fc79d60079d5efae.tar.gz vaadin-framework-ce1d609b9cb9fbe0129d91a0fc79d60079d5efae.zip | |
Formatting fixes mainly to chapters 1-4.
Change-Id: Ie7699ae777791689e0026e241efdf46274776bff
Diffstat (limited to 'documentation/application')
| -rw-r--r-- | documentation/application/application-declarative.asciidoc | 60 | ||||
| -rw-r--r-- | documentation/application/application-environment.asciidoc | 43 |
2 files changed, 43 insertions, 60 deletions
diff --git a/documentation/application/application-declarative.asciidoc b/documentation/application/application-declarative.asciidoc index 3e6fea7633..b741cf1cab 100644 --- a/documentation/application/application-declarative.asciidoc +++ b/documentation/application/application-declarative.asciidoc @@ -29,7 +29,6 @@ See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.b You could define it declaractively with the following equivalent design: - [source, html] ---- <vaadin-vertical-layout> @@ -38,7 +37,9 @@ You could define it declaractively with the following equivalent design: <vaadin-text-field caption="Postal code"/> </vaadin-vertical-layout> ---- +ifdef::web[] See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"]. +endif::web[] Declarative designs can be crafted by hand, but are most conveniently created with the Vaadin Designer. @@ -52,7 +53,7 @@ handling user interaction events. A design is an HTML document with custom elements for representing components and their configuration. A design has a single root component inside the HTML -body element. Enclosing [literal]#++<html>++#, [literal]#++<head>++#, +body element. Enclosing [literal]#++<html>++#, [literal]#++<head>++#, and [literal]#++<body>++# are optional, but necessary if you need to make namespace definitions for custom components. Other regular HTML elements may not be used in the file, except inside components that specifically accept HTML content. @@ -61,7 +62,6 @@ In a design, each nested element corresponds to a Vaadin component in a component tree. Components can have explicitly given IDs to enable binding them to variables in the Java code, as well as optional attributes. - [source, html] ---- <!DOCTYPE html> @@ -69,13 +69,14 @@ to variables in the Java code, as well as optional attributes. <body> <vaadin-vertical-layout size-full> <!-- Label with HTML content --> - <vaadin-label><b>Hello!</b> - How are you?</vaadin-label> + <vaadin-label><b>Hello!</b> - + How are you?</vaadin-label> <vaadin-horizontal-layout size-full :expand> - <vaadin-tree _id="mytree" caption="My Tree" - width-auto height-full/> - <vaadin-table _id="mytable" caption="My Table" - size-full :expand/> + <vaadin-tree _id="mytree" caption="My Tree" + width-auto height-full/> + <vaadin-table _id="mytable" caption="My Table" + size-full :expand/> </vaadin-horizontal-layout> </vaadin-vertical-layout> </body> @@ -95,15 +96,11 @@ Hierarchical UI">>. [[application.declarative.elements]] == Component Elements -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]#++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]#++<vaadin-combo-box>++#. +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]#++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 (`-`) before every previously upper-case letter as a word separator. +For example, [classname]#ComboBox# component has declarative element tag [vaadinelement]#vaadin-combo-box#. [[application.declarative.elements.prefix]] === Component Prefix to Package Mapping @@ -113,15 +110,14 @@ composite components, and add-on components. To do so, you need to define a mapping from an element prefix to the Java package of the component. The prefix is used as a sort of a namespace. -The mappings are defined in [literal]#++<meta name="package-mapping" ...>++# +The mappings are defined in `<meta name="package-mapping" ...>` elements in the HTML head. A [parameter]#content# attribute defines a mapping, in notation with a prefix separated from the corresponding Java package name -with a colon, such as " [literal]#++my:com.example.myapp++#". +with a colon, such as `my:com.example.myapp`. For example, consider that you have the following composite class [classname]#com.example.myapp.ExampleComponent#: - [source, java] ---- package com.example.myapp; @@ -140,12 +136,14 @@ You would make the package prefix mapping and then use the component as follows: <!DOCTYPE html> <html> <head> - **<meta name="package-mapping" content="my:com.example.myapp" />** + **<meta name="package-mapping" + content="my:com.example.myapp" />** </head> <body> <vaadin-vertical-layout> - <vaadin-label><b>Hello!</b> - How are you?</vaadin-label> + <vaadin-label><b>Hello!</b> - + How are you?</vaadin-label> <!-- Use it here --> **<my-example-component/>** @@ -221,12 +219,9 @@ Some attribute names are given by a shorthand. For example, you would set with [methodname]#setAlternateText()#, is given as the [literal]#++alt++# attribute. -Boolean values must be either " [literal]#++true++#" or " [literal]#++false++#". -The value can be omitted, in which case [literal]#++true++# is assumed. For -example, the [literal]#++enabled++# attribute is boolean and has default value " -[literal]#++true++#", so [literal]#++enabled="true"++# and -[literal]#++enabled++# and equivalent. - +Boolean values must be either `true` or `false`. +The value can be omitted, in which case `true` is assumed. +For example, the [literal]#++enabled++# attribute is boolean and has default value "`true`", so `enabled="true"` and `enabled` and equivalent. [source, html] ---- @@ -317,7 +312,7 @@ For example, the following class could be used to bind the design given earlier. public class MyViewDesign extends VerticalLayout { Tree mytree; Table mytable; - + public MyViewDesign() { Design.read("MyDeclarativeUI.html", this); @@ -326,7 +321,7 @@ public class MyViewDesign extends VerticalLayout { TreeExample.createTreeContent()); mytable.setContainerDataSource( TableExample.generateContent()); - + // Some interaction mytree.addItemClickListener(event -> // Java 8 Notification.show("Selected " + @@ -391,8 +386,3 @@ navigator.addView(MAINVIEW, new MainView()); See <<dummy/../../../framework/advanced/advanced-navigator#advanced.navigator.urifragment,"Handling URI Fragment Path">> for a complete example. - - - - - diff --git a/documentation/application/application-environment.asciidoc b/documentation/application/application-environment.asciidoc index 8907222a24..0322c77e4a 100644 --- a/documentation/application/application-environment.asciidoc +++ b/documentation/application/application-environment.asciidoc @@ -25,9 +25,9 @@ that form an application. Such a Java web application is typically packaged as a WAR package for deployment. Server-side Vaadin UIs run as servlets within such a Java web application. There exists also other kinds of web applications. To avoid confusion with the general meaning of "web application", we often refer to -Java web applications with the slight misnomer "WAR" in this book.//TODO Vaadin -7: What is the relationship between servlet and -application? +Java web applications with the slight misnomer "WAR" in this book. + +// TODO Vaadin 7: What is the relationship between servlet and application? [[application.environment.war-eclipse]] == Creating Deployable WAR in Eclipse @@ -35,41 +35,34 @@ application? To deploy an application to a web server, you need to create a WAR package. Here we give the instructions for Eclipse. -. Select "File > Export" and then "Web > WAR File". Or, right-click the project in -the Project Explorer and select "Web > WAR File". +. Select "File > Export" and then "Web > WAR File". Or, right-click the project in the Project Explorer and select "Web > WAR File". -. Select the [guilabel]#Web project# to export. Enter [guilabel]#Destination# file -name ( [filename]#.war#). +. Select the [guilabel]#Web project# to export. Enter [guilabel]#Destination# file name ([filename]#.war#). . Make any other settings in the dialog, and click [guibutton]#Finish#. - - [[application.environment.war]] == Web Application Contents The following files are required in a web application in order to run it. -[filename]#WEB-INF/web.xml# (optional with Servlet 3.0):: This is the web application descriptor that defines how the application is -organized, that is, what servlets and such it has. You can refer to any Java -book about the contents of this file. It is not needed if you define the Vaadin -servlet with the [literal]#++@WebServlet++# annotation in Servlet API 3.0. - -[filename]#WEB-INF/lib/*.jar# :: These are the Vaadin libraries and their dependencies. They can be found in the -installation package or as loaded by a dependency management system such as -Maven or Ivy. - -Your UI classes:: You must include your UI classes either in a JAR file in [filename]#WEB-INF/lib# -or as classes in [filename]#WEB-INF/classes# - -Your own theme files (OPTIONAL):: If your application uses a special theme (look and feel), you must include it in -[filename]#VAADIN/themes/themename# directory. +[filename]#WEB-INF/web.xml# (optional with Servlet 3.0):: + his is the web application descriptor that defines how the application is rganized, that is, what servlets and such it has. +You can refer to any Java book about the contents of this file. +It is not needed if you define the Vaadin servlet with the [classname]#@WebServlet# annotation in Servlet API 3.0. -Widget sets (OPTIONAL):: If your application uses a project-specific widget set, it must be compiled in -the [filename]#VAADIN/widgetset/# directory. +[filename]#WEB-INF/lib/*.jar# :: +These are the Vaadin libraries and their dependencies. +They can be found in the installation package or as loaded by a dependency management system such as Maven or Ivy. +Your UI classes:: +You must include your UI classes either in a JAR file in [filename]#WEB-INF/lib# or as classes in [filename]#WEB-INF/classes# +Your own theme files (OPTIONAL):: +If your application uses a special theme (look and feel), you must include it in [filename]#VAADIN/themes/themename# directory. +Widget sets (OPTIONAL):: +If your application uses a project-specific widget set, it must be compiled in the [filename]#VAADIN/widgetset/# directory. [[application.environment.webservlet]] == Web Servlet Class |