Couple of Visual Editor questions

I have been playing around with the visual editor in Eclipse and there are a few things I’m not getting:

  1. In the code for FormTest2 created by the editor below, the button doesn’t show up when I view it in either the Design view or in a browser when I run the application that shows FormTest2. Why is this happening?

  2. How are you supposed to add a Listener to a button created with the Visual Editor.

  3. The web page for the VisualEditor in addons (http://dev.vaadin.com/wiki/Addons/VisualEditor) seems to have a lot more functionality than I’m seeing in the visual editor in eclipse. I don’t have any of the formatting buttons across the top or any of the pulldown menus with various options like Font and Size. Is this supposed to be run separately? Can this more advanced editor be used in Eclipse?

  4. Does the editor only work if the the class first has an absolute layout? I wasn’t able to substitute the top layout with anything else?

  5. I have a second class, FormTest, code also included below, where Eclipse no longer knows it’s a visual editor class. I no longer see the tabs at the bottom with the Source and Design tab options. Any idea what might have caused this to happen?

Thanks,

Jonathan


import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

public class FormTest2 extends CustomComponent {

@AutoGenerated
private AbsoluteLayout mainLayout;
@AutoGenerated
private VerticalLayout verticalLayout_2;
@AutoGenerated
private Button createNewUserButton;
@AutoGenerated
private CheckBox adminCheckBox;
@AutoGenerated
private TextField passwordTextField;
@AutoGenerated
private TextField userIdTextField;
/**
 * 
 */
private static final long serialVersionUID = -2012121896090025850L;
/**
 * The constructor should first build the main layout, set the
 * composition root and then do any custom initialization.
 *
 * The constructor will not be automatically regenerated by the
 * visual editor.
 */
public FormTest2() {
	buildMainLayout();
	setCompositionRoot(mainLayout);

	// TODO add user code here
	verticalLayout_2.setSpacing(true);
}

@AutoGenerated
private AbsoluteLayout buildMainLayout() {
	// common part: create layout
	mainLayout = new AbsoluteLayout();
	
	// top-level component properties
	setWidth("300px");
	setHeight("150px");
	
	// verticalLayout_2
	verticalLayout_2 = buildVerticalLayout_2();
	verticalLayout_2.setWidth("300px");
	verticalLayout_2.setHeight("150px");
	verticalLayout_2.setCaption("Vertical Layout");
	verticalLayout_2.setImmediate(false);
	mainLayout.addComponent(verticalLayout_2);
	
	return mainLayout;
}

@AutoGenerated
private VerticalLayout buildVerticalLayout_2() {
	// common part: create layout
	verticalLayout_2 = new VerticalLayout();
	
	// userIdLabel
	Label userIdLabel = new Label();
	userIdLabel.setWidth("-1px");
	userIdLabel.setHeight("-1px");
	userIdLabel.setCaption("User ID");
	userIdLabel.setImmediate(false);
	verticalLayout_2.addComponent(userIdLabel);
	
	// userIdTextField
	userIdTextField = new TextField();
	userIdTextField.setWidth("-1px");
	userIdTextField.setHeight("-1px");
	userIdTextField.setImmediate(false);
	verticalLayout_2.addComponent(userIdTextField);
	
	// passwordLabel
	Label passwordLabel = new Label();
	passwordLabel.setWidth("-1px");
	passwordLabel.setHeight("-1px");
	passwordLabel.setCaption("Password");
	passwordLabel.setImmediate(false);
	verticalLayout_2.addComponent(passwordLabel);
	
	// passwordTextField
	passwordTextField = new TextField();
	passwordTextField.setWidth("-1px");
	passwordTextField.setHeight("-1px");
	passwordTextField.setImmediate(false);
	verticalLayout_2.addComponent(passwordTextField);
	
	// adminPrivilegesLabel
	Label adminPrivilegesLabel = new Label();
	adminPrivilegesLabel.setWidth("-1px");
	adminPrivilegesLabel.setHeight("-1px");
	adminPrivilegesLabel.setCaption("Has Admin Privileges");
	adminPrivilegesLabel.setImmediate(false);
	verticalLayout_2.addComponent(adminPrivilegesLabel);
	
	// adminCheckBox
	adminCheckBox = new CheckBox();
	adminCheckBox.setWidth("-1px");
	adminCheckBox.setHeight("-1px");
	adminCheckBox.setImmediate(false);
	verticalLayout_2.addComponent(adminCheckBox);
	
	// createNewUserButton
	createNewUserButton = new Button();
	createNewUserButton.setWidth("125px");
	createNewUserButton.setHeight("-1px");
	createNewUserButton.setCaption("Create New User");
	createNewUserButton.setImmediate(true);
	verticalLayout_2.addComponent(createNewUserButton);
	
	return verticalLayout_2;
}

}


import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

public class FormTest extends CustomComponent {

/**
 * 
 */
private static final long serialVersionUID = -2012121896090025850L;
@AutoGenerated
private AbsoluteLayout mainLayout;
@AutoGenerated
private VerticalLayout verticalLayout_2;
@AutoGenerated
private Button createNewUserButton;
@AutoGenerated
private CheckBox adminCheckBox;
@AutoGenerated
private TextField passwordTextField;
@AutoGenerated
private TextField userIdTextField;
/**
 * The constructor should first build the main layout, set the
 * composition root and then do any custom initialization.
 *
 * The constructor will not be automatically regenerated by the
 * visual editor.
 */
public FormTest() {
	buildMainLayout();
	setCompositionRoot(mainLayout);

	// TODO add user code here
	verticalLayout_2.setSpacing(true);
}

@AutoGenerated
private AbsoluteLayout buildMainLayout() {
	// common part: create layout
	mainLayout = new AbsoluteLayout();
	
	// top-level component properties
	setWidth("100.0%");
	setHeight("100.0%");
	
	// verticalLayout_2
	verticalLayout_2 = buildVerticalLayout_2();
	verticalLayout_2.setWidth("100.0%");
	verticalLayout_2.setHeight("-1px");
	verticalLayout_2.setCaption("Vertical Layout");
	verticalLayout_2.setImmediate(false);
	mainLayout.addComponent(verticalLayout_2);
	
	return mainLayout;
}

@AutoGenerated
private VerticalLayout buildVerticalLayout_2() {
	// common part: create layout
	verticalLayout_2 = new VerticalLayout();
	
	// userIdLabel
	Label userIdLabel = new Label();
	userIdLabel.setWidth("100.0%");
	userIdLabel.setHeight("-1px");
	userIdLabel.setCaption("User ID");
	userIdLabel.setImmediate(false);
	verticalLayout_2.addComponent(userIdLabel);
	
	// userIdTextField
	userIdTextField = new TextField();
	userIdTextField.setWidth("-1px");
	userIdTextField.setHeight("-1px");
	userIdTextField.setImmediate(false);
	verticalLayout_2.addComponent(userIdTextField);
	
	// passwordLabel
	Label passwordLabel = new Label();
	passwordLabel.setWidth("100.0%");
	passwordLabel.setHeight("-1px");
	passwordLabel.setCaption("Password");
	passwordLabel.setImmediate(false);
	verticalLayout_2.addComponent(passwordLabel);
	
	// passwordTextField
	passwordTextField = new TextField();
	passwordTextField.setWidth("-1px");
	passwordTextField.setHeight("-1px");
	passwordTextField.setImmediate(false);
	verticalLayout_2.addComponent(passwordTextField);
	
	// adminPrivilegesLabel
	Label adminPrivilegesLabel = new Label();
	adminPrivilegesLabel.setWidth("100.0%");
	adminPrivilegesLabel.setHeight("-1px");
	adminPrivilegesLabel.setCaption("Has Admin Privileges");
	adminPrivilegesLabel.setImmediate(false);
	verticalLayout_2.addComponent(adminPrivilegesLabel);
	
	// adminCheckBox
	adminCheckBox = new CheckBox();
	adminCheckBox.setWidth("-1px");
	adminCheckBox.setHeight("-1px");
	adminCheckBox.setImmediate(false);
	verticalLayout_2.addComponent(adminCheckBox);
	
	// createNewUserButton
	createNewUserButton = new Button();
	createNewUserButton.setWidth("-1px");
	createNewUserButton.setHeight("-1px");
	createNewUserButton.setCaption("Create New User");
	createNewUserButton.setImmediate(true);
	verticalLayout_2.addComponent(createNewUserButton);
	
	return verticalLayout_2;
}

}

Just answering the third question:

Those images are just mockups created in Photoshop, but the final version should resemble them quite closely. The current rough development version is deployed every night to
http://demo.vaadin.com/visualdesigner-nightly
, you can test it there as well.

And those formatting options you see in the mockups: that’s just a RichTextArea being edited with the Visual Editor, just like any other core component that’s dragged to the canvas, they’re not part of the Visual Editor controls.

I would guess the height you have explicitly set for the containing layout is too small - VerticalLayout clips the content that does not fit in it.

In the constructor, where there is a “// TODO add user code here”, add the listener on the field or call a method that does so.

I believe the current visual editor UI does not support switching the top-level class. The editor itself should support other layouts if you change the main layout type in code, but that has not been tested much as long as there is no UI support for that.

No obvious reason in the class comes to my mind based on a quick look. Try selecting the file in Eclipse Project Explorer and Open With… → Other… and select the Vaadin custom component editor - Eclipse remembers the type of the editor with which you last opened the class.

Note that the visual editor is under active development, and while it is getting closer to a stable intermediate release, there are certainly issues also with the editor. I assume you are using the version from http://vaadin.com/eclipse/experimental .

The demo is really nice. Much better than what comes with the eclipse plug-in. Is there a way to use the demo code with the plug-in? Also, is there a way to see the code generated by the demo? I couldn’t see how to do that.

Thanks,

Jonathan

Thanks. Very helpful. For 1) the containing layout was indeed too small. For 5) specifying the Vaadin editor did the trick. There was a related issue involving my XulRunner install which perhaps was responsible for Eclipse forgetting to use the Vaadin editor. A reinstall and registration did the trick.

vaadin.com/eclipse/experimental” doesn’t seem to be a legitimate link either in a browser or in eclipse software install. The visual editor in eclipse that I have is from “vaadin.com/eclipse” which (in the install software dialog) install

 "Vaadin Visual Editor (EXPERIMENTAL)	0.5.0.201006211340"

Is this the latest version? If not, how can I get the latest version?

Regards,

Jonathan

Hi Jonathan,

The demo can surely be run from eclipse as well, it goes by the version of 0.6 and is hosted on the experimental site Henri mentioned.

I just tried to install the plugin by using the url http://vaadin.com/eclipse/experimental and it sure works for me. Did you use the “http://” -prefix, eclipse seems require it. Or maybe it is an eclipse thing, it at least seemed to work with Helios which I use.

The component added in the screenshot is the RichTextArea, which has controls for formatting the text.

Edit: nm, Jouni said that already, I missed that last paragraph somehow…

I can confirm what Henri said: you can change the layout manually in the code, and it will work in the visual editor (yes, I’ve actually tried ;-), but the visual editor itself has no such functionality right now. It’s planned, though.

Best Regards,
Marc

Thanks. Turns out it had to do with improperly configured network settings to go through the proxy server.

Got it working and it looks really good.

Jonathan