Could you give me a hint as to why this message is appearing **(ReferenceE

Directory CompAni
1

Could you give me a hint as to why this message is appearing

(ReferenceError) : startAnimator is not defined.

I am doing something very similar to your loginForm example.

AnimatedComponent animatedEntranceExitComponent = animator.prepareComponent(loginForm);
EntranceAnimation entranceAnimation = AnimationBuilder
				.createBuilder()
				.create(AnimationTypes.EntranceAnimation.class)
				.withEffect(EntranceEffect.bounceInDown);
animatedEntranceExitComponent.registerEntranceAnimation(entranceAnimation);

...
add(loginForm);
2

(ReferenceError) : startAnimator is not defined
usually means that the required javascript files are not correctly loaded.
If your application is a spring boot application add this to Application.java

@Bean
public ServletRegistrationBean registerComponentAnimations() {
  return new ServletRegistrationBean(new ResourceLoaderServlet(), "/frontend/compani/compani.js");
}

If you still got problems, I will help you.

3

Hi,

I am not using spring boot. I have the following in my pom.xml

	<dependency>
	   <groupId>de.mekaso.vaadin.addons</groupId>
	   <artifactId>compani</artifactId>
	   <version>1.1.1</version>
	</dependency>

I then have the following code:

@Route(value = "", layout = CompassDispatcher.class)
@PageTitle("Home | Compass-360")
public class HomeModuleRoutingView extends AbstractModuleRoutingView<HomeModule>
{

	public static final String FRAME_ID = "home";
	public static final String FRAME_NAME = "Home";
	public static final VaadinIcon FRAME_ICON = VaadinIcon.HOME;

	private final Animator animator;

	public HomeModuleRoutingView()
	{
		super("");

		this.animator = Animator.init(UI.getCurrent());
	}

	@Override
	protected HomeModule getModuleInstance()
	{
		final HomeModule hm = new HomeModule();

		final AnimatedComponent animatedEntranceExitComponent = this.animator.prepareComponent(hm);

		final EntranceAnimation entranceAnimation = AnimationBuilder.createBuilder().create(AnimationTypes.EntranceAnimation.class).withEffect(EntranceEffect.bounceInDown);

		animatedEntranceExitComponent.registerEntranceAnimation(entranceAnimation);

		return hm;
	}

}

When the page is routed to - I receive the error

(ReferenceError) : startAnimator is not defined.

4
  • what Vaadin version do you use?
  • which application server (and version)?
  • does your application run with a servlet context path (/myApp) or does it use the root context path (/)?
5

Vaadin Version

	<vaadin.version>14.4.2</vaadin.version>

Jetty is our application server
<jetty.version>9.4.28.v20200408</jetty.version>

Servlet annotation

@WebServlet(urlPatterns = "/web/*", name = "CompassServlet", asyncSupported = true, loadOnStartup = 1, initParams =
{
		// number of seconds between heartbeat request from the UI, non-positive value disables heartbeats
		@WebInitParam(name = InitParameters.SERVLET_PARAMETER_HEARTBEAT_INTERVAL, value = "60"),

		// should session be closed when all UI have been idle. UI is idle if it is open with no activity other than heartbeat requests
		// if closedIdleSession=false, then heartbeats keep session alive as long as client side UI is open.
		@WebInitParam(name = InitParameters.SERVLET_PARAMETER_CLOSE_IDLE_SESSIONS, value = "false")
})
6

it seems the custom servlet is preventing the animation javascript file from being loaded. First try out version 1.1.2 of company.
If it still does not work, you will see in the development console of your browser (network tab) that the compani.js file is not loaded. Please post the uri of the missing file (should be something like /web/compani/compani.js).

7

Version 1.1.2 worked! Thank you! I really appreciate your help. I can now impress my sales and marketing team with added animations :)

8

you are welcome!

have fun with this add-on and try out all kinds of animations