how to create a 2-state button

hello

I would like to create a simple 2 state button/checkbox/radio button whatever I would like to style this component to look like a standard vaadin button ( it can have 2 states visually : normal and pressed)

my idea was to use a standard butttons I saw that there is a “v-pressed” class added to the buttons html when it is pressed/clicked So basically I tried to add/remove this style to/from the button on each click

In firefox it is ok BUT in IE it isn’t


@Override
	public void buttonClick(ClickEvent event) {

		Button buttonClicked= event.getButton();
		
		if (buttonClicked == addTicketButton){
		openAddTicketWindow();	
		}
		
		if (buttonClicked == quickSearchButton){
			String searchTerm = quickSearchTextField.toString();
			Filter filter= new SimpleStringFilter("dpc_name", searchTerm, true, false);
			
			IndexedContainer tc =(IndexedContainer) myTickets.getContainerDataSource();
			tc.removeAllContainerFilters();
			tc.addContainerFilter(filter);
			
			
			
			}
		
		if (buttonClicked == ticketModeSupervisor || buttonClicked == ticketModeCoordinator || buttonClicked == ticketModeOwner){
			

			
			
			int ticketMode=(Integer) buttonClicked.getData();
			
			
			System.out.println("Ticket mode: "+ticketMode);
			myTickets.setTicketMode(ticketMode);
			viewBottom.setItemDataSource(null);
			
			
			
		Iterator<Component>	ticketModeIterator = ticketModeLayout.getComponentIterator();
		
		while (ticketModeIterator.hasNext()){
			ticketModeIterator.next().removeStyleName(TICKET_MODE_ACTIVE);
		}
			buttonClicked.addStyleName(TICKET_MODE_ACTIVE);
			
		
				
			}
		

		
	}

what should I do to make it work in every browser? Do I have to add/remove additional styles to make it work ?
11806.jpg

Hi,

the ‘v-pressed’ class name is used in IE and Opera to apply the pressed button css to the v-button element. Your solution does not work in IE because the v-pressed is removed by the client side code when the button is released. I suggest that you create your own style name with similar CSS rules to make this work. You might e.g. insert the following in your theme:


.v-button-stuck-button {
    background-image: url("../reindeer/button/img/button-sprites.png");
    background-position: left -52px;
    outline: medium none;
}

And then just call addStyleName(“stuck-button”) on the Button you want to apply this style to. Make sure that the background image URL points to the correct path!


Tepi