TokenField - new component

Hi,
Some methods returns the tokens selected?

Thanks in advance!

Xavier Jun Pan: Hi,
Some methods returns the tokens selected?

Hi,

TokenField implements the Field interface (which means it's also a Property), so you get its value by using getValue(). You can also use a ValueChangeListener. The value returned is a Set:

TokenField f = new TokenField("Add tags");
p.addComponent(f);
f.addListener(new ValueChangeListener() {                    
   public void valueChange(ValueChangeEvent event) {
      Set tokens = (Set)event.getProperty().getValue();
      getWindow().showNotification("Tokens: "+ tokens);
   }
});

Hope this helps!
...I should really add this snippet to the examples - thanks for making me notice that :-)

Best Regards,
Marc

hello marc

your component is excellent , how ever I have a small problem: how to add a new tag if I populate the control from the database

here is my code :

HorizontalLayout tokenLayout= new HorizontalLayout();
		tokenLayout.setSpacing(true);
		
		tags = new TokenField("Tags", tokenLayout);
		
		
		IndexedContainer tokenContainer= new IndexedContainer();
		tokenContainer.addContainerProperty("dpc_name", String.class, "");
		
		String sql="SELECT\r\n" + 
				"  dpt_tag.dpc_handle,  \r\n" + 
				"  dpt_tag.dpc_name \r\n" + 
				"  \r\n" + 
				"FROM \r\n" + 
				"  public.dpt_tag\r\n" + 
				"ORDER BY\r\n" + 
				"  dpt_tag.dpc_name ASC"; 
				
		
		try {
			java.sql.Connection conn=Dproject_webApplication.getDs().getConnection();
			Statement stmt=conn.createStatement();
			ResultSet rs= stmt.executeQuery(sql);
			
			while (rs.next()){
			Item item= tokenContainer.addItem(rs.getString("dpc_handle"));
			item.getItemProperty("dpc_name").setValue(rs.getString("dpc_name"));
			}
			stmt.close();
			rs.close();
			conn.close();
			}
		
		catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		tags.setStyleName(TokenField.STYLE_TOKENTEXTFIELD); 
        tags.setWidth("100%");
        tags.setInputWidth("100%"); 
        tags.setContainerDataSource(tokenContainer); 
        tags.setFilteringMode(ComboBox.FILTERINGMODE_CONTAINS); 
        tags.setTokenCaptionPropertyId("dpc_name"); 
        tags.setNewTokensAllowed(true);
        tags.setRememberNewTokens(true);
        
	
	

Which method should I override and how ? (I am fine witht sql or jdbc , my problemi is which methods to call or override?)

This add-on is just what I was looking for!
Any ideas about how I can use it in a form with a FieldFactory? I want to get the tags as a List preferably of the same type as the BeanItemContainer.

Thanks
Nabeel

Hi Marc,

I really love this component, it works superb!

One feature I am currently missing is to add an icon to a label, e.g., a flag next to the name of a Country. Is there a way to customize the current component to include this feature, or does the component itself needs to be extended with the ComboBox's itemIcon feature?

Best regards,
Johannes

Hello Nabeel,

did you manage to do what you described?

I am currently trying the same.
I always get an ConversionException because PropertyFormatter tries to cast from HashSet containing the Tags to a String, which is abviously not possible.

I also tried to subclass PropertyFormatter and implemented parse/format methods which do this convertion.

It seems to me that Vaadin-Formfields are generally not really compatible with lists?!

Would like to hear about your further experiences.

br,
Tim

Tim Tünker: I always get an ConversionException because PropertyFormatter tries to cast from HashSet containing the Tags to a String, which is abviously not possible.

I also tried to subclass PropertyFormatter and implemented parse/format methods which do this convertion.

It seems to me that Vaadin-Formfields are generally not really compatible with lists?!

I don't know about this add-on, but as a general comment: forms and fields certainly are compatible with various data structures, and e.g. using a list in multi-select mode will use a Set as its value. However, PropertyFormatter only handles conversions between a String and some other representation.

Support for easy conversion of values between a field and the underlying Property should be improved in the future.

The CustomField add-on (including the class FieldWrapper in it, which might be of use for you) does support other conversions and provides a PropertyConverter interface.

Hello,

for anyone who might be interested, it is working for me now, see:
my other Post

Hi it should be possible to hide it through css like this:

.mytokenfield .v-filterselect {
visibility: hidden;
}

Hi great addon, Is it possible to add an option to set the description of the tokens? I need to set it to something else than "Click to remove"

Hello Marc

I have trouble with TokenField. Would you like to help me?
TokenField displays wrong item caption?

Nabeel Ahmad: This add-on is just what I was looking for!
Any ideas about how I can use it in a form with a FieldFactory? I want to get the tags as a List preferably of the same type as the BeanItemContainer.

Thanks
Nabeel

Below is how i used it in a form FieldFactory... Hope this helps!

else if ("roles".equals(pid)) {
// We want this to be vertical
VerticalLayout layout = new VerticalLayout();
layout.setSpacing(true);

rolesField = new TokenField(SystemMsg.USER_ROLES.get(), layout) {

private static final long serialVersionUID = -6343481987196066377L;

// Display the dialog if not in 'role list', otherwise just add
@SuppressWarnings("unchecked")
protected void onTokenInput(Object tokenId) {
Set<Object> set = (Set<Object>) getValue();
Role role = new Role(tokenId.toString());

if (set != null && set.contains(role)) {
// duplicate role
getWindow().showNotification(
getTokenCaption(tokenId) + " is already added");
} else {
if (!cb.containsId(tokenId)) {
// don't add directly,
// show custom "add to role" dialog
getWindow().addWindow(new EditRoleWindow(role, this));
} else {


// it's in the role list, just add
addToken(tokenId);
}
}
}

// show confirm dialog
protected void onTokenClick(final Object tokenId) {
getWindow().addWindow(new RemoveWindow((Role) tokenId, this));
}

// just delete, no confirm
protected void onTokenDelete(Object tokenId) {
this.removeToken(tokenId);
}

protected void configureTokenButton(Object tokenId, Button button) {
super.configureTokenButton(tokenId, button);
// custom caption
// button.setCaption(getTokenCaption(tokenId));
button.setCaption(((Role) tokenId).getName());
// width
button.setWidth("100%");

if (!cb.containsId(tokenId)) {
// it's not in the role; style
button.addStyleName(TokenField.STYLE_BUTTON_EMPHAZISED);
}
}

public void commit() {
Set<Object> set = (Set<Object>) getValue();
List<Role> roles = new ArrayList<Role>();
Iterator it = set.iterator();
while(it.hasNext())
roles.add((Role)it.next());
user.setRoles(roles);
FacadeFactory.getFacade().store(user);
getWindow().showNotification("Information about this user saved.");
}

};

// This would turn on the "fake" look:
rolesField.setStyleName(TokenField.STYLE_TOKENFIELD);
rolesField.setWidth("200px");
rolesField.setInputWidth("200px");
rolesField.setContainerDataSource(roleContainer); // container for role input combobox
rolesField.setRequired(true);
rolesField.setImmediate(true);
rolesField.setFilteringMode(ComboBox.FILTERINGMODE_CONTAINS); // suggest
rolesField.setTokenCaptionPropertyId("name"); // use name in input
rolesField.setTokenCaptionMode(ComboBox.ITEM_CAPTION_MODE_PROPERTY);
rolesField.setInputPrompt("Enter the role name");
rolesField.setRememberNewTokens(false); // we'll do this via the dialog

// Display the current roles
List<Role> roles = user.getRoles();
for (Role role : roles) {
rolesField.addToken(role);
}

return rolesField;

}

return field;
}

Hi,

I want to ask how can I get value of TokenField and change it to string, because I want to set value of TokenField in TextArea. I know that there are some methods like getValue() and toString(), but using getValue() I have nothing.

Could you please move this file to some special subfolder like tokenfield

because there are collisions with other plugins like wizards-for-vaadin.

Compiled code contains either one styles.css or another not both.
http://code.google.com/p/tokenfield/issues/detail?id=9&thanks=9&ts=1350480504
Thank you
PS good job

When using a fixed width tokenField and cssLayout, it would be nice the input box to expand to the remaining space, instead of leaving it unused. I have tried to do the trick with CSS styling, with no luck. Do you think this can be achieved this using CSS, or should this be achieved via component source modification?

Hi, Marc-

This control is exactly what I want to use, thank you! One small issue under Vaadin 7 to do with all the refactoring going on... the 7 version needs a re-compile against a corrected import since using the control now yields a compile error:

"The type com.vaadin.terminal.Sizeable$Unit cannot be resolved. It is indirectly referenced from required .class files"

I'd fix myself, but I'm not really confident messing about with plug-ins yet.

Best,
Elliott

I guess there are a few other fiddly things, too. Can't wait for the Vaadin 7 version--literally... A custom TokenField is at the center of one of the features we're prototyping!

Current Version compatible with Vaadin 7 beta10?

Hi,

I Try to use this Addon on Vaadin 7 Beta10 and i get a compile Error on the Widgetset.
Is this Version 7.0.0 from Maven Repository Compatible?

I Get:

[INFO]          [ERROR] Line 7: The import com.vaadin.terminal.gwt.client cannot be resolved
[INFO]          [ERROR] Line 8: The import com.vaadin.terminal.gwt.client cannot be resolved
[INFO]          [ERROR] Line 9: The import com.vaadin.terminal.gwt.client cannot be resolved
[INFO]          [ERROR] Line 11: Connect cannot be resolved to a type
[INFO]          [ERROR] Line 11: The attribute value is undefined for the annotation type Connect
[INFO]          [ERROR] Line 12: ComboBoxConnector cannot be resolved to a type
[INFO]          [ERROR] Line 14: RpcProxy cannot be resolved
[INFO]          [ERROR] Line 20: The method init() of type TokenFieldConnector must override or implement a supertype method
[INFO]          [ERROR] Line 30: The method getWidget() of type TokenFieldConnector must override or implement a supertype method
[INFO]          [ERROR] Line 31: ComboBoxConnector cannot be resolved to a type
[INFO]          [ERROR] Line 35: The method createWidget() of type TokenFieldConnector must override or implement a supertype method

Since this is the first and only Addon i use, i do not know if i made something else wrong.
I have my dependency to (version here not present):

<dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-server</artifactId>
    </dependency>
    <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-client-compiled</artifactId>
    </dependency>
    <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-client</artifactId>
    </dependency>
    <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-themes</artifactId>
    </dependency>      
    <dependency>
      <groupId>org.vaadin.addons</groupId>
      <artifactId>tokenfield</artifactId>
    </dependency>

I can not find the import "com.vaadin.terminal.gwt.client" in the upper dependencies. Did i miss something?

thanks

Hi Author,

It's a great addon.
My problem is the read-only state looks not correct.
Even I set it read-only, the "x" close button is still there. My expectation is if it is set to read-only, the "x" close button should be hidden.

Hi Marc,

nice Add-On, just what I was looking for.

I was wondering if it is possible to set a different Background to the Tokens that did not validate correctly so the User can easly see which token is wrong.
Really usefull if he enters several tokens at once

On Inpection with the Browser I only see that all of them are buttons, but with the same StyleName

Marc

Hi, I'm new to Vaadin, so this probably is a newbie problem.

When I have the tokenfield on screen and I add a value, the new value is listed on the UI, but it is not written to my database. I get the following error:

java.lang.UnsupportedOperationException
at com.vaadin.data.util.sqlcontainer.SQLContainer.addItem(SQLContainer.java:1469)

Does anyone know what I'm doing wrong??

Hi, I have a problem with the method

TokenField.getValue ()

. It returns a String and Long values, but Id of my custom Container is Long.
If I enter "abc" twice,

TokenField.getValue ()

returns [abc, 12345]
and

tokenField.getContainerDataSource().getItemIds()

returns [12345].
The result is duplicating values in TokenField.
Source code of my Container:

import java.util.Arrays;
import java.util.Collection;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.vaadin.data.Container;
import com.vaadin.data.Item;
import com.vaadin.data.Property;
import com.vaadin.data.util.ObjectProperty;

@SuppressWarnings("serial")
public class ProfileContainer implements Container {

	private Map<Long, Item> items = new HashMap<Long, Item>();
	
	@SuppressWarnings("unchecked")
	private List<String> containerPropertyIds = Arrays.asList(new String[]{"id", "name"});
	
	@Override
	public Item getItem(Object itemId) {
		return items.get(convertId(itemId));
	}

	@Override
	public Collection<String> getContainerPropertyIds() {
		return containerPropertyIds;
	}

	@Override
	public Collection<Long> getItemIds() {
		return items.keySet();
	}
	
	@Override
	public Property getContainerProperty(Object itemId, Object propertyId) {
		return getItem(convertId(itemId)).getItemProperty(propertyId);
	}

	@Override
	public Class<?> getType(Object propertyId) {
		if(propertyId.equals("id")) return Long.class;
		if(propertyId.equals("name")) return String.class;
		return null;
	}

	@Override
	public int size() {
		return items.size();
	}

	@Override
	public boolean containsId(Object itemId) {
		return items.keySet().contains(convertId(itemId));
	}

	@Override
	public Item addItem(Object itemId) throws UnsupportedOperationException {
		Long newItemId = convertId(itemId);
		if(containsId(newItemId)) return null;
		ProfileItem profileItem = new ProfileItem(newItemId, (String)itemId);
		items.put(newItemId, profileItem);
		return profileItem;
	}

	@Override
	public Object addItem() throws UnsupportedOperationException {
		Long itemId = System.currentTimeMillis();
		while(containsId(itemId)) itemId = System.currentTimeMillis();
		ProfileItem profileItem = new ProfileItem(itemId, "");
		items.put(itemId, profileItem);
		return profileItem;
	}

	@Override
	public boolean removeItem(Object itemId)
			throws UnsupportedOperationException {
		items.remove(convertId(itemId));
		return true;
	}

	@Override
	public boolean addContainerProperty(Object propertyId, Class<?> type,
			Object defaultValue) throws UnsupportedOperationException {
		throw new UnsupportedOperationException();
	}

	@Override
	public boolean removeContainerProperty(Object propertyId)
			throws UnsupportedOperationException {
		throw new UnsupportedOperationException();
	}

	@Override
	public boolean removeAllItems() throws UnsupportedOperationException {
		items.clear();
		return true;
	}
	
	private Long convertId(Object itemId) {
		if(itemId instanceof Long)
			return (Long) itemId;
		else 
			return (long) itemId.hashCode();
	}

	private class ProfileItem implements Item {

		private Property<Long> id = new ObjectProperty<Long>(-1L);
		private Property<String> name = new ObjectProperty<String>("");
		
		public ProfileItem() {
		}
		
		public ProfileItem(Long id, String name) {
			this.id.setValue(id);
			this.name.setValue(name);			
		}
		
		@Override
		public Property<?> getItemProperty(Object id) {
			if(id.equals("id")) return (Property<Long>) this.id;
			if(id.equals("name")) return (Property<String>) this.name;
			return null;
		}

		@Override
		public Collection<?> getItemPropertyIds() {
			return containerPropertyIds;
		}

		@Override
		public boolean addItemProperty(Object id, Property property)
				throws UnsupportedOperationException {
			throw new UnsupportedOperationException();
		}

		@Override
		public boolean removeItemProperty(Object id)
				throws UnsupportedOperationException {
			throw new UnsupportedOperationException();
		}

	}
	
}

So I've been battling to get tokenfield to work with a JPA container (eclipse link) and have just about got it working.
One problem which I've not been able to resolve is inclusion of the tokenfield style sheet. It is my understanding that when using maven I should run:

mvn vaadin:update-widgetset 
[INFO] Scanning for projects...
[INFO] ------------------------------------------------------------------------
[INFO] Building Vaadin Web Application
[INFO]    task-segment: [vaadin:update-widgetset]
[INFO] ------------------------------------------------------------------------
[INFO] [vaadin:update-widgetset {execution: default-cli}]
[INFO] auto discovered modules [au.org.scoutmaster.AppWidgetSet]
[INFO] Updating widgetset au.org.scoutmaster.AppWidgetSet
[INFO] Adding resource directory to command classpath: /home/bsutton/git/scoutmaster/scoutmaster/src/main/resources
[ERROR] Jul 28, 2013 9:21:32 PM com.vaadin.server.widgetsetutils.ClassPathExplorer getAvailableWidgetSetsAndStylesheets
[ERROR] INFO: Widgetsets found from classpath:
[ERROR] 	com.vaadin.DefaultWidgetSet in jar:file:/home/bsutton/.m2/repository/com/vaadin/vaadin-client/7.1.0/vaadin-client-7.1.0.jar!/
[ERROR] 	au.org.scoutmaster.AppWidgetSet in file:/home/bsutton/git/scoutmaster/scoutmaster/src/main/java
[ERROR] 	org.vaadin.tokenfield.TokenfieldWidgetset in jar:file:/home/bsutton/.m2/repository/org/vaadin/addons/tokenfield/7.0.1/tokenfield-7.0.1.jar!/
[ERROR] 	fi.jasoft.dragdroplayouts.DragDropLayoutsWidgetSet in jar:file:/home/bsutton/.m2/repository/org/vaadin/addons/dragdroplayouts/1.0.0.alpha4/dragdroplayouts-1.0.0.alpha4.jar!/
[ERROR] 	com.vaadin.addon.calendar.gwt.CalendarWidgetset in jar:file:/home/bsutton/.m2/repository/com/vaadin/addon/vaadin-calendar/2.0.0/vaadin-calendar-2.0.0.jar!/
[ERROR] Addon styles found from classpath:
[ERROR] 
[ERROR] Jul 28, 2013 9:21:32 PM com.vaadin.server.widgetsetutils.ClassPathExplorer getAvailableWidgetSetsAndStylesheets
[ERROR] INFO: Search took 14ms

You will note in the above output that it didn't detect the tokenfield style sheet.

Any clues?

I'm using Eclipse, Vaadin 7.1 and maven 2.2.1, tokenfield 7.0.1

The pom entries are:

<dependency>
			<groupId>org.vaadin.addons</groupId>
			<artifactId>tokenfield</artifactId>
			<version>7.0.1</version>
</dependency>

<plugin>
				<groupId>com.vaadin</groupId>
				<artifactId>vaadin-maven-plugin</artifactId>
				<version>${vaadin.plugin.version}</version>
				<configuration>
					<extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
					<!-- <runTarget>mobilemail</runTarget> -->
					<!-- We are doing "inplace" but into subdir VAADIN/widgetsets. This 
						way compatible with Vaadin eclipse plugin. -->
					<webappDirectory>${basedir}/src/main/webapp/VAADIN/widgetsets
					</webappDirectory>
					<hostedWebapp>${basedir}/src/main/webapp/VAADIN/widgetsets
					</hostedWebapp>
					<noServer>true</noServer>
					<!-- Remove draftCompile when project is ready -->
					<draftCompile>false</draftCompile>
					<compileReport>true</compileReport>
					<style>OBF</style>
					<strict>true</strict>
					<runTarget>http://localhost:8080/</runTarget>
				</configuration>
				<executions>
					<execution>
						<configuration>
							<!-- if you don't specify any modules, the plugin will find them -->
							<!-- <modules> <module>com.vaadin.demo.mobilemail.gwt.ColorPickerWidgetSet</module> 
								</modules> -->
						</configuration>
						<goals>
							<goal>resources</goal>
							<goal>update-widgetset</goal>
							<goal>compile</goal>
						</goals>
					</execution>
				</executions>
			</plugin>

The target update-widgetset just scans the classpath for JARs that have a special manifest field indicating that they are Vaadin client side add-ons (as well as other GWT related JARs) and updates your .gwt.xml widgetset file. It has nothing to do with themes (except maybe indirectly for alternative 2 below by updating your main widgetset to point to its widgetset).

I don't know how the theme is included in TokenField, so the below is just going over various possibilities.

If TokenField uses the Vaadin 7.1 mechanism of including themes in add-ons (which I don't believe - I'm not sure if any published add-on uses it yet), you would need to run mvn vaadin:update-theme (using a recent Maven plug-in) and ensure the file addons.xml is imported and included correctly. Then, mvn vaadin:compile-theme would be required as for any SCSS theme.

If TokenField includes its theme rules from its widgetset (which I guess might be the case), you just need to compile the widgetset (mvn vaadin:update-widgetset vaadin:compile), which might or might not log anything about the theme, but it should get compiled into the widgetset JavaScript files.

Finally, TokenField might require the user to explicitly import its theme. If so, check the Directory page and documentation of TokenField.

With Vaadin 7.1.1 when I add a new token token combo box is not cleared. Tried to recompile widgetset, didn't help.

Alexandr Mikhalchenko: With Vaadin 7.1.1 when I add a new token token combo box is not cleared. Tried to recompile widgetset, didn't help.

I can add some information to this. I'm seeing the same problem however its worth noting that if you exit the field using 'tab' then the value is cleared, it is only when you exit the field with the 'enter' key that the field isn't cleared.

If TokenField includes its theme rules from its widgetset (which I guess might be the case), you just need to compile the widgetset (mvn vaadin:update-widgetset vaadin:compile), which might or might not log anything about the theme, but it should get compiled into the widgetset JavaScript files.

So the structure of the tokenfield jar is:

META-INF/MANIFEST.MF
org/vaadin/tokenfield/TokenComboBox$1.class
org/vaadin/tokenfield/TokenComboBox.class
org/vaadin/tokenfield/TokenComboBox.java
org/vaadin/tokenfield/TokenField$1.class
org/vaadin/tokenfield/TokenField$2.class
org/vaadin/tokenfield/TokenField$3.class
org/vaadin/tokenfield/TokenField$4.class
org/vaadin/tokenfield/TokenField$InsertPosition.class
org/vaadin/tokenfield/TokenField.class
org/vaadin/tokenfield/TokenField.java
org/vaadin/tokenfield/TokenfieldWidgetset.gwt.xml
org/vaadin/tokenfield/public/tokenfield/black-input-right.png
org/vaadin/tokenfield/public/tokenfield/input-right.png
org/vaadin/tokenfield/public/tokenfield/tokenfield.css
org/vaadin/tokenfield/client/ui/TokenFieldServerRpc.class
org/vaadin/tokenfield/client/ui/TokenFieldServerRpc.java
org/vaadin/tokenfield/client/ui/VTokenField$DeleteListener.class
org/vaadin/tokenfield/client/ui/VTokenField.class
org/vaadin/tokenfield/client/ui/VTokenField.java
org/vaadin/tokenfield/client/ui/TokenFieldConnector$1.class
org/vaadin/tokenfield/client/ui/TokenFieldConnector.class
org/vaadin/tokenfield/client/ui/TokenFieldConnector.java

When I run mvn vaadin:update-theme

[vaadin:update-theme {execution: default-cli}]
Updating theme VAADIN/themes/scoutmaster
com.vaadin.server.widgetsetutils.ClassPathExplorer getAvailableWidgetSetsAndStylesheets
Widgetsets found from classpath:
com.vaadin.DefaultWidgetSet in jar:file:/home/bsutton/.m2/repository/com/vaadin/vaadin-client/7.1.0/vaadin-client-7.1.0.jar!/
au.org.scoutmaster.AppWidgetSet in file:/home/bsutton/git/scoutmaster/scoutmaster/target/classes
org.vaadin.tokenfield.TokenfieldWidgetset in jar:file:/home/bsutton/.m2/repository/org/vaadin/addons/tokenfield/7.0.1/tokenfield-7.0.1.jar!/
	fi.jasoft.dragdroplayouts.DragDropLayoutsWidgetSet in jar:file:/home/bsutton/.m2/repository/org/vaadin/addons/dragdroplayouts/1.0.0.alpha4/dragdroplayouts-1.0.0.alpha4.jar!/
	com.vaadin.addon.calendar.gwt.CalendarWidgetset in jar:file:/home/bsutton/.m2/repository/com/vaadin/addon/vaadin-calendar/2.0.0/vaadin-calendar-2.0.0.jar!/
Addon styles found from classpath:

com.vaadin.server.widgetsetutils.ClassPathExplorer getAvailableWidgetSetsAndStylesheets
Search took 15ms
Theme "VAADIN/themes/scoutmaster" updated

The scoutmaster themes then looks thus:

addons.scss

@mixin addons {
}

styles.css - this file is large but has no tokenfield related content that i can see:

.v-assistive-device-only {
        position: absolute;
        top: -2000px;
        left: -2000px;
        width: 10px;
        overflow: hidden;
}

.v-vaadin-version:after {
        content: "7.1.0";
}

.v-generated-body {
        width: 100%;
        height: 100%;
        border: 0;
        margin: 0;
        overflow: hidden;
}

... trimmed below here

The file styles.scss mostly contains font statements I've added to increase the default font size:

@import "../reindeer/reindeer.scss";

@mixin scoutmaster
{
  @include reindeer;


        /* Global font styles */
        .v-app,

... trimmed
         .v-table-header-drag
        {
                font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
                font-size: 14px;
                line-height: normal;
                color: #222;
        }
}

When I run:

mvn vaadin:update-widgetset

I get

[vaadin:update-widgetset {execution: default-cli}]
auto discovered modules [au.org.scoutmaster.AppWidgetSet]
Updating widgetset au.org.scoutmaster.AppWidgetSet
Adding resource directory to command classpath: /home/bsutton/git/scoutmaster/scoutmaster/src/main/resources
com.vaadin.server.widgetsetutils.ClassPathExplorer getAvailableWidgetSetsAndStylesheets
Widgetsets found from classpath:
com.vaadin.DefaultWidgetSet in jar:file:/home/bsutton/.m2/repository/com/vaadin/vaadin-client/7.1.0/vaadin-client-7.1.0.jar!/
au.org.scoutmaster.AppWidgetSet in file:/home/bsutton/git/scoutmaster/scoutmaster/src/main/java
org.vaadin.tokenfield.TokenfieldWidgetset in jar:file:/home/bsutton/.m2/repository/org/vaadin/addons/tokenfield/7.0.1/tokenfield-7.0.1.jar!/
fi.jasoft.dragdroplayouts.DragDropLayoutsWidgetSet in jar:file:/home/bsutton/.m2/repository/org/vaadin/addons/dragdroplayouts/1.0.0.alpha4/dragdroplayouts-1.0.0.alpha4.jar!/
com.vaadin.addon.calendar.gwt.CalendarWidgetset in jar:file:/home/bsutton/.m2/repository/com/vaadin/addon/vaadin-calendar/2.0.0/vaadin-calendar-2.0.0.jar!/
Addon styles found from classpath:
com.vaadin.server.widgetsetutils.ClassPathExplorer getAvailableWidgetSetsAndStylesheets
Search took 14ms

So any idea what I'm doing wrong?

org/vaadin/tokenfield/public/tokenfield/tokenfield.css

tells that the CSS is actually compiled into the widgetset for this add-on. It will not be sent to the client as a separate CSS file but minimized and embedded in the widgetset JS file.

vaadin:update-widgetset would not care about this at all - it just scans add-on JARs for metadata. Only vaadin:compile might or might not produce any output that there are CSS rules included in the widgetset.

Brett Sutton:

Alexandr Mikhalchenko: With Vaadin 7.1.1 when I add a new token token combo box is not cleared. Tried to recompile widgetset, didn't help.

I can add some information to this. I'm seeing the same problem however its worth noting that if you exit the field using 'tab' then the value is cleared, it is only when you exit the field with the 'enter' key that the field isn't cleared.

Same problem here... any workarounds?

With Vaadin 7.1.5 the remove-on-backspace functionality is not working.. Has anyone the same experience?
I checked with Vaadin 7.1.0 with the same result..

Moritz Christian:

Brett Sutton:

Alexandr Mikhalchenko: With Vaadin 7.1.1 when I add a new token token combo box is not cleared. Tried to recompile widgetset, didn't help.

I can add some information to this. I'm seeing the same problem however its worth noting that if you exit the field using 'tab' then the value is cleared, it is only when you exit the field with the 'enter' key that the field isn't cleared.

Same problem here... any workarounds?

I have implemented a workaround using javascript to blur and focus on input element. Here are the details:

1. Subclass the org.vaadin.tokenfield.TokenField to create a custom class
2. Add a stylename (for example: myTokenField) to cb (TokenComboBox in TokenField)
3. Override the onTokenInput(Object tokenId) and execute a javascript to blur and focus the input text field

@Override
    protected void onTokenInput(Object tokenId)
    {
        super.onTokenInput(tokenId);
        
        //This is hack to clear out the input by doing blur/focus on input element.
        JavaScript.getCurrent().execute("$('.myTokenField input').blur();$('.myTokenField input').focus();");
    }

 

Hi,
I had a problem with token orders. The component uses HashSet's in setInternalValue. If you have order (like using a LinkedHashSet as presentation class) in your tokens, it is lost when displayed. To solve this, I tried extending the TokenField but it was a bust. My solution is to use a wrapper class for tokens which contains the token and an order value that is used as the hash too. Since HashSet uses these hash values to order data, the order is preserved. Hope it helps someone.

Hi, Token field is a nice component but I have a problem after selecting the data from token-field i want to that data remains in the screen when I visited again on that screen. 

rounak kumar: Hi, Token field is a nice component but I have a problem after selecting the data from token-field i want to that data remains in the screen when I visited again on that screen. 

You should really provide more context to your question. What does "screen" mean? A Vaadin UI instance? A page? What does it mean to "visit again"? Reload the page / re-create the UI?

Having said that, I guess the general / common solution is to actually persist (either in a DB, or even in-memory like in the http / Vaadin session, etc.) the values inserted by the user and upon "re-visiting the screen" to automatically set them accordingly.