Newbie: Java FX Resizable Gui Layout

Question

Dear all,
I am trying to create a User Interface for entering address data. The GUI should be resizable so i was experimenting with the jfxtras Grid Layout.
With the included code a rudimentary Gui is created. My Problem is that i cannot control the initial sizes of my TextBoxes. In my example the Kunden Nr is too large. The Name and Vorname Fields are too small. I tried to manage the sizes using the hspan variable. Defining widths using layoutInfo was not successful.
Can anyone give me a hint how to set sizes for TextBoxes ?
Thanks in advance
import org.jfxtras.scene.layout.*;
import org.jfxtras.scene.*;
import javafx.scene.*;
import javafx.stage.*;
import ch.bizWare.fx.components.*;
import javafx.scene.control.TextBox;
import javafx.scene.text.*;
import javafx.scene.layout.*;
import org.jfxtras.scene.shape.*;
import javafx.scene.paint.*;
// Container Definition
var scene : ResizableScene;
var mainStage : Stage;
var tbKdNr : TextBox = TextBox{
    layoutInfo: GridLayoutInfo{hgrow: Grow.ALWAYS}
var lKdNr : Text = Text{
    content: "Kunden Nr"
var tbAnrede : TextBox = TextBox{
    layoutInfo: GridLayoutInfo{hgrow: Grow.ALWAYS, hspan: 1}
var lAnrede : Text = Text{
    content: "Anrede"
var tbName : TextBox = TextBox{
    layoutInfo: GridLayoutInfo{hgrow: Grow.ALWAYS, hspan : 2}
var lName : Text = Text{
    content: "Name"
var tbVorname : TextBox = TextBox{
    layoutInfo: GridLayoutInfo{hgrow: Grow.ALWAYS, hspan: 2}
var lVorname : Text = Text{
    content: "Vorname"
var tbAdresse : TextBox = TextBox{
    layoutInfo: GridLayoutInfo{hgrow: Grow.ALWAYS, hspan: 4}
var lAdresse : Text = Text{
    content: "Adresse des Kunden"
var tbPlzOrt : TextBox = TextBox{
    layoutInfo: GridLayoutInfo{hgrow: Grow.ALWAYS, hspan: 2}
var lPlzOrt : Text = Text{
    content: "PLZ/Ort"
var grid : Grid = Grid {
    rows: [ Row{
                 cells : [lKdNr, tbKdNr]
            Row{
                cells : [lAnrede, tbAnrede, lName, tbName, lVorname, tbVorname]
            Row{
                cells : [lAdresse, tbAdresse, lPlzOrt, tbPlzOrt]
scene = ResizableScene {
   width : 600;
   height: 200;
   content:grid    
// Stage Initialize
mainStage = Stage {
    title : "Adresse erfassen"
    scene : scene
}

Answer 1

Here is my resizable custom EmployeeUI component with address
package ui.custom;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
import org.jfxtras.scene.ResizableScene;
import javafx.scene.text.Text;
import org.jfxtras.scene.layout.MigLayout;
import org.jfxtras.scene.layout.MigLayout.*;
import loans.calc.*;
import javafx.stage.Stage;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.control.TextBox;
import javafx.scene.control.Button;
import javafx.scene.CustomNode;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Stack;
import org.jfxtras.scene.ResizableCustomNode;
import org.jfxtras.scene.layout.ResizableVBox;
import org.jfxtras.stage.JFXDialog;
import javafx.ext.swing.SwingComboBox;
import javafx.ext.swing.SwingComboBoxItem;
import javafx.util.Sequences;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.text.Font;
import javafx.ext.swing.SwingComponent;
import javax.swing.JTextArea;
import javax.swing.JScrollPane;
import javafx.ext.swing.SwingTextField;
import javafx.scene.shape.Line;
* @author gusaros
public class EmployeeUI extends ResizableCustomNode {
var linearGradient = LinearGradient {
            endY: 1 endX: 0
            stops : [
                Stop { offset: 0.0 color: Color.web("#eae8e3") },
                Stop { offset: 1.0 color: Color.WHITE },
public  var employee:Employee;
var line1 = Line {
          startX: 10, startY: 10
          endY: 10
          endX: bind width - 10
          // endX: 230, endY: 100
          strokeWidth: 2
          stroke: Color.DARKGRAY
var header = Text {content:
           "E m p l o y e e   i n f o r m a t i o n"
           font: Font.font("Serif",18)
     var emptyLabel=Label {
         id:"emptyLabel"
         text: ""};
  var firstNameLabel=Label {
         id:"firstNameLabel"
         text: "First Name:"};
var firstNameField=TextBox {
       id:"firstNameField"
       selectOnFocus: false
       editable:false
       text: bind employee.firstName
   var lastNameLabel=Label {
       id:"lastNameLabel"
        text: "Last Name:" };
    var lastNameField=TextBox {
    id:"lastNameField"
    text: bind employee.lastName
var dobLabel=Label {
       id:"dobLabel"
        text: "DOB:" };
var dobField=TextBox {
    id:"dobField" };
var taxNumberLabel=Label {
       id:"taxNumberLabel"
        text: "Tax number:" };
var taxNumberField=TextBox {
    id:"taxNumberField" };
var titleLabel=Label {
       id:"titleLabel"
        text: "Title:" };
var titleField=TextBox {
    id:"titleField" };
var planTypeLabel=Label {
       id:"planTypeLabel"
        text: "Plan type:" };
var planTypeField=TextBox {
    id:"planTypeField" };
var activeStatusLabel=Label {
       id:"activeStatusLabel"
        text: "Active status:" };
var activeStatusField=TextBox {
    id:"activeStatusField"
  var serviceLabel=Label {
       id:"servicel"
        text: "Service:" };
var serviceField=TextBox {
    id:"servicef"  };
var deductionsLabel=Label {
       id:"deductionsLabel"
        text: "Deductions:" };
var deductionsField=TextBox {
    id:"deductionsField"
    text:"0"
var deductionsLabel75=Label {
       id:"deductionsLabel75"
        text: bind if (activeStatusField.text == "B")   " 75% deductions:"  else
        " 90% deductions:"         };
var deductionsField75=TextBox {
    id:"deductionsField75"
    text: bind if (activeStatusField.text == "B") "{Double.parseDouble(deductionsField.text) * 0.75 }"
              else  "{Double.parseDouble(deductionsField.text) * 0.9 }"
var minPaymentLabel=Label {
       id:"minpaymentLabel"
        text: "Minimum payment:" };
var minPaymentField=TextBox {
       id:"minpaymentfield"
var reserveLabel=Label {
       id:"reserveLabel"
        text: "Reserve:" };
var reserveField=TextBox {
    id:"reserveField"
    text:""
var taxableamtLabel=Label {
       id:"taxableamtLabel"
        text: "Taxable amt:" };
var taxableamtField=TextBox {
    id:"taxableamtField"
    text:""
var dcploanLabel=Label {
       id:"ldcploanLabel"
        text: "Current DCP loan :" };
var dcploanField=TextBox {
    id:"dcploanField"
    text:""
var addressLabel=Label {
    id:"addressLabel"
    text: "Address:"
var addressField=TextBox {
    id:"addressField"
var cityLabel=Label {
    id:"cityLabel"
    text: "City:"
var cityField=TextBox {
    id:"cityField"
var stateLabel=Label {
    id:"stateLabel"
    text: "State:"
var stateField = TextBox {
    id: "statefield"
    columns: 2
var stateField:SwingComboBox = SwingComboBox {
   id: "stateField"
   items: [
      SwingComboBoxItem{text:"MD"},
      SwingComboBoxItem{text:"CA"},
      SwingComboBoxItem{text:"NY"}
   visible: true
var zipLabel=Label {
   id:"zipCodeLabel"
   text: "ZIP Code:"
var zipField=TextBox {
   id:"zipCodeField"
  // Nodes to be laid out
var nodesToLayout = bind [
    migNode(header, "span,alignx center, wrap" ),
      migNode(emptyLabel,   "wrap" ),
   migNode(firstNameLabel,  "" ),
   migNode(firstNameField,  "" ),
   migNode(lastNameLabel,  "alignx right" ),
   migNode(lastNameField, "" ),
   migNode(dobLabel, "alignx right" ),
   migNode(dobField, "wrap" ),
   migNode(taxNumberLabel, "" ),
   migNode(taxNumberField, "" ),
    migNode(titleLabel, "alignx right" ),
   migNode(titleField, "span, grow,wrap" ),
   migNode(planTypeLabel, "" ),
   migNode(planTypeField, "" ),
   migNode(activeStatusLabel, "alignx right" ),
   migNode(activeStatusField, "" ),
   migNode(serviceLabel, "alignx right" ),
   migNode(serviceField, "wrap" ),
migNode(Label{ text:"" }, "wrap" ),
// migNode( line1, "span"  ),
// migNode(Label{ text:"" }, "wrap" ),
migNode(addressLabel, "" ),
  migNode(addressField,  "span, grow" ),
   migNode(cityLabel, "" ),
   migNode(cityField, "" ),
   migNode(stateLabel, "alignx right" ),
   migNode(stateField, "", ),
   migNode(zipLabel, "alignx right" ),
   migNode(zipField, "wrap" ),
   migNode(Label{ text:"" }, "wrap" ),
   // ... other nodes are added here ...
  var rowConstraintString:String = "";
var layoutConstraintString:String = "";
override function create() {
            MigLayout {
               constraints: bind layoutConstraintString
               content:bind  nodesToLayout
               rows: bind rowConstraintString
}