ИТм-202_ Лабораторная работа W_1

Лабораторная работа W1

Знакомство с компонентами TextBox, Label и Button

Цель работы: получение практических навыков создания пользовательского интерфейса средствами интегрированной среды разработки Visual Studio 2010; знакомство с основными свойствами базовых компонентов; написание простейших обработчиков событий, освоение возможностей и интерфейса среды разработки.

Подготовительный этап

Для всех заданий лабораторной работы создается единое решение. Каждая задача в работе представляет собой отдельный проект. Имя проекта совпадает с номером задания.

Задание 1. Консольное приложение

Ознакомьтесь с теоретическим материалом (файл КТ-202 теория к 1 занятию) и создайте консольное приложение Мир.

Задание 2. Windows Forms приложение

Все остальные задания лабораторной работы выполняйте в этом же решении. Для добавления нового проекта к решению щелкните правой клавишей мыши по решению и выберите Добавить – Создать проект.

В открывшемся окне выберите тип приложения Windows Forms. Имя проекта: Мир1. Этот проект будет иметь оконный интерфейс.

В результате будет создано окно формы. Форма – это контейнер для размещения на нем элементов управления.

Панель

элементов

Создадим аналог консольного приложения Мир. Форма будет содержть одну кнопку. При щелчке по кнопке будет появляться надпись «Здравствуй мир программирования!»

Технология выполнения:

1. Откройте панель элементов и перетащите на поле формы 2 элемента управления: Метку (Label) и Кнопку (Button).

2. Вызовите контекстное меню для кнопки и откройте Свойства. В поле свойства Text напишите ОК

3.Все действия в приложениях Windows Forms происходят в ответ на какоелибо событие, произошедшее с тем или иным элементом управления. В данном случае событием будет щелчок по кнопке (Click), которое вызовет изменение надписи метки (изменение свойства Text у элемента Label).

Вызвать код обработчика события можно двойным щелчком по элементу. Дважды щелкните мышью по кнопке ОК.

В открывшемся окне кода введите следующее:

4.Чтобы протестировать работу приложения его надо назначить запускающим. Щелкните правой кнопкой мыши по приложению Windows Forms

иназначьте проект запускающим.

Протестируйте работу приложения. Итог:

Задание 3. Работа с кнопками

В этом задании создается форма с тремя кнопками. Две из них меняют цвет формы и заголовок. Третья кнопка закрывает приложение.

Комментарии.

Компонент Button присутствует практически в каждом Windows приложении. Основным обрабатываемым событием компонента является щелчок по компоненту, событие Click. Это событие происходит при каждом щелчке пользователя на кнопке – т.е. при нажатии и отпускании левой кнопки мыши в то время, когда указатель располагается над кнопкой. Следовательно, если нажать левую кнопку мыши и отвести указатель мыши в сторону от кнопки до снятия с

нее фокуса, событие Click на запускается. Кроме того, событие Click происходит, когда кнопка находится в фокусе и пользователь нажимает клавишу <Enter>. Событие Click всегда необходимо обрабатывать, если на форме имеется компонент Button.

Этапы выполнения задания

Конструирование интерфейса приложения

1.Создайте новое Windows-приложение Lab1.

2.Разверните панель элементов (ToolBox) .

3.На форме разместите (перетащите или вызовите двойным щелчком) три компонента Button и скорректируйте размер формы в соответствии с рисунком

1.1.

Рисунок 1.1 Начальная компоновка пользовательского интерфейса задания 1

4. Щелкните на кнопке правой кнопкой мыши и в контекстном меню выберите пункт Свойства (Properties). Измените имя каждой кнопки, изменяя вручную текст в поле Name: button1 замените на buttonBlue, button2 замените на

buttonRed, button3 замените на buttonОК.

5.Измените свойство text каждой кнопки в соответствии с ее именем: синий, красный, ОК.

6.Установите свойство Font.Size равным 11, чтобы сделать текст на кнопке большего размера.

7.Для большей наглядности разместим на кнопках изображения шариков соответствующего цвета. Выберите кнопку buttonBlue и найдите в свойствах Изображение (Image). Щелкните справа от него, чтобы открыть диалоговое окно, в

котором можно будет добавить изображение в файл ресурсов формы. Щелкните на кнопке Импортировать (Import) и выполните просмотр доступных значков. Нужные вам значки находятся в папке Дополнения. Выберите значок ballBlue.jpg. Щелкните ОК.

7.Для того, чтобы картинка полностью отображалась на кнопке измените ее размер, сделав по высоте равным высоте картинки, по ширине в два раза больше.

Вданном примере свойства Size.Width =130, Size.Height=61.

9.Измените цвет надписи на кнопке с помощью свойства ForeColor, раскрыв выпадающий список и выбрав вкладку Другой.

10.На этом этапе текст и значок кнопки размещены друг поверх друга, поэтому нужно изменить способ выравнивания значка. Измените свойства

ImageAlign на MiddLeft, а TextAlign на MiddleRight.

10. Аналогичные изменения проведите с кнопкой buttonRed. Итоговая компоновка представлена на рисунке 1.2.

Рисунок 1.2. Итоговая компоновка пользовательского интерфейса

Добавление обработчиков событий.

1. Дважды щелкните по кнопке Синий и добавьте следующий код в обработчик события Click:

private void buttonBlue_Click(object sender, EventArgs e)

{

Text = "Форма синего цвета"; BackColor = Color.Blue;

}

2.Протестируйте работу обработчика кнопки Синий.

3.Аналогично создайте обработчик для кнопки Красный.

4.Протестируйте работу приложения.

5.Для обработчика кнопки ОК напишите следующий код:

private void buttonОк_Click(object sender, EventArgs e)

{

Application.Exit();

}

6. Протестируйте работу приложения в целом.

Дополнение: когда Visual Studio создает метод для обработки основного события компонента, в качестве имени метода назначается имя компонента, за

которым следуют символ	подчеркивания и имя обрабатываемого события
(рисунок 1.3)
Имя компонента	Обрабатываемое событие

Параметры события

Рисунок 1.3. Структура имени обработчика события компонента

В данном примере изменение надписи в заголовке формы происходит с помощью изменения свойства Text. Это свойство есть у многих компонентов, в том числе и у кнопок. Если бы мы хотели изменить текст кнопки, то написали бы так:

buttonBlue.Text = "Новый текст";

Т.е. явно указали бы, для какого именно компонента изменяется свойство

Text.

В том случае, если мы обращаемся к свойствам текущей (активной) формы, допускается (и принято) не указывать имя формы, ограничиваясь только указанием свойства.

Не будет ошибкой, если мы напишем эту команду следующим образом:

Form1.ActiveForm.Text = "Форма синего цвета";

Задание 4. Работа с текстовыми полями и метками

В этом задании создается форма, содержащая несколько текстовых полей, меток и две кнопки. Пользователь вводит информацию в поля формы, по щелчку по кнопке ОК введенная информация выводится в обобщенном виде в поле Подтверждение. Метка-ссылка осуществляет переход на сторонний ресурс. Внешний вид окна приложения представлен на рисунке 1.4.

Рисунок 1.4. Пользовательский интерфейс приложения задания 2

Текстовые поля нужно использовать в тех случаях, когда пользователям требуется предоставить возможность вводить текст, о котором ничего не известно во время разработки. Основное назначение текстового поля – обеспечение возможности ввода текста.

Метка – наиболее часто используемый компонент. Его назначение – отображать текст внутри формы. В .NET Framework включены два по-разному отображаемых компонента типа метки:

Label – стандартная метка Windows;

LinkLabel – метка, отображаемая в виде гиперссылки.

Для стандартной метки обычно не пишут обработчиков событий, хотя она и поддерживает события, как и все другие компоненты. В случае использования LinkLabel требуется написание кода, чтобы с помощью щелчка по этому компоненту перейти по целевой ссылке.

Этапы выполнения задания

Конструирование интерфейса приложения

1.Добавьте к решению Lab1 новый проект Windows-приложение.

2.Перетащите на форму компоненты, так, как показано на рисунке 1.4.

3.Свойству Name текстовых полей дайте подходящие имена, например, textBoxName, textBoxAdress, textBoxYear, textBoxOutput.

4.Для текстовых полей textBoxAdress и textBoxOutput установите свойство Multiline в значение true. Это позволит вводить\выводить данные в несколько строк.

5.Для текстовых полей textBoxAdress и textBoxOutput установите свойство Scrollbars в Vertical, чтобы иметь возможность вертикальной прокрутки текста в окне.

6.Установите для компонента textBoxOutput свойство ReadOnly в true, чтобы запретить пользователю ввод.

Свойство Ancor задает поведение компонента при изменении размеров окна пользователем. Возможны два варианта поведения формы: 1) компоненты остаются на своих местах, их размер не изменяется, но изменяется размер поля формы (компонент пристыкован к краю формы), 2) компоненты изменяют свои размеры пропорционально изменению размеров формы (компонент привязан к краю формы). При этом есть возможность указать, к какому именно краю формы будет привязан компонент.

7.Для выполнения привязки сразу нескольких компонентов, удерживая нажатой клавишу <Ctrl>, выделите последовательно все компоненты типа textBox, за исключением textBoxOutput, и задайте свойству Ancor значение Top, Left, Right. Полю textBoxOutput значение Ancor установите в Top, Bottom, Left, Right. Для компонентов Button и LinkLabel установите свойство Ancor в Top, Right.

8.Следует ограничить минимально возможный размер формы значением, при котором все компоненты помещаются в пределах поля формы. Опытным путем установите такой размер формы, при котором все компоненты помещаются

впределах поля формы и установите значение свойства MinimumSizeравным значению Size.

Оформление визуальной части формы завершено. Запустите приложение и, хотя щелчок по кнопкам не приводит ни к каким действиям, можно протестировать поведение компонентов при изменении размера окна формы.

Добавление обработчиков событий.

1. Описание обработчика события Click для кнопки ОК. Щелчок по этой кнопке должен приводить к передаче текста из текстовых полей в окно компонента textBoxOutput.

private void buttonOK_Click(object sender, EventArgs e)

{

string output;

//Конкатенация текстовых значений из компонентов textBox output = "Вас зовут: " + textBoxName.Text + "\r\n";

output += "Вы проживаете по адресу: " + textBoxAdress.Text + "\r\n"; //Вычисление возраста

int age = 0;

age = DateTime.Now.Year-Convert.ToInt32(textBoxYear.Text); output += "Сейчас вам " + age.ToString() + " лет/год \r\n";

// Вставка строки в текстовое поле textBoxOutput.Text = output;

}

2. Описание обработчика события Click для кнопки Help. Щелчок по этой кнопке должен приводить к выводу сообщения-подсказки в окно компонента textBoxOutput. Для усиления эффекта изменен цвет выводимого сообщения.

private void buttonHelp_Click(object sender, EventArgs e)

{

//Вывод подсказки о содержимом каждого текстового окна string output;

output = "Ваше имя = Ваше полное имя \r\n";

output += "Почтовый арес: полный адрес с указанием почтового индекса\r\n";

output += "Год рождения: введите год рождения полностью, 4 цифры, без наименований \r\n";

//Изменение цвета шрифта для вывода подсказки textBoxOutput.ForeColor = Color.Red; textBoxOutput.Text = output;

}

3.Самостоятельно допишите строку кода для обработчика кнопки ОК, чтобы цвет шрифта для вывода введенной информации был черным.

4.Протестируйте работу приложения.

Комментарий: если при вводе данных в текстовом окне textBoxYear будет пустым или в него будут введены символы, отличные от цифр, то, естественно, что обработчик не сможет провести вычисление и приложение завершит работу с ошибкой («аварийная ситуация») и будет выведено окно сообщения FormatException1. Для того, чтобы перейти к корректировке кода следует остановить отладку, воспользовавшись командой Остановить отладку в меню

Отладка или воспользуйтесь кнопкой на панели инструментов. 5. Описание обработчика для компонента LinkLabel следующее:

private void linkLabel1_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)

{

System.Diagnostics.Process.Start("http://www.msdn.com");

}

Так как методы управления системными процессами не входят в пространства имен, добавляемые к проекту по умолчанию, то вызов метода начинается с явного указания имени пространства имен System.Diagnostics.

1 О способах обработки аварийных (исключительных) ситуаций рассказано в задании 3.

Написание кода для приложения завершено. Протестируйте работу приложения.

Задание для самостоятельного выполнения

Создайте форму по образцу:

1.

2.

5.

3.

6.

4.

7.

10.

8.

12

9.

11.