Extend Slider component

Hi :slight_smile:

I need to create a new Slider component such as in demo: a slider with a Label who shows the current value.

Because the value of this new Slider needs to be persisted, I try to use the CustomField addon but I don’t understand how it works?!

My code:

public class SliderLabel extends CustomField {

	private static final long serialVersionUID = -9147607021377597400L;

	private Slider slider = new Slider();
	private Label value = new Label("0");
	
	public SliderLabel(String caption, int min, int max) {
		// Initilization
		setCaption(caption);
		slider.setMin(min);
		slider.setMax(max);
		slider.setWidth("100%");
		slider.setImmediate(true);
		
		value.setWidth("3em");
		slider.addListener(new ValueChangeListener() {
			private static final long serialVersionUID = -860672027897366148L;

			@Override
            public void valueChange(com.vaadin.data.Property.ValueChangeEvent event) {
                value.setValue(event.getProperty().getValue());
            }
        });
			
		// Component root
		HorizontalLayout hl = new HorizontalLayout();
		hl.setSpacing(true);
		hl.setWidth("100%");
		hl.addComponent(slider);
		hl.setExpandRatio(slider, 1);
		hl.addComponent(value);
		hl.setComponentAlignment(value, Alignment.BOTTOM_CENTER);
		
		setCompositionRoot(hl);
	}
	
		
	
	@Override
	public Object getValue() {
		return slider.getValue();
	}

	@Override
	public void setValue(Object newValue) throws ReadOnlyException,
			ConversionException {
		
		try {
			slider.setValue((Double)newValue);
			super.setValue(slider.getValue());
		} catch (ValueOutOfBoundsException e) {
			e.printStackTrace();
		}
	}

	@Override
	public void valueChange(com.vaadin.data.Property.ValueChangeEvent event) {
		value.setValue(event.getProperty().getValue());	
	}

	@Override
	public void commit() throws SourceException, InvalidValueException {
		super.commit();
		slider.commit();
	}
	
	@Override
	public void discard() throws SourceException {
		super.discard();
		slider.discard();
	}
	
	@Override
	public boolean isReadOnly() {
		return slider.isReadOnly();
	}

	@Override
	public void setReadOnly(boolean readOnly) {
		slider.setReadOnly(readOnly);
	}
	
	@Override
	public Class getType() {
		return Double.class;
	}
}

I can persist new values but when I refresh the page, the component don’t retrieve new value, it shows 0.
What’s wrong? What is missing?

Thank you in advance.

Finally I extend CustomComponent and implement Field interface like this :


public class SliderLabelEx extends CustomComponent implements Field {

	private static final long serialVersionUID = -9147607021377597400L;

	private Slider slider = new Slider();
	private Label value = new Label("0");
	
	public SliderLabelEx(String caption, int min, int max) {
		// Initilization
		setCaption(caption);
		slider.setMin(min);
		slider.setMax(max);
		slider.setWidth("100%");
		slider.setImmediate(true);
		
		value.setWidth(null);
		slider.addListener(new ValueChangeListener() {
			private static final long serialVersionUID = -860672027897366148L;

			@Override
            public void valueChange(com.vaadin.data.Property.ValueChangeEvent event) {
                value.setValue(NumberFormat.getInstance().format(event.getProperty().getValue()));
            }
        });
			
		// Component root
		HorizontalLayout hl = new HorizontalLayout();
		hl.setSpacing(true);
		hl.setWidth("100%");
		hl.addComponent(slider);
		hl.setComponentAlignment(slider, Alignment.MIDDLE_CENTER);
		hl.setExpandRatio(slider, 1);
		hl.addComponent(value);
		hl.setComponentAlignment(value, Alignment.MIDDLE_LEFT);
		
		setCompositionRoot(hl);
	}

	
	
	@Override
	public void focus() {
		slider.focus();
	}

	@Override
	public String getRequiredError() {
		return slider.getRequiredError();
	}

	@Override
	public boolean isRequired() {
		return slider.isRequired();
	}

	@Override
	public void setRequired(boolean required) {
		slider.setRequired(required);		
	}

	@Override
	public void setRequiredError(String requiredMessage) {
		slider.setRequiredError(requiredMessage);		
	}

	@Override
	public boolean isInvalidCommitted() {
		return slider.isInvalidCommitted();
	}

	@Override
	public void setInvalidCommitted(boolean isCommitted) {
		slider.setInvalidCommitted(isCommitted);		
	}

	@Override
	public void commit() throws SourceException, InvalidValueException {
		slider.commit();		
	}

	@Override
	public void discard() throws SourceException {
		slider.discard();
	}

	@Override
	public boolean isModified() {
		return slider.isModified();
	}

	@Override
	public boolean isReadThrough() {
		return slider.isReadThrough();
	}

	@Override
	public boolean isWriteThrough() {
		return slider.isWriteThrough();
	}

	@Override
	public void setReadThrough(boolean readThrough) throws SourceException {
		slider.setReadThrough(readThrough);
	}

	@Override
	public void setWriteThrough(boolean writeThrough) throws SourceException,
			InvalidValueException {
		slider.setWriteThrough(writeThrough);		
	}

	@Override
	public void addValidator(Validator validator) {
		slider.addValidator(validator);
	}

	@Override
	public Collection<Validator> getValidators() {
		return slider.getValidators();
	}

	@Override
	public boolean isInvalidAllowed() {
		return slider.isInvalidAllowed();
	}

	@Override
	public boolean isValid() {
		return slider.isValid();
	}

	@Override
	public void removeValidator(Validator validator) {
		slider.removeValidator(validator);
	}

	@Override
	public void setInvalidAllowed(boolean invalidValueAllowed)
			throws UnsupportedOperationException {
		slider.setInvalidAllowed(invalidValueAllowed);
	}

	@Override
	public void validate() throws InvalidValueException {
		slider.validate();		
	}

	@Override
	public Class<?> getType() {
		return slider.getType();
	}

	@Override
	public Object getValue() {
		return slider.getValue();
	}

	@Override
	public void setValue(Object newValue) throws ReadOnlyException,
			ConversionException {
		slider.setValue(newValue);
	}

	@Override
	public void addListener(ValueChangeListener listener) {
		slider.addListener(listener);
	}

	@Override
	public void removeListener(ValueChangeListener listener) {
		slider.removeListener(listener);
	}

	@Override
	public void valueChange(com.vaadin.data.Property.ValueChangeEvent event) {
		slider.valueChange(event);
	}

	@Override
	public Property getPropertyDataSource() {
		return slider.getPropertyDataSource();
	}

	@Override
	public void setPropertyDataSource(Property newDataSource) {
		slider.setPropertyDataSource(newDataSource);
	}

	@Override
	public int getTabIndex() {
		return slider.getTabIndex();
	}

	@Override
	public void setTabIndex(int tabIndex) {
		slider.setTabIndex(tabIndex);
	}
}

It works but… “mouarf” as we said here :stuck_out_tongue:

With the FieldWrapper class from the CustomField add-on, you should probably be able to eliminate 80% of the code.