FlexibleOptionGroup

Tullio · November 6, 2011, 9:35am

Very interesting Your component.
Just a question is it possible use images as items?
How ?
Tks
Tullio

Sascha6 · November 7, 2011, 8:14am

Hi Henri

I see that the FlexibleOptionGroup overrides setParent of AbstractComponent throwing an UnsupportedOperationException (“The FlexibleOptionGroup component cannot be attached to an Application.”). Why is that?

I try to use FlexibleOptionGroup in a From, and Form.addField therefore miserably fails…

Cheers,
Saro

Henri1 · November 7, 2011, 10:29am

Yes, just use Embedded components to show images.

Henri1 · November 7, 2011, 10:32am

This because you should not add the FlexibleOptionGroup component itself to your application/layout. A quote from component’s overview from Vaadin Directory:

Tullio · November 10, 2011, 12:07pm

I tried to select some options in the option group using the following code I copied from Your example :

	private IndexedContainer createTestContainer() {
		IndexedContainer cont = new IndexedContainer();
		cont.addContainerProperty(CAPTION_PROPERTY, String.class, null);
		cont.addContainerProperty(ICON_PROPERTY, Resource.class, null);
		for (int i = 0; i < items.size(); i++) {
			GalleryItem opt = items.get(i);
			try {
				FileResource es = (FileResource) ResourceUtils.loadImage(opt.getUrlIcona(), getChannel().getApplication());
				String name = opt.getDescrizione();
				Item item = cont.addItem(name);
				item.getItemProperty(CAPTION_PROPERTY).setValue(name);
				item.getItemProperty(ICON_PROPERTY).setValue(es);
				if (opt.isSaved()) {
					optionGroup.select(name);
				}
			} catch (Exception ex) {
				ex.printStackTrace();
			}
		}
		return cont;
	}

but none looks selected.
The optionGroup is multiselect.
What’s wrong ?
Tks
Tullio

Henri1 · November 10, 2011, 12:37pm

Tullio Bettinazzi:

I tried to select some options in the option group using the following code I copied from Your example :

	private IndexedContainer createTestContainer() {
		IndexedContainer cont = new IndexedContainer();
		cont.addContainerProperty(CAPTION_PROPERTY, String.class, null);
		cont.addContainerProperty(ICON_PROPERTY, Resource.class, null);
		for (int i = 0; i < items.size(); i++) {
			GalleryItem opt = items.get(i);
			try {
				FileResource es = (FileResource) ResourceUtils.loadImage(opt.getUrlIcona(), getChannel().getApplication());
				String name = opt.getDescrizione();
				Item item = cont.addItem(name);
				item.getItemProperty(CAPTION_PROPERTY).setValue(name);
				item.getItemProperty(ICON_PROPERTY).setValue(es);
				if (opt.isSaved()) {
					optionGroup.select(name);
				}
			} catch (Exception ex) {
				ex.printStackTrace();
			}
		}
		return cont;
	}

but none looks selected.
The optionGroup is multiselect.
What’s wrong ?
Tks
Tullio

In your code you create a container but you don’t set it as a container data source for your FlexibleOptionGroup. I guess that when you call optionGroup.select(name); the component doesn’t contain an item with the itemId.

Tullio · November 10, 2011, 3:00pm

Sorry, I incuded only the part of my code I thought interesting.
This is the whode relevant code :

	@Override
	public void postDraw() {
		optionGroup = new OptionGroupNamed();
		optionGroup.setContainerDataSource(createTestContainer());
		optionGroup.setItemCaptionPropertyId(CAPTION_PROPERTY);
		optionGroup.setItemIconPropertyId(ICON_PROPERTY);
		optionGroup.setNode(this);
		optionGroup.setMultiSelect(true);
		optionGroup.addListener(this);
		optionGroup.setImmediate(true);
		mainComponent.setValue(calcolaSelected());
		for (Iterator<FlexibleOptionGroupItemComponent> iter = optionGroup.getItemComponentIterator(); iter.hasNext();) {
			FlexibleOptionGroupItemComponent comp = iter.next();
			hl.addComponent(comp);
			hl.addComponent(createCaptionLabel(comp));
		}
		super.postDraw();
	}
	
	private IndexedContainer createTestContainer() {
		IndexedContainer cont = new IndexedContainer();
		cont.addContainerProperty(CAPTION_PROPERTY, String.class, null);
		cont.addContainerProperty(ICON_PROPERTY, Resource.class, null);
		for (int i = 0; i < items.size(); i++) {
			GalleryItem opt = items.get(i);
			try {
				FileResource es = (FileResource) ResourceUtils.loadImage(opt.getUrlIcona(), getChannel().getApplication());
				String name = opt.getDescrizione();
				Item item = cont.addItem(name);
				itemsGallery.put(item, opt);
				item.getItemProperty(CAPTION_PROPERTY).setValue(name);
				item.getItemProperty(ICON_PROPERTY).setValue(es);
				if (i == 0 || opt.isSaved()) {
					optionGroup.select(name);
				}
			} catch (Exception ex) {
				ex.printStackTrace();
			}
		}
		return cont;
	}
	
    public Component createCaptionLabel(FlexibleOptionGroupItemComponent xpFog) {
    	VerticalLayout vl = new VerticalLayout();
    	Label captionLabel = new Label();
        captionLabel.setData(xpFog);
        captionLabel.setCaption(xpFog.getCaption());
        captionLabel.setWidth(null);
        Embedded em = new Embedded();
        em.setSource(xpFog.getIcon());
        vl.addComponent(em);
        vl.addComponent(captionLabel);
        return vl;
    }

Tks
Tullio

Henri1 · November 11, 2011, 7:21am

My answer is still the same. You call optionGroup.select(name) inside createTestContainer() which is called by optionGroup.setContainerDataSource(). At this point the the new container is not yet option group’s container so the option group doesn’t contain the item when optionGroup.select(name) is called.

-Henri

Tullio · November 11, 2011, 1:41pm

Understood.
I corrected the code as You suggested but nothing changed.

	@Override
	public void postDraw() {
		optionGroup = new OptionGroupNamed();
		optionGroup.setContainerDataSource(createTestContainer());
		optionGroup.setItemCaptionPropertyId(CAPTION_PROPERTY);
		optionGroup.setItemIconPropertyId(ICON_PROPERTY);
		optionGroup.setNode(this);
		optionGroup.setMultiSelect(true);
		optionGroup.addListener(this);
		optionGroup.setImmediate(true);
		mainComponent.setValue(calcolaSelected());
		for (Iterator<FlexibleOptionGroupItemComponent> iter = optionGroup.getItemComponentIterator(); iter.hasNext();) {
			FlexibleOptionGroupItemComponent comp = iter.next();
			hl.addComponent(comp);
			hl.addComponent(createCaptionLabel(comp));
		}
		int i = 0;
		for(Iterator<Item> it = itemsGallery.keySet().iterator(); it.hasNext();) {
			Item item = it.next();
			Object name = item.getItemProperty(CAPTION_PROPERTY).getValue();
			GalleryItem gi = itemsGallery.get(item);
			i++;
			if(i == 1 || gi.isSaved()) {
				Object o = optionGroup.getItem(name);
				optionGroup.select(name);
			}
		}
		super.postDraw();
	}

Now the select method is placed after the initialization, however nothing changed-
In order to verify if the id is correct, as you can see, I read it before I try to select and the correct object is retrived from the option group.
Why it doesn’t work, now ? the checkbox is still unchecked.
Tks
Tullio

Henri1 · November 16, 2011, 7:51am

Have you tried to replace your FlexibleOptionGroup with a normal OptionGroup just to see if selection works or not?

Kevin8 · June 18, 2012, 4:55am

Hi,

I’ve got a Vaadin application (6.7) that uses FlexibleOptionGroup (1.0.0) and the application works fine on my local machine development server (Windows - Tomcat 6) as well as on my main server (Linux - Tomcat 6).
I’ve recently been trying to migrate the Vaadin application to the OpenShift (JBoss) platform. It seems that the application is never returning from a

fop.setPropertyDataSource(property);

call, where fop is a FlexibleOptionGroup. I don’t get any exceptions thrown and I can’t figure out why it shouldn’t be returning (the property object I’m passing in appears to be normal). I have a System out just before and after the method call and the one before is displayed fine but the one after is not displayed.

Any ideas on why this method wouldn’t return or throw an exception on my OpenShift platform?

I’d be willing to share more information if you think it would be helpful in solving this mystery…
Thanks…
Kevin

Gopinath3 · January 17, 2013, 2:28pm

Hi is it possible to add radio button to different columns using flexibleOptionGroup…

Appreciate any input in this regard.

Henri1 · January 17, 2013, 2:41pm

I don’t understand what you mean. Could you elaborate a bit more?

Dyutiman · February 7, 2013, 1:56pm

Hi,

Its a very nice and useful add-on, thanks for that.

I have a requirement which leads to put some stylish RadioButton/CheckBox instead what browser provides. So I followed
http://jsbin.com/efewag/2/edit
this website and used images. It uses the Label for the item I add.

Now I have to use this FlexibleOptionGroup component to show Radio/CheckBox in one of the columns in my Vaadin table. In the method of table.addTableColumnGenerator I am returning instance of ItemComponent from the option group.

new ColumnGenerator() {
			@Override
			public Component generateCell(Table source, Object itemId, Object columnId) {
				return optionGrp.getItemComponent(itemId);
			}
		}

It returns one RadioButton/CheckBox, but without the Label element. I tried to add caption with each item by calling optionGrp.setItemCaption(itemId, "Hi"); but its not happening. Is there a way so I can add a blank Label element to each Item it returns. Then only I will be able to manage it with my custom images.

Thanks in advance.

Niketh · August 30, 2013, 5:00am

I am getting the following error
constructor of FlexibleOptionGroupItemComponent is not visible when i try to do
FlexibleOptionGroupItemComponent flexibleOptionGroupItemComponent=new FlexibleOptionGroupItemComponent(flexiOptionGroup, itemId);

Henri1 · August 30, 2013, 7:29am

Hi,

you cannot call the constructor of the FlexibleOptionGroupItemComponent class. This example from add-on’s Directory page shows how to use it:

// Don't add FlexibleOptionGroup to application
FlexibleOptionGroup fop = new FlexibleOptionGroup();
fop.setContainerDataSource(createTestContainer());
fop.setItemCaptionPropertyId(CAPTION_PROPERTY);
fop.setItemIconPropertyId(ICON_PROPERTY);

HorizontalLayout optionGroupLayout = new HorizontalLayout();
for (Iterator<FlexibleOptionGroupItemComponent> iter = fop
                .getItemComponentIterator(); iter.hasNext();) {
        FlexibleOptionGroupItemComponent comp = iter.next();

        // Add FlexibleOptionGroupItemComponents instead
        optionGroupLayout.addComponent(comp);

        Label captionLabel = new Label();
        captionLabel.setIcon(comp.getIcon());
        captionLabel.setCaption(comp.getCaption());
        optionGroupLayout.addComponent(captionLabel);
}
mainWindow.addComponent(optionGroupLayout);

-Henri

Rohan6 · November 7, 2013, 4:28am

Hi Henri,

The FlexibleOptionGroup component is very useful. I just have a few questions regarding this:

How to handle the radio button or checkbox click event?
How to check if the radio or checkbox is in selected or in de-selected state?
How to programatically clear or reset the selection of radio buttons?

Your response would be very helpful.

Thanks,
Rohan

Poovannan · January 27, 2014, 12:05pm

Hi Rohan,

Hope my answers are useful to u…
2. You can check if radio/ checkbox is selected/ de-selected using

flexibleoptiongroup.isSelected(Object itemid).

To set/unset, flexibleoptiongroup.select(itemid) / flexibleoptiongroup.unselect(itemid).

Thanks,
Poovannan

Yongxin · February 27, 2014, 3:05am

how to solve this problem?

How to handle the radio button or checkbox click event?

you didn’t answer rohan’s first question, and i have the same problem, any ClickListen event or

tell me how to implement this funtion, thanks~

Rohan6 · March 26, 2014, 10:38am

Thanks for the reply Poovannan. However, I am still waiting for the answer to my 1st question. For time being, I managed to use Layout listener which holds FelxiOptionGroupComponent and associated Label. But this just seems like a workaround to me.