I making random image gallery in javafx using buttons. I am setting imageView to buttons as I need Images get clicked. The problem is imageView is not setting on button as expected. Buttons have pref height and width as 110.
Below is the code am using to set imageView for buttons.
for(int i=0; i<35; i++){
Button button = list.get(i);
ImageView imageview =new ImageView(imageList.get(i));
imageview.setPreserveRatio(true);
imageview.setFitHeight(110);
imageview.setFitWidth(110);
button.setGraphic(imageview);
}
You need to change the padding of the Buttons to empty:
Button button = new Button(null, imageView);
// quadratic grey background
button.setBackground(new Background(new BackgroundFill(Color.GREY, CornerRadii.EMPTY, Insets.EMPTY)));
// no padding
button.setPadding(Insets.EMPTY);
Related
is there a way to set an Image (like setGraphic() for Button) for a ComboBox?
file = new File(IMG_DIR + "load.png");
BackgroundImage bg = new BackgroundImage(new Image(file.toURI().toString()),BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER,
BackgroundSize.DEFAULT);
comboBox.setBackground(new Background(bg));
That's what i tried, but it only results in a black background.
As comparison, what i do with my buttons:
File file = new File(IMG_DIR + "save.png");
ImageView imageView = new ImageView(new Image(file.toURI().toString()));
buttonSave.setGraphic(imageView);
what it currently looks like:
I want a load image on the ComboBox positioned like the images on the Buttons. Is that possible?
Thanks!
I want add white border around ImageView.
One solution is to wrap the images in a Button.
And I try use StackPane:
StackPane stackPaneforImageActivity = new StackPane();
Image activityImage = new Image(file.toURI().toString());
ImageView imv = new ImageView(activityImage);
newActivityHBox.getChildren().add(stackPaneforImageActivity);
stackPaneforImageActivity.getChildren().add(imv);
stackPaneforImageActivity.setPadding(new Insets(10));
stackPaneforImageActivity.setStyle("-fx-border-color:white;-fx-background-color: black;");
imv.setFitHeight(30);
imv.setFitWidth(30);
But
Are there other solutions?
But the image is outside the StackPane. Why?
I am trying to drag an Object which is represented as PNG image with transparent background from an AnchorPane to an HBox.
I set the image to the Drag View with this lines:
SliderItemHandler mh = (SliderItemHandler) event.getSource();
Dragboard db = mh.startDragAndDrop(TransferMode.COPY);
db.setDragView(mh.getModule().getImage());
ClipboardContent content = new ClipboardContent();
db.setContent(content);
It is all fine with nontransparent background images, but with the transparent ones the image got a white background with opacity "0.8" i think.
I tried taking a snapshot for the node:
db.setDragView(mh.snapshot(new SnapshotParameters(), null));
but it didn't work, the white background still there.
Is there any other way to make it transparent like the original image?
You have to change your snapshot parameters to transpartent fill:
SnapshotParameters sp = new SnapshotParameters();
sp.setFill(Color.TRANSPARENT);
db.setDragView(mh.snapshot(sp, null));
The result will be transparent without the white borders.
I'm not really sure how you achieve to get a white background, taking the opacity into account. However, I re-created your use case and will show you how I implemented this.
The following image is a Scene divided between an AnchorPane on the left, and a HBox on the right. The small transparent circle being the source ImageView to copy, the larger circle next to it being a dropped Image and far-most right being a circle currently being dragged. (Screenshot didn't include the cursor.)
As you can see, in none of the 3 scenarios there is a white (or almost white) background. It is just the image itself, with the image itself being a bit more transparent while dragging.
To achieve this, we'll take 2 variables into account. The source ImageView and the destination HBox.
#FXML
private HBox destination;
#FXML
private ImageView image;
We'd like the image to be dragged, so we add a DRAG_DETECTED event onto the ImageView.
image.addEventHandler(MouseEvent.DRAG_DETECTED, mouseEvent -> {
Dragboard db = image.startDragAndDrop(TransferMode.COPY);
ClipboardContent content = new ClipboardContent();
content.putImage(image.getImage());
db.setContent(content);
mouseEvent.consume();
});
Then we'd like the destination HBox to accept the dragged ImageView.
destination.addEventHandler(DragEvent.DRAG_OVER, (DragEvent event) -> {
if (event.getDragboard().hasImage()) {
event.acceptTransferModes(TransferMode.COPY_OR_MOVE);
}
event.consume();
});
And of course we'd like to place the ImageView into the HBox when actually dropped. In this case, it just places a copy of it into the HBox, but that's open for implementation of course.
destination.addEventHandler(DragEvent.DRAG_DROPPED, (DragEvent event) -> {
Dragboard db = event.getDragboard();
destination.getChildren().add(new ImageView(db.getImage()));
event.setDropCompleted(true);
event.consume();
});
That's all there is to dragging and dropping an image. No white backgrounds involved for transparent images. However, if you're able to create a MCVE, it might be easier to look into your problem if it still maintains.
I have a flowpane in center and i applied a slider effect which gets invoke on a click of button on the right (so slider moves from right to left when expanded). I have followed JewelSea slider tutorial mentioned here Slider
Now i have two different flowpanes in two different nodes. Both the flowpane contains array of labels but the only difference is, One flowpane contains scrollbar and is contained in TitlePane while the other is without scrollbar and no titlepane.
So now if i click on slider the contents in the flowpane(without scrollbar & titlepane) gets automatically adjusted but its not the same case with the flowpane containing scrollbar.
Here is relevant code for flowpane with scrollbar-
public void loadCase() {
ScrollPane s = null;
if (!homeController.mainTabPane.getTabs().contains(testTab)) {
int app = 0;
if (appareaList.size() > 0) {
FlowPane fpTestmoduleContainer = new FlowPane();
FlowPane example = new FlowPane();
for (ApplicationAreas appttribute : appareaList) {
appTestTitledPane[app] = new TitledPane();
appTestTitledPane[app].setText(appttribute.getApplication_name());
appTestTitledPane[app].setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
/*Module loop start*/
fpTestmoduleContainer.setHgap(10);
fpTestmoduleContainer.setVgap(10);
// fpTestmoduleContainer.setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
List<TestModuleAttribute> testmoduleList = WSData.getTestingModuleList(appttribute.getApplication_id());
ArrayList<Label> listTestlbs = new ArrayList<Label>(testmoduleList.size());
System.out.println("testmoduleList.size()" + testmoduleList.size());
int i = 0;
for (TestModuleAttribute testmattribute : testmoduleList) {
listTestlbs.add(new Label());
listTestlbs.get(i).setText(testmattribute.getModule_name());
listTestlbs.get(i).setAlignment(Pos.CENTER);
listTestlbs.get(i).setTextAlignment(TextAlignment.CENTER);
listTestlbs.get(i).setWrapText(true);
listTestlbs.get(i).setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
listTestlbs.get(i).setId(testmattribute.getFxnode_css());
Image imgInstalled = new Image(getClass().getResourceAsStream("/upgradeworkbench/View/Icons/ok.png"));
listTestlbs.get(i).setGraphic(new ImageView(imgInstalled));
listTestlbs.get(i).setContentDisplay(ContentDisplay.BOTTOM);
Tooltip testtp = new Tooltip();
testtp.setText("Total No. Of test Cases :" + testmattribute.getTest_case());
testtp.setWrapText(true);
listTestlbs.get(i).setTooltip(testtp);
addModuleMouseClickListener(listTestlbs.get(i), testmattribute.getModule_name(), testmattribute.getFxnode_css(), testmattribute.getTest_case());
i = i + 1;
}
s = new ScrollPane();
s.setContent(fpTestmoduleContainer);
fpTestmoduleContainer.setPrefWidth(1500);
fpTestmoduleContainer.getChildren().addAll(listTestlbs);
//appTestTitledPane[app].setContent(fpTestmoduleContainer[app]);
listTestlbs.clear();
app = app + 1;
}
appareaTestmoduleContainer.getPanes().addAll(appTestTitledPane);
appareaTestmoduleContainer.setExpandedPane(appTestTitledPane[0]);
testTab.setText("Test Cases Wizard");
testTab.setText("Testing Application Foot Print");
//mainTab.setClosable(true);
// testTab.getContent().setVisible(true);
HBox hb = new HBox();
testTab.setContent(s);
}
}
}
Image of slider working as expected - before sliding
After sliding (without scrollbar) the 4 modules get to the next row as space is occupied by the slider
After adding scrollpane and embedding flowpane inside it. Slider overlaps the flowpane contents as shown
I want to know why the scrollbar causing issue in auto adjustment of contents inside the flowpane and how can i fix it ?
Here the width of your scrollpane is fixed. And then so is the width of the flow pane.You need to change the size of your scrollpane so that its content gets reset.
Use the following code.
scroll[app].setFitToHeight(true);
scroll[app].setFitToWidth(true);
This code will set the size of scrollpane according to the view. The flowpane will also adjust accordingly then.
Background
I am trying to build a image gallery based on the description here.
I have a StackPane, with ScrollPane and AnchorPane as its children, added in the same order.
ScrollPane contains a list of images contained in ImageView's, while the Anchorpane has two buttons, anchored to the left and right corners, to scroll the images !
Problem
The scrolling is working fine, as the buttons are placed on the AnchorPane, which is the top child on the StackPane.
I want to implement the double-click on the imageView to open it in fullscreen. Since the imageView is a child of ScrollPane, it is not able to listen to the mouse event.
Is there a way through which I can make the ImageView listen to the mouseEvent ?
Instead of placing the AnchorPane and ScrollPane in a StackPane, try using the AnchorPane as the root of this structure. Add the ScrollPane to it first with appropriate anchors and then add the buttons. That way the buttons will still be on top, but there will be nothing interfering with the mouse events on the content of the scroll pane.
ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(...);
// scrollPane fills entire anchor pane:
AnchorPane.setLeftAnchor(scrollPane, 0.0);
AnchorPane.setRightAnchor(scrollPane, 0.0);
AnchorPane.setTopAnchor(scrollPane, 0.0);
AnchorPane.setBottomAnchor(scrollPane, 0.0);
Button button1 = new Button(...);
Button button2 = new Button(...);
// button1 in top left:
AnchorPane.setTopAnchor(button1, 0.0);
AnchorPane.setLeftAnchor(button1, 0.0);
// button2 in top right:
AnchorPane.setTopAnchor(button2, 0.0);
AnchorPane.setRightAnchor(button2, 0.0);
AnchorPane anchorPane = new AnchorPane();
anchorPane.getChildren().addAll(scrollPane, button1, button2);