MPR + Vaadin 7 LegacyComponent adding "classes"

I started this conversation [here]
(https://vaadin.com/forum/thread/17909667/mprtheme-and-vaadin-7-app-does-not-always-work), but wanted to simplify things based on what I found out so far. For some reason, even though I do not add the HTML classes to the LegacyComponent, they get added when the component is attached.

Here is the structure of my code, with corresponding classes:

  1. Flow Div ( note that even if I don’t add these class names, things remain the same, as far as I can see )
		addClassName("mobiwms");
		addClassName( "v-app");
  1. Flow VerticalLayout
content.addClassName( "v-ui");
  1. LegacyComponent containing either Vaadin 7 VerticalLayout or Vaadin 7 View. I am showing the Vaadin 7 VerticalLayout in my code example.
			content.removeAll();
			LoginView loginView = new LoginView();
			LegacyWrapper lLoginView = new LegacyWrapper(loginView);
			lLoginView.setClassName("mobiwms-loginview");
			lLoginView.setSizeFull();
			ClassList classes = lLoginView.getClassNames(); // Here, only class is "mobiwms-loginview"
			lLoginView.addAttachListener(new ComponentEventListener<AttachEvent>() {
				
				@Override
				public void onComponentEvent(AttachEvent event) {
					// TODO Auto-generated method stub
					ClassList classes = lLoginView.getClassNames();

					if( classes instanceof ClassList )
					{
						// here, "v-app" and "mobiwms" are added
					}
				}
			});
			content.add(lLoginView);
			content.addClassName("loginview");

Now, obviously on the AttachEvent I can remove the classes I don’t want, but I am confused as to why they are being added in the first place. I searched my code and I see no reference to “v-app” or “mobiwms” except where I explicitly set it. Any ideas?

OK, don’t know what is causing this, and it feels like a MPR bug, but I cannot prove it, so I wanted to mention my work around in case anyone else has this problem. First of all, I made the following method calls for my two legacy components ( so they both are Vaadin 7 components inside LegacyComponent ):

  1. lMainView.addAttachListener(e->removeHtmlClassesOnAttach(lMainView));
  2. lLoginView.addAttachListener(e->removeHtmlClassesOnAttach(lLoginView));

Then I made the following sort of simplistic method to remove the bad HTML classes:

	private void removeHtmlClassesOnAttach( final LegacyWrapper legacyComponent ) {
		
		if( legacyComponent instanceof LegacyWrapper )
		{
			String viewString = legacyComponent.getLegacyComponent().getClass().getName();

			boolean removedVApp = legacyComponent.removeClassName("v-app");
			boolean removedMobiwms = legacyComponent.removeClassName("mobiwms");
			
			if( removedVApp && removedMobiwms )
				LOGGER.warning("Removed v-app and mobiwms from " + viewString + " view");
			else if( removedVApp )
				LOGGER.warning("Removed v-app from " + viewString + " view");
			else if( removedMobiwms )
				LOGGER.warning("Removed mobiwms from " + viewString + " view");
		}
	}

This consistently works. Would be nice to know why attaching a legacy component adds the extra HTML classes, but this fixes it for me.

Hi,

the class names are needed in the most typical use case. In a normal Valo themed V7 app e.g. the v-app classname comes from the root element of the UI, which is not present if you just have a legacy wrapped component. The Valo scss code expects it to be there, so it needs to be added to not break the styles.

-Olli

OK, that explains why it is added. And I guess, for some reason, it does not care about it being at the Flow level. So maybe in this case, the better course of action is to do one of the following:

  1. Add HTML classes to MprUI ( if present )
  2. Add HTML classes to Flow UI - in theory, I sort of already did this because I put it at the content UI level, but maybe putting it at Flow UI level would have worked??

As per my first post, my structure is quite simple:

  • Flow Div contains
    • Flow VerticalLayout contains
      • LegacyComponent wrapping some V7 element

As per my first post, I added the proper classes to the first two levels ( I figured out that they were missing the needed classes ). Obviously, it is legal to remove them like I am doing, but was there a better way to solve this? I find it hard to believe I am the only one that has had this problem, so I figure there might be better solutions out there.

Thanks for explaining why they got added. I guess it is some scss nuance I am unfamiliar with. I know my trick works for now, but do you see any dangers or pitfalls with my trick?

That should be the right way to go. You should notice pretty quickly if something goes wrong, too, although I don’t know why it should.