| Image browser widget [message #1807025] |
Tue, 21 May 2019 07:02  |
Eclipse User |
|
|
|
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 #1809079 is a reply to message #1808219] |
Mon, 08 July 2019 09:05  |
| Eclipse User |
|
|
|
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.
|
|
|
Powered by
FUDForum. Page generated in 0.05268 seconds
Home