Step 6 | 05:26 | Create the form using Vaadin Designer

amahdy · Jun 1, 2017 · b1a0537 · b1a0537
1 parent df19c71
commit b1a0537
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/main/java/org/vaadin/stepbystep/PersonEditorDesign.java b/src/main/java/org/vaadin/stepbystep/PersonEditorDesign.java
@@ -4,6 +4,10 @@
 import com.vaadin.annotations.DesignRoot;
 import com.vaadin.ui.declarative.Design;
 import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.Button;
 
 /**
  * !! DO NOT EDIT THIS FILE !!
@@ -17,6 +21,14 @@
 @AutoGenerated
 @SuppressWarnings("serial")
 public class PersonEditorDesign extends VerticalLayout {
+    protected TextField firstName;
+    protected TextField lastName;
+    protected TextField email;
+    protected DateField dateOfBirth;
+    protected TextArea notes;
+    protected Button save;
+    protected Button cancel;
+    protected Button delete;
 
     public PersonEditorDesign() {
         Design.read(this);

diff --git a/src/main/resources/org/vaadin/stepbystep/PersonEditorDesign.html b/src/main/resources/org/vaadin/stepbystep/PersonEditorDesign.html
@@ -6,6 +6,25 @@
   <meta name="vaadin-version" content="8.0.2">
  </head>
  <body>
-  <vaadin-vertical-layout size-full></vaadin-vertical-layout>
+  <vaadin-vertical-layout size-full>
+   <vaadin-form-layout size-auto>
+    <vaadin-text-field caption="First Name" _id="firstName"></vaadin-text-field>
+    <vaadin-text-field caption="Last Name" _id="lastName"></vaadin-text-field>
+    <vaadin-text-field caption="Email" _id="email"></vaadin-text-field>
+    <vaadin-date-field caption="Date of Birth" _id="dateOfBirth"></vaadin-date-field>
+   </vaadin-form-layout>
+   <vaadin-text-area size-full _id="notes" :expand></vaadin-text-area>
+   <vaadin-horizontal-layout width-full>
+    <vaadin-button plain-text _id="save">
+      Save 
+    </vaadin-button>
+    <vaadin-button plain-text _id="cancel" :expand>
+      Cancel 
+    </vaadin-button>
+    <vaadin-button plain-text _id="delete">
+      Delete 
+    </vaadin-button>
+   </vaadin-horizontal-layout>
+  </vaadin-vertical-layout>
  </body>
 </html>