Extra 3 | Add image component in the form

amahdy · Jun 1, 2017 · 15c70cf · 15c70cf
1 parent 0abe754
commit 15c70cf
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/src/main/java/org/vaadin/stepbystep/PersonEditorDesign.java b/src/main/java/org/vaadin/stepbystep/PersonEditorDesign.java
@@ -3,11 +3,12 @@
 import com.vaadin.annotations.AutoGenerated;
 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;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Image;
 
 /**
  * !! DO NOT EDIT THIS FILE !!
@@ -20,7 +21,8 @@
 @DesignRoot
 @AutoGenerated
 @SuppressWarnings("serial")
-public class PersonEditorDesign extends VerticalLayout {
+public class PersonEditorDesign extends HorizontalLayout {
+    protected Image picture;
     protected TextField firstName;
     protected TextField lastName;
     protected TextField email;

diff --git a/src/main/resources/org/vaadin/stepbystep/PersonEditorDesign.html b/src/main/resources/org/vaadin/stepbystep/PersonEditorDesign.html
@@ -6,25 +6,28 @@
   <meta name="vaadin-version" content="8.0.2">
  </head>
  <body>
-  <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 icon="fonticon://Vaadin-Icons/e75b" style-name="primary" plain-text _id="save">
-      Save 
-    </vaadin-button>
-    <vaadin-button style-name="link" plain-text _id="cancel" :expand>
-      Cancel 
-    </vaadin-button>
-    <vaadin-button style-name="danger" plain-text _id="delete">
-      Delete 
-    </vaadin-button>
-   </vaadin-horizontal-layout>
-  </vaadin-vertical-layout>
+  <vaadin-horizontal-layout size-full margin>
+   <vaadin-image width="90px" height="90px" _id="picture"></vaadin-image>
+   <vaadin-vertical-layout size-full margin="false" :expand>
+    <vaadin-form-layout size-auto margin="false">
+     <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 icon="fonticon://Vaadin-Icons/e75b" style-name="primary" plain-text _id="save">
+       Save 
+     </vaadin-button>
+     <vaadin-button style-name="link" plain-text _id="cancel" :expand>
+       Cancel 
+     </vaadin-button>
+     <vaadin-button style-name="danger" plain-text _id="delete">
+       Delete 
+     </vaadin-button>
+    </vaadin-horizontal-layout>
+   </vaadin-vertical-layout>
+  </vaadin-horizontal-layout>
  </body>
 </html>