Сайт справки

06 Добавить представления списка и таблицы

В этой главе вы продолжите использовать JavaFX Scene Builder для добавления элементов управления GUI JavaFX, которые используются для перечисления проектов и задач, назначенных каждому проекту в примере приложения IssueTrackingLite.

Используйте следующие разделы, чтобы добавить элементы управления "List View"(Представление списка) и "Table Views"(Представления таблиц)  в макет графического интерфейса IssueTrackingLite.

Добавить представление списка

Добавьте раздел «Представление списка», в котором будет отображаться информация о проекте задачи.

  1. Выберите раздел «Hierarchy»(Иерархия) на панели «Document»(Документ).

  2. В поле поиска панели «Library»(Библиотека) очистите все существующие значения и войдите в представление view, чтобы найти элементы управления графическим интерфейсом в стиле представления.

  3. Перетащите элемент управления ListView с панели «Library» в первый узел SplitPane на панели «Hierarchy»(Иерархия), как показано на рисунке 6-1.

    Рисунок 6-1 Добавление элемента управления ListView в SplitPane

    Description of Figure 6-1 follows

  4. В строке меню выберите «Modify»(Изменить), а затем «Use Computed Sizes»(Использовать вычисленные размеры) или нажмите Ctrl + Shift + K.

  5. Щелкните раздел «Code»(Код) на панели «Inspector»(Инспектор). В поле fx:id нажмите кнопку выбора и выберите список из раскрывающегося списка, как показано на рисунке 6-2.

    Рисунок 6-2 Установка fx:id для элемента управления ListView

    Description of Figure 6-2 follows

    Примечание:

    Значение свойства fx:id соответствует имени переменной экземпляра класса контроллера, в которую будет вставлен узел. Все значения поля fx:id необходимо вводить точно так, как показано. Если они введены неправильно, пример приложения IssueTrackingLite не будет работать правильно.

  6. Щелкните раздел «Layout»(Макет) на панели «Inspector»(Инспектор). Найдите подраздел «Split Pane Constraints»(Ограничения разделения панели) и снимите флажок «Resizable With Parent»(Изменение размера с помощью родительского элемента).

Добавить представление таблицы

Элемент управления «Table View»(Представление таблицы)  будет использоваться для отображения списка проблем.

  1. В списке результатов поиска на панели «Library»(Библиотека) выберите «Table View»(Представление таблицы).

  2. Перетащите его на панель «Hierarchy»(Иерархия)  внутри второго элемента SplitPane и чуть выше AnchorPane, как показано на рисунке 6-3.

    Рисунок 6-3 Добавление элемента управления табличным представлением

    Description of Figure 6-3 follows

  3. В строке меню выберите «Modify»(Изменить), а затем «Use Computed Sizes»(Использовать вычисленные размеры).

  4. Щелкните раздел «Code»(Код) на панели «Inspector»(Инспектор), введите «t» в текстовое поле fx:id, чтобы отфильтровать список доступных значений fx:id, и выберите таблицу.

  5. Настройте положение вертикального и горизонтального разделителей, отображаемых на панели «Content»(Содержимое).

    1. Выберите первый узел «Split Pane»(Панель Разделить) на панели «Hierarchy»(Иерархия). На панели «Content»(Содержимое) перетащите вертикальный разделитель влево до тех пор, пока процент dividerPosition не покажет около 25%, как показано на рис. 6-4. Или введите 0.25 в текстовое поле свойства «Divider Positions»(Позиции разделителя) в разделе «Properties»(Свойства) на панели «Inspector»(Инспектор).

      Рисунок 6-4 Перемещение вертикального разделителя

      Description of Figure 6-4 follows

    2. Выберите второй узел SplitPane на панели «Hierarchy»(Иерархия). На панели «Content»(Содержимое) перетащите горизонтальный разделитель вверх или вниз, пока процент dividerPosition не будет отображаться примерно на 0.35. Либо в разделе «Properties»(Свойства) на панели «Inspector»(Инспектор) введите 0,35 в текстовое поле свойства «Divider Positions»(Позиции разделителя).

  6. Задайте свойства двух столбцов в табличном представлении.

    1. На панели «Содержимое» дважды щелкните заголовок столбца C1 и введите Name , чтобы заменить значение по умолчанию, как показано на рисунке 6-5.

      Рисунок 6-5 Изменение заголовка столбца таблицы

      Description of Figure 6-5 follows

    2. В разделе «Code»(Код) панели «Inspector»(Инспектор) выберите colName в раскрывающемся списке поля fx:id.

    3. Вернувшись на панель «Hierarchy»(Иерархия), дважды щелкните текст C2 в строке для второго компонента TableColumn. Введите Status , чтобы заменить значение свойства Text по умолчанию C2.

    4. В разделе «Code»(Код) на панели «Inspector»(Инспектор) выберите colStatus из раскрывающегося списка поля fx:id.

  7. Добавьте еще один столбец в представление таблицы.

    1. В поле поиска панели «Library»(Библиотека) очистите любое существующее значение и введите column.

    2. Выберите элемент управления TableColumn на панели «Library»(Библиотека). Перетащите его в любое место в виде таблицы на панели «Content»(Содержимое). Новый столбец ColumnX добавлен справа от столбца состояния.

    3. Щелкните раздел «Properties»(Свойства) на панели «Inspector»(Инспектор) и установите для свойства «Text» (Текст) значение «Synopsis»(Сводка).

    4. В разделе «Code»(Код) на панели «Inspector»(Инспектор) выберите colSynopsis в раскрывающемся списке доступных переменных экземпляра поля fx:id.

  8. В строке меню выберите «View»(Просмотр), а затем «Show Sample Data»(Показать образцы данных).
    Обратите внимание, что элементы представления списка и представления таблицы на панели «Content»(Содержимое) заполнены образцами данных. Выберите «View»(Просмотр), а затем «Hide Sample Data»(Скрыть данные образца) в строке меню, чтобы отключить отображение данных образца.

  9. Сохраните все внесенные вами изменения.

 

Предыдущая   Следующая

Наверх

© Сайт справки 2024