Getting Started with JavaFX Scene Builder 1.1

Previous
Next

6 Create the Details Section

This chapter describes how to add the JavaFX UI components for the Details section of the IssueTrackingLite UI layout you are building with JavaFX Scene Builder. It also describes how to manage the resizing of the components when the application's window is resized.

Use the following sections to set up the area where the issue's details will be displayed.

Add the UI Components for the Details Section

Add the UI components to create the section that will display the details about the issue that you are creating or modifying in the IssueTrackingLite application.

  1. Click the menu button on the top right corner of the Hierarchy panel and choose Show fx:id, as shown in Figure 6-1. By default, the Show info mode is selected. Notice that after you change the display mode to Show fx:id, the Hierarchy panel now displays the fx:id values next to the elements that have the fx:id property value assigned to them., as shown in Figure 6-2.

    Figure 6-1 Show fx:id Display Mode

    Description of Figure 6-1 follows
    Description of "Figure 6-1 Show fx:id Display Mode"

  2. Set up the details section.

    1. In the Hierarchy panel, select AnchorPane, shown in the last row. It is right below the row for the TableColumn: colSynopsis element.

    2. Double-click the right side of the row for the AnchorPane element to enter the fx:id edit mode. Enter details in the inline text editor for the fx:id text property, as shown in Figure 6-2. This editor is available because the current display mode in the Hierarchy panel is set to Show fx:id. Alternatively, click the Code section of the Inspector panel and select details from the drop-down list of instance variables available for the fx:id field.

      Figure 6-2 Use fx:id Inline Text Editor

      Description of Figure 6-2 follows
      Description of "Figure 6-2 Use fx:id Inline Text Editor"

  3. Add a label.

    1. In the Controls section of the Library panel, drag Label and drop it on the upper left corner of the details area, as shown in Figure 6-3.

      Figure 6-3 Add Label Element

      Description of Figure 6-3 follows
      Description of "Figure 6-3 Add Label Element"

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

    3. In the Properties section, enter PROJECT / ID in the Text property field to replace the default value.

  4. Add a Text Field control.

    1. From the Library panel, drag a Text Field control and drop it to the right side of the Label you just added.

    2. Resize the Text Field element so that it occupies the remaining space to the right.

    3. Double-click the Text Field element in the Content panel to enter Edit mode. Enter SYNOPSIS in the edit box.

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

  5. Group the Label element with the synopsis Text Field element.

    1. In the Hierarchy panel, hold the Ctrl key (on Windows and Linux platforms) or Cmd key (on Mac OS platform) and select the rows for the Label displayedIssueLabel and TextField synopsis components.

    2. From the Menu bar, choose Arrange, then Wrap in, and then HBox from the submenu.

  6. Add a Label and a TextArea element in the details area.

    1. From the Controls section of the Library panel, select Label. Drag and drop it to the Content panel on the left side of the details section and below the row occupied by the HBox you just added. Use the guidelines to position the Label element in line with the HBox element's left side.

    2. Double-click Label to enter the edit mode. Enter DESCRIPTION: to replace the default value.

    3. Drag and drop a Text Area below the label that you just added. Click and drag the lower right handle of the Text Area to increase its size and fill the remaining space in the details section, as shown in Figure 6-4.

    4. Select the Text Area element in the Content panel. In the Code section of the Inspector panel, select descriptionValue from the drop-down list for the fx:id field.

    Figure 6-4 Enlarge the Text Area

    Description of Figure 6-4 follows
    Description of "Figure 6-4 Enlarge the Text Area"

Anchor the UI Elements in the Details Section

To ensure that the spacing and size of the UI elements adjust properly when the application's window is resized, you must modify their anchor pane constraints.

  1. In the Hierarchy panel, select the row for the HBox that contains the rows for the Label displayedIssueLabel and the TextField synopsis elements. It is directly below the row for the AnchorPane: details element.

  2. Click the Layout section of the Inspector panel.

  3. In the AnchorPane Constraints subsection, click the left and right dashed anchor lines. After you click the anchor lines, the black dashed lines change into solid red lines, which are circled in Figure 6-5.

    Figure 6-5 Setting the Anchor Lines

    Description of Figure 6-5 follows
    Description of "Figure 6-5 Setting the Anchor Lines"

  4. In the Hierarchy panel, select the row for the TextField synopsis component. Click the Layout section of the Inspector panel, and locate the HBox Constraints subsection and select ALWAYS from the drop-down list for the Hgrow text field. This setting indicates that the Text Field: synopsis element will adjust horizontally when its parent container increases.

  5. Select the row for the TextArea descriptionValue in the Hierarchy panel. In the Layout section of the Inspector panel, locate the AnchorPane Constraints subsection and click the left, top, right, and bottom dashed anchor lines.

  6. In the Hierarchy panel, select the row for the Label displayedIssueLabel component. In the Layout section of the Inspector panel, set the value of Min Width to USE_PREF_SIZE. This setting will keep the labels HBox element still visible when the size of the application window is so reduced that not all of the UI elements can be displayed.

Previous
Next