Make it possible to also use an element as root and not only id. (#10785)

3 files changed, 72 insertions, 2 deletions

diff --git a/client/src/main/java/com/vaadin/client/ApplicationConfiguration.java b/client/src/main/java/com/vaadin/client/ApplicationConfiguration.java
index 3eade3207d..e9245deff4 100644
--- a/client/src/main/java/com/vaadin/client/ApplicationConfiguration.java
+++ b/client/src/main/java/com/vaadin/client/ApplicationConfiguration.java
@@ -147,6 +147,25 @@ public class ApplicationConfiguration implements EntryPoint {
         }-*/;
 
         /**
+         * Reads a configuration parameter as an {@link Element} object.
+         * Please note
+         * that the javascript value of the parameter should also be an Element
+         * object,
+         * or else an undefined exception may be thrown when calling this method
+         * or methods on the returned object.
+         *
+         * @param name
+         *         name of the configuration parameter
+         * @return element for the configuration parameter, or <code>null</code> if no
+         *         value is defined
+         * @since 8.4
+         */
+        private native Element getConfigElement(String name)
+        /*-{
+            return this.getConfig(name);
+        }-*/;
+
+        /**
          * Returns a native javascript object containing version information
          * from the server.
          *
@@ -263,6 +282,8 @@ public class ApplicationConfiguration implements EntryPoint {
     private Map<Integer, Integer> componentInheritanceMap = new HashMap<>();
     private Map<Integer, String> tagToServerSideClassName = new HashMap<>();
 
+    private Element rootElement;
+
     /**
      * Checks whether path info in requests to the server-side service should be
      * in a request parameter (named <code>v-resourcePath</code>) or appended to
@@ -452,6 +473,8 @@ public class ApplicationConfiguration implements EntryPoint {
         communicationError = jsoConfiguration.getConfigError("comErrMsg");
         authorizationError = jsoConfiguration.getConfigError("authErrMsg");
         sessionExpiredError = jsoConfiguration.getConfigError("sessExpMsg");
+
+        rootElement = jsoConfiguration.getConfigElement("rootElement");
     }
 
     /**
@@ -898,4 +921,14 @@ public class ApplicationConfiguration implements EntryPoint {
     private static final Logger getLogger() {
         return Logger.getLogger(ApplicationConfiguration.class.getName());
     }
+
+    /**
+     * Get the root element instance used for this application.
+     *
+     * @return registered root element
+     * @since 8.4
+     */
+    public Element getRootElement() {
+        return rootElement;
+    }
 }
diff --git a/client/src/main/java/com/vaadin/client/ApplicationConnection.java b/client/src/main/java/com/vaadin/client/ApplicationConnection.java
index 7befe2f10a..86897c29cf 100644
--- a/client/src/main/java/com/vaadin/client/ApplicationConnection.java
+++ b/client/src/main/java/com/vaadin/client/ApplicationConnection.java
@@ -409,7 +409,11 @@ public class ApplicationConnection implements HasHandlers {
 
         initializeClientHooks();
 
-        uIConnector.init(cnf.getRootPanelId(), this);
+        if (cnf.getRootElement() != null) {
+            uIConnector.init(cnf.getRootElement(), this);
+        } else {
+            uIConnector.init(cnf.getRootPanelId(), this);
+        }
 
         // Connection state handler preloads the reconnect dialog, which uses
         // overlay container. This in turn depends on VUI being attached
diff --git a/client/src/main/java/com/vaadin/client/ui/ui/UIConnector.java b/client/src/main/java/com/vaadin/client/ui/ui/UIConnector.java
index cd516e7a02..b5c704a5af 100644
--- a/client/src/main/java/com/vaadin/client/ui/ui/UIConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/ui/UIConnector.java
@@ -44,6 +44,8 @@ import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.History;
 import com.google.gwt.user.client.Timer;
 import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.AbsolutePanel;
+import com.google.gwt.user.client.ui.Panel;
 import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.client.ApplicationConnection;
@@ -505,8 +507,40 @@ public class UIConnector extends AbstractSingleComponentContainerConnector
         }
     }
 
+    /**
+     * Initialize UIConnector and attach UI to the rootPanelElement.
+     *
+     * @param rootPanelElement
+     *         element to attach ui into
+     * @param applicationConnection
+     *         application connection
+     * @since 8.4
+     */
+    public void init(Element rootPanelElement,
+            ApplicationConnection applicationConnection) {
+        Panel root = new AbsolutePanel(rootPanelElement) {{
+            onAttach();
+        }};
+
+        initConnector(root, applicationConnection);
+    }
+
+    /**
+     * Initialize UIConnector and attach UI to RootPanel for rootPanelId
+     * element.
+     *
+     * @param rootPanelId
+     *         root panel element id
+     * @param applicationConnection
+     *         application connection
+     */
     public void init(String rootPanelId,
             ApplicationConnection applicationConnection) {
+        initConnector(RootPanel.get(rootPanelId), applicationConnection);
+    }
+
+    private void initConnector(Panel root,
+            ApplicationConnection applicationConnection) {
         VUI ui = getWidget();
         Widget shortcutContextWidget = ui;
         if (applicationConnection.getConfiguration().isStandalone()) {
@@ -532,7 +566,6 @@ public class UIConnector extends AbstractSingleComponentContainerConnector
 
         DOM.sinkEvents(ui.getElement(), Event.ONSCROLL);
 
-        RootPanel root = RootPanel.get(rootPanelId);
 
         // Remove the v-app-loading or any splash screen added inside the div by
         // the user