Dynamic modular Web Applications with Vaadin and OSGi

I am a big fan of both OSGi and GWT (Google Web Toolkit). Unfortunately these two technologies don’t fit together very well. When you want to run OSGi on the server, RAP (Rich Ajax Platform) is one proven approach to go. While I like RAP a lot, you have to have quite a lot of Eclipse RCP know how for using it. Another alternative, if your want to run OSGi on the server and provide a modular, dynamic UI is Vaadin. Btw, Vaadin is the Finnish word for female reindeer. Vaadin is a server side RIA framework that uses GWT as rendering engine. In the last couple of days a played a bit around with Vaadin and I have to admit, I like it a lot. So, I wrote a little dynamic OSGi Vaadin demo (Download link and instructions are below). My goals for the demo were:

  • Provide Bundles that contribute directly to the web application’s UI
  • Just starting and stopping bundles should contribute/remove UI elements and functionality
  • I wanted to implement something similar to my dynamic Swing OSGi demo

Before I started with Vaadin, I found a few interesting reads and code sample regarding OSGi and Vaadin:

But back to the demo, here is a screen shot running the application in Firefox:

The idea is to support two kinds of UI contributions: views and actions. The views are inserted in a tab folder, the actions appear in the toolbar and the Action menu. I implemented a little OSGi agent as a view (Bundle View). This view shows a selection of bundles currently available. By checking/unchecking a bundle, it will be activated/stopped on the server side. If you press “Deselect All”, all bundles go to resolved state and all the UI contributions disappear immediately:

Of course you could start and stop bundles from the OSGi console directly, then you would have to refresh the browser to get the changes displayed. To get the demo running on your local machine, follow these steps:

  • Make sure you have an Eclipse IDE installed
  • Download the demo sources and target platform osgi-vaadin-demo.zip (6.8 MB)
  • Import all projects from the zip file into Eclipse
  • Open the project “com.siemens.ct.osgi.vaadin.target”
  • Double-click vaadin.target (That opens the target platform definition in an editor)
  • Click on “Set as Target Platform” in the right top corner of the editor
  • Now everything should compile
  • Start the Run Configuration “OSGi Vaadin Demo”
  • Open the following URL in your favorite browser “http://localhost/com.siemens.ct.osgi.vaadin.pm.main
  • If everything went well, you see the demo in your browser
  • if you don’t want to run Jetty on the default port 80, add a VM argument in the launch configuration, e.g.: -Dorg.osgi.service.http.port=8080
  • Play around with it, activate/stop bundles and watch the console log

In the next weeks I plan to go a little bit more into details of the demo, how OSGi declarative services are used, how to contribute to Vaadin Themes, etc.

Stay tuned and have fun!

Kai

Follow me on Twitter

This Post Has 42 Comments

  1. Thomas

    Nice Demo. Had to change jetty port on my windows box.

  2. Kai Tödter

    Thanks Thomas, I updated the post saying how to change the default Jetty port.

  3. Sahoo

    Sounds promising. How are things like ServletContext shared by all these bundles which the web app is comprised of? What can I actually seggregate?

    In GlassFish, we support fragmentation of web apps, but there the fragments (web-fragments) are delivered as OSGi bundle fragments, so we don’t support dynamic as in runtime dynamism, but we at least allow the entire web app to be customized without touching the core web app.

  4. ekke

    works great on OSX. (also had to change the port)
    thanks for the demo.
    ekke

  5. Neil Bartlett

    @Sahoo

    Typical Vaadin applications don’t directly access the servlet API classes. State, where required, is stored in the Application object which is created by the framework on a per-session basis. I believe that Kai’s extensions allow contributing bundles visibility of the Application — they would need this in order to add their UI contributions to it.

    This is obviously a framework-specific ability. Vaadin happens to work very well in a dynamic modular environment. I don’t think you can solve the general problem of dynamic contributions in all web frameworks (if that’s what you’re trying to achieve in Glassfish).

    Neil

  6. Kai Tödter

    @Sahoo @Neil

    Actually the bundles contributing to the UI do not have to know the Vaadin application. In the demo, the main application takes care of adding/removing Vaadin components contributed by other bundles to/from the root component tree. I just pass the application into the service interfaces so that the contributing bundles could use the application API (like setting the theme). As Neil pointed out, the Vaadin bundles do not use the servlet API directly, they use only Vaadin APIs. What I really like is the possibility to dynamically add UI components to the applications root UI tree at runtime. One advantage of this approach is that you could exchange (or update) bundles at runtime without shutting down the entire application. I don’t think this would be possible with other server-side UI technologies like JSF. The disadvantage of using fragments would be that they cannot activated/stopped separately from their hosts. In the demo, I use Chris Brind’s resource binding, so all resource contributions like icons have to be a fragment of the main Vaadin bundle. This is kind of disadvantage but I don’t know of a better solution right now.

  7. Ya-Enot

    Great job!!! Thanks!!! I’ve benn looking for such demo several month… I am a big fan of Vaadin and OSGi too, and tried to make them work together on a naked osgi framework (not in glassfish or spring or other huge environment). I made some quirky bundles, and they are even work! but your solution is more elegant and convenient. Thanks again!

    Offtopic: One little minus of Vaadin is a lack of Comet support, it’s not critical but dissapointing…

    P.S. Hellow frrom Motherr Rrussia ^_^

  8. Josh Prismon

    Started working this, and it’s fantastic. About the only thing I would add, is have you tried with Virgo (ie, Spring-DM) yet? Being able to access the Spring Security service here would be absolutely awesome.

  9. Niels

    Josh Prismon :
    Started working this, and it’s fantastic. About the only thing I would add, is have you tried with Virgo (ie, Spring-DM) yet? Being able to access the Spring Security service here would be absolutely awesome.

    I’m also very interested to know this!

  10. Loludian

    Any idea of how getting images from a bundle and display it in another bundle, in a Vaadin/OSGi application (without changing theme) ?

  11. Dirk Wichmann

    Great job, thanks a lot. I have seen the session on the JAX this year.
    At the moment I think about, how to integrate internationalization.
    Have you a hint for me??

    Thanks a lot.

  12. Sopot Cela

    Hello,
    Very interesting and inspiring post. I have added an OSGi bundle similar to your basic and minimal models but my bundle takes data from a derby database using the OSGi versions of JPA, Derby and EclipseLink. The zip with the projects is here https://github.com/scela/al.gov.asp.smc.osgi.vaadin.siemens . The derby database is included in the al.gov.asp.smc.osgi.kai.model.jpa project in the Derby-INF folder. Before you run the demo you have to start the derby database: “java -jar {diskpath to al.gov.asp.smc.osgi.kai.model.jpa}/Derby-INF/derbyrun.jar server start”

    Thanks

  13. Cesar

    Hi guys! I’m very new to Vaadin and OSGI.. I want to know if there is a way to run vaadin osgi application on Glassfish 3. I have been doing some test.. but I get a lot of dependencies errors 🙁

  14. MIhael

    Cesar,

    I have been successfully running my Vaadin+OSGi app on GlassFish 3.1. What problems have you encountered. One thing that I stumbled across was the missing bundle for the declarative services. But after adding that everything worked just fine.

    Mihael

  15. Meex

    Hi,

    would it be possible to run your app in a Tomcat container?

    Meex

  16. MathiasG

    Hi,
    I got a question to the way you are using the osgi bundles and the components they provide:

    Would it be possible to reuse the component returned by for example the TableView bundle in multiple instances across the MainApplication?
    My idea is to create something like reuseable ui components provided through osgi bundles. For example open multiple windows showing the same component to edit a persons properties (name, company, ..) parameterized with different person ids.

    Thanks in advance!
    Mathias

  17. Muuki88

    @MathiasG

    IMHO this is equivalent to the Actions / TabItems provided in the demo. You register a service, not a service factory so you always get the same instance, which implements your UI component. By retrieving the service you get you reusable UI component. However you have to be careful with multiple thread-access.

  18. Arbi

    Hello,
    I’m working with vaadin and virgo and I’m trying to deploy these project in Virgo . how can help me ? thanks

  19. Erik

    Hi Kai,

    thanks for the great demo.
    I’ve also checked the com.siemens.ct.osgi.vaadin.pm.theme fragment to understand resource handling, but one question remained.

    What is the right way to
    a) enhance the widgetset by e.g. Add-Ons
    b) recompile the widgetset and
    c) deploy the widgetset to the Host Service?

    Do I have to create a separate project where I have to include the Add-Ons, themes, etc. compile the widgetset and copy the result to a fragment bundle? What has to be exported by this fragment?

    Unfortunately all of my trials failed and I was not even able to add a new theme (chameleon) via a fragment bundle.

    Thanks in advance,
    Erik

  20. royj

    HI Kai,

    When I use multiple browsers to access the application, and each browser page refresh frequently, components not displayed correctly.

  21. drozzy

    Of course you could start and stop bundles from the OSGi console directly, then you would have to refresh the browser to get the changes displayed.

  22. drozzy

    “Of course you could start and stop bundles from the OSGi console directly, then you would have to refresh the browser to get the changes displayed.”

    Is there any way to remedy this? I.e. can the vaadin remove the “stopped” bundles from the list automatically?

  23. drozzy

    What does “pm” in the “com.siemens.ct.pm…” stand for?

  24. alberto sarubbi

    @royj
    changing a tab in one brower, say from table to treeview, push the other screen into the nasty

    Out of sync

    Something has caused us to be out of sync with the server.
    Take note of any unsaved data, and click here to re-sync.

  25. Nino Samac

    Beautiful demo, thnx Kai 🙂

  26. Carla

    Hi Ki, I really like your demo. I’m trying to convert it to Vaadin7 but I have some problems because the osgi addon is not availble (I suspect). Do you have any suggestions?

    1. Kai Tödter

      Right now I have no suggestions. But probably I will try to port the osgi addon to Vaadin 7.

      1. Kai Tödter

        This is just a test if replies are working…

  27. alex

    hello kai,
    your demo is really interesting.
    but if I wanted to deploy your demo on servicemix (karaf container) what changes should I make to the projects?
    Thanks !

  28. Juan Pablo Diez

    Hi Kai

    First, thanks for the work that you did here. Is awesome

    Now, is possible make this with apache tomcat? how? Each modules need to be a war (Java web project) or can be a jar (Simple java project) and throw it on WEB-INF/lib of the main web app?

    Thanks in advance
    Juan Pablo from Argentina

  29. Holger

    Hi Kai,

    is this still working with Vaadin 8? Do you have any experience with Vaadin 8 and OSGI?

    Thank

    1. Kai Tödter

      Hi Holger,

      I have no experience with Vaadin 8 and OSGi.
      Since the demo is pretty old, I don’t expect it to be working with Vaadin 8.

Leave a Reply

I accept the Privacy Policy