Documentation



Send Feedback | Print | PDF | ePub | Mobi
JavaFX Scene Builder: Getting Started with JavaFX Scene Builder

6 Add the List and Table Views

In this chapter, you will continue to use JavaFX Scene Builder to add the JavaFX GUI controls that are used to list the projects and issues assigned to each project in the IssueTrackingLite sample application.

Use the following sections to add List View and Table Views controls to your IssueTrackingLite GUI layout.

Add a List View

Add the List View section, which will display the issue's project information.

  1. Select the Hierarchy section of the Document panel.

  2. In the Library panel's Search box, clear any existing value and enter view to locate the view-styled GUI controls.

  3. Drag a ListView control from the Library panel and drop into the first SplitPane node in the Hierarchy panel, as shown in Figure 6-1.

    Figure 6-1 Add ListView Control to SplitPane

    Description of Figure 6-1 follows
    Description of "Figure 6-1 Add ListView Control to SplitPane"

  4. From the Menu bar, select Modify and then Use Computed Sizes or press Ctrl+Shift+K.

  5. Click the Code section of the Inspector panel. In the fx:id field, select the choice button and select list from the drop-down list, as illustrated in Figure 6-2.

    Figure 6-2 Set fx:id for ListView Control

    Description of Figure 6-2 follows
    Description of "Figure 6-2 Set fx:id for ListView Control"

    Note:

    The fx:id property value corresponds to the name of the controller class' instance variable in which the node will be inserted. All the fx:id field values must be entered exactly as shown. If they are improperly entered, the IssueTrackingLite sample application will not work correctly.

  6. Click the Layout section of the Inspector panel. Locate the Split Pane Constraints subsection and uncheck the Resizable With Parent check box.

Add a Table View

The Table View control will be used to display the list of issues.

  1. From the search results list in the Library panel, select Table View.

  2. Drag and drop it in the Hierarchy panel, inside the second SplitPane element and just above the AnchorPane, as shown in Figure 6-3.

    Figure 6-3 Add the Table View Control

    Description of Figure 6-3 follows
    Description of "Figure 6-3 Add the Table View Control"

  3. From the Menu bar, select Modify and then Use Computed Sizes.

  4. Click the Code section of the Inspector panel, type ”t" in the fx:id text field to filter the list of available fx:id values, and select table.

  5. Tune the positions of the vertical and horizontal splitters shown in the Content panel.

    1. Select the first Split Pane node in the Hierarchy panel. In the Content panel, drag the vertical divider to the left until the dividerPosition percentage displays about 25%, as illustrated in Figure 6-4. Alternatively, enter 0.25 in the Divider Positions property text field in the Properties section of the Inspector panel.

      Figure 6-4 Move Vertical Divider

      Description of Figure 6-4 follows
      Description of "Figure 6-4 Move Vertical Divider"

    2. Select the second SplitPane node in the Hierarchy panel. In the Content panel, drag the horizontal divider up or down until the dividerPosition percentage displays about 35%. Alternatively, in the Properties section of the Inspector panel, enter 0.35 in the Divider Positions property text field.

  6. Set the properties of the two columns in the table view.

    1. In the Content panel, double-click the C1 column title and type Name to replace the default value, as shown in Figure 6-5.

      Figure 6-5 Change TableColumn Title

      Description of Figure 6-5 follows
      Description of "Figure 6-5 Change TableColumn Title"

    2. In the Code section of the Inspector panel, select colName from the fx:id field's drop-down list.

    3. Back in the Hierarchy panel, double-click the C2 text in the row for the second TableColumn component. Type in Status to replace the default Text property value of C2.

    4. In the Code section of the Inspector panel, select colStatus from the fx:id field's drop-down list.

  7. Add another column to the table view.

    1. In the Library panel's Search box, clear any existing value and enter column.

    2. Select the TableColumn control from the Library panel. Drag and drop it anywhere inside the table view in the Content panel. The new ColumnX column is added to the right of the Status column

    3. Click the Properties section of the Inspector panel and set the Text property to Synopsis.

    4. In the Code section of the Inspector panel, select colSynopsis from the fx:id field's drop-down list of available instance variables.

  8. From the Menu bar, select View and then Show Sample Data.
    Notice that the list view and the table view elements in the Content panel are populated with sample data. Select View and then Hide Sample Data from the Menu bar to turn off the display of the sample data.

  9. Save all the changes you have made.

Close Window

Table of Contents

JavaFX Scene Builder: Getting Started with JavaFX Scene Builder

Expand | Collapse