Vaadin Designer, mid-april status

Hi everyone!

A status update regarding Vaadin Designer is long overdue, so I’ll try to summarise what’s up, what has been going on, and what’s next.

But first a
big thank you
to all of you trying out (the sometimes rough) alpha versions!
The feedback and encouragement you guys have been giving is greatly appreciated.
(I’m sorry I don’t always manage to answer in a timely manner - but I do read every single mail!)

As you recall we released the Labs version quite some time ago, and though quite buggy and limited, it showed great potential, and we got some great feedback.
We quite quickly realised that in order to realise the vision we now had for the Designer, and to put that kind of effort into it, it needed to be a commercial - and thus the Designer quite quickly “graduated” from Labs.

Armed with a solid plan, a decision to make the Designer a commercial product, and a dedicated team, we pressed ahead and made schedules. You may have heard some approximate dates at GWT.create or elsewhere…

But as often happens in software projects, those dates have passed already. Why? Well, in our case, making the Designer work exactly as we wished has some side-effects as well (in addition to being a generally challenging effort). For instance, Vaadin Designer uses the declarative format supported by the Vaadin Framework itself, which is just the way we want it - but as it turned out, we also wanted features that the format did not yet support (Responsive, to name one). We looked hard at the situation, but in the end only one thing made sense:


The schedule for Vaadin Designer is now aligned with that of Vaadin Framework 7.5.

In practice this means the Vaadin 7.5 Beta should arrive within two weeks, and Vaadin Designer 1.0 Beta follow after a hopefully minimal delay.

All things considered, we’re quite pleased with this decision, and the end result will be much better for it.


To summarize:

  • Vaadin Designer 1.0 will be commercial; included in Pro Tools subscriptions, or as a stand-alone purchase.
  • An Alpha version is available today, it comes with the Vaadin Plugin from
    https://vaadin.com/eclipse
    (
    Help > Install New Software > [Vaadin update site]

    )
  • Schedule aligned with Vaadin 7.5, the Designer will depend on that version
  • Keep your eye out for the Beta, do
    Help > Check for Updates

​Again, thanks to all you guys trying it out!

We’re extending your trial-licenses
, you should receive an email shortly. You’ll should be able to use your trial license at least a month after the 1.0 final release. Please keep the good feedback coming!

So head over to
https://vaadin.com/designer
, install the soon-to-be-beta, and hit me with feedback!

Best Regards,
Marc Englund, Product Manager

Hi Marc,

Really enjoying the new designer, just cracked it open to have a look today - some nice progress there - well done.

I’m noticing an issue with databinding. This might not be a designer issue per-se - but I’m assuming most users will hit this issue.


The Story:

With binders previously, a layout with a member field, say “notesField” would be bound to an item propertyId called “notes” automatically. You could override this with @PropertyId annotation.

I’ve used annotations throughout my application just to be clear, but we can’t do this with designer properties - yet? xD


The Issue:

The layout specified via HTML (through the designer) and loaded into the application is not resolving member names to property names as expected. My understanding is that findPropertyId(memberField) inside FieldGroup (line 1008) should resolve a memberField of “notesField” and return “notes” - which is the correct propertyId based on previous convention.

In my app, this method is returning null.

Extract Of Logs (memberField vs return string)
MyDebugFieldGroup Searching For PropertyId For: notesField - found: null


The Work Around:

However, if I change the field in the designer to be just notes instead of notesField, it resolves correctly.
MyDebugFieldGroup Searching For PropertyId For: notes - found: notes

The method also returns correctly if I set a @PropertyId annotation in the design java file. I know you’re not supposed to do this, it was just for testing.

So is this a bug with this method? Or just a change in convention since I don’t know when and I never noticed due to always setting @PropertyId.

Thanks for your help. Awesome work on the new tool - very very helpful for me already.

Another question I had was how I go about integrating custom components / elements into the new designer.

A good example of what I mean by that is if i’ve subclassed Table, for example, how can I add that in via the designer, or a plugin from the repository for example.

I’ve looked through the docs as far as I can see and not sure how to proceed.

This is actually a feature that is disabled in the alpha right now. Copying from the old thread:

Though this is an easy thing for basic components, it turns out there are quite a lot of situations where custom components can cause problems, since you can basically do anything. Also there is that thing with custom widgetsets… We’re treading carefully, as we try to find a suitable compromise between convenience and safety. Most likely 1.0 will have some unfortuante limitations, such as showing placeholders, and a more complete solution in 1.x might make use of meta-data provided by you (or the add-on author) - for instance to provide an icon for the component palette and so on.

Regarding you databinding question, I have to take a closer look at the situation you’re describing and get back to you later.

Thanks for the feedback!

Best Regards,
Marc

Buy Quality Real And Fake Passports, Driver’s License, ID Cards and many more

We use high quality equipment and materials to produce counterfeit documents. All secret features of real passports are carefully duplicated for our falsified documents.we are unique producer of quality fake documents.We offer only original high-quality fake passports, driver’s licenses, ID cards, stamps, Visa, school Diplomas and other products for a number of countries like: USA, Australia, Belgium, Brazil, Canada, Italian, Finland, France, Germany, Israel, Mexico, Netherlands, South Africa, Spain, United Kingdom. This list is not full.

To get further more detailed information about our high quality fake passports/driving licenses/id cards/ stamps, Visa, school Diplomas and other products contact us through the below info

  • Contact e-mails: teamclack11@gmail.com
  • You should feel free in contacting us for more information and order.

Thanks for the update Marc.
From my perspective & use cases, i’m 100% fine with just showing placesholders and being able to set sizes / expand ratios.

While I understand the need to make a living, not having a free designer is going to turn a lot of people off from even trying Vaadin. People who do hacking for fun at home drag their favorite technologies into the workplace with them!

Hi Scott,
You can obtain a free non-commercial license by following the instructions in the sidebar on https://vaadin.com/pro-tools

Happy hacking!

Hi, friends, I am trying to use the new Vaadin Designer, but got some problem.

Can I ask in this thread?

Here is my problem:
(1)I am using Windows7(64bits), JDK1.8.0_40(64bits), Eclipse 4.4 SR1, Vaadin 7.4.5, Vaadin 7 Designer for Eclipse(Alpha) 0.6.4

(2)I can create a new Component by using the wizard [File]
→ [New]
→ [Other]
→ [Vaadin Design]

The java source file and the html file are created without any error

(3)The design UI is opened.
I can see 11 layouts and 32 components in the [Palette]
view,
but I can not drag and drop any of them into the html design view.

  • Please see the attachment

(4)There is no error log shown in the [Error Log]
view

Any help would be greatly appreciated ! Thanks !
19122.png

Hi, friends, I figured it out:
I can not drag and drop component from Palette to html design view.
Instead of this, I should drop component from Palette to the Outline view.
Is that right?

I dropped a layout and a component to the Outline view.
But nothing was displayed in the html design view.
And all the views of Eclipse can not work correctly.

  • Please see the attached attachment

And the error message in the Error Log view was:
=============================START=============================
Plug in: org.eclipse.ui
Severity: Error
Date: Sun May 10 01:39:03 JST 2015
Message: Unhandled event loop exception
Exception Stack Trace:
org.eclipse.swt.SWTException: Failed to execute runnable (java.lang.IllegalStateException: No mapper contains the selected component)
at org.eclipse.swt.SWT.error(SWT.java:4441)
at org.eclipse.swt.SWT.error(SWT.java:4356)
at org.eclipse.swt.widgets.Synchronizer.runAsyncMessages(Synchronizer.java:139)
at org.eclipse.swt.widgets.Display.setSynchronizer(Display.java:4656)
at com.vaadin.designer.eclipse.editors.FakeComposite$FakeDisplay.flushAsyncQueue(FakeComposite.java:150)
at com.vaadin.designer.eclipse.editors.FakeComposite.flushAsyncQueue(FakeComposite.java:107)
at com.vaadin.designer.eclipse.editors.FakeComposite.handleEvent(FakeComposite.java:102)
at org.eclipse.swt.widgets.EventTable.sendEvent(EventTable.java:84)
at org.eclipse.swt.widgets.Display.sendEvent(Display.java:4353)
at org.eclipse.swt.widgets.Widget.sendEvent(Widget.java:1061)
at org.eclipse.swt.widgets.Widget.sendEvent(Widget.java:1085)
at org.eclipse.swt.widgets.Widget.sendEvent(Widget.java:1070)
at org.eclipse.swt.widgets.Widget.notifyListeners(Widget.java:782)
at com.vaadin.designer.eclipse.editors.FakeComposite.setLayoutDeferred(FakeComposite.java:88)
at org.eclipse.swt.widgets.Display.runDeferredLayouts(Display.java:4196)
at org.eclipse.swt.widgets.Display.readAndDispatch(Display.java:3754)
at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$9.run(PartRenderingEngine.java:1151)
at org.eclipse.core.databinding.observable.Realm.runWithDefault(Realm.java:332)
at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.run(PartRenderingEngine.java:1032)
at org.eclipse.e4.ui.internal.workbench.E4Workbench.createAndRunUI(E4Workbench.java:148)
at org.eclipse.ui.internal.Workbench$5.run(Workbench.java:636)
at org.eclipse.core.databinding.observable.Realm.runWithDefault(Realm.java:332)
at org.eclipse.ui.internal.Workbench.createAndRunWorkbench(Workbench.java:579)
at org.eclipse.ui.PlatformUI.createAndRunWorkbench(PlatformUI.java:150)
at org.eclipse.ui.internal.ide.application.IDEApplication.start(IDEApplication.java:135)
at org.eclipse.equinox.internal.app.EclipseAppHandle.run(EclipseAppHandle.java:196)
at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.runApplication(EclipseAppLauncher.java:134)
at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.start(EclipseAppLauncher.java:104)
at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:380)
at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:235)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:497)
at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:648)
at org.eclipse.equinox.launcher.Main.basicRun(Main.java:603)
at org.eclipse.equinox.launcher.Main.run(Main.java:1465)
Caused by: java.lang.IllegalStateException: No mapper contains the selected component
at com.vaadin.designer.model.EditorModelUtil.getComponentFromAnyMapper(EditorModelUtil.java:177)
at com.vaadin.designer.eclipse.views.PropertiesView.refreshView(PropertiesView.java:332)
at com.vaadin.designer.eclipse.views.PropertiesView.selectionChanged(PropertiesView.java:177)
at com.vaadin.designer.eclipse.editors.VaadinEditorPart.fireSelectionChanged(VaadinEditorPart.java:601)
at com.vaadin.designer.eclipse.editors.VaadinEditorPart.access$6(VaadinEditorPart.java:597)
at com.vaadin.designer.eclipse.editors.VaadinEditorPart$ModelHandler$1.run(VaadinEditorPart.java:588)
at org.eclipse.swt.widgets.RunnableLock.run(RunnableLock.java:35)
at org.eclipse.swt.widgets.Synchronizer.runAsyncMessages(Synchronizer.java:136)
… 34 more
=============================END=============================

This error happens every time when I try to drop a layout or a component.
So I basiclly can not use the Vaddin Designer at all.

Any help would be greatly appreciated ! Thanks !
19124.png

Using the latest designer (updated using help->check for updates, latest available installed), I now cannot create a new vaadin design. Fill in the design name and try to pick a template (where those come from I have no idea) and eclipse just locks up.

Not cool…

Hi all,

A new version has just been published!

Please try it out - especially if you had problems with the last one - and please let us know how it works for you :slight_smile:

Best Regards,
Marc

Hi

I updated to the latest version: Vaadin 7 Designer for Eclipse(Alpha) 0.6.5

but got no luck, still nothing displayed in the html design view,
and the following error happened:

=============================START=============================

org.eclipse.swt.SWTException: Failed to execute runnable (java.lang.IllegalStateException: No mapper contains the selected component)
at org.eclipse.swt.SWT.error(SWT.java:4441)
at org.eclipse.swt.SWT.error(SWT.java:4356)
at org.eclipse.swt.widgets.Synchronizer.runAsyncMessages(Synchronizer.java:139)
at org.eclipse.swt.widgets.Display.setSynchronizer(Display.java:4656)
at com.vaadin.designer.eclipse.editors.FakeComposite$FakeDisplay.flushAsyncQueue(FakeComposite.java:162)
at com.vaadin.designer.eclipse.editors.FakeComposite.flushAsyncQueue(FakeComposite.java:119)
at com.vaadin.designer.eclipse.editors.FakeComposite.setLayoutDeferred(FakeComposite.java:90)
at org.eclipse.swt.widgets.Display.runDeferredLayouts(Display.java:4196)
at org.eclipse.swt.widgets.Display.readAndDispatch(Display.java:3754)
at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine$9.run(PartRenderingEngine.java:1151)
at org.eclipse.core.databinding.observable.Realm.runWithDefault(Realm.java:332)
at org.eclipse.e4.ui.internal.workbench.swt.PartRenderingEngine.run(PartRenderingEngine.java:1032)
at org.eclipse.e4.ui.internal.workbench.E4Workbench.createAndRunUI(E4Workbench.java:148)
at org.eclipse.ui.internal.Workbench$5.run(Workbench.java:636)
at org.eclipse.core.databinding.observable.Realm.runWithDefault(Realm.java:332)
at org.eclipse.ui.internal.Workbench.createAndRunWorkbench(Workbench.java:579)
at org.eclipse.ui.PlatformUI.createAndRunWorkbench(PlatformUI.java:150)
at org.eclipse.ui.internal.ide.application.IDEApplication.start(IDEApplication.java:135)
at org.eclipse.equinox.internal.app.EclipseAppHandle.run(EclipseAppHandle.java:196)
at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.runApplication(EclipseAppLauncher.java:134)
at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.start(EclipseAppLauncher.java:104)
at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:380)
at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:235)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:497)
at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:648)
at org.eclipse.equinox.launcher.Main.basicRun(Main.java:603)
at org.eclipse.equinox.launcher.Main.run(Main.java:1465)
Caused by: java.lang.IllegalStateException: No mapper contains the selected component
at com.vaadin.designer.model.EditorModelUtil.getComponentFromAnyMapper(EditorModelUtil.java:188)
at com.vaadin.designer.eclipse.views.PropertiesView.refreshView(PropertiesView.java:354)
at com.vaadin.designer.eclipse.views.PropertiesView.selectionChanged(PropertiesView.java:194)
at com.vaadin.designer.eclipse.editors.VaadinEditorPart.fireSelectionChanged(VaadinEditorPart.java:632)
at com.vaadin.designer.eclipse.editors.VaadinEditorPart.access$7(VaadinEditorPart.java:628)
at com.vaadin.designer.eclipse.editors.VaadinEditorPart$ModelHandler$1.run(VaadinEditorPart.java:619)
at org.eclipse.swt.widgets.RunnableLock.run(RunnableLock.java:35)
at org.eclipse.swt.widgets.Synchronizer.runAsyncMessages(Synchronizer.java:136)
… 27 more

=============================END=============================

Ying Li: Is (2) still empty for you with the new version?

It could indicate you have some firewall issue. Could you try clicking on the top right corner icon (rectangle, with an arrow pointing upwards) and copy & paste that url in the popup dialog into a browser. Does it display correctly?

Hi, John

I copied the URL into browser, and the page is displayed correctly…

But it still not display in the designer in Eclipse.

And also, when I select a component from the outline view, the properties of this component can be displayed in the properties view, and can be edited correctly, and the new properties I edited can be displayed in the browser.
So, looks like everything is going OK, except the designer UI can not display anything…

Hi friends

I found another problem.

When I input some Chinese or Japanese characters in the properties view, for example, for my button caption.
It was save into HTML file as “???”.
So, when I close the HTML file and open it again,
all my Chinese or Japanese characters is lost.

The encoding of the HTML file is UTF-8, but looks like the designer can not handle non-ASCII characters

I just heard we’re working on this issue right now.

Thanks for the report!

Best Regards,
Marc

The Designer is actually using an embedded browser in Eclipse to display the design, so that what you see is really what you get.
To me it sounds like that browser is not able to contact localhost for some reason - perhaps some firewall or other security software is interfering.

We have multiple similar reports, but have not bee able to narrow it down quite yet. Hopefully we can come with some more specific instructions soon. But meanwhile, if you can try to see if your firewall settings, or some other security software, has some rules that might be stopping the embedded browser, and report back your findings, that would be great!
Also perhaps review Eclipse settings in Preferences->General->Network connections.

Best Regards,
Marc

Hi Marc
Thanks very much for your advice.

I checked my setting, there is no firewall or security software on.
BTW, if it is the firewall or security software who is blocking me,
I should not access the url and see the page in the outside browser.
But now the page can be displayed in the outside browser, so I think this is not a problem about the firewall or security software.
Am I right?

So I checked the other thing:
I copied the URL from the designer, and
(1)It can be displayed in the outside browser, both Chrome and Firefox working just fine.
(2)I opened the “Internal Web Browser” view, input the url of google, and it displayed correctly.
That means the “Internal Web Browser” is working fine.
(3)I pasted the URL which I copied from the designer, into the “Internal Web Browser”,
the page can not be displayed.
(4)When I show the source of the page, (from context menu of the “Internal Web Browser”), I can see the page source, and the content looks like fine.

Now I guess, the page content is loaded into the “Internal Web Browser” correctly, but for some reason, the JavaScript of vaadin (vaadinPush.js and vaadinBootstrap.js) are not working?

BTW, I am working on Windows 7 Home Premium 64 bits, JDK1.8.0_u40 64bits,
and the “Internal Web Browser” looks like windows IE.

So,
(5)I opened windows IE outside Eclipse, and pasted the URL of vaadin designer.
Guess what? Same thing happened! The page content was loaded (because I can see the page source), but nothing displayed in the page.

So, looks like the problem is about IE itself?

The IE version is 11.0.9600.17728, I am now upgrading it to the latest version, trying to see what will happen.

BTW, why Eclipse using the horrible IE as the “Internal Web Browser”?
Can I use some other browser (Chrome or FireFox) as “Internal Web Browser”?