| Image browser widget [message #1807025] |
Tue, 21 May 2019 11:02  |
 Krzysztof Leja
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:
- 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?
- 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)?
- 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 #1807701 is a reply to message #1807089] |
Thu, 06 June 2019 12:15  |
|
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 #1809079 is a reply to message #1808219] |
Mon, 08 July 2019 13:05 |
|
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
|
|
|
Powered by
FUDForum. Page generated in 0.02202 seconds
Search
Help
Register
Login
Home
