Cannot get Vaadin to work with Coporate designed web pages

I asked a previous question ‘CustomLayout and href issue’ (https://vaadin.com/forum#!/thread/7745536/7751888) and from the repsones I got it seems CustomLayout does not support CSS and Javascript in HTML files designed by the company web designer using DreamWeaver.

I am trying use Vaadin to add a form to company web page in order to store the input in a database. Hower the CSS and Javascript files that are in the HTML file are exculded by the CustomLayout and the page does not look how it should.

Does anybody now how to add Vaadin to existing web pages?

Embedding Vaadin in an existing Web Page:
https://vaadin.com/book/vaadin7/-/page/advanced.embedding.html

I have looked at the advanced embedding page in vaadin7 book and tried to use the example provided.
Do I still use CustomLayout?

Here is my code which does not work;

/* RequestForm.java */
package com.shu.si.requestform;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import javax.servlet.annotation.WebServlet;

@Theme(“mytheme”)
@SuppressWarnings(“serial”)
public class RequestForm extends UI
{
@WebServlet(value = “/*”, asyncSupported = true)
@VaadinServletConfiguration(productionMode = false,
ui = RequestForm.class,
widgetset = “com.shu.si.requestform.AppWidgetSet”)

public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {

    // Create custom layout from "index.html" template.
    CustomLayout custom = new CustomLayout("index");
    custom.addStyleName("customlayoutexample");

    // Use it as the layout of the Panel.
    setContent(custom);
    
    Panel panel = new Panel();
    panel.setSizeUndefined();

    // <div> id="RequestForm" </div>
    custom.addComponent(panel, "RequestForm");

    final AbsoluteLayout mainLayout = new AbsoluteLayout();
   
    panel.setContent(mainLayout);
    
    mainLayout.setWidth("400px");
    mainLayout.setHeight("250px");

     final FormLayout layout = new FormLayout();
     
     mainLayout.addComponent(layout, "left: 50px; top: 50px;");
    // A component with coordinates for its top-left corner
    TextField firstName_TF = new TextField("First name");
    firstName_TF.setRequired(true);
      
    TextField lastName_TF = new TextField("Last name");
    lastName_TF.setRequired(true);
  
    layout.addComponent(firstName_TF);
    layout.addComponent(lastName_TF);

    Button button = new Button("Submit");
    button.addClickListener(new Button.ClickListener() {
        public void buttonClick(ClickEvent event) {
            layout.addComponent(new Label("Thank you for clicking"));
        }
    });
    
    layout.addComponent(button);
}

}

/* index.html*/

<?xml version="1.0" encoding="UTF-8" ?> Embedding a Vaadin Application in HTML Page

Embedding a Vaadin UI

This is a static web page that contains an embedded Vaadin application. It's here:

<!-- Optional placeholder for the loading indicator -->
<div class="v-app-loading"></div>

<!-- Alternative fallback text -->
<noscript>You have to enable javascript in your browser to
          use an application built with Vaadin.</noscript>

Please view the page source to see how embedding works.

I didn’t do actually do that myself already but maybe something in this thread
https://vaadin.com/forum/#!/thread/1852577/3657858
may help you.
Also: Is the Vaadin app by itself reachable?

I have already looked at thread.
There is no example on how to code the Java app.

If I change my Java code not to use CustomLayout but say VerticalLayout the application runs fine but is not using the HTML page.

If I use CustomLayout the HTML page is displayed but not the java component.

So not a clue how to solve this. Even the Vaadin book (11.2) does not show example Java code.

Okay so i seemed to have missed something:
I thought you have your website (the index.html) and are trying to embed a Vaadin App inside of it (which should generally work with the information inside the threads/book chapters i linked to)
but what you seem to be doing is have a index.html with a Vaadin App inside of it which contains a CustomLayout which trys to display the index.html which contains your Vaadin App and so on and so forth.

I either missed something about what you’re trying to do or you’ve gone the wrong way. What do you want to do again? Embed a Html/Website (containing Javascript, css, … which was the topic of your other thread) or are you trying to embed a Vaadin App inside a Html web site?

I am trying to embed a Vaadin app (login form) inside a HTML web page as shown in the code above;

<!-- Optional placeholder for the loading indicator -->
<div class="v-app-loading"></div>

So i think you didn’t quite understand what “Embedding a Vaadin Application in HTML Page” does exactly.

Let’s say you have a Vaadin App running on localhost:8080/MyApp This app just has some Verticallayouts, Buttons, … in it. Nothing too crazy.
Then you have a Html Website running at localhost:8080/MyWebsite.html.
Now you want to display the Vaadin App running at MyApp inside a div of MyWebsite.html (Like you can embed an external Website inside a Vaadin app using the Browser Component but the other way round). That’s what the Html/Javascript in the Embedding a Vaadin Application in HTML Page Chapter is for.
CustomLayouts don’t have anything to do with that.

You seem to got it mixed up with how the customLayouts work. Especially the way you can add Vaadin Components inside divs you can define in the Html you use with CustomLayout.(
https://vaadin.com/book/-/page/layout.customlayout.html
).


I believe I do understnad the difference
, I have had the CustomLayout example working fine. I cannot use CustomLayout because it looses the page design (ccs and javascripts).


I cannot get the
Vaadin app running inside the web page to work.

Are both the Vaadin App and the Html deployed on the same Server (So same IP and Port to avoid Same Origin)?
Also if the html is reachable at url:port/index.html the Vaadin app has to be reachable (judging from your mapping) at url:port/RequestForm . Is that the case?