FlexibleOptionGroup

Flow
1

Hi,

I just pusblished a component called
FlexibleOptionGroup
 to Vaadin Directory.

The goal of FlexibleOptionGroup is to provide a very flexible way to layout OptionGroup radio buttons or check boxes.

The FlexibleOptionGroup component itself cannot be added to to any layout Instead, add FlexibleOptionGroupItemComponents to your layout. Each FlexibleOptionGroupItemComponent represents a radio button or a check box of an item.

All necessary information about the component can be found from its
Directory page
.

-Henri

2

Could you attach the source code of your demo ?
Thanks

3

The source code of the demo application can be found from
here
. If I recall correctly, it’s also included to the add-on jar.

4

Indeed, the source of the demo is in the add-on jar. (sorry)
You should separate demo from add-on. For many Add-ons, during their integration (and I think I’m not the only one) I split the jar into “addon-version.jar” and “addon-version-sources.jar” JARs to reduce the application’s total size.
Also, if there is some demo code, it’s a bit more complicated to identify the really needed “.class” and resources (png,…) to keep.

Tanks you for your help

5

You are correct. I think I should migrate the project to Maven.

6

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

7

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

8

Yes, just use Embedded components to show images.

9

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

10

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

11

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.

12

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

13

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

14

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

15

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

16

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

17

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

Appreciate any input in this regard.

18

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

19

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.

20

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