In JavaFX2.2, how to set the font size for text entered in input fields and table headers?

Question

In my JavaFX2.2 fxml program, I am finding that fonts do not scale properly. As a result, table headers and input data fields are disproportionately large.

Is there any way to set the font size for text entered in the input fields?

Is there any way to set the font size for text displayed in the table headers?

SCCE

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.cell.*?> 
<?import javafx.collections.*?> 
<?import fxmltableview.*?> 
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>
<?import javafx.collections.*?>
<?import java.lang.*?>
<?import fxmltableview.Person?>

<Scene xmlns:fx="http://javafx.com/fxml" >

    <GridPane alignment="center" hgap="10" vgap="10">
        <padding>
            <Insets top="10" right="10" bottom="10" left="10"/>
        </padding>
        <Label  text="Address Book: This text is in font size 12 on Win7" GridPane.columnIndex="0" GridPane.rowIndex="0">
            <font>
                <Font size="12.0"/>
            </font>
        </Label>
        <TextField fx:id="textField" GridPane.columnIndex="0" GridPane.rowIndex="1">
            input text field. See how large I am!!!
        </TextField>
        <TableView GridPane.columnIndex="0" GridPane.rowIndex="2">
            <columns>
                <TableColumn text="First Name">
                    <cellValueFactory>
                        <PropertyValueFactory property="firstName" />
                    </cellValueFactory>
                </TableColumn>
                <TableColumn text="Last Name">
                    <cellValueFactory>
                        <PropertyValueFactory property="lastName" />
                    </cellValueFactory>
                </TableColumn>
                <TableColumn text="Email Address">
                    <cellValueFactory>
                        <PropertyValueFactory property="email" />
                    </cellValueFactory>
                </TableColumn>
            </columns> 
            <items>
                <FXCollections fx:factory="observableArrayList">
                    <Person firstName="Jacob" lastName="Smith"  
                            email="[email protected]"/>
                    <Person firstName="Isabella" lastName="Johnson" 
                            email="[email protected]"/>
                    <Person firstName="Ethan" lastName="Williams" 
                            email="[email protected]"/>
                    <Person firstName="Emma" lastName="Jones"
                            email="[email protected]"/>
                    <Person firstName="Michael" lastName="Brown" 
                            email="[email protected]"/>
                </FXCollections>
            </items> 
        </TableView>
    </GridPane>
</Scene>

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package fxmltableview;

import javafx.beans.property.SimpleStringProperty;

public class Person {
   private final SimpleStringProperty firstName = new SimpleStringProperty("");
   private final SimpleStringProperty lastName = new SimpleStringProperty("");
   private final SimpleStringProperty email = new SimpleStringProperty("");

public Person() {
        this("", "", "");
    }

    public Person(String firstName, String lastName, String email) {
        setFirstName(firstName);
        setLastName(lastName);
        setEmail(email);
    }

    public String getFirstName() {
        return firstName.get();
    }

    public void setFirstName(String fName) {
        firstName.set(fName);
    }

    public String getLastName() {
        return lastName.get();
    }

    public void setLastName(String fName) {
        lastName.set(fName);
    }

    public String getPrimary() {
        return getEmail();
    }

    public String getSecondary() {
        return getEmail();
    }

    public String getEmail() {
        return email.get();
    }

    public void setEmail(String fName) {
        email.set(fName);
    }
}

public class FXMLTableViewController implements Initializable {

    @FXML
    private Label label;

    @FXML
    private void handleButtonAction(ActionEvent event) {
        System.out.println("You clicked me!");
        label.setText("Hello World!");
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
}

package fxmltableview;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author 
 */
public class FXMLTableView extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
       primaryStage.setTitle("FXML TableView Example");
       primaryStage.setScene
       ((Scene)FXMLLoader.load(getClass().getResource("fxml_tableview.fxml")));
       primaryStage.show();
    }

    /**
     * The main() method is ignored in correctly deployed JavaFX application.
     * main() serves only as fallback in case the application can not be
     * launched through deployment artifacts, e.g., in IDEs with limited FX
     * support. NetBeans ignores main().
     *
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

Answer 1

I found these useful articles by Marco and by Rob

So I

1) manually changed the width of the table column

        <TableColumn text="First Name" prefWidth="90" >
            <cellValueFactory>
                <PropertyValueFactory property="firstName" />
            </cellValueFactory>
        </TableColumn>
        <TableColumn text="Last Name" prefWidth="90" >
            <cellValueFactory>
                <PropertyValueFactory property="lastName" />
            </cellValueFactory>
        </TableColumn>

2) Added a link in the fxml file

  <stylesheets>
    <URL value="@tffontsize.css" />
  </stylesheets>

3) created a css file tfffontsize.css

.text-field {
    -fx-font-size: 12pt;
}
.table-view .column-header{
    -fx-font-size: 14;
}

.table-cell {
    -fx-font-size: 12px;
}