Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » scout » Image browser widget
Image browser widget [message #1807025] Tue, 21 May 2019 11:02 Go to next message
Krzysztof Leja is currently offline Krzysztof LejaFriend
Messages: 22
Registered: April 2019
Junior Member
Hi,

I need to use some kind of widget in my application, that would present a predefined list of images, with the option of selecting one of them (with graphical visualization of the currently selected item, e.g. with a border, other background or something similar).

I looked at the https://scout.bsi-software.com/widgets page to search for a dedicated widget for such a purpose, but I did not find one.
That's why I decided to adapt the Tile Field to this goal, using AbstractImageFieldTile. Example of code:
public class ImageTileField extends AbstractTileField<ImageTileField.TileGrid> {
		     @Override
		     protected boolean getConfiguredLabelVisible() {
		          return false;
		     }

		    @Override
		    protected int getConfiguredGridW() {
		          return FULL_WIDTH;
		    }
		    	
			public class TileGrid extends AbstractTileGrid<AbstractImageFieldTile> {				
				@Override
				protected boolean getConfiguredSelectable() {
					return true;
				}

				@Override
				protected boolean getConfiguredMultiSelect() {
					return false;
				}
				
				@Override
				protected int getConfiguredGridColumnCount() {
					return 8;
				}
				
				public class ImageTile1 extends AbstractImageFieldTile {
					@Override
					protected void execInitTile() {
						getTileWidget().setImageId(Icons.MyImage1);
						setDisplayStyle(DISPLAY_STYLE_DEFAULT);
					}
				}
				
				public class ImageTile2 extends AbstractImageFieldTile {
					@Override
					protected void execInitTile() {
						getTileWidget().setImageId(Icons.MyImage2);
						setDisplayStyle(DISPLAY_STYLE_DEFAULT);
						super.execInitTile();
					}
				}
				
				public class ImageTile3 extends AbstractImageFieldTile {
					@Override
					protected void execInitTile() {
						getTileWidget().setImageId(Icons.MyImage3);
						setDisplayStyle(DISPLAY_STYLE_DEFAULT);
						super.execInitTile();
					}
				}

				...
			}
		}


It works, but I have some additional questions:

  1. Is there a dedicated widget for such cases that I do not know about, or is it planned to be introduced in future versions of the Scout platform? Or do you recommend any alternative solution instead of Tile Field?

  2. It seems that particular tiles, displayed inside the Tile Grid, always have a constant height and width, dependent on the number of columns. They do not automatically adjust to the size of their content. Thus, for example, by presenting small images in them, results in wastage of space and large margins between the content and the edge of the tile. Is it possible to reduce the size of these tiles (either permanently or automatically)?

  3. Images presented with AbstractImageFieldTile are aligned to the left upper edge of the tile. Is it possible to align them to the center of the tile?
Re: Image browser widget [message #1807089 is a reply to message #1807025] Wed, 22 May 2019 11:55 Go to previous messageGo to next message
Krzysztof Leja is currently offline Krzysztof LejaFriend
Messages: 22
Registered: April 2019
Junior Member
In addition: for the purpose described above, I also tried to use Mode Selector (AbstractModeSelectorField).
It would be perfect, if it would wrap the presented elements if they do not fit into one line.
With a large number of images, they are tightly packed, trimmed and still presented in one line.
Maybe, however, it is possible to force it to automatically wrap elements in several lines in such cases?
Re: Image browser widget [message #1807701 is a reply to message #1807089] Thu, 06 June 2019 12:15 Go to previous messageGo to next message
Andre Wegmueller is currently offline Andre WegmuellerFriend
Messages: 59
Registered: September 2012
Location: Baden-Dättwil, Switzerla...
Member
Hi Krzysztof

You can always extend existing Scout widgets to fit your requirements. The Mode Selector is intended as a button bar, where one of n buttons is selected (and n is a relatively small number ;-) Thus it has no support for multi-line/text-wrap by default. Making it work that way is possible, but requires some in-depth know-how about layouting widgets in Scout and requires some specific LESS/CSS adjustments too. So I would not recommend to do that unless you really have to.

There is no widget especially dedicated to selecting images in Scout. So I guess your approach to use a TileGrid is Ok. You could also use a Table(Field) with an image-column, and use the selected or the checked state of the Table.

As for your styling issues: you can always add a custom CSS class to your tile (#getConfiguredCssClass) and define the CSS styles you need for that tile. You can configure the layout of the TileGrid by implementing #getConfiguredLayoutConfig() and returning a TileGridLayoutConfig instance with the properties you need. Each tile in the TileGrid is layouted programmatically by the LogicalGridLayout.js, so you can control the layout by setting GridDataHints on each tile. For instance you could set the property "useUiHeight" to true, so the grid-row will use the actual height of the tile and not a fixed height.


Eclipse Scout Homepage | Documentation | GitHub
Re: Image browser widget [message #1808219 is a reply to message #1807701] Wed, 19 June 2019 14:14 Go to previous messageGo to next message
Krzysztof Leja is currently offline Krzysztof LejaFriend
Messages: 22
Registered: April 2019
Junior Member
Hi Andre,

Thank you for tips.
As you suggested, I used TileGrid with implementation #getConfiguredLayoutConfig() as below:

@Override
protected TileGridLayoutConfig getConfiguredLayoutConfig() {
	TileGridLayoutConfig config = super.getConfiguredLayoutConfig();
	config.setRowHeight(70);
	config.setColumnWidth(70);
	config.setHGap(10);
	config.setVGap(10);
	return config;
}


This solution has met my requirements with one exception:
inside each Tile element, there are still large gaps between the image and the top and left edges of the Tile.

Is it possible to reduce these gaps?

Andre Wegmueller wrote on Thu, 06 June 2019 12:15

For instance you could set the property "useUiHeight" to true, so the grid-row will use the actual height of the tile and not a fixed


Is this an alternative solution to the above using getConfiguredLayoutConfig(), or complementary?
I've tried it too, in every Tile element, but I do not see any difference:
@Override
protected void initTileWidgetConfig() {
	super.initTileWidgetConfig();
	GridData gd = getTileWidget().getGridDataHints();
	gd.useUiHeight = true;
	gd.useUiWidth = true;
	getTileWidget().setGridDataHints(gd);
}


Did I do something wrong?


PS. An additional question: what exactly does using getTileWidget().setAutoFit(true) on Tile element?
Re: Image browser widget [message #1809079 is a reply to message #1808219] Mon, 08 July 2019 13:05 Go to previous message
Andre Wegmueller is currently offline Andre WegmuellerFriend
Messages: 59
Registered: September 2012
Location: Baden-Dättwil, Switzerla...
Member
Hi Krzysztof

The AbstractImageFieldTile wraps an ImageField. Your code sets the useUiHeight property on the ImageField, but actually you must set it on the Tile in order to have an effect on the tile grid layout. Here's an image where you see what autoFit does (compare with the code example below). Note: the grid layout will always make all tiles in a row have the same height, but as you notice the individual rows may have different heights. When you set autoFit=true the ImageField will fit the image into the fixed size of the tile, no matter how large the image is.

When you set autoFit=false and useUiHeight=true the tiles in a row will adjust to the actual size of the image. However, if your image is very large you should probably do some image-processing and create thumbnail-images.

  @Override
  protected void execLoadData() {
    try (InputStream in = TileFieldForm.class.getResourceAsStream(m_filename)) {
      getTileWidget().setImage(new BinaryResource(m_filename, IOUtility.readBytes(in)));
    }
    catch (IOException e) {
      throw new ProcessingException("resource", e);
    }
    getTileWidget().setAutoFit(false); // controls the auto-fit property of the ImageField
    // required because AbstractTile has no #getConfiguredGridUseUiHeight() method
    GridData tileHints = getGridDataHints();
    tileHints.useUiHeight = true;
    setGridDataHints(tileHints);
  }


Quote:
inside each Tile element, there are still large gaps between the image and the top and left edges of the Tile.


I guess you need to start the DEV Tools in your browser (F12), find out which class CSS definition sets padding or margin and then add a custom CSS style to the CSS of your Scout project to override that definiton. Or simply set a CSS class on you tile and write a CSS style for that class.


Eclipse Scout Homepage | Documentation | GitHub
Previous Topic:disabling the eclipse scout application from indexing by robots
Next Topic:drag and drop support
Goto Forum:
  


Current Time: Tue Oct 22 22:05:18 GMT 2019

Powered by FUDForum. Page generated in 0.02202 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top