Custom Vaadin theme issues

First of all I am a Noob in Vaadin but not in Java and every year I work on my side project that I launch in November. This time I am playing with microservices and I have back-end architecture ready and some functionalities works already, I wanted a UI micro-service and finally picked Vaadin as it has good integration with spring boot.
I started with the theming because I want a look and feel of open source [Argon design system]
(https://demos.creative-tim.com/argon-design-system/docs/getting-started/download.html)
So I created a new Class ArgonTheme as below :

@StyleSheet("https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800")
@StyleSheet("https://use.fontawesome.com/releases/v5.0.6/css/all.css")
@CssImport("./theme/argon/assets/css/argon-design-system.min.css")
@CssImport("./theme/argon/assets/css/nucleo-icons.css")
@JsModule("./theme/argon/assets/js/core/jquery.min.js")
@JsModule("./theme/argon/assets/js/core/popper.min.js")
@JsModule("./theme/argon/assets/js/core/bootstrap.min.js")
@JsModule("./theme/argon/assets/js/argon-design-system.min.js")
public class ArgonTheme implements AbstractTheme {

	@Override
	public String getBaseUrl() {
		return "src/";
	}

	@Override
	public String getThemeUrl() {
		return "theme/argon/";
	}

}

And added it in my MainView.class plus folder structure frontend/theme/argon/assets/js/xx is also present so far so good I can see that stylesheet gets included.
Then I went on to use the PolymerTemplate to create my custom component for my country dropdown with flag from Argon like [this]
(https://demos.creative-tim.com/argon-design-system/docs/components/dropdowns.html)

/**
 * Our country drop down uses argon design system to create a country flag drop
 * down component and it also registers the change in the user choice.
 *
 */
@Tag("countries-dropdown")
@JsModule("./src/views/countries-dropdown.js")
public class CountriesDropdown extends PolymerTemplate<TemplateModel> {

}

and my countries-dropdown.js is like so :

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

/**
 * `countries-dropdown`
 *
 * CountryDropDown element.
 *
 * @customElement
 * @polymer
 */
class CountriesDropdown extends PolymerElement {

    static get template() {
        return html`
		            <div class="dropdown">
						<a href="#" class="btn btn-default dropdown-toggle " data-toggle="dropdown" id="navbarDropdownMenuLink2">
							<img src="../../assets/img/icons/flags/US.png" /> Flags
						</a>
						<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
							<li>
								<a class="dropdown-item" href="#">
									<img src="../../assets/img/icons/flags/DE.png" /> Deutsch
								</a>
							</li>
							<li>
								<a class="dropdown-item" href="#">
									<img src="../../assets/img/icons/flags/GB.png" /> English(UK)
								</a>
							</li>
							<li>
								<a class="dropdown-item" href="#">
									<img src="../../assets/img/icons/flags/US.png" /> Français
								</a>
							</li>
						</ul>
					</div>
        `;
    }

    static get is() {
        return 'countries-dropdown';
    }
}

customElements.define(CountriesDropdown.is, CountriesDropdown);

Which is basically the html part of that template, but I want to later register some events on click etc on the drop down.
I hope I am going in right direction and this is the way to go about adding new design system.
Now I added this new component in the main view class that has header main and footer divs like so :

@Route(value = "home", layout = MainView.class)
@PageTitle("Home")
@Tag("home-view")
@JsModule("./src/views/home-view.js")
public class NewitterSPAView extends PolymerTemplate<TemplateModel> {

	@Id("header")
	Div header;

	@Id("main")
	Div main;

	@Id("footer")
	Div footer;

	public NewitterSPAView() {
		createHeader();
		createMain(); //on this part I adds that new CountriesDropDown() component. 
		createFooter();
	}
     ....
	 ....
	 
	 //and my mainView class
/**
 * The main view is a top-level placeholder for other views.
 */
@JsModule("./styles/shared-styles.js")
@JsModule("./src/utils.js")
@Theme(value = ArgonTheme.class)
//@EnableGoogleAnalytics(value = "UA-658457-6", pageviewPrefix = "layout-examples/")
@BodySize
public class MainView extends Div implements RouterLayout {
	public MainView() {
		getElement().getStyle().set("height", "100%");
	}
}

Now I end up with a blank page (screenshot attached with chrome dev-tool) webpack complains about the missing js modules like jquery and bootstrap which i included and part of frontend/theme/argon/XX folder. In the screenshot webpack-internal:// points to location but there is no jquery.js or bootstrap.js file i see and i don’t know why when they exists in file system, but not at runtime. I also attached generated-flow-imports.js file
Then is there a way to do it better way than for example nit using @JsModule but rather @NpmPackage annotation … this argon design system also have npm package.

I tried to debug but I seems to cannot fix this issue. if this don’t work then I might have to drop this design system and go for default one as this is my hobby project and I do it in side, I work full time and I wasted 1 week on this.

A small help as how to do it correctly would help, I saw all those theme tutorials and help but none is advanced or talk in details examples as how to use each options.

Thanks.
18414771.png
18414774.js (34.6 KB)

Hi Shailesh
Please take my suggestions with a grain of salt, since I have not made my own Theme yet and base my answer solely on what I can see from your code and error-screenshot.

Try moving your js files from frontend/theme/argon/assets/js/core/xx to frontend/js/core/xx, and adapt the @JsImports accordingly. If that doesn’t work, put them back to where you had them as I agree your path is better.
Another idea would be to install your ArgonTheme in a different project which you add a dependency to in your application project. I say this because I have observed that in node_modules/@vaadin/flow-frontend is not the frontend files of my actual application but only those of my dependency projects.

The reason why I responded without being sure if this helps is because I couldn’t help but notice that the [Country dropdown]
(https://demos.creative-tim.com/argon-design-system/docs/components/dropdowns.html) of argon design system looks pretty much like the [LanguageSelect]
(https://vaadin.com/directory/component/language-select) add-on, which is based on vaadins Select component. You can provide your own flag images. So that is something you could fall back to.

Hi,

One solution is to download the argon design system and copy the assets in the webapp folder.

Then you can create a Layout that includes all the needed assets:


@StyleSheet("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
@JavaScript("https://use.fontawesome.com/releases/v5.0.6/css/all.css")
public class BootstrapLayout extends Div implements RouterLayout, PageConfigurator {
    @Override
    public void configurePage(InitialPageSettings settings) {
        addStylesheet(settings, "./assets/css/nucleo-icons.css");
        addStylesheet(settings, "./assets/css/nucleo-svg.css");
        addStylesheet(settings, "./assets/css/font-awesome.css");
        addStylesheet(settings, "./assets/css/argon-design-system.css?v=1.2.0");
        addJavascript(settings, "./assets/js/core/jquery.min.js");
        addJavascript(settings, "./assets/js/core/popper.min.js");
        addJavascript(settings, "./assets/js/core/bootstrap.min.js");
        addJavascript(settings, "./assets/js/plugins/perfect-scrollbar.jquery.min.js");
        addJavascript(settings, "./assets/js/plugins/bootstrap-switch.js");
        addJavascript(settings, "./assets/js/plugins/nouislider.min.js");
        addJavascript(settings, "./assets/js/plugins/moment.min.js");
        addJavascript(settings, "./assets/js/plugins/datetimepicker.js");
        addJavascript(settings, "./assets/js/plugins/bootstrap-datepicker.min.js");
        addJavascript(settings, "./assets/js/argon-design-system.min.js?v=1.2.0");
    }

    private void addStylesheet(InitialPageSettings settings, String stylesheet) {
        HashMap<String, String> attributes = new HashMap<>();
        attributes.put("rel", "stylesheet");
        attributes.put("type", "text/css");
        settings.addLink(stylesheet, attributes);

    }
    private void addJavascript(InitialPageSettings settings, String javascript) {
        settings.addInlineWithContents(
            "<script type=\"text/javascript\" defer=\"\" src=\"" +
                javascript +
                "\"></script>",  InitialPageSettings.WrapMode.NONE);

    }
}

And an example page:

@Route(value ="example", layout = BootstrapLayout.class)
public class ExampleRoute extends VerticalLayout {

    public ExampleRoute() {
        /*add(new Button("test"));
        add(new TextField("test"));
        */
        add(new Html("<div>" +
            " <div class=\"dropdown\">\n" +
            "            <a href=\"#\" class=\"btn btn-default dropdown-toggle \" data-toggle=\"dropdown\" id=\"navbarDropdownMenuLink2\">\n" +
            "              <img src=\"./assets/img/icons/flags/US.png\" /> Flags\n" +
            "            </a>\n" +
            "            <ul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdownMenuLink2\">\n" +
            "              <li>\n" +
            "                <a class=\"dropdown-item\" href=\"#\">\n" +
            "                  <img src=\"./assets/img/icons/flags/DE.png\" /> Deutsch\n" +
            "                </a>\n" +
            "              </li>\n" +
            "              <li>\n" +
            "                <a class=\"dropdown-item\" href=\"#\">\n" +
            "                  <img src=\"./assets/img/icons/flags/GB.png\" /> English(UK)\n" +
            "                </a>\n" +
            "              </li>\n" +
            "              <li>\n" +
            "                <a class=\"dropdown-item\" href=\"#\">\n" +
            "                  <img src=\"./assets/img/icons/flags/US.png\" /> Français\n" +
            "                </a>\n" +
            "              </li>\n" +
            "            </ul>\n" +
            "          </div>" +
            "</div>"));
    }
}

I’ve also started a Bootstrap Java wrapper project, that could help you:
The source code is here: https://github.com/jcgueriaud1/vaadin-bootstrap/

And a demo is here:
For Argon Design System: https://jeanchristophe.app.fi/vaadin-boostrap-demo/example
For Bootstrap Java component (you can switch the theme in the demo): https://jeanchristophe.app.fi/vaadin-boostrap-demo/

@Jean-Christophe Gueriaud you are my hero. I will take the lead thanks, lot to learn :).
@Kaspar Scherrer thanks for your reply you actually started this discussion going.