Tuesday, August 17, 2010

Using jQuery with Vaadin

After spending some time with Vaadin and developing a small application and a usability framework the moment came in which Vaadin application had to be integrated with another existing application. The integration wasn't tough at all due to the nice work done by the Vaadin folks.

However at my place we have separate team for Vaadin core development and jQuery / JavaScript doing the client side hacking. So to make the job easier for both the sides I developed a small Contact Us demo application which creates a Vaadin form and beautifies it with jQuery Effects and Tooltip plugin.

11 comments:

  1. Very interesting!

    ReplyDelete
  2. Very interesting indeed! Thanks for sharing.

    ReplyDelete
  3. Can you share the source, sound very promising.

    ReplyDelete
  4. Hi, it's very interesting, It's possible for you to share the Java Code?

    ReplyDelete
  5. Hello Joe,

    Sorry I don't have the vaadin/java source available with me.

    But if you see the HTML source I have included in the example, I refer the controls with their class names. Now Vaadin does provide functionality to mark additional style classes. Rest of the code is plain Vaadin which you can get from its demo site as well.

    Keep Coding!!!

    ReplyDelete
  6. Hello Dhval,

    I'm trying something like

    CustomLayout custom = new CustomLayout("testJQuery"); // Your html source

    custom.addComponent(new Panel("CONTACT US"), "contactUs");

    Panel panelApp = new Panel();
    custom.addComponent(panelApp, "vaadin");

    TextField username = new TextField();
    panelApp.addComponent(username);

    panel.setContent(custom);


    but unfortunately it does not work :-(

    I'll be coding :-D

    ReplyDelete
  7. Your text field can not be identified easily in above case. Try add following:

    //vaadin
    username.addStyleName('username')


    //javascript
    $(".username").live(...);

    This change should work.

    ReplyDelete
  8. i tried it but it is not still working, if you can I will be very grateful if you share the full code
    to find you what is going wrong

    thanks
    Joe

    ReplyDelete
  9. Please refer following gist where I have put the source files. I could not find the original source but the gist is made from the working application.

    https://gist.github.com/2b9848463355e7ae7d70

    ReplyDelete
  10. Hello Dhval,

    thanks for you support :-D !!!

    ReplyDelete
  11. Hi,

    thanks for this useful example. I have a need explained in this thread :
    https://vaadin.com/forum/-/message_boards/view_message/1793730.
    Regards
    Walid

    ReplyDelete