Dynamic modular Web Applications with Vaadin and OSGi

40

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

40 Comments

  1. Thomas
    Thomas01-02-2011

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

  2. Kai Tödter
    Kai Tödter01-03-2011

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

  3. Sahoo
    Sahoo01-03-2011

    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
    ekke01-03-2011

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

  5. Neil Bartlett
    Neil Bartlett01-03-2011

    @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
    Kai Tödter01-04-2011

    @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. Kai's Blog » My upcoming Eclipse e4 related Sessions and Tutorials
    Kai's Blog » My upcoming Eclipse e4 related Sessions and Tutorials02-11-2011

    […] JAX, I am also planing to give a session about “Dynamic Web Applications with Equinox and Vaadin“. If you plan to attend any the above sessions, I would be happy if you join me afterwards […]

  8. Ya-Enot
    Ya-Enot03-01-2011

    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 ^_^

  9. Josh Prismon
    Josh Prismon03-24-2011

    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.

  10. Niels
    Niels03-28-2011

    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!

  11. Loludian
    Loludian04-28-2011

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

  12. Vaadin OSGi ICEPush Services « Flos Blog
    Vaadin OSGi ICEPush Services « Flos Blog05-11-2011

    […] Dynamic modular Web Applications with Vaadin and OSGi by Kai Tödter […]

  13. Push Services –> mobile and enterprise (Vaadin + OSGI) « ekkes-corner: eclipse | osgi | mdsd | erp | mobile
    Push Services –> mobile and enterprise (Vaadin + OSGI) « ekkes-corner: eclipse | osgi | mdsd | erp | mobile05-12-2011

    […] by Kai Tödter’s Blog “Dynamic modular Web Applications with Vaadin and OSGi” I did some tests with Vaadin: a really great Web UI Framework, where you’re developing […]

  14. Dirk Wichmann
    Dirk Wichmann06-05-2011

    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.

  15. RE: Import external libray at runtime - Forum - vaadin.com
    RE: Import external libray at runtime - Forum - vaadin.com06-10-2011

    […] using OSGi – see e.g.http://floriansblog.wordpress.com/2011/06/09/redvaadin-eos-earlyresults/ or http://www.toedter.com/blog/?p=412.However, all the client side code needs to be compiled into a single widgetset in advance, so you […]

  16. Sopot Cela
    Sopot Cela06-28-2011

    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

  17. Kai Todter’s “Dynamic modular Web Applications with Vaadin and OSGi” with JPA support « smcela
    Kai Todter’s “Dynamic modular Web Applications with Vaadin and OSGi” with JPA support « smcela06-28-2011

    […] impressed and inspired by the demo app here http://www.toedter.com/blog/?p=412 I decided to add JPA with EclipseLink and Derby support to the demo. I have added an OSGi bundle […]

  18. Cesar
    Cesar07-03-2011

    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 :-(

  19. MIhael
    MIhael07-09-2011

    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

  20. Meex
    Meex07-16-2011

    Hi,

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

    Meex

  21. Muuki88
    Muuki8808-04-2011

    Great tutorial. I faced a little problem on Ubuntu. Jetty wouldn’t start up. This is due to some restrictions. The solution is to add this to the JVM arguments in the run configuration:

    -Dorg.osgi.service.http.port=8380

    thx to https://blog.itu.dk/SMDD-E2009/2009/08/15/first-lecture/

  22. MathiasG
    MathiasG08-04-2011

    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

  23. Muuki88
    Muuki8808-09-2011

    @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.

  24. Arbi
    Arbi09-05-2011

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

  25. Erik
    Erik09-16-2011

    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

  26. royj
    royj09-22-2011

    HI Kai,

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

  27. drozzy
    drozzy09-26-2011

    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.

  28. drozzy
    drozzy09-26-2011

    “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?

  29. drozzy
    drozzy09-27-2011

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

  30. Kai Tödter
    Kai Tödter09-27-2011

    @drozzy
    PM is for Person Manager (just a working title :)

  31. alberto sarubbi
    alberto sarubbi12-28-2011

    @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.

  32. Nino Samac
    Nino Samac10-13-2012

    Beautiful demo, thnx Kai :)

  33. Carla
    Carla05-15-2013

    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?

    • Kai Tödter
      Kai Tödter05-15-2013

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

  34. alex
    alex11-11-2013

    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 !

  35. Juan Pablo Diez
    Juan Pablo Diez07-03-2014

    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

Leave a Reply