My Question is how can i position a javafx button in a specific location.
All the time that i tried to do this simple code is resulting that the Button is only located in the Center of the screen and not on my desired location.
(I'm using StackPane)
Code:
Button button = new Button();
button.setLayoutX(x);
button.setLayoutY(y);
Thanks in advance ,
Amit.
If you want to specify the exact co-ordinates of your node, you can use a Pane instead of StackPane.
Your button, if added to a StackPane or similar layout which supports alignment, must use the translate properties to move the button. You cannot use setLayoutX() or setLayoutY() with these layouts.
Try using the following command to move the button from its initial location :
button.setTranslateX(10);
button.setTranslateY(20);
Related
I am trying to create something similiar like MS paint and I need a feature where I can click on the scene and immediately being able to write where I clicked. I took the the entire code example from this Anwser to solve how to switch between canvas and textarea. In other word how to switch between "drawing" and "writing" mode. So currently I can draw and write Current progress , but my problem is I want to write text where ever I click on the textarea and not at the beginning of the row.
This is how I imagine it (Goal).
So I wanted to add a handler, which can give the mouse coordinates and set the Caret to that positon:
textarea.setOnMouseClicked(event->{
textarea.positionCaret();
});
To only realise that positionCaret() only takes 1 parameter.
So I am not able to position my "Caret" to the x,y position of my mouse click.
So the question is how do I move the "Caret"/cursor to any given positon within my textarea?
Explaining Caret positioning and why it is irrelevant for your purposes
You are misunderstanding the concept of the caret position-related APIs for JavaFX text input. The APIs have nothing to do with screen coordinates. They are referring to the position of the caret with respect to the text in the text input field.
Let's say you have the following word:
happy
Caret position 0 positions the caret before the h.
Caret position 3 positions the caret in-between the two ps.
Once the caret is positioned. If somebody starts typing, the new text will be inserted at the caret.
So if you do:
setCaretPositon(3)
Then you type haphap, then the text will become:
haphaphappy
If somebody clicks in an editable text field, the JavaFX system is smart enough to handle the click by default to position the caret next to the closest letter to the click (and also handle selection and other tasks). You don't need to write any code to get the functionality.
So the caret API has nothing to do with the task you want to accomplish.
Absolute positioning for Text (or any other Node)
If you want to define an absolute position for a text input field on mouse click, then you do it in the exact same way you position any node in JavaFX, i.e. you use the node layout functions. Specifically, you set the x and y coordinates of the node. The co-ordinate system and relevant APIs are explained in the Node javadoc. To set both the x and y values at once, you call the relocate method.
Example for positioning editable text in a pane on mouse click
Here is an example, which generates a new text area and positions the top left corner of the new text area at the position a mouse was clicked.
Pane pane = new Pane();
pane.setOnMouseClicked(event -> {
if (event.getTarget() == pane) {
TextArea newTextArea = new TextArea();
newTextArea.relocate(
event.getX(),
event.getY()
);
pane.getChildren().add(
newTextArea
);
}
});
The example uses a Pane because that is a parent node which does not apply layout positioning to its children (unlike a StackPane which will overwrite any layout values you set and apply its own layout algorithm, which, by default, will center a node in its parent node).
You can see a more comprehensive example in context in the answer to:
How do I create an editable Label in javafx 2.2
That example will convert the text between a Label and TextField on click to allow the label value to be edited. You could choose to use such functionality in your paint program, or you could do it the way MS Paint does it.
How to emulate MS Paint
What MS Paint does is allow you to initially edit the text, but once you hit return to commit the edit, it snapshots the text and paints it as an image on the canvas, converting it from a node-type object to a bit on the canvas. Thereafter you can't edit the text directly anymore. If you want to do things that way you can use a combination of the node snapshot function and the graphics context drawImage function. If you do a snapshot, make sure you set the background correctly in the SnapshotParameters, so that it is transparent, that way the text background won't overwrite your drawing (or do set a background to the appropriate color, if you wanted an overwrite).
I won't provide full code for such functionality here at this time.
Styling text input
You probably want to style (using CSS) the text input field to get the look you want. The editable label example gives some hints on how to do this, but you probably want a different style for your app. Specifically, the default style for text input will have a box and background, which you may or may not want.
I got the task to draw some points on a map. Wrote some code but currently every point I create via shapes will be added to the wrong position inside of my gridpane. Oh and I'm using JavaFX.
I added an imageView to the index 0,0 of my GridPane and every point is created through x and y position of the MouseEvent on the imageView.
After that I added the created point as a child of the GridPane and it's displayed at the center of the y-axis of the first grid.
Tried different things like anchorPanes and canvas but can't seem to get it working.
Code of my View:
http://pastebin.com/dCb7EN4d
Code of my Main:
http://pastebin.com/vp5tzxkG
I hope that's enough ^^'
pls help!
Greetings,
Ben
GridPane is a managed layout: it will position nodes that are added to it via the properties you set (using defaults if you don't set them). So when you add your circles to the grid pane, since you don't set any properties, it will place it in cell (0,0) and align it within that cell using default settings; i.e. it ignores the centerX and centerY properties.
What you should really do here is use a layout that does not manage the positioning of the nodes for you, such as a Pane (or possibly a Group). You can put the ImageView and the Circles in the pane, and then place the pane in the rest of your layout (in the scroll pane, I think).
The other option you have is to call setManaged(false) on the nodes you add to the GridPane in order to instruct the GridPane not to position them, though this feels like more of a workaround.
I have a TableView and one column contains buttons. When I press the button a line is created and I drag the mouse to draw the line to another button.
The line starts and ends at the center of each button, however, I need the line to display BEHIND the buttons, yet over the table.
In Swing I would simply override the paint method of any component and write any custom graphics drawing before actually painting the button.
How can I achieve the same thing using JavaFX?
Try to make use of Node.toFront() and Node.toBack().
Currently I have a set of buttons in a QVBoxLayout which is inside a QHBoxLayout.
Is there a way to move these according to where my mouse is?
My current code is like this:
self.button1 = QPushButton()
self.button1.setText("button A")
self.button2 = QPushButton()
self.button2.setText("button B")
vbox = QVBoxLayout(self.canvas)
vbox.addStretch(1)
vbox.addWidget(self.button1)
vbox.addWidget(self.button2)
hbox = QHBoxLayout(self.window)
hbox.addStretch(1)
hbox.addLayout(vbox)"
The prototype for moving some button widget would be:
vbox.removeWidget(self.button) // that only needs the reference to your button item
vbox.insertWidget(newPos, self.button) // mind the difference in target position when you remove one item
That does not cover event processing. With two buttons you can either do that twice for each or maybe altogether, mind the target positions.
Or you can move an entire layout within another layout for the group of buttons in a very similar fashion. That'd be moving layout item. As long as you don't imply those buttons cannot be moved separately the example is for individual buttons. Oh, there is some Qt C++ discussion about that.
I am new to Qt. First look at the image.
http://i225.photobucket.com/albums/dd200/saravanan_comp2001/sample.png
i already created custom shape button (inherit the QWidget). now the problem is adding the buttons into another widget(Parent QWidget).
How to add this button in Fixed location and some times i need to add the buttons in overlap.
i can't use any Layout method. Please help me to fix the problem
Just create your custom shape button with the QWidget as parent and set the position using the move function.