AdvancedTokenField Add-on

An advanced and modern looking Tokenfield.

View larger

Close

This Tokenfield can be used to display the user informations via "Tags/Tokens". Today this is commonly used to show categories or "buzzwords/keywords".

It has a simple API and everything important is not restricted to be modified or used.

Have Fun! :-)

Sample code

public class DemoUI extends UI {

	@WebServlet(value = "/*", asyncSupported = true)
	@VaadinServletConfiguration(productionMode = false, ui = DemoUI.class)
	public static class Servlet extends VaadinServlet {
	}

	private VerticalLayout root;
	private AdvancedTokenField tokenField;
	private VerticalLayout debugLayout;

	@Override
	protected void init(VaadinRequest request) {
		tokenField = new AdvancedTokenField();
		// allow new items to be added to layout-tokens and combobox
		tokenField.setAllowNewItems(true);

		root = new VerticalLayout();
		root.addComponent(tokenField);
		setContent(root);

		// clearing visible token in layout
		tokenField.clearTokens();
		// clearing tokens in combobox
		tokenField.getTokensOfInputField().clear();

		// adding tokens to combobox
		tokenField.addTokenToInputField(new Token("Token1"));
		tokenField.addTokensToInputField(Arrays.asList(new Token[] { new Token("Token2"), new Token("Token3") }));

		// adding tokens to layout directly (adding to combobox cache too, if
		// not existing)
		tokenField.addToken(new Token("token4", "green"));
		tokenField.addTokens(Arrays.asList(new Token[] { new Token("Token5"), new Token("Token6") }));

		// to override defaults
		tokenField.addTokenAddInterceptor(token -> {
			Notification.show(token.getClass().getSimpleName(), "Adding Token: " + token, Type.HUMANIZED_MESSAGE);
			return token;
		});

		// to override defaults
		tokenField.addTokenAddNewItemInterceptor((TokenNewItemInterceptor) value -> {
			Token token = new Token(value);
			Notification.show(value.getClass().getSimpleName(), "Add New Token: " + token, Type.TRAY_NOTIFICATION);
			return token;
		});

		// to override defaults
		tokenField.addTokenRemoveInterceptor((TokenRemoveInterceptor) removeEvent -> {
			Notification.show(removeEvent.getClass().getSimpleName(), "Removing Token: " + removeEvent.getToken(),
					Type.HUMANIZED_MESSAGE);
			return removeEvent;
		});

		debugLayout = new VerticalLayout();
		root.addComponent(debugLayout);

		tokenField.addTokenAddListener(add -> {
			addDebugLog();
		});

		tokenField.addTokenRemoveListener(remove -> {
			addDebugLog();
		});

		addDebugLog();
	}

	public void addDebugLog() {
		debugLayout.removeAllComponents();
		debugLayout.addComponent(new Label("------added-------"));

		// output of visible _added_ tokens
		tokenField.getTokens().forEach(e -> debugLayout.addComponent(new Label(e.toString())));
		debugLayout.addComponent(new Label());
		debugLayout.addComponent(new Label("------inputfield-------"));

		// output of available tokens in inputfield
		tokenField.getTokensOfInputField().forEach(e -> debugLayout.addComponent(new Label(e.toString())));
	}
}

Links

• Source Code
• Issue Tracker
• Author Homepage
• Demo
• Discussion Forum

Compatibility