Введение
Это руководство предназначено для введения в разработку графического интерфейса средствами Stetic (интегрированный в MonoDevelop визуальный конструктор GTK#). В нем описывается создание макета графического интерфейса, добавление в него интерактивных элементов, а также добавление функциональности в GUI.
Мы начнем создание простого текстового редактора, который будет предоставлять возможности для перевода текста в верхний и нижний регистр, а также сохранение в файл.
Шаг 1: Создание нового проекта
Откройте MonoDevelop и затем выберите меню «Файл»=>«Новый проект». В результате должно открыться окно, похожее на это:
Выберите «C#» в левом меню и затем нажмите на иконку «Gtk# 2.0 Project». Нажмите на кнопку «Forward» для продолжения.
Для открытия конструктора Вы должны правой клавишей мыши нажать на MainWindow во вкладке «Solution» и выбрать «Open»:
Шаг 2: Создание графического интерфейса
Основная философия GTK# заключается в том, что каждый виджет (Button, Toolbar и т.д.) должен быть размещен в контейнере (HBox, VBox, Table и т.д.). Это руководство предназначено для быстрого введения, так что если Вы хотите узнать о GTK# больше, посетите эту страницу.
Для того, чтобы начать, переключитесь в режим дизайнера, нажав кнопку "Designer", расположенную в нижней части:
2.1 Добавление контейнера
В настоящий момент времени MainWindow является пустым, и имеет вид, представленный ниже:
Все стандартные контейнеры и виджеты, которые Вам понадобятся, расположены на панели инструментов с правой стороны окна:
Прежде всего, мы добавим VBox для разделения Button от TextView. Перейдите в «Панель инструментов»=>"Containers" и перенесите VBox на MainWindow. Результат должен быть следующим:
Сейчас необходимо создать контейнер для каждой кнопки. Добавьте элемент HBox в первую ячейку VBox. Теперь окно будет иметь следующий вид:
Если нам необходимо 4 кнопки, мы должны добавить дополнительный столбец в HBox. Нажмите правой кнопкой мыши на HBox и выберите hbox1=>Insert After. Теперь окно должно иметь следующий вид:
2.2 Добавление виджетов
Добавьте Button в каждую ячейку первой строки и TextView во вторую строку, как ниже:
Каждый виджет и контейнер имеет свойства ,которые определяют их внешний вид и поведение. Вы можете изменить эти свойства из Панели свойств.
Например, выберите TextView, который был только что добавлен и измените свойство Show Scrollbars с unchecking.
Теперь выберите первую кнопку и измените свойство Name на “buttonClear”. Свойство Name используется приложением для обращения к этому экземпляру класса Gtk.Button. Для изменения текста в кнопке, необходимо изменить свойство Label, которое может быть найдено в подменю "Button Properties". Вставьте в него значение «Clear», как на изображении ниже:
Выполните оставшиеся преобразования остальных кнопок, для того чтобы Ваше окно приобрело следующий вид:
Шаг 3: Добавление функциональности
Выберите кнопку “Clear” и откройте меню “Signals” в панели свойств:
Два раза кликните на сигнал Clicked для автоматического добавления обработчика сигнала. Обработчик сигнала является функцией, которая вызывается когда генерируется сигнал.
Теперь добавьте следующие обработчики сигналов (используя вышеуказанный методо) и некоторый код на языке C#:
using System;
using Gtk;
using System.IO;
public partial class MainWindow : Gtk.Window
{
public MainWindow () : base(Gtk.WindowType.Toplevel)
{
Build ();
}
protected void OnDeleteEvent (object sender, DeleteEventArgs a)
{
Application.Quit ();
a.RetVal = true;
}
protected virtual void OnButtonClearClicked (object sender, System.EventArgs e)
{
//code executed when the Clear button is clicked
textview1.Buffer.Text="";//clears the buffer displayed by the TextView
}
protected virtual void OnButtonUppCaseClicked (object sender, System.EventArgs e)
{
//code executed when the Upper Case button is clicked
textview1.Buffer.Text=textview1.Buffer.Text.ToUpper();
}
protected virtual void OnButtonLowerCaseClicked (object sender, System.EventArgs e)
{
//code executed when the Lower Case button is clicked
textview1.Buffer.Text=textview1.Buffer.Text.ToLower();
}
protected virtual void OnButtonSaveClicked (object sender, System.EventArgs e)
{
//code executed when the Copy button is clicked
StreamWriter sw=new StreamWriter("Test.txt");
sw.Write(textview1.Buffer.Text); //Write textview1 text to file
textview1.Buffer.Text="Saved to file !"; //Notify user
sw.Close();
}
}
Приложение должно быть готово для запуска. Выберите в меню Build=>Build All, а затем Run=>Debug и проверьте наше решение. Текстовый файл создастся с помощью объекта StreamWriter и директории SolutionFolder/bin/Debug.
Шаг 4: Экспериментирование
Поздравляем! Вы создали приложение GTK#. Теперь я рекомендую Вам попробовать другие контейнеры и виджеты и сделать другое комплексное приложение (множество окон, настраиваемые виджеты), и возможно начать создание проекта для себя.
|