Needs Help related to event handling in vaadin

Hi all,

I am attaching a zip folder with this message.

I want exactly the same effects as in this attached template.

Like,if we click on the text box the whole area will become colored,
and when we click on the new text box ,this becomes colored and the
previous one changed to its original state.

Please if any one knows the code for this type of events
Send me.

Thanks and regards,
Shubham Modi
11926.zip (19.9 KB)

That is quite easily done in Vaadin using e.g. FocusListener on the fields. When focused, just use the addStyleName method on the fields parent layout and removeStyleName on the old one.

@Thomas ,

I have used the following code

select.addListener(new FocusListener() {

		@Override
		public void focus(FocusEvent event) {
			select.setStyleName("newstyle");
		}
	});

to my Selection Component .
now how can i remove this listener
when i switch to other components.

Can you please give me some code related to this.

And please also see the template .

Because i need the same functionality as in this template…

Thanks…

“now how can i remove this listener
when i switch to other components.”

Instead of removing a listener, you can use BlurListener as well:

@Override
public void blur(BlurEvent event) {
select.setStyleName(“oldstyle”);
}
});

@Tomas Zezula

I use
the following code

select.addListener(new BlurListener() {

		@Override
		public void blur(BlurEvent event) {
			select.setStyleName("newstyle2");
			
		}
	});

for my select component .

but when i use
the following code
optiongroup.addListener(new BlurListener() {

		@Override
		public void blur(BlurEvent event) {
			optiongroup.setStyleName("newstyle2");
			
		}
	});

for my optiongroup component, it is not working.

how can i solve this problem?

select and optiongroup components both are in init() method…

thanks

You need to have a focusListener and a blurListener for all your components. In the focuslistener you add the style;

optiongroup.addStyleName("newStyle")

and in the blurListener you remove it;

optiongroup.removeStyleName("newStyle")

This can be accomplished easily by letting the class itself implement both listeners, and adding the class itself to all components as listeners:

optiongroup.addFocusListener(this);
optiongroup.addBlurListener(this);
select.addFocusListener(this);
select.addBlurListener(this);

and making the listener itself a bit more generic:

event.getComponent().addStyleName("newStyle")

Hi Shubham,
I created a small example. Please take a look at the attached zip. Once you run it you should see 3 text fields on the screen. Each of them will be highlighted when it gets focus.

PS: According to the tutorial using custom theme overriding
.v-textfield-focus
and
.v-textfield-blur
CSS classes should be enough to achieve the same effect. However it did not seem to work for me and I had to implement Focus and Blur listeners in my app.

Tom
11929.zip (4.26 MB)