Support data-location attribute in CustomLayout (#8866)

Fixes #8416

client/src/main/java/com/vaadin/client/ui/VCustomLayout.java

@@ -212,6 +212,10 @@ public class VCustomLayout extends ComplexPanel {
             final String location = elem.getAttribute("location");
             locationToElement.put(location, elem);
             elem.setInnerHTML("");
+        } else if (elem.hasAttribute("data-location")) {
+            final String location = elem.getAttribute("data-location");
+            locationToElement.put(location, elem);
+            elem.setInnerHTML("");
         } else {
             final int len = DOM.getChildCount(elem);
             for (int i = 0; i < len; i++) {

documentation/layout/layout-customlayout.asciidoc

@@ -26,9 +26,9 @@ folder under the [filename]#/VAADIN/themes/# folder, for example,
 (Notice that the root path [filename]#/VAADIN/themes/# for themes is
 fixed.) A template can also be provided dynamically from an
 [classname]#InputStream#, as explained below. A template includes
-[literal]#++<div>++# elements with a [parameter]#location# attribute that
-defines the location identifier. All custom layout HTML-files must be saved
-using UTF-8 character encoding.
+[literal]#++<div>++# elements with a [parameter]#data-location# or
+[parameter]#location# attribute that defines the location identifier. All
+custom layout HTML-files must be saved using UTF-8 character encoding.
 
 [subs="normal"]
 ----
@@ -38,18 +38,18 @@ using UTF-8 character encoding.
       &lt;table align="center"&gt;
         &lt;tr&gt;
           &lt;td align="right"&gt;User&amp;nbsp;name:&lt;/td&gt;
-          &lt;td&gt;**&lt;div location="username"&gt;&lt;/div&gt;**&lt;/td&gt;
+          &lt;td&gt;**&lt;div data-location="username"&gt;&lt;/div&gt;**&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
           &lt;td align="right"&gt;Password:&lt;/td&gt;
-          &lt;td&gt;**&lt;div location="password"&gt;&lt;/div&gt;**&lt;/td&gt;
+          &lt;td&gt;**&lt;div data-location="password"&gt;&lt;/div&gt;**&lt;/td&gt;
         &lt;/tr&gt;
       &lt;/table&gt;
     &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
     &lt;td align="right" colspan="2"&gt;
-      **&lt;div location="okbutton"&gt;**&lt;/div&gt;
+      **&lt;div data-location="okbutton"&gt;**&lt;/div&gt;
     &lt;/td&gt;
   &lt;/tr&gt;
 &lt;/table&gt;

server/src/main/java/com/vaadin/ui/CustomLayout.java

@@ -52,6 +52,11 @@ import com.vaadin.ui.declarative.DesignContext;
  * </p>
  *
  * <p>
+ * A location is identified with the attribute "data-location" or "location"
+ * which has the location name as its value.
+ * </p>
+ *
+ * <p>
  * The default theme handles the styles that are not defined by drawing the
  * subcomponents just as in OrderedLayout.
  * </p>

uitest/src/main/java/com/vaadin/tests/layouts/customlayout/DataLocationInCustomLayout.java

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.layouts.customlayout;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractReindeerTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CustomLayout;
+
+@SuppressWarnings("serial")
+public class DataLocationInCustomLayout extends AbstractReindeerTestUI {
+
+    protected static final String BUTTON_ID = "DataLocationInCustomLayoutTestButtonId";
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 8416;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "A test for adding a component with the data-location attribute in a "
+                + "CustomLayout: a button should be visible.";
+    }
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        setTheme("tests-tickets");
+        CustomLayout customLayout = new CustomLayout("Github8416");
+        final Button button = new Button("Button");
+        button.setId(BUTTON_ID);
+        customLayout.addComponent(button, "dataloc");
+        addComponent(customLayout);
+    }
+
+}

uitest/src/main/webapp/VAADIN/themes/tests-tickets/layouts/Github8416.html

@@ -0,0 +1,2 @@
+<div data-location="dataloc" style="height: 100px"></div>
+

uitest/src/test/java/com/vaadin/tests/layouts/customlayout/DataLocationInCustomLayoutTest.java

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.layouts.customlayout;
+
+import static org.hamcrest.CoreMatchers.is;
+import static org.hamcrest.MatcherAssert.assertThat;
+
+import org.junit.Test;
+import org.openqa.selenium.By;
+
+import com.vaadin.tests.tb3.SingleBrowserTest;
+
+public class DataLocationInCustomLayoutTest extends SingleBrowserTest {
+
+    @Test
+    public void buttonExistsInLayout() {
+        openTestURL();
+
+        // We don't use TestBench's ElementQuery here because we need to check
+        // the DOM for buttons existence.
+        assertThat(
+                driver.findElements(By.id(DataLocationInCustomLayout.BUTTON_ID))
+                        .size(),
+                is(1));
+    }
+}