Image Radio Buttons

[Former Member]

Hi eveyone.

Is there a way to use an image instead of text for a CheckboxGroup? Alternatively, is there a way to implement some kind of custom UI control?

My concrete requirement is to draw images for a simple type, which is associated to the RadioButtonGroupByKey.

Is there a way to do this without having to do it by hand?

Thanks

[Former Member · Accepted solution]

No, you cannot implement custom UI elements.

Can you give some more details on the use case. Is it important to have several columns? Maybe, you could just use a Table with single-selection and one column containing the images.

Armin

[Former Member · Accepted solution]

Thanks for your response, Armin.

Like I wrote before, what I need is to show images instead of text labels. And because the labels come from an enumeration (from the simple type in the Dictionary), the radio button displays either the description or the value.

I have tried to replace the description to an URL with the image, but when it renders it shows me HTML special characters(<).

What I need is to draw a control where users can choose a value that's represented as an image.

My best second option is to play with the page layout, so I can display an image next to a radio button. The table solution seemed simple enough, but users get confused about it.

[Former Member · Accepted solution]

I still do not completely understand the use case, can you give more details? Maybe you can use individual radio buttons without text and an Image beside each button?

Something like:

String[] keys = { "A", "B", "C", "D" };
String[] images = { "a.gif", "b.gif", "c.gif", "d.gif" };
IWDTransparentContainer container = (IWDTransparentContainer) view.createElement(IWDTransparentContainer.class, null);
IWDMatrixLayout layout = (IWDMatrixLayout) container.createLayout(IWDMatrixLayout.class);
parent_container.addChild(container);
layout.setStretchedHorizontally(false);
int cols = 2;
for (int ix = 0; ix < keys.length; ++ix)
{
  IWDRadioButton rb = (IWDRadioButton) view.createElement(IWDRadioButton.class, null);
  IWDImage img = (IWDImage) view.createElement(IWDImage.class, null);
  rb.setKeyToSelect(keys[ix]);
  rb.bindSelectedKey("some_string_attribute");
  img.setSource(images[ix]);
  rb.createLayoutData(ix % 2*cols == 0
    ? IWDMatrixHeadData.class
    : IWDMatrixData.class);  
  container.addChild(rb);
  container.addChild(img);
}

Armin

[Former Member · Accepted solution]

Thanks for your support. I did something like that, but on the layout.