Привет всем! У многих начинающих разработчиков, которые задумали создавать интерфейс своего очередного шедевра в Glade часто возникают трудности с конструированием различного рода списков. У меня тоже были похожие затруднения. Я решил написать данный пост, надеясь, что он поможет новичкам разобраться с созданием упомянутых элементов. Постараюсь разъяснить все максимально подробно.
TreeView
Итак, допустим, нам нужно получить что-то вроде этого:
![](https://habrastorage.org/getpro/habr/upload_files/bf5/5de/e60/bf55dee604ca3a063b85e0383d782c13.png)
Самое первое, что нужно сделать это открыть Glade и создать новое окно GtkWindow из вкладки окон. Далее, из соседней вкладки контейнеров выбираем GtkScrolledWindow и перемещаем на созданное окно. Должно получится вот так:
![](https://habrastorage.org/getpro/habr/upload_files/a06/815/5e1/a068155e15035b351fa6338b50344b8b.png)
Далее, из вкладки Display перемещаем на окно так нужный нам TreeView. После перемещения справа от формы нужно найти и заполнить поле "модель TreeView":
![](https://habrastorage.org/getpro/habr/upload_files/427/c6b/73d/427c6b73da5902e95e1fbf8e0646ed0d.png)
Нажимаем на значок карандаша и видим окно:
![](https://habrastorage.org/getpro/habr/upload_files/e9c/8d4/983/e9c8d49831f55bde1c12298acb801d67.png)
В этом окне нужно нажать кнопку "Создать". Окно сразу закроется, а в поле модели появится надпись liststore1. После всех манипуляций в левой панели должна отображаться вот такая иерархия:
![](https://habrastorage.org/getpro/habr/upload_files/664/bfc/35a/664bfc35aff399e7bd184b2d3ff6dbed.png)
Выделяем пункт liststore1 и в правой части обращаем внимание на следующую таблицу:
![](https://habrastorage.org/getpro/habr/upload_files/007/2d6/f21/0072d6f21e850aa2aaa693f3d9676504.png)
Нам нужно ее заполнить. Для заполнения надо нажать на выделенную строку и выбрать в появившемся выпадающем списке необходимое значение типа столбца и дописать его название. Я сделал так:
![](https://habrastorage.org/getpro/habr/upload_files/271/4a4/0d0/2714a40d0c9606b5cca9665e88bb2d3e.png)
Ниже этой таблицы есть еще одна, в которой нужно создать строки:
![](https://habrastorage.org/getpro/habr/upload_files/c83/d84/4eb/c83d844eb7b467eb5189be6f2ac533bc.png)
Я заполнил ее таким образом:
![](https://habrastorage.org/getpro/habr/upload_files/46a/a6c/56a/46aa6c56a9dc85396a9041392422ffa2.png)
Что дальше? А дальше нам надо вызвать редактор дерева, чтобы связать полученный liststore с элементами списка. Чтобы появился редактор нужно в левой панели кликнуть правой кнопкой мыши на элементе GtkTreeView или сделать то же самое в области формы. В появившемся меню нажимаем "Edit". Должно показаться такое окно:
![](https://habrastorage.org/getpro/habr/upload_files/432/984/3f9/4329843f90053326cb79e0872e68df86.png)
Нажимаем на плюс в левой части и видим примерно следующее:
![](https://habrastorage.org/getpro/habr/upload_files/016/3e7/467/0163e7467f5329536af4d74ef176cfdd.png)
Заполняем поле ID (по желанию) и дальше нажимаем правой кнопкой мыши по выделенному элементу в левой части. В появившемся меню выбираем добавление дочернего элемента "Текст" и переходим уже к нему:
![](https://habrastorage.org/getpro/habr/upload_files/3b6/5f4/e5a/3b65f4e5a9419022e527f4a3e6e3fbf3.png)
Здесь очень важно в разделе параметров и атрибутов выбрать нужный нам элемент из liststore. По умолчанию там выставлено значение "не определено". Нажав на выпадающий список, выбираем "name-gchararray". Таким образом мы создали первый столбец. Для создания второго столбца нажимаем снова на плюс в левой части и повторяем все то же самое, но с другими параметрами. Для второго столбца должно получиться так:
![](https://habrastorage.org/getpro/habr/upload_files/af3/599/eba/af3599ebaabc4dcfae207aaa3acfd635.png)
А для третьего вот так:
![](https://habrastorage.org/getpro/habr/upload_files/7d4/858/5e0/7d48585e05cea37a780ef10bffd58809.png)
После всех действий иерархия компонентов в левой панели редактора должна выглядеть таким образом:
![](https://habrastorage.org/getpro/habr/upload_files/861/1d5/772/8611d5772adc8664473cd72361994050.png)
Еще нужно переименовать столбцы, так как по умолчанию они выводятся как "column". Для переименования выделите нужный столбец в левой панели, например, column_name, а в правой части найдите это:
![](https://habrastorage.org/getpro/habr/upload_files/6f6/493/de7/6f6493de71429567aedca289cf0d2e1f.png)
Вместо значения по умолчанию впишите значение "Имя". И так проделайте со всеми столбцами. Теперь можно запустить предварительный просмотр того, что мы тут наворотили. Нажмите на значок с шестеренками вверху (появляется при выделении какого-либо виджета в форме) и полюбуйтесь на свое творение. Должно получиться так же, как на самой первой картинке.
ComboBox
Для выпадающих списков логика создания примерно такая же, поэтому подробно расписывать весь процесс я не буду. Вот пример редактора выпадающего списка и как видно, слева выделен только один элемент:
![](https://habrastorage.org/getpro/habr/upload_files/c56/c7e/608/c56c7e6087f1a55054b156044f86f178.png)
В параметрах и атрибутах указан name-gchararray из list_store. Вот содержимое list_store:
![](https://habrastorage.org/getpro/habr/upload_files/93f/882/79e/93f88279ecdc3f02e2a7f0661f3a4367.png)
По такому же типу можно создать и TreeView если вам нужен обычный список без нескольких столбцов. Разница в том, что для TreeView в редакторе дерева создается родитель GtkTreeViewColumn и его дочерний элемент GtkCellRendererText, а для выпадающего списка только GtkCellRendererText.
На этом все! Надеюсь, что понятно объяснил и помог новичкам разобраться в данной теме.