Hello I’ve been working on javafx 2.0. JavaFX has very flexible and customizable controls. The JavaFX is specially for GUI purpose only . So Today I would like to show how to make a Draggable Node in Javafx 2.0.
First Let’s make one customNode class which extends from the Parent. Ok now let’s see the class .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
/** * * @author Narayan */ public class DraggableNode extends Parent{ //ATTRIBUTES //X AND Y postion of Node double x = 0; double y = 0; //X AND Y position of mouse double mousex=0; double mousey=0; //To make this function accessible for other Class @Override public ObservableList getChildren(){ return super.getChildren(); } public DraggableNode(){ super(); //EventListener for MousePressed onMousePressedProperty().set(new EventHandler<MouseEvent>(){ @Override public void handle(MouseEvent event) { //record the current mouse X and Y position on Node mousex = event.getSceneX(); mousey= event.getSceneY(); //get the x and y position measure from Left-Top x = getLayoutX(); y = getLayoutY(); } }); //Event Listener for MouseDragged onMouseDraggedProperty().set(new EventHandler<MouseEvent>(){ @Override public void handle(MouseEvent event) { //Get the exact moved X and Y x += event.getSceneX()-mousex ; y += event.getSceneY()-mousey ; //set the positon of Node after calculation setLayoutX(x); setLayoutY(y); //again set current Mouse x AND y position mousex = event.getSceneX(); mousey= event.getSceneY(); } }); } } |
I think the above code is quite simple for the java programmer. I actually used four variable for saving x and y position. The x and y position of Mouse and other x and y position of Node.
Now let’s see the use of Draggable Node .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/** * * @author Narayan */ public class DragTest extends Application{ //Returs the Scene with Draggable Node public Scene getUI(){ //Making a DraggableNode Object DraggableNode panel = new DraggableNode(); //Defining style class for this node panel.getStyleClass().add("rect"); Rectangle rectangle=new Rectangle(200,200); panel.getChildren().add(rectangle); Scene scene = new Scene(panel, 640, 480); //using a css for styling controls scene.getStylesheets().add("/javafxapplication/main.css"); return scene; } @Override public void start(Stage primaryStage) throws Exception { primaryStage.setScene(getUI()); primaryStage.setVisible(true); } public static void main(String[] args) { Application.launch(args); } } |
Css “main.css”
|
1 2 3 |
.rect{ -fx-translate-x:50; } |
Ok now that’s it. Just run the program and you will see the Rectangle with 50px right and it’s draggable too.
If you like to see the demo then see at here: Draggable Node
*But remember that if you use the controls inside children of customNode then the draggable won’t work at all. Because the focus is taken by the Controls
Please don’t feel hesitate on commenting . Have a good day and Thanks for viewing blog. 🙂
Small problem in Netbeans. Had to change
“onMouseDraggedProperty().set(new EventHandler(){”
to
“onMouseDraggedProperty().set(new EventHandler(){”
Otherwise it would complain.
couldn’t understand what you are telling?
I have a similar problem in that Netbeans complains that you have not implemented all the abstract methods (the handle function)
it requires it to be passed an Event and in your code it passes a MouseEvent
how did you get that to compile. I was thinking of using the handle event and casting the Event to a MouseEvent to get it to work here…
And thanks for helping me at Oracle forums also – good blogging!
Ok – that worked thanks
You are welcome
As the comments didnt help me finding the problem i post the solution here that everyone can use it
You have to change:
onMousePressedProperty().set(new EventHandler(){
To
onMousePressedProperty().set(new EventHandler(){
greetings, Martin
Sorry for the inconvience. Actually I should have used new EventHandler instead only newEventHandler . I’ve edited , Now it works fine.
Pingback: Where is ‘blockinMouse’ Property in Javafx 2.0 ! « Java and FX
it is even more simple in javafx with the setOnMouseDragged method
you don’t need to create a class for that
rectangle.setOnMouseDragged(new EventHandler()
{
public void handle(MouseEvent me)
{
rectangle.setCenterX(me.getSceneX());
rectangle.setCenterY(me.getSceneY());
}
}
when you already knew about this and created that class for another situation or purpose
im sorry for bothering
sorry that getCenterX and getCenterY was for circles just use getX and getY instead
Doing setOnMouseDragged doesn’t drags properly .
I extended your example and put the panel on a pane and then set the pane to be the content of a scroll pane. However, I can’t find out how to make the scrollbars appear when I drag the rectangle out of the scene / scrollpane / pane.
Any hint is highly appreciated, thanx.
Why does this work for a rectangle but not for a button?
ya it doesn’t work for the controls because the controls already takes first focus but there is hack to make these things working.
You can either use :
1. set
setMouseTransparent(true);while your control is in dragging mode and again retain them tosetMouseTransparent(false);when your dragging mode is off.2. using some sort of blockinMouseProperty hack
thanks it works perfect
Thanks for this! It was very helpful!
Hiiii Narayan
how to create slider window in javafx like we are doing in modalbox when we click on modalbox it will come with sliding effect please send me the code for that slider window please give me reply back as soon as possible ([email protected]) if possible then send me the code on my mail
Thank you so much
Hiiii Narayan
how to create slider window in javafx like we are doing in modalbox when we click on modalbox it will come with sliding effect please send me the code for that slider window please give me reply back as soon as possible ([email protected]) if possible then send me the code on my mail
Thank you so much
Plsss Reply Just give some ideas regarding slider window in javafx
Hi Farhan,
Sliding a window is just a the Transition of a Node I guess. Are you trying to make the use of sliding window like of ANDROID/IOS system? If so then you can make use of KeyFrames, KeyValue and Animation or may be you can try some Transitions of JavaFX.
Thanks