CustomField -> Caption in Forms

Hi,

I’ve designed a MyField Component that extends from CustomField. It holds a a textfield and a button next to each other and a drop-down select below the other two components. the CompositionRoot is set to a VerticalLayout which holds the horizontallayout (with the textfield and the button) and the select-component.

Now, i want to set a caption for this MyField. The first thing that i did was just add a Label with a caption as the first element in the VerticalLayout. But this does not look nice in a the Form where i am using this MyField.

The other Fields in the Form are just TextFields with a caption. The caption is always on the left side of the TextField and the TextFields are all left-aligned to each other (and the captions are all right-aligned to each other). Now i want the caption of my MyField to also be right-aligned with the other captions…
How do i program this in my CustomField?

Kind regards,
Jan

CustomField is just a server-side subclass of CustomComponent that makes implementing the Field API much easier. If you set the caption for the CustomField, it will be shown on the form layout.

EDIT: mixed up two tests, updated code:
EDIT2: too hasty code update, fixed.

Works for me:

	public static class MyBean {
		private String name;
		public void setName(String name) {
			this.name = name;
		}
		public String getName() {
			return name;
		}
	}
	public static class TestField extends CustomField {
		private TextField tf;

		public TestField() {
			tf = new TextField();
			setCompositionRoot(tf);
		}
		
		@Override
		public Class<?> getType() {
			return String.class;
		}
		
		@Override
		public void setValue(Object newValue) throws ReadOnlyException,
				ConversionException {
			tf.setValue(newValue);
		}
		
		@Override
		public Object getValue() {
			return tf.getValue();
		}
	}
		Form form = new Form();
		MyBean bean = new MyBean();
		bean.setName("my name");
		BeanItem<MyBean> item = new BeanItem<MyBean>(bean);
		form.setFormFieldFactory(new DefaultFieldFactory() {
			@Override
			public Field createField(Item item, Object propertyId,
					Component uiContext) {
				CustomField cf = new TestField();
		        cf.setCaption(createCaptionByPropertyId(propertyId));
				return cf;
			}
		});
		form.setItemDataSource(item);

If you want to e.g. explicitly copy the caption from some component inside the CustomField to the CustomField itself, you should be able to do that in a field factory (or by overriding attachField() of your form).

And the method to override for this to actually show the string is setInternalValue(), not setValue()…