Client-side JSNI behavior for Vaadin 7 + Google App Engine application

Hey guys,

I’m new to Vaadin and I’m finding it extremely beautiful and comfortable to work with. However, I’m facing one problem and I can’t find out how to deal with it.

I have a prototype based on Google Web Toolkit that collects personal profiles through forms, gathering them into objects similar to POJOs. A portion of the data (account, private keys and sensitive information) must be encrypted before leaving the client-side, to ensure privacy against unreliable servers. This was done using JSNI to run JavaScript libraries (js-crypto, JSBN, pidCrypt…) on the client-side. Then the results are stored in a datastore as XMLs through RPCs.

I understand that Vaadin is server-side oriented so a component can’t call JavaScript, then I probably need a custom widget. But I can’t figure out how to build it.

  1. Does it require a brand new EntryPoint like in Google Web Toolkit? I love Vaadin due to plain Java, I just need to call a JavaScript method that receives a message and keys and returns an encrypted value, like I did in the prototype with JSNI.
  2. I’m using Valo theme and a nice layout as in
    dashboard
    demo. Can I fit the widget into the look and feel within my already designed UI? Should such widget be a button or some trigger? Imagine a method from a JavaScript library must modify the password input before leading to the server. How could I insert that
    hook
    ?

I’ve been working with Web Toolkit and App Engine for a year, but Vaadin’s professional look and Java facility just caught me so I’m trying to avoid a deep client-side EntryPoint (again). Any help or insight is really appreciated.

Thanks in advance.
Ricardo Gonçalves.

Hey guys,

After doing some research, it seems to me that I have to make a custom widget wrapping the entire form, so when I press a button, some inner fields are processed using JavaScript on the client-side and then everything goes to the server. Then I insert my widget somewhere into my UI. Is that right?

My doubt now is how can I theme it into the Valo look and feel. Can I apply the same SCSS styles or override the equivalent Vaadin components? I don’t know much about CSS, so I’d be looking into the Valo files to find such definitions…

Thanks in advance.
Ricardo Gonçalves.