Разработка кроссплатформенных приложений с использованием Juce

Элементы управления. Вкладки

Показывать лекцию целиком

Цель лекции: Научиться создавать и использовать вкладки

Многостраничные панели позволяют экономить пространство окна приложения, организуя с помощью специальных компонентов, вкладок, напоминающих закладки книги, размещение на одном и том же месте окна виджетов разного содержания. При выборе одной из вкладок в окне будет отображён закреплённый за ней виджет (рис 16.1 ).

Для создания многостраничной панели в библиотеке Juce имеется класс TabbedComponent. Этот компонент представляет собой комбинацию из виджетов двух классов: TabbedButtonBar и TabBarButton.

TabbedButtonBar создаёт вертикальную или горизонтальную панель, содержащую то или иное число вкладок. Сами вкладки — это объекты класса TabBarButton, которые, как понятно из названия, являются разновидностью кнопок и наследуют методы класса Button (см. лекцию 12 ).

Рассмотрим работу всех этих компонентов на примере простой программы (рис 16.1 ), компонент содержимого которой включает многостраничную панель с тремя вкладками (). На каждой вкладке размещается ярлык с надписью. При выборе пользователем той или иной вкладки выводится информирующее сообщение.

(рис 16.1) Приложение, демонстрирующее работу виджета многостраничной панели
#ifndef _TCentralComponent_h_
#define _TCentralComponent_h_
//---------------------------------------------------
#include "../JuceLibraryCode/JuceHeader.h"
//---------------------------------------------------
// Класс компонента содержимого.
// Наследует класс слушателя кнопок
class TCentralComponent  : public Component,
            public ButtonListener
{
public:
  TCentralComponent();
  ~TCentralComponent();

  void paint(Graphics);
  void resized();
  // Функция, отслеживающая щелчки по кнопке
  void buttonClicked(Button*);

private:
  // Многостраничная панель 
  TabbedComponent* pTabWidget;
  // Надписи вкладок панели
  Label* pLabel;
  Label* pLabel1;
  Label* pLabel2;

  // Предотвращает создание копии конструктора и оператора =
  TCentralComponent(const TCentralComponent);
  const TCentralComponent operator= (const TCentralComponent);
};
//------------------------------------------------
#endif

При создании многостраничной панели в конструктор класса TabbedComponent передаётся информация о положении вкладок. Она кодируется идентификаторами перечислимого списка enum TabbedButtonBar::Orientation:

  • TabsAtTop — вкладки располагаются сверху;
  • TabsAtBottom — вкладки располагаются снизу;
  • TabsAtLeft — вкладки располагаются слева;
  • TabsAtRight — вкладки располагаются справа.
  • Поменять положение вкладок можно с помощью метода void TabbedComponent::setOrientation(TabbedButtonBar::Orientation orientation). Такой же метод есть и у класса TabbedButtonBar.

    Ширину или высоту вкладок в пикселях можно установить с помощью метода void TabbedComponent::setTabBarDepth(int newDepth).

    Добавим вкладки на многостраничную панель (), воспользовавшись методом void TabbedComponent::addTab(const String tabName, const Colour tabBackgroundColour, Component* contentComponent, bool deleteComponentWhenNotNeeded, int insertIndex = -1). Метод принимает следующие параметры:

  • tabName — название вкладки; именно оно будет отображаться на ней как подпись;
  • tabBackgroundColour — цвет фона вкладки;
  • contentComponent — ассоциированный с вкладкой виджет;
  • deleteComponentWhenNotNeeded — флаг того, что виджет следует удалить после того, как в нём отпадёт необходимость;
  • insertIndex — позиция добавления вкладки; если параметр принимает значение -1 (по умолчанию), то вкладки добавляются в горизонтальной позиции слева направо. При этом первая вкладка автоматически выбирается.
  • #include "TCentralComponent.h"
    //----------------------------------------------------
    #define tr(s) String::fromUTF8(s)
    //----------------------------------------------------
    TCentralComponent::TCentralComponent() : Component("Central Component"),
                pTabWidget(0)
    {
      // Вкладки многостраничной панели расположены сверху
      pTabWidget = new TabbedComponent(TabbedButtonBar::TabsAtTop);
      pTabWidget->setTabBarDepth(30);
    
      pLabel = new Label(L"Label0", L"Label 0");
      // Шрифт надписи крупный, полужирный
      pLabel->setFont(Font(40.0000f, Font::bold));
      pLabel->setJustificationType(Justification::centred);
      pLabel->setEditable(false, false, false);
    
      pLabel1 = new Label(L"Label1", L"Label 1");
      pLabel1->setFont(Font(40.0000f, Font::bold));
      pLabel1->setJustificationType(Justification::centred);
      pLabel1->setEditable(false, false, false);
    
      pLabel2 = new Label(L"Label2", L"Label 2");
      pLabel2->setFont(Font(40.0000f, Font::bold));
      pLabel2->setJustificationType(Justification::centred);
      pLabel2->setEditable(false, false, false);
    
      // Добавляем на панель вкладку голубого цвета, содержащую в качестве 
      // виджета ярлык pLabel
      pTabWidget->addTab(L"Tab 0", Colours::lightblue, pLabel, true);
      // Добавляем компонент содержимого в качестве слушателя кнопки для вкладки
      pTabWidget->getTabbedButtonBar().getTabButton(0)->addListener(this);
    
      // Добавляем на панель вкладку светло-зелёного цвета, содержащую в качестве 
      // виджета ярлык pLabel1
      pTabWidget->addTab(L"Tab 1", Colours::lightgreen, pLabel1, true);
      pTabWidget->getTabbedButtonBar().getTabButton(1)->addListener(this);
    
      // Добавляем на панель вкладку красно-фиолетового цвета, 
      // содержащую в качестве виджета ярлык pLabel2
      pTabWidget->addTab(L"Tab 2", Colours::palevioletred, pLabel2, true);
      pTabWidget->getTabbedButtonBar().getTabButton(2)->addListener(this);
      pTabWidget->setCurrentTabIndex(0);
      addAndMakeVisible(pTabWidget);
    
      setSize (600, 400);
    }
    

    Удалить определённую вкладку по её индексу в панели позволяет функция void TabbedComponent::removeTab(int tabIndex). Для того, чтобы удалить все имеющиеся вкладки, необходимо вызвать метод void TabbedComponent::clearTabs().

    Характеристики добавленной в TabbedComponent вкладки при необходимости можно менять. Так, метод void TabbedComponent::setTabName(int tabIndex, const String newName) позволяет изменить заголовок вкладки с индексом tabIndex на newName. Изменить цвет фона вкладки можно, обратившись к методу void TabbedComponent::setTabBackgroundColour(int tabIndex, const Colour inewColour).

    Получить индекс и заголовок текущей, т.е. выбранной пользователем вкладки позволяют методы int TabbedComponent::getCurrentTabIndex() const и const String TabbedComponent::getCurrentTabName() const, соответственно.

    Вкладку можно выбрать программно, задав её индекс с помощью функции void TabbedComponent::setCurrentTabIndex(int newTabIndex, bool sendChangeMessage = true).

    При необходимости выполнить какие-то действия с компонентом, ассоциированным с вкладкой, получить указатель на него позволяет метод Component* TabbedComponent::getCurrentContentComponent() const throw().

    Кроме того, компонент TabbedComponent позволяет получить названия (заголовки) и число включённых в него вкладок с помощью методов StringArray TabbedComponent::getTabNames() const и int TabbedComponent::getNumTabs() const, соответственно.

    Итак, в нашем примере мы добавили с помощью метода , рис 16.1 ).

    Поскольку каждая вкладка — это своеобразная кнопка, то мы можем обработать её выбор пользователем в методе ).

    Завершает наш пример обработчик выбора вкладки ).

    void TCentralComponent::buttonClicked(Button* pButton)
    {
      String sMessage = tr("Выбрана вкладка ");
    
      if(pButton == pTabWidget->getTabbedButtonBar().getTabButton(0))
      {
        sMessage += "0";
      }
      else if(pButton == pTabWidget->getTabbedButtonBar().getTabButton(1))
      {
        sMessage += "1";
      }
      else if(pButton == pTabWidget->getTabbedButtonBar().getTabButton(2))
      {
        sMessage += "2";
      }
    
      AlertWindow::showMessageBox(AlertWindow::InfoIcon, 
                tr("Информация"), sMessage, tr("Да"), 0);
    }
    

    Краткие итоги

    В этой лекции вы познакомились с вкладками и классами, необходимыми для их создания: TabBarButton (собственно вкладка), TabbedButtonBar (компонент, который создаёт вертикальную или горизонтальную панель, содержащую то или иное число вкладок) и TabbedComponent (комбинация двух предыдущих компонентов).

    Упражнение

    Создайте платформ-независимый проект с помощью Introjucer на основе листингов лекции. Соберите программу, включающую окно с изменяемыми размерами для Вашей среды разработки. Поэкспериментируйте с внешним видом окна.

    Дополнительные материалы

    Архив с исходными текстами примера Вы можете скачать здесь.

    Вернуться к учебному плану