Using Multiple Custom Widgets in Liferay

Vaadin 6 / 7 / 8 Framework UI
1

I must be missing something.

I have downloaded a couple of custom widgets from the Vaadin Add-ons Directory. For example…

CountdownClock-1.0.jar
popupbutton-0.9.jar

these jars are in my portlets WEB-INF/lib directory

I want to be able to use these widgets in all of my Vaadin portlets / applications. My portal-ext.properties file has the following entry.

vaadin.widgetset=com.vaadin.portal.gwt.PortalDefaultWidgetSet

and I have the VAADIN themes and widgetsets deployed to ROOT/html//VAADIN directory.

When I view my portlet that uses the custom widgets in the above jar files, I get the following error.

Widgetset does not contain implementation for org.vaadin.kim.countdownclock.CountdownClock. Check its @ClientWidget mapping, widgetsets GWT module descrioption file and re-compile your widgetset. Unrendered UIDL:

	org.vaadin.kim.countdownclock.CountdownClock(NO CLIENT IMPLEMENTATION FOUND)

and

Widgetset does not contain implementation for org.vaadin.hene.popupbutton.PopupButton. Check its @ClientWidget mapping, widgetsets GWT module descrioption file and re-compile your widgetset. Unrendered UIDL:

	org.vaadin.hene.popupbutton.PopupButton(NO CLIENT IMPLEMENTATION FOUND)
2

When using custom client side widgets - whether defined in your project or in add-on JARs - you need to build your own widgetset that contains all the necessary widgets and deploy it.

If you are using Eclipse and a recent version of the Vaadin Eclipse plugin, it should be enough to click the “Compile widgetset” button in the toolbar. If there is no widgetset, one should be created automatically, and automatically include “inherits” statements for the widgetsets in the add-on packages. Then, change the reference in portal-ext.properties and deploy your own widgetset (compiled under the VAADIN directory of your project) onto the portal.

If you are using Maven, the recent versions of the archetypes and the Vaadin Maven plugin take care of the widgetset creation, update and compilation - see
the MavenIntegration article
 in the wiki. You might need to run at least the update-widgetset goal manually after adding the add-on JARs.

If you are not using Eclipse nor Maven, you can automatically generate the widgetset by running the class com.vaadin.terminal.gwt.widgetsetutils.WidgetSetBuilder . See the usage information printed out when running it without parameters, and make sure your source directory is the first entry on the classpath given to it as that is where you want the widgetset to be created. Then follow the instructions in
the book
 to compile the widgetset or look for instructions for widgetset compilation elsewhere on the forum.

3

I got the similar problem in Liferay 5.2.3. It works fine if I compile the widget using the archetypes in Jetty using maven. But it won’t work in the Liferay container. Can someone give a simple example war using google map addon in liferay using the architypes?

4

I have tried to follow these instructions, but just can’t get them work. I have compiled the widgetset in Eclipse, I have in folder myapp\WebContent\VAADIN\widgetsets two folders: myapp.widgetset.MyappWidgetset and
myapp.widgetset.MyappWidgetset-aux. I copied these under the folder \liferay-portal-6.0.2\liferay-portal-6.0.4\tomcat-6.0.26\webapps\ROOT\html\VAADIN\widgetsets and changed in portal-ext.properties vaadin.widgetset=myapp.widgetset.MyappWidgetset. And I just can’t get this work. What do I do wrong?

5

I can get it working with following:

1 Maven plugin changes:

		<plugin>
			<groupId>org.codehaus.mojo</groupId>
			<artifactId>gwt-maven-plugin</artifactId>
			<version>1.3-SNAPSHOT</version>
			<executions>
				<execution>
					<configuration>
                                             ....
					</configuration>
					<goals>
						<goal>resources</goal>
						<goal>compile</goal>
					</goals>
				</execution>
			</executions>
		</plugin>
		<plugin>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-maven-plugin</artifactId>
			<version>1.0.0</version>
			<executions>
				<execution>
					<configuration>
						<!-- if you don't specify any modules, the plugin will find them -->
						<!-- <modules> <module></module> </modules> -->
					</configuration>
					<goals>
						<goal>update-widgetset</goal>
					</goals>
				</execution>
			</executions>
		</plugin>

  1. Add-on as dependency:

    <!-- vaadin add-on components -->
 <dependency>
     <groupId>org.vaadin.addons</groupId>
     <artifactId>vaadin-timeline</artifactId>
     <version>1.0.2</version>
 </dependency>

  2. Create a file under your project package following GWT default naming:
    for example, if your portlet project use package: com.myproject.package.web, you can create a package like com.myproject.package.web.widgetset, create a file with a name like MyProjectWidgetSet.gwt.xml, which looks like:

<?xml version="1.0" encoding="UTF-8"?>
  1. Once the plugin detects the gwt.xml, it will update this file with new widget set it should inherit. For example, in my case, it will update this file (adding other widget set to this file by the plugin automatically) after compile as:
<?xml version="1.0" encoding="UTF-8"?> 
<inherits name="org.vaadin.vaadinvisualizations.widgetset.VaadinvisualizationApplicationWidgetset" />

<inherits name="com.vaadin.addon.timeline.gwt.TimelineWidgetSet" />

<inherits name="org.vaadin.peter.contextmenu.ContextmenuWidgetset" />

  1. In web.xml, you add:

    widgetset com.myproject.package.web.widgetset.MyProjectWidgetSet

  2. In your portlet-ext.properties:

vaadin.resources.path=/html
vaadin.theme=chameleon-blue
#vaadin.theme=reindeer
vaadin.widgetset=com.myproject.package.web.widgetset.MyProjectWidgetSet

6

But I need help from another perspective, I have the portlet-ext.properties shared by all porlets under the ROOT/WEB-INF/classes, in this file, I have:

vaadin.widgetset=com.mypackage.MyProject_A_WidgetSet

But I have several different porlets, each containing a widgetset in its project. But above line only allow one WidgetSet to be configured. How to configure mulitple WidgetSet in liferay?

7

The short answer: you cannot have multiple widgetsets in use on a single (browser) page at the same time. You should normally create a widgetset that contains all the widgets your projects will need.

Technically, it would be possible to use different widgetsets on different pages. To do that, the widgetsets need to be either in the shared directory or served by a servlet in the portlet package. Then, you need to configure each portlet to use a specific widgetset (portlet.xml application init parameter “widgetset” which overrides the shared widgetset if I remember correctly; also some other tweaking might be necessary, at least if serving the widgetsets from the portlet).

8

Thanks, Henri. I followed your suggestion, it worked out all right with a single widget set.