Develop Reference

How to make a TextField fill all the remaining width of a pane containing multiple nodes?

I need to make a chat-simulating JavaFX application for my assignment (no web functionalities, just two text fields for input and two text areas for output). I need to have a “Send” button next to my text field. I cannot make the text field to fill up the width of my window without “squishing” the button at startup, similarly to how swing’s boxLayout does that?
I bound the field’s width to the parent pane’s width, subtracting the button’s width and the pane’sspacing and it works after I start resizing the window, but when the application first starts up, the button’s text is not fully visible.
public void start(Stage stage_main) throws Exception {
//Pane creation and nesting:
HBox pane_main = new HBox();
Scene scene_main = new Scene(pane_main, 480, 360);
BorderPane pane_left_parent = new BorderPane();
BorderPane pane_right_parent = new BorderPane();
HBox pane_left_bottom = new HBox();
HBox pane_right_bottom = new HBox();
pane_main.getChildren().addAll(pane_left_parent, pane_right_parent); //Focusing only on the left pane for now for testing.
pane_left_parent.setBottom(pane_left_bottom);
//Contents creation and nesting:
TextArea textA_left = new TextArea("Testing...");
Button button_left = new Button("Send");
TextField textF_left = new TextField("Test input...");
textF_left.prefWidthProperty().bind(pane_left_bottom.widthProperty().subtract(button_left.widthProperty()).subtract(pane_left_bottom.spacingProperty()));
//Placing contents in panes:
pane_left_parent.setCenter(textA_left);
pane_left_bottom.setSpacing(3);
pane_left_bottom.getChildren().addAll(textF_left, button_left);
//Finishing up:
stage_main.setScene(scene_main);
stage_main.show();
}
Is there any way to have the button have it’s “best” size already at startup without manually setting any widths in pixels, just like in swing?

Don't bind the prefWidth to the parent. If you want a child of an HBox to grow horizontally you can set an hgrow constraint on it:
HBox.setHgrow(theChild, Priority.ALWAYS);
Then let the HBox handle sizing and positioning the child node. And as you noted, in order to stop the Button from shrinking as the HBox changes size you need to set its minWidth. However, you should use:
button.setMinWidth(Region.USE_PREF_SIZE);
If you use getWidth() you might accidentally call it before the Button actually has a non-zero width. Plus, using USE_PREF_SIZE means the minWidth will stay up-to-date with the prefWidth (if you change it for whatever reason).
Some links:
HBox#.setHgrow(Node,Priority)
Priority
Region#USE_PREF_SIZE

JavaFx layout: disappearing/unorganized panes

I have a background pane that is meant for drawing objects that is not displaying when used in conjunction with a BorderPane, VBox, and a HBox. Furthermore, my BorderPane is not positioning the layout properly (left, bottom, right).
I have tried using multiple different panes and adding the VBox and HBox to them, however I encounter similar errors where the layout is not as expected and the main drawing pane (canvas) disappears.
BorderPane bp = new BorderPane();
button1 = new Button("Undo");
button2 = new Button("Erase");
HBox hb = new HBox(10);
hb.getChildren().addAll(button1, button2);
TilePane tp = new TilePane();
vb = new VBox();
vb.setPadding(new Insets(10, 10, 10, 10));
vb.setSpacing(25);
vb.setStyle("-fx-padding: 10;" +
"-fx-border-style: solid inside;" +
"-fx-border-width: 2;" +
"-fx-border-insets: 5;" +
"-fx-border-radius: 5;" +
"-fx-border-color: black;");
colorCombo = new ComboBox<String>();
colorCombo.getItems().addAll("Black","Blue","Green","Red","Yellow","Orange","Pink");
colorCombo.setValue("Black");
colorCombo.setMinWidth(100);
ToggleGroup group1 = new ToggleGroup();
rbutton1 = new RadioButton("Rectangle");
rbutton1.setToggleGroup(group1);
rbutton1.setMinWidth(80);
rbutton1.setSelected(true);
rbutton2 = new RadioButton("Circle");
rbutton2.setToggleGroup(group1);
rbutton2.setMinWidth(80);
canvas = new Pane();
canvas.setStyle("-fx-background-color: beige;");
vb.getChildren().addAll(colorCombo, rbutton1, rbutton2);
tp.getChildren().add(vb);
bp.setLeft(tp);
bp.setBottom(hb);
bp.setRight(canvas);
this.getChildren().addAll(bp);
The TilePane and BorderPane was my latest experiment. I used bp.setRight(canvas); to see if I could even get the canvas to show at all even though I want the canvas to be the entire background and not just to the right. The canvas does not show.

I created three separate GridPanes and added the vbox, hbox, and canvas (after setting the minimum height and width) to the gridpanes and then added the gridpanes to a BorderPane. This fixed up the layout for my program.

From BorderPane:
The top and bottom children will be resized to their preferred heights
and extend the width of the border pane. The left and right children
will be resized to their preferred widths and extend the length
between the top and bottom nodes. And the center node will be resized
to fill the available space in the middle.
For any kind of pane that has no children, its preferred width is 0. You need to explicitly set a width.
One side note: Pane would still have preferred width of 0 even if it has children, because Pane does not layout its children to determine its own size.

JavaFX 8: How to be able to re-size window (stage) but keep inner elements at their positions?

I have a project that has a 2 text areas and few buttons. The root pane is a AnchorPane. when resizing the window to smaller window, all the elements start overlap. What methods can fix this? (IGNORE THE NAME OF MY anchorpane, i got lazy)
AnchorPane borderpane = new AnchorPane ();
TextArea user_list = new TextArea();
user_list.setPrefSize(150, 400);
TextArea messages = new TextArea();
messages.setPrefSize(350, 400);
TextField typebox = new TextField();
typebox.setPrefSize(425, 100);
// put a shape over a text, over a shape
StackPane send_container = new StackPane();
Rectangle send_box = new Rectangle(75, 25);
Label send_text = new Label("Send");
send_container.getChildren().add(send_box);
send_container.getChildren().add(send_text);
AnchorPane.setLeftAnchor(messages, 25.0);
AnchorPane.setTopAnchor(messages, 10.0);
AnchorPane.setRightAnchor(user_list, 25.0);
AnchorPane.setTopAnchor(user_list, 10.0);
AnchorPane.setBottomAnchor(typebox, 25.0);
AnchorPane.setLeftAnchor(typebox, 25.0);
AnchorPane.setBottomAnchor(send_container, 25.0);
AnchorPane.setRightAnchor(send_container, 25.0);
borderpane.getChildren().addAll(messages, user_list, typebox,send_container );
Scene scene = new Scene(borderpane, 600, 600);
primaryStage.setMaxHeight(600);
primaryStage.setMaxWidth(600);
primaryStage.setScene(scene);
primaryStage.setTitle("Welcome");
scene.getStylesheets().add(LoginWindow.class.getResource("Login.css").toExternalForm());
primaryStage.show();

You are hard-coding the locations and sizes of your controls. This means the controls cannot respond to changes in the size of their parent nodes.
Usually, you should not specify any heights or widths. Controls all have default preferred sizes, and all layouts respect those. Layouts also decide how child nodes will be resized in response to the user's resizing of a window.
Often, the layout of a window needs to be broken down into sub-layouts. In your case, you want one section that always resizes to fill the window (the user list and message section), with another section at the bottom (the typebox and Send button). A BorderPane is the ideal choice, since its center node always fills it. So the center of this main BorderPane would contain the user list and message area, while the bottom of this BorderPane would contain the typebox and the Send button.
You probably want the user to be able to horizontally resize both the user list and the messages, so I'd put them in a SplitPane, and make that SpiltPane the center of the main BorderPane.
You probably want the typebox and Send button to be in a separate child BorderPane, with the typebox as the center node, since you want the typebox to stretch and shrink, horizontally, when the user resizes the window.
So, to summarize:
user list and message area in a SplitPane
typebox and Send button in a BorderPane
parent BorderPane with user list/message section in the center, typebox/Send section on the bottom
The code for this is actually pretty short:
ListView user_list = new ListView();
TextArea messages = new TextArea();
messages.setPrefRowCount(12);
messages.setPrefColumnCount(30);
TextField typebox = new TextField();
typebox.setPrefColumnCount(30);
Button send_text = new Button("Send");
send_text.disableProperty().bind(
typebox.lengthProperty().lessThan(1));
SplitPane top = new SplitPane(user_list, messages);
top.setDividerPosition(0, 1/3.0);
BorderPane bottom = new BorderPane();
bottom.setCenter(typebox);
bottom.setRight(send_text);
BorderPane.setMargin(typebox, new Insets(0, 12, 0, 0));
BorderPane main = new BorderPane();
main.setCenter(top);
main.setBottom(bottom);
BorderPane.setMargin(bottom, new Insets(12));
Scene scene = new Scene(main);
primaryStage.setScene(scene);
primaryStage.setTitle("Welcome");
scene.getStylesheets().add(LoginWindow.class.getResource("Login.css").toExternalForm());
primaryStage.show();
Notice that there are no hard-coded dimensions or coordinates (except the margins defined by the Insets objects). Every control has a preferred size based on its properties, such as a TextField's preferred column count.
The workings of the various layouts are well documented. I suggest reading about them in the javafx.scene.layout package.
(I'm guessing the user list should be a ListView, not a TextArea, since typical chat programs allow selection of one or more users. And I suspect your black Rectangle and send_text Label were intended to represent a disabled Button.)

Use a pane other than a Anchor Pane. It's for absolute positioning. Try a stack pane or simple VBox.

ImageView in JavaFX not keeping proper size

I am using this format to place an image as a background picture.
final VBox mainroot = new VBox();
mainroot.getChildren().addAll(backbutton,heroship);
final StackPane mainstackPane = new StackPane();
mainstackPane.getChildren().addAll(iv2,mainroot);
final HBox hbox = new HBox(mainstackPane);
iv2 is my image iteself, created like this
final Image imagegame = new Image(bcolor,width,height, false, false);
ImageView iv2 = new ImageView();
iv2.setImage(imagegame);
iv2.setPreserveRatio(true);
iv2.setFitWidth(width);
iv2.setFitHeight(height);
As well, I am adding a set amount of Labels using an array and a for loop,
Label[] alienship = new Label[10];
for (int i=0;i<alienship.length;i++)
{
mainroot.getChildren().add(alienship[i]);
}
My problem is, every time I change the array of Labels size lets say from 10 to 20, the image itself shifts downwards and I would have to translate it back up to fit.
I have tried using both a VBox and an HBox but I am not able to see a difference in my result.
I have also tried to use .setFitWidth() and .setFitHeight() but nothing helped.
With Label[] alienship = new Label[10];
Result: http://puu.sh/eAihN/c5c7f38ef0.jpg
(In this case I would have used .setTranslate to allign it back up.
With Label[] alienship = new Label[20];
Result: http://puu.sh/eAiqz/3b4280b63b.jpg
What can I do to fix this issue and ensure it stays alligned no matter what size I set the array to?
Thanks.

Problem
The problem is not with the ImageView, but with the Layout/Container that you chose to add heroship and alienship.
VBox is a layout whose height depends on the no of children and height of each child. When the number of alienship increases the VBox height will increase to accommodate all the children.
Solution
You must consider a layout which can add any number of children, without any effect on the width and height of the container. Consider StackPane
Quick fix is to make the VBox as the parent of the StackPane. Add the Image and the space ships to the StackPane, then add the Button and the StackPane to your VBox. Finally adding the VBox to your HBox.
final StackPane mainstackPane = new StackPane();
mainstackPane.getChildren().addAll(iv2, heroship);
final VBox mainroot = new VBox();
mainroot.getChildren().addAll(backbutton, mainstackPane);
final HBox hbox = new HBox(mainroot);
Add all your alienships to the StackPane instead of adding them to the VBox
Label[] alienship = new Label[10];
for (int i=0;i<alienship.length;i++)
{
mainstackPane.getChildren().add(alienship[i]);
}

How to create widget like google maps in GWT?

I need to create widget, similar to google maps one.
In it's simplest form, the map of all planet is divided into image tiles. While user scrolls the widget into different directions, new empty cells appeared and widget requests these tiles from the server and put it into the widget.
How it can be implemented in GWT?
I found no way to set absolute position dynamically in ScrollPanel. I found no way to draw something lefter than left or upper then top in AbsolutePanel. How to combine panels correctly?
Thanks.
UPDATE 1
Here is one of the examples. In this example labels do not show, because the size of containing absolute panel is zero by height (looked in firebug). I can't just set it's size because this won't help for label at -100,-100.
public void onModuleLoad() {
Label label_minus100_minus100 = new Label("(-100,-100)");
Label label_0_0 = new Label("(0,0)");
Label label_100_100 = new Label("(100,100)");
AbsolutePanel absolutePanel = new AbsolutePanel();
absolutePanel.setStyleName("absolutePanel");
absolutePanel.add(label_0_0, 0, 0);
absolutePanel.add(label_minus100_minus100, -100, -100);
absolutePanel.add(label_100_100, 100, 100);
DOM.setStyleAttribute(absolutePanel.getElement(), "overflow", "visible");
ScrollPanel scrollPanel = new ScrollPanel();
scrollPanel.add(absolutePanel);
scrollPanel.setStyleName("scrollPanel");
RootPanel rootPanel = RootPanel.get();
rootPanel.add(scrollPanel);
}