Embedding Visual Designer - out of sync


I’m currently working on enhancing the Vaadin Visual Designer - the stand-alone version, not the Eclipse plugin.
In my application I embed the Visual Designer main window in my own main window.

I used addWindow() on EditorApplication to add EditorWindow as new Application-level window.
To embed this Application-level window in my own main window, I use an Embedded component.
This works fine, until I load a new model. When I call editModel on EditorWindow, I get an “Out of sync” error.
After a re-sync the model seems to be loaded properly.

What could be the cause and how could I get rid of this error?

Thank you very much!


I’m not exactly sure what’s causing your particular “out of sync”, but it does sound like you have a little complicated setup…
I can’t promise that it will solve your problems, but using the editor as a regular component (not as a embedded top-level window) is probably the way to go.

I’m using it that way in a project of mine, so I know it’s possible. But I also know it’s not the most smooth things one could do, because the editor is not properly separated from the application right now. However, this is something that we should be working towards: the visual editor should be an easily usable stand-alone component.

The solution I’m using right now is to extend EditorApplication, then create my own MyEditorWindow in createMainWindow(). The created MyEditorWindow in turn extends EditorWindow, and the most important customization is createContent() where it creates my own MyEditor instead of the regular VisualDesigner. MyEditor does not actually extend VisualDesigner, but works similarly.
I guess you could skip a lot of the extending, and skip right to creating your own MyEditor, but there might be some dependencies somewhere - let me know if you go down that route, we can work together to remove obstacles.

(I could point you to the code, but there is a lot of extra proof-of-concept quality code in that project, so you will not find it easy to read…)

Also, I just committed a small change to the visual designer client-side. It might not be related to your problem, but then again it might actually be the cause. You’ll certainly get some problems sooner or later without the patch :wink:

Best Regards,

Hi, thank you very much for your suggestions!

The idea of creating the editor myself sounds promising. So I could tweak the UI a bit.
For example for my project I don’t like the fact, that the editor tools have relative size.
In my application it would be better if the editor tools had a fixed size and the user could show and hide them on demand.

By now I have extended EditorApplication and overridden createMainWindow(). Further I have extended EditorWindow and overridden createContent(). In createContent() the main window containing a MenuBar, some HorizontalSplitPanels and some TabSheets is created. The tabs are intended to be used like in the Visual Editor Eclipse Plugin: one Tab containing the designer and another tab containing the source code editor.

For the editor itself I use a HorizontalSplitPanel, where I want to put the editing area on the left and the editor tools on the right, but having the SplitPanel absolute sized and locked. By now I have added an EditorTools component to the SplitPanel.

Two problems arose:

  1. Clicking on the tabs to switch the view between source and designer has only once effect. Maybe a refreshing problem?
  2. The style of the EditorTools component is wrong. I tried calling setTheme() and setStyle(), but that doesn’t work.

How can I solve these problems?

Best regards, Frank

Hmm, let’s see…

  1. What do you mean ‘only once effect’? What exactly happens? Is the designer perhaps left visible? (If so, did you try the changes I committed - and remember to recompile the widgetset?)
    Also, in the other project, I’m calling editorWindow.editModel() with the freshly parsed model when switching back to the designer - in effect replacing the whole designer component with a new one IIRC.

  2. Not sure about this w/o seeing the app running. Try inspecting it to see how classnames differ, perhaps? (and what selectors are used in the theme).
    If the rest of the thing is styled ok, but not the EditorTools, there may be some css selectors that depend on the structure of the original for some reason (mistake, probably).
    Could you actually describe (or show) how the style is wrong?

Best Regards,