vaadin

Sidebar using simple CSS properties

skadhir

Sometimes we want to show/hide a view to avoid cluttering the screen. Here is an example of how it can be done in Vaadin.

.sidebar {
  position: fixed;
  top: 0;
  right: -200px;
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  transition: 0.5s;
  padding-left: 10px;
}

.show {
  right: 0;
}
public HelloWorldView() {

        setSizeFull();

        VerticalLayout sidebar = new VerticalLayout();
        sidebar.setSizeUndefined();
        sidebar.addClassName("sidebar");

        Button toggleButton = new Button("Click", event -> {
            if (sidebar.getClassNames().contains("show")) {
                sidebar.getClassNames().remove("show");
            } else {
                sidebar.getClassNames().add("show");
            }

        });

        add(toggleButton, sidebar);
    }

You can see here how the sideview is getting shown/hidden when user clicks on the Button

XML/JSON Beautifier

skadhir

There are lot of online tools available in the internet for this but they say, do not put sensitive information as they’re cached on the server side. So, obviously it is not a safe place to beautify. And not all companies allow admin access to developers to install plugins for this. What’s the solution for this? Let us develop something on our own and add what ever we want.

Here is a solution developed in-house keeping in mind all IIB/ACE developers.

You can not only beautify xml/json messages but also do the following

  • Blob to string
  • String to blob
  • Base64 Encode/Decode
  • XML to JSON
  • JSON to XML
  • XPath evaluation
  • XSLT Transformation
  • Validate XML against XSD
  • XML Decoding
  • Change themes

Above all this is developed as web-application and no external dependencies. Just deploy the war file to a web-server and start using it. By default it runs on port 8080 and so you can try http://hostname:8080

Here are some screenprints to please your eyes.

XML PrettyPrint
XML to JSON conversion
Blog to String

You can download this for free for personal use. For commercial use, please contact us at support@vaithu.com.

We also do full-stack development. If you’re looking for modernizing your UI, please contact us.

Vaadin themes

skadhir

By default, Vaadin use Lumo theme but it also provides multiple themes which you can customize as you need. Vaadin provides an editor here https://demo.vaadin.com/lumo-editor/ which allows you to create your theme or customize the default ones. Let us see how to use them.

  • Go to https://demo.vaadin.com/lumo-editor/
  • In the right hand side, you will see the settings to modify. Modify them as you need and finally it will show you a HTML page like
  • In Vaadin v14, importing html is not supported so you’ve to copy the lines within <custom-style><style>...</style></custom-style> and copy it to a file under styles directory like
  • Now, import this file into your Java class like 
@CssImport("./styles/my-lumo-theme.css")

Reload your project and you will the difference. I modified the theme to use Material theme and here is the page after importing them into my Java class

If you need DARK theme, just two lines would make it and they are

@Theme(value = Lumo.class,variant = Lumo.DARK)
public class MainView extends AppLayout {

Note these line should go into the Main/Parent class. Let us see how the dark theme looks

Let me put here my custom-theme HTML code for reference

html {
  --lumo-size-xl: 3rem;
  --lumo-size-l: 2.5rem;
  --lumo-size-m: 2rem;
  --lumo-size-s: 1.75rem;
  --lumo-size-xs: 1.5rem;
  --lumo-space-xl: 1.75rem;
  --lumo-space-l: 1.125rem;
  --lumo-space-m: 0.5rem;
  --lumo-space-s: 0.25rem;
  --lumo-space-xs: 0.125rem;
  --lumo-font-size: 1rem;
  --lumo-font-size-xxxl: 1.75rem;
  --lumo-font-size-xxl: 1.375rem;
  --lumo-font-size-xl: 1.125rem;
  --lumo-font-size-l: 1rem;
  --lumo-font-size-m: 0.875rem;
  --lumo-font-size-s: 0.8125rem;
  --lumo-font-size-xs: 0.75rem;
  --lumo-font-size-xxs: 0.6875rem;
  --lumo-shade-5pct: rgba(26, 26, 26, 0.05);
  --lumo-shade-10pct: rgba(26, 26, 26, 0.1);
  --lumo-shade-20pct: rgba(26, 26, 26, 0.2);
  --lumo-shade-30pct: rgba(26, 26, 26, 0.3);
  --lumo-shade-40pct: rgba(26, 26, 26, 0.4);
  --lumo-shade-50pct: rgba(26, 26, 26, 0.5);
  --lumo-shade-60pct: rgba(26, 26, 26, 0.6);
  --lumo-shade-70pct: rgba(26, 26, 26, 0.7);
  --lumo-shade-80pct: rgba(26, 26, 26, 0.8);
  --lumo-shade-90pct: rgba(26, 26, 26, 0.9);
  --lumo-primary-text-color: rgb(235, 89, 5);
  --lumo-primary-color-50pct: rgba(235, 89, 5, 0.5);
  --lumo-primary-color-10pct: rgba(235, 89, 5, 0.1);
  --lumo-error-text-color: rgb(231, 24, 24);
  --lumo-error-color-50pct: rgba(231, 24, 24, 0.5);
  --lumo-error-color-10pct: rgba(231, 24, 24, 0.1);
  --lumo-success-text-color: rgb(62, 229, 170);
  --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
  --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);
  --lumo-shade: hsl(0, 0%, 10%);
  --lumo-primary-color: hsl(22, 96%, 47%);
  --lumo-error-color: hsl(0, 81%, 50%);
  --lumo-success-color: hsl(159, 76%, 57%);
  --lumo-success-contrast-color: hsl(159, 29%, 10%);
}

[theme~="dark"] {
}

We also started working on Full stack development using Vaadin. If you’ve any projects to develop in Vaadin, please contact us at support@vaithu.com

Vaadin Frontend Build Error

skadhir

Sometimes it happens that Vaadin front end build fails and starts throwing below error

------------------ Starting Frontend compilation. ------------------
2020-05-27 22:11:40.075  INFO 13612 --- [  restartedMain] dev-webpack                              : Running webpack to compile frontend resources. This may take a moment, please stand by...
2020-05-27 22:11:41.370 ERROR 13612 --- [  restartedMain] o.a.c.c.C.[Tomcat].[localhost].[/]       : Exception sending context initialized event to listener instance of class [com.vaadin.flow.spring.VaadinServletContextInitializer$DevModeServletContextListener]

java.lang.RuntimeException: Unable to initialize Vaadin DevModeHandler
	at com.vaadin.flow.spring.VaadinServletContextInitializer$DevModeServletContextListener.contextInitialized(VaadinServletContextInitializer.java:352) ~[vaadin-spring-12.2.0.jar:na]
	at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4684) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5147) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1384) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1374) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at java.util.concurrent.FutureTask.run(FutureTask.java:266) [na:1.8.0_131]
	at org.apache.tomcat.util.threads.InlineExecutorService.execute(InlineExecutorService.java:75) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at java.util.concurrent.AbstractExecutorService.submit(AbstractExecutorService.java:134) [na:1.8.0_131]
	at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:909) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.core.StandardHost.startInternal(StandardHost.java:841) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1384) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1374) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at java.util.concurrent.FutureTask.run(FutureTask.java:266) [na:1.8.0_131]
	at org.apache.tomcat.util.threads.InlineExecutorService.execute(InlineExecutorService.java:75) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at java.util.concurrent.AbstractExecutorService.submit(AbstractExecutorService.java:134) [na:1.8.0_131]
	at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:909) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.core.StandardEngine.startInternal(StandardEngine.java:262) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.core.StandardService.startInternal(StandardService.java:421) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.core.StandardServer.startInternal(StandardServer.java:930) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.apache.catalina.startup.Tomcat.start(Tomcat.java:468) [tomcat-embed-core-9.0.35.jar:9.0.35]
	at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.initialize(TomcatWebServer.java:123) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.<init>(TomcatWebServer.java:104) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getTomcatWebServer(TomcatServletWebServerFactory.java:437) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getWebServer(TomcatServletWebServerFactory.java:191) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.createWebServer(ServletWebServerApplicationContext.java:176) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.onRefresh(ServletWebServerApplicationContext.java:158) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:544) [spring-context-5.2.6.RELEASE.jar:5.2.6.RELEASE]
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:143) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:758) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:750) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:397) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:315) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1237) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1226) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at com.gmail.abc.Application.main(Application.java:14) [classes/:na]
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_131]
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_131]
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_131]
	at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_131]
	at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:49) [spring-boot-devtools-2.3.0.RELEASE.jar:2.3.0.RELEASE]
Caused by: javax.servlet.ServletException: java.lang.IllegalStateException: Webpack exited prematurely
	at com.vaadin.flow.server.startup.DevModeInitializer.initDevModeHandler(DevModeInitializer.java:335) ~[flow-server-2.2.0.jar:2.2.0]
	at com.vaadin.flow.spring.VaadinServletContextInitializer$DevModeServletContextListener.contextInitialized(VaadinServletContextInitializer.java:349) ~[vaadin-spring-12.2.0.jar:na]
	... 44 common frames omitted
Caused by: java.lang.IllegalStateException: Webpack exited prematurely
	at com.vaadin.flow.server.DevModeHandler.<init>(DevModeHandler.java:220) ~[flow-server-2.2.0.jar:2.2.0]
	at com.vaadin.flow.server.DevModeHandler.createInstance(DevModeHandler.java:318) ~[flow-server-2.2.0.jar:2.2.0]
	at com.vaadin.flow.server.DevModeHandler.start(DevModeHandler.java:268) ~[flow-server-2.2.0.jar:2.2.0]
	at com.vaadin.flow.server.DevModeHandler.start(DevModeHandler.java:245) ~[flow-server-2.2.0.jar:2.2.0]
	at com.vaadin.flow.server.startup.DevModeInitializer.initDevModeHandler(DevModeInitializer.java:331) ~[flow-server-2.2.0.jar:2.2.0]
	... 45 common frames omitted

2020-05-27 22:11:41.377 ERROR 13612 --- [  restartedMain] o.apache.catalina.core.StandardContext   : One or more listeners failed to start. Full details will be found in the appropriate container log file
2020-05-27 22:11:41.378 ERROR 13612 --- [  restartedMain] o.apache.catalina.core.StandardContext   : Context [] startup failed due to previous errors
2020-05-27 22:11:41.382  WARN 13612 --- [  restartedMain] o.a.c.loader.WebappClassLoaderBase       : The web application [ROOT] appears to have started a thread named [Thread-143] but has failed to stop it. This is very likely to create a memory leak. Stack trace of thread:
 java.net.DualStackPlainSocketImpl.accept0(Native Method)
 java.net.DualStackPlainSocketImpl.socketAccept(DualStackPlainSocketImpl.java:131)
 java.net.AbstractPlainSocketImpl.accept(AbstractPlainSocketImpl.java:409)
 java.net.PlainSocketImpl.accept(PlainSocketImpl.java:199)
 java.net.ServerSocket.implAccept(ServerSocket.java:545)
 java.net.ServerSocket.accept(ServerSocket.java:513)
 com.vaadin.flow.server.DevServerWatchDog$WatchDogServer.run(DevServerWatchDog.java:58)
 java.lang.Thread.run(Thread.java:748)
2020-05-27 22:11:41.713  INFO 13612 --- [  restartedMain] o.apache.catalina.core.StandardService   : Stopping service [Tomcat]
2020-05-27 22:11:41.717  WARN 13612 --- [  restartedMain] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
2020-05-27 22:11:41.718  INFO 13612 --- [  restartedMain] com.holonplatform.spring                 : Spring BeanFactory context scope unregistered [ClassLoader: org.springframework.boot.devtools.restart.classloader.RestartClassLoader@3b9c4bd7]
2020-05-27 22:11:41.725  INFO 13612 --- [  restartedMain] ConditionEvaluationReportLoggingListener : 

Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
2020-05-27 22:11:41.728 ERROR 13612 --- [  restartedMain] o.s.boot.SpringApplication               : Application run failed

org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.onRefresh(ServletWebServerApplicationContext.java:161) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:544) ~[spring-context-5.2.6.RELEASE.jar:5.2.6.RELEASE]
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:143) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:758) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:750) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:397) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:315) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1237) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1226) [spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at com.gmail.abc.Application.main(Application.java:14) [classes/:na]
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_131]
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_131]
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_131]
	at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_131]
	at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:49) [spring-boot-devtools-2.3.0.RELEASE.jar:2.3.0.RELEASE]
Caused by: org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
	at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.initialize(TomcatWebServer.java:142) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.<init>(TomcatWebServer.java:104) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getTomcatWebServer(TomcatServletWebServerFactory.java:437) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getWebServer(TomcatServletWebServerFactory.java:191) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.createWebServer(ServletWebServerApplicationContext.java:176) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.onRefresh(ServletWebServerApplicationContext.java:158) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	... 14 common frames omitted
Caused by: java.lang.IllegalStateException: StandardEngine[Tomcat].StandardHost[localhost].TomcatEmbeddedContext[] failed to start
	at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.rethrowDeferredStartupExceptions(TomcatWebServer.java:187) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.initialize(TomcatWebServer.java:126) ~[spring-boot-2.3.0.RELEASE.jar:2.3.0.RELEASE]
	... 19 common frames omitted

Picked up JAVA_TOOL_OPTIONS: -Djava.vendor="New Oracle"
Picked up _JAVA_OPTIONS: -Xms256M -Xmx1024M

Process finished with exit code 0

To fix the above error, the only option is to delete the below files and rerun the clean process

image.png