a complete example needed

Vaadin 6 / 7 / 8 Framework UI
1

is there is an example to be able to use the visual editor with a ready HTML page.
i just want to drop the inputs in the HTML or a jsp page and after that i want to know how to build it or deploy it.
i check two movies on youtube in how to use vaadin but unfortunately it was not having the information iam seeking.

Regards

2

Hi roco,

could you please explain what you want to achieve in more details ?

If I got you right (not sure) - you want to use Vaadin components in a html or jsp page ? If so, this is not possible, as Vaadin is not a widget collection but an entire server-side app framework. So you can build the entire app with Vaadin and add it to a html.jsp page, but you cannot add a single widget to that page (unless you wrap into the Vaadin application, of course).

Or you’re asking on how to use html inside a Vaadin application to make it look like a web page ?

3

Thanks for your reply.
I am doing a web application , and actually i can find a lot of potential in the visual editor because i need to use those inputs in specific.

to give you an in detail for what i need to do , iam designing the layout outside vaadin and i want to wrap it after that inside vaadin to add the inputs from the visual editor as form inputs , can this happen?

and after that do i need to rebuild the whole application to see result , what is the steps of that?
after that i need to deploy the whole application on the server , so i will gain the server-side app framework that vaadin is offering and in the mean time i will narrow my java libraries that i need to work with.

Hope i clear my point , so sorry iam very newbie to vaadin but in fact i find a lot of solutions it is offering and i want to have much knowledge about it.

regards

4

What is the “Visual Editor” you mention ?

If you’re designing your app layout externally, say in a html file, then just insert a placeholders for Vaadin widgets in this file using

elements. Then , in a Vaadin app, use a CustomLayout class and feed you html file (previously added to a theme folder) as an input. Then insert your components to this layout by calling addComponent( widgetInstance, “placeholder-id”), that’s is.

Here is the link to
my keynote
 on past
Vaadin dev meetup
, I was talking about almost the same questions on building Vaadin apps which looks like a web page - it explains the detailed custom layouts usage.

If, under the “Visual Editor”, you mean a Vaadin WYSIWYG editor - it designed to build UI’s using generic Vaadin layouts, e.g. without help of HTML. So you need to either use this one or CustomLayout and HTML. Sure, you can mix both altogether, by adding CustomLayout components to a normal layout top-level components as a children or vice-versa.

5

Dimitri iam very thankful for your help the link for “my keynote” is exactly what iam looking for.
i will move in your steps and i will post the successful points.

Many regards and thanks for your help again.

6

Glad this was useful for you !
Happy new year !

7

Happy new year to you also and all the vaadin family.