Getting Started with JavaFX Scene Builder 1.1

Previous
Next

5 Add the List and Table Views

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

Use the following sections to continue building your IssueTrackingLite UI layout.

Add a List View

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

  1. In the Library panel's Search box, enter list to locate the List View control in the list of UI controls.

  2. Drag the List View control from the Library panel and drop it on the left side of the divider line for Split Pane (Horizontal Flow), as shown in Figure 5-1. Notice that after the listView component is dropped, it is shown in the Hierarchy panel as a child of the first AnchorPane element inside the Split Pane (Horizontal Flow) element.

    Figure 5-1 Add List View Control to SplitPane (Horizontal Flow)

    Description of Figure 5-1 follows
    Description of "Figure 5-1 Add List View Control to SplitPane (Horizontal Flow)"

  3. From the Menu bar, choose Modify and then Fit to Parent.

  4. 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 5-2.

    Figure 5-2 Set fx:id for ListView Control

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


    Note:

    The fx:id 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.

Add a Table View

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

  1. In the Controls section of the Library panel, select Table View. Drag and drop it above the Split Pane (Vertical Flow) element's divider line, as shown in Figure 5-3.

    Figure 5-3 Add the Table View Control

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

  2. From the Menu bar, choose Modify and then Fit to Parent.

  3. Click the Code section of the Inspector panel and select table from the fx:id field's drop-down list of available instance variables.

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

    1. In the Hierarchy panel, select the row for the first TableColumn component under the row for the TableView component. In the Code section of the Inspector panel, select colName from the fx:id field's drop-down list.

    2. Click the tab for the Properties section and set the Text property to Name:.

    3. Back in the Hierarchy panel, select the row for the second Table Column component. In the Code section of the Inspector panel, select colStatus from the fx:id field's drop-down list.

    4. Click the tab for the Properties section again and set the Text property to Status.

  5. Add another column to the table.

    1. Select the Table Column control from the Library panel. Drag and drop it inside the table view in the Content panel. The new column is added to the right of the Status tab.

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

    3. Click the tab for the Properties section again and set the Text property to Synopsis

  6. From the Menu bar, choose 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. Choose View and then Hide Sample Data from the Menu bar to turn off the display of the sample data.

Previous
Next