software developers who build form based applications will often struggle with positioning controls dynamically while a window resizes. this is better known as “ layout management ”. many developers will rely on gui builders that provide a “ wysiwyg ” ability allowing a designer to drag and drop components onto a canvas area. on the other hand some developers prefer to hand code gui form screens. there are pros and cons to using both strategies; however in this article i will strike a balance by building a form designer to allow a developer to assist them in hand coding gui form screens (sound strange, just read on). while the javafx community has anticipated for gui designer tools, i couldn’t wait.

so, i decided to create the “ poor man’s form designer ”. this simple designer tool uses the popular miglayout by mikael grev and was ported over to the javafx platform by dean iverson (an author of the book “ pro javafx platform ”) into the jfxtras project. the pmfd ’s source code consists of one file main.fx and just at around 370 lines of code including comments. after the conclusion section of this article you will see the full source code to this form designer. simply click on the source code link to expand and your on your way to developing beautiful looking forms!

form design constraint editor

demo

demo

instructions:

1. click launch button above
   
2. go to the miglayout cheat sheet at http://migcalendar.com/miglayout/cheatsheet.html to keep handy when tweaking the “ form design constraint editor ” window.
   
3. go to the “ form design constraint editor ” and click the dump button. here it will dump all the current constraints for the following areas: layout, column/row and components constraints.
4. go to the “ form design constraint editor ” window under the component constraint area is a combo box please select statelabel , then tab to the constraint text field (just right of combo box) and type “ align right “. click apply button to update changes.
5. be sure to observe the form view window and you’ll notice the “state: ” label is right justified beside the state combo box field.
6. play around with other constraint areas. cut and paste from the cheat sheet. the cheat sheet is divided in three sections: layout constraints , column & row constraints and component constraints . don’t forget to hit the apply button .
7. you’ll notice in the component constraint area when selecting a control in the combo box the previous constraint is preserved and displayed in the constraint text box.
8. go to the “ form design constraint editor ” and click the dump button. here it will dump all the current constraints for the following areas: layout, column/row and components constraints.
9. copy and paste those dumped constraints to assist in your hand coded guis. (see below “ some code details ” section)

some code details

disclaimer: while the coding details below seem strange,  you may want to visit dean’s pleasing software blog entry “ miglayout for javafx reloaded ” regarding how to get started with miglayout and javafx. http://pleasingsoftware.blogspot.com/search?q=layout

controls and default constraints for form view window display

// all widgets or controls to be laid out.
var firstnamelabel=label {
    id:"firstnamelabel"
    text: "first name:"
};
var firstnamefield=textbox {
    id:"firstnamefield"
    selectonfocus: true
}
// ... other controls

var layoutconstraintstring:string = "";

var rowconstraintstring:string = "";

var compconstraintstrings = [
   "",                 // 0
   "",                // 1
   "gap unrelated",   // 2
   "wrap",            // 3
   // ... other constraint strings are added here ...
];

// nodes to be laid out

var nodestolayout = bind [
   mignode( firstnamelabel, compconstraintstrings [0] ),
   mignode( firstnamefield, compconstraintstrings [1] ),
   mignode( lastnamelabel, compconstraintstrings [2] ),
   mignode( lastnamefield, compconstraintstrings [3] ),
   // ... other nodes are added here ...
];

main miglayout object placed in a scene:

// http://pleasingsoftware.blogspot.com/search?q=layout
var scene:scene = resizablescene {
   content: [
      miglayout {
         constraints: bind layoutconstraintstring
         content:bind  nodestolayout
         rows: bind rowconstraintstring
     }
  ]
};

enhancements

above you will see hand coded controls that eventually get displayed onto the form view window (person form). since the the gui control code elements are simply sequential, i believe it would be quite easy to add, insert and remove controls dynamically onto the form view window area.  also, possibly a property sheet window for controls, skins and behavior swapping.

conclusion

the main goal is to properly lay out components in order to create a nice looking forms and also to learn the popular layout framework library miglayout with it’s constraints language syntax . using javafx ’s binding allows the form designer tool to enable the user to easily tweak constraints on the fly without having to rerun an application gui for every adjustment made during the layout process in a form view. another interesting thing to note is that since we are in the javafx world we can layout shapes, custom nodes and graphics (not just regular form controls). as a reminder regarding the use of jfxtras miglayout , users should read about the known issues, please go to jfxtras miglayout wiki at: http://jfxtras.org/portal/core/-/wiki/jfxtras/miglayout . well, by the time you read this blog entry i’m sure a nice gui form designer/builder tool will be available.

the source code is listed below

requirements:

• java 6 jdk or greater
• javafx 1.2.1 sdk
• jfxtras version 0.5 jars
• latest miglayout jar

/**
 * javafx - a poor man's form designer
 * main.fx
 * cdea
 * created on nov 25, 2009, 12:21:27 am
 */

package migtest2;

import javafx.stage.stage;
import javafx.scene.paint.color;
import javafx.scene.control.textbox;
import javafx.scene.control.button;
import javafx.scene.scene;
import javafx.scene.control.label;
import org.jfxtras.scene.resizablescene;
import org.jfxtras.scene.layout.miglayout;
import org.jfxtras.scene.layout.miglayout.*;
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;

// all widgets or controls to be laid out.
var firstnamelabel=label {
    id:"firstnamelabel"
    text: "first name:"
};
var firstnamefield=textbox {
    id:"firstnamefield"
    selectonfocus: true
}
var lastnamelabel=label {
    id:"lastnamelabel"
    text: "last name:"
};
var lastnamefield=textbox {
    id:"lastnamefield"
}
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: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"
}

// default constraints for each component
var compconstraintstrings = [
   "",                // 0
   "",                // 1
   "gap unrelated",   // 2
   "wrap",            // 3
   "",                // 4
   "span, grow, wrap",// 5
   "",                // 6
   "",                // 7
   "",                // 8
   "grow, wrap",      // 9
   "",                // 10
   "",                // 11
];

// nodes to be laid out
var nodestolayout = bind [
   mignode(firstnamelabel, compconstraintstrings[0] ),
   mignode(firstnamefield, compconstraintstrings[1] ),
   mignode(lastnamelabel, compconstraintstrings[2] ),
   mignode(lastnamefield, compconstraintstrings[3] ),
   mignode(addresslabel, compconstraintstrings[4] ),
   mignode(addressfield, compconstraintstrings[5] ),
   mignode(citylabel, compconstraintstrings[6] ),
   mignode(cityfield, compconstraintstrings[7] ),
   mignode(statelabel, compconstraintstrings[8] ),
   mignode(statefield, compconstraintstrings[9] ),
   mignode(ziplabel, compconstraintstrings[10] ),
   mignode(zipfield, compconstraintstrings[11] ),
   // ... other nodes are added here ...
];

///////////////////////////////////////////////
// the rest below is the form designer code.
// stuff above is what a programmer would add
// to their form to show in the form designer.
// @todo refactor above and allow a palette of
//       graphic & control elements to add to
//       the form view display area.
///////////////////////////////////////////////

// list comprehensions - strings representing nodes' id
var listids = for( n in nodestolayout) n.id;

// list comprehensions - swingcomboboxitems
var comboboxitems = for( n in listids) swingcomboboxitem{ text:n };

// combo box control with ids of each widget on form.
var idlistbox:swingcombobox = swingcombobox {
    text : bind selection with inverse;
    items: [comboboxitems]
}

// select first one as default
idlistbox.selectedindex = 0;

////////////////////////////////////////////////////
// layout constraints section
////////////////////////////////////////////////////
var layoutconstraintstring:string = "";
var layoutconstraintlabel:label = label {
	text: "layout constraint"
   font: font {
      embolden:true
      size: 20
   }
}
var layoutconstrainttextbox:textbox = textbox {
	selectonfocus: true
}
var layoutconstraintapplybutton:button = button {
	text: "apply"
	action: function() {
      layoutconstraintstring = layoutconstrainttextbox.text;
	}
}

////////////////////////////////////////////////////
// row column constraints section
////////////////////////////////////////////////////
var rowconstraintstring:string = "";
var rowconstraintlabel:label = label {
	text: "row/column constraint"
   font: font {
      embolden:true
      size: 20
   }
}

// constraint textbox
var rowconstrainttextbox:textbox = textbox {
   columns: 30
};

var rowconstrainapplybutton:button = button {
   text: "apply"
   action: function() {
      rowconstraintstring = rowconstrainttextbox.text;
   }
};

////////////////////////////////////////////////////
// component constraints section
////////////////////////////////////////////////////
var compconstraintlabel:label = label {
   text: "component constraint"
   font: font {
      embolden:true
      size: 20
   }
};

// constraint textbox
var constrainttextbox:textbox = textbox {
    columns: 30
};

var selection: string on replace {
    constrainttextbox.text = compconstraintstrings [
      sequences.indexbyidentity(listids, selection)
    ];
};

var configurenodebutton:button = button {
   text: "apply"
   action: function() {
      for (i in [0.. sizeof nodestolayout -1]) {
         if (nodestolayout[i].id.equalsignorecase(selection)) {
            compconstraintstrings[i] = constrainttextbox.text;
            break;
         }
      }
   } // action
};

////////////////////////////////////////////////////
// miglayout dump constraints section
////////////////////////////////////////////////////
var miglayoutdumplabel:label = label {
   text: "miglayout constraints dump"
   font: font {
      embolden:true
      size: 20
   }
};

var constraindumpbutton:button = button {
   text: "dump"
   action: function() {
      var miglayout:miglayout = scene.content[0] as miglayout;
      var buffer:string;
      var migstructure:string;
      buffer = "layout constraint: {miglayout.constraints} \n"
         "column/row constraint: {miglayout.rows} \n"
         "controls constraints: \n";
      var buffer2:string;
      for (i in [0.. sizeof listids -1]) {
        buffer2 = "{buffer2}  id: {listids[i]} - {compconstraintstrings[i]}\n";
      }
      ta.settext("{buffer}{buffer2}");
   }
};

var ta:jtextarea = new jtextarea();
ta.setcolumns(40);
ta.setrows(20);
ta.setautoscrolls(true);
var sp = new jscrollpane(ta);

var dumptextarea = swingcomponent.wrap(sp);
// constrains for the constraint configure window.
var editorconstraintstrings = [
   "wrap",
   "growx",
   "wrap",
   "span, newline 15px, wrap",
   "growx",
   "wrap",
   "span, newline 15px, wrap",
   "growx",
   "grow",
   "",
   "span, newline 15px, wrap",
   "wrap",
   "span, growx"
];

var inputpaneltolayout = bind [
   // layout constraint section
   mignode(layoutconstraintlabel, editorconstraintstrings[0]),
   mignode(layoutconstrainttextbox, editorconstraintstrings[1]),
   mignode(layoutconstraintapplybutton, editorconstraintstrings[2]),

   // row constraint section
   mignode(rowconstraintlabel, editorconstraintstrings[3]),
   mignode(rowconstrainttextbox, editorconstraintstrings[4]),
   mignode(rowconstrainapplybutton, editorconstraintstrings[5]),

   // component constraint section
   mignode(compconstraintlabel, editorconstraintstrings[6]),
   mignode(idlistbox, editorconstraintstrings[7]),
   mignode(constrainttextbox, editorconstraintstrings[8]),
   mignode(configurenodebutton, editorconstraintstrings[9]),

   // dump constraints section
   mignode( miglayoutdumplabel, editorconstraintstrings[10]),
   mignode( constraindumpbutton, editorconstraintstrings[11]),
   mignode( dumptextarea, editorconstraintstrings[12]),
];

var scene:scene = resizablescene {
   fill:  lineargradient {
      startx : 0.0
      starty : 0.0
      endx : 1.0
      endy : 0.0
      stops: [
         stop {
            color : color.darkturquoise
            offset: 0.0
         },
      stop {
         color : color.white
         offset: 1.0
      },
      ] // stops
   } // fill
   content: [
      miglayout {
         constraints: bind layoutconstraintstring
         content:bind  nodestolayout
         rows: bind rowconstraintstring
      },
   ] // content
}; // scene

var constraintinputwindowscene:scene = resizablescene {
   fill: lineargradient {
      startx : 0.0
      starty : 0.0
      endx : 1.0
      endy : 0.0
      stops: [
         stop {
            color : color.gray
            offset: 0.0
         },
         stop {
            color : color.white
            offset: 1.0
         },
      ] // stops
   } // gradient fill

   content: [
      miglayout {
         //constraints: ""
         content:bind  inputpaneltolayout
      },
   ] // content
};

// form view (person form)
var stage:stage = stage {
   y:150
   x:100
   width: 500
   height: 200
   title: "poor man's form designer"
   scene: scene
   visible:true
   opacity: .94
}

// form design constraint editor.
var constraintinputwindow:jfxdialog = jfxdialog{
   title: "layout / column & row / component constraints"
   owner:stage
   x: stage.x + stage.width
   y: 150
   modal:false
   visible:true
   scene:constraintinputwindowscene
   height:440
   width: 600
}