Fill out area in JavaFx application - javafx

Question

I got a horizontal fill problem.
I got a app javafx app with a BorderPane.
In the setBottom I would like to add a info-component.
How ever this info-component extends Canvas.
But when I add it it does not fill or resize correct.
I also tried to use a Label and that too did not fill correct but in an other way.
I also tied with a TextField and that filled out and resized the area correct.
Do you guys got any ideas how to add a Canvas that fill out the area correct?
Canvas added
http://snag.gy/seswj.jpg
Label added:
http://snag.gy/6wSy8.jpg
TextField added:
http://snag.gy/7ajUc.jpg
Best regards
Fredrik
Okey here is some code.
My main class:
package a.app;
import java.net.URL;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
public class BannerTest extends Application
{
private Pane mainPanel;
Stage primaryStage;
#Override
public void start(Stage ps) throws Exception
{
primaryStage = ps;
primaryStage.setTitle( "BannerTest" );
mainPanel = createBorderPaneGui();
Scene scene = new Scene(mainPanel, 700, 700);
URL resource = BannerTest.class.getResource("/BannerTest.css");
String externalForm = resource.toExternalForm();
scene.getStylesheets().add( externalForm );
primaryStage.setScene( scene );
primaryStage.setTitle("BannerTest");
primaryStage.show();
}
public static void main(String[] args)
{
launch(args);
}
private Pane createBorderPaneGui()
{
mainPanel = new BorderPane();
GridPane applicationPanel = getApplicationPanel();
BorderedTitledPane borderedTitledPane = new BorderedTitledPane("Hubba", applicationPanel);
((BorderPane)mainPanel).setCenter( borderedTitledPane );
BorderedTitledPane banner = getBanner( 20, mainPanel );
((BorderPane)mainPanel).setBottom( banner );
return mainPanel;
}
private GridPane getApplicationPanel()
{
GridPane applicationPanel = new GridPane();
Label direcoryLabel = new Label("Directory:");
applicationPanel.add(direcoryLabel, 0, 0);
final TextField fileTextField = new TextField();
fileTextField.setEditable(false);
applicationPanel.add(fileTextField, 1, 0);
Button button = new Button("Select more then all you can select, Select more then all you can select");
HBox hBox = new HBox(10);
hBox.setAlignment(Pos.BOTTOM_RIGHT);
hBox.getChildren().add(button);
applicationPanel.add(hBox, 2, 0);
Label infoLabel = new Label("?");
applicationPanel.add(infoLabel, 3, 0);
infoLabel.setTooltip( new Tooltip("Select directory as search root."));
applicationPanel.setGridLinesVisible(true);
return applicationPanel;
}
private BorderedTitledPane getBanner(int height, Pane panel )
{
HBox bannerBox = new HBox(10);
Banner banner = new Banner(height, "", "C:/a/image/image.png", bannerBox);
//Canvas banner = new Canvas();
//Label banner = new Label("Hola");
//TextField banner = new TextField();
bannerBox.setHgrow(banner, Priority.ALWAYS);
bannerBox.getChildren().addAll( banner );
BorderedTitledPane borderedTitledPane = new BorderedTitledPane("Info", bannerBox);
return borderedTitledPane;
}
}
This class uses a style-css:
.mainPanel {
-fx-background-color: #8fbc8f;
}
.applicationPanel {
-fx-padding: 20 20 20 20;
-fx-alignment: top-center;
-fx-background-color: #00FFFF;
-fx-border-color: #FF0000;
-fx-border-width: 20px;
}
.bannerBox {
-fx-alignment: bottom-center;
-fx-background-color: #FFFFFF;
-fx-border-color: #0000FF;
-fx-border-width: 20px;
}
.banner{
-fx-alignment: bottom-center;
-fx-background-color: #00FF00;
}
.label {
-fx-font: 14px Helvetica;
}
.bordered-titled-title {
-fx-background-color: white;
-fx-translate-y: -15;
-fx-translate-x: 10;
}
.bordered-titled-border {
-fx-content-display: top;
-fx-border-insets: 40 40 15 15;
-fx-background-color: white;
-fx-border-color: black;
-fx-border-width: 2;
}
.bordered-titled-content {
-fx-padding: 26 26 26 26;
}
As you can see my main purpose is to display a banner, this banner is a Canvas that extends this class:
package a.app;
import javafx.beans.InvalidationListener;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
public class ResizableWidthCanvas extends Canvas
{
private Double endValue;
public ResizableWidthCanvas(int height)
{
setHeight( height );
InvalidationListener listener = new InvalidationListener(){
public void invalidated(javafx.beans.Observable arg0) {
setEndValue( getWidth() );
draw();
}
};
widthProperty().addListener(listener);
}
private void draw() {
double width = getWidth()-4;
double height = getHeight()-4;
GraphicsContext gc = getGraphicsContext2D();
gc.clearRect(2, 2, width, height);
}
#Override
public boolean isResizable() {
return true;
}
/*
#Override
public double prefWidth(double width) {
return getWidth();
}
*/
#Override
public double prefHeight(double height) {
return getHeight();
}
public Double getEndValue()
{
return endValue;
}
public void setEndValue(Double endValue)
{
this.endValue = endValue;
}
}
The Banner class it self:
package a.app;
import java.io.File;
import javafx.animation.AnimationTimer;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.util.Duration;
public class Banner extends /*Canvas*/ ResizableWidthCanvas
{
String imageUrl;
String imagePath;
DoubleProperty doublePropertyX = new SimpleDoubleProperty();
DoubleProperty doublePropertyY = new SimpleDoubleProperty();
public Banner(int height, String imageUrl, String imagePath, Pane pane)
{
super(height);
setHeight( height );
widthProperty().bind( pane.widthProperty() );
File file = new File(imagePath);
final Image image = new Image(file.toURI().toString());
Double endValue = new Double( pane.getWidth()-image.getWidth() );
KeyValue keyValue = new KeyValue( doublePropertyX, endValue );
Timeline timeline = new Timeline(
new KeyFrame(Duration.seconds(0),
new KeyValue(doublePropertyX, 0)
),
new KeyFrame(Duration.seconds(3),
keyValue
)
);
timeline.setAutoReverse(true);
timeline.setCycleCount(Timeline.INDEFINITE);
AnimationTimer timer = new AnimationTimer()
{
int r = 0;
int g = 0;
int b = 0;
#Override
public void handle(long now)
{
GraphicsContext gc = getGraphicsContext2D();
if(r < 255)
{
r++;
}
else if(g < 255)
{
g++;
}
else if(b < 255)
{
b++;
}
else
{
r = 0;
g = 0;
b = 0;
}
gc.setFill( Color.rgb(r,g,b) );
gc.fillRect(0, 0, getWidth(), getHeight());
gc.drawImage(image,
doublePropertyX.doubleValue(),
doublePropertyY.doubleValue()+1
);
}
};
timer.start();
timeline.play();
}
}
I also use a BorderTitelPane that looks like:
package a.app;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
public class BorderedTitledPane extends StackPane
{
public BorderedTitledPane(String titleString, Node content)
{
Label title = new Label(" " + titleString + " ");
title.getStyleClass().add("bordered-titled-title");
StackPane.setAlignment(title, Pos.TOP_LEFT);
StackPane contentPane = new StackPane();
content.getStyleClass().add("bordered-titled-content");
contentPane.getChildren().add(content);
getStyleClass().add("bordered-titled-border");
getChildren().addAll(title, contentPane);
}
}
Hope that was all.

Answer 1

The width of your canvas is exactly equal to its container. Its coming out of box because it's starting x position is different. This is happening because in the class Banner, inside the constructor you have mentioned
widthProperty().bind(pane.widthProperty());
This means whatever is the width of the pane that will be set as the width of the canvas.
Instead of this, write the following
pane.widthProperty().addListener(new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
setWidth((double)t1 - 70);//You can change the number according to difference in the x position
}
});