Изучение среды разработки Visual Studio

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТОМСКИЙ ПОЛИТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ» В.Б. Немировский ЛАБОРАТОРНЫЙ ПРАКТИКУМ ПО ИНФОРМАТИКЕ Рекомендовано в качестве учебного пособия Редакционно-издательским советом Томского политехнического университета Издательство Томского политехнического университета 2018 Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 2 ЛАБОРАТОРНАЯ РАБОТА № 6 ИЗУЧЕНИЕ СРЕДЫ РАЗРАБОТКИ VISUAL STUDIO Цель лабораторной работы: изучить среду быстрой разработки приложений Visual Studio. Научится размещать и настраивать внешний вид элементов управления на форме. 1.1. Интегрированная среда разработчика Visual Studio Среда Visual Studio визуально реализуется в виде одного окна с несколькими панелями инструментов. Количество, расположение, размер и вид панелей может меняться программистом или самой средой разработки в зависимости от текущего режима работы среды или пожеланий программиста, что значительно повышает производительность работы. При запуске Visual Studio появляется начальная страница со списком последних проектов (рис. 1.1, а), а также командами Создание проекта и Открытие проекта (New project и Open project). Нажмите команду Создание проекта (New project) или выберите в меню Файл команду Создать проект (New, а затем Project…), на экране появится диалог для создания нового проекта (рис. 1.1, б). Рис 1.1, а. Стартовая страница MS Visual Studio (Диалог создания нового проекта или открытия существующего) Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 3 Рис 1.1, б. Диалоговое окно создания нового проекта Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 4 Справа вверху (под строкой поиска) желательно выбрать C# (вместо ‘Все языки’) и Windows (вместо ‘Все платформы’). Список типов проектов сократится. В списке типов проектов необходимо выбрать вариант «C# – Приложение Windows Forms (.NET Framework)» (примерно в первой трети списка, чтобы создать новый проект именно на этом языке. Можно в верхней строке (правая колонка) набрать первые буквы слова ‘Приложение’. Это ускорит процесс поиска шаблона проекта требуемого типа. Затем нажать кнопку «Далее» (внизу справа). Примечание. Если проект такого типа уже создавался, то такой шаблон отобразится в левой колонке «Последние шаблоны проектов», и возможно он там единственный. Иначе его надо открывать через кнопку «Открыть проект или решение» или непосредственно из папки на диске U:, кликнув на файле .sln. Слева в списке шаблонов приведены языки программирования, которые поддерживает данная версия Visual Studio: убедитесь, что там выделен раздел Visual C#. В средней части приведены типы проектов, которые можно создать. В наших лабораторных работах будут использоваться только один тип проектов: Приложение Windows Forms (Windows Forms Application) – данный тип проекта позволяет создать полноценное приложение с окнами и элементами управления (кнопками, полями ввода и пр.). Такой вид приложения наиболее привычен большинству пользователей. Выберите в списке тип проекта «Приложение Windows Forms» (Windows Forms Application). Далее открывается диалоговое окно для создания заготовки для проекта (рис. _). В нём указываются наименование проекта и папка, в которую необходимо расположить папку с проектом. Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 5 Рис 1.1, в. Диалоговое окно задания названия и папки для нового проекта Необходимо помнить! Под каждый проект (программу) необходимо создавать отдельную папку. А эта папка должна располагаться на диске U:, в папке для проектов. Технология создания следующая: В поле «Имя проекта» (Name) введите желаемое имя проекта (например, Lab1). В поле «Расположение» (Location) необходимо указать папку где будет размешаться папка с проектом. Кнопкой (справа) откройте стандартное окно выбора папки и выберите там существующую папку. Это должна быть папка на диске U:, предназначенная для проектов MS VS или папка внутри этой папки. В пункте «Поместить решение и проект в одной папке» желательно поставить галочку. В поле «Платформа» оставить значение «.NET Framework 4.7.2». Нажмите кнопку . Через несколько секунд Visual Studio создаст проект, и Вы сможете увидеть на экране картинку, подобную представленной на рис. 1.2. Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 6 Рис 1.2. Главное окно проекта при разработке в среде Visual Studio В главном окне Visual Studio присутствует несколько основных элементов, которые будут помогать нам в работе. Прежде всего, это форма (1) – будущее окно нашего приложения, на котором будут размещаться элементы управления. При выполнении программы помещенные элементы управления будут иметь тот же вид, что и на этапе проектирования. Второй по важности объект – это окно свойств (2), в котором приведены все основные свойства выделенного элемента управления или окна. С помощью кнопки можно просматривать свойства элемента управления, а кнопка переключает окно в режим просмотра событий. Чтобы было удобнее искать нужные свойства, можно отсортировать их по алфавиту с помощью кнопки . Если этого окна на экране нет, его можно активировать в меню Вид → Окно свойств (внизу; View/Property Windows; иногда этот пункт вложен в подпункт Другие окна – Other Windows). Сами элементы управления можно брать на Панели элементов (3) (обычно скрыта; Toolbox). Все элементы управления разбиты на логические группы, что облегчает поиск нужных элементов. Если панели нет на экране, её нужно активировать командой Вид → Панель элементов (View/Toolbox). Наконец, Обозреватель решений (4) (Solution…; Solution Explorer) содержит список всех файлов, входящих в проект, включая добавленные изображения и служебные файлы. Активируется командой Вид → Обозреватель решений (View/Solution Explorer). Указанные панели могут уже присутствовать на экране, но быть скрытыми за другими панелями или свёрнуты к боковой стороне окна. В этом случае достаточно щёлкнуть на соответствующем ярлычке, чтобы вывести панель на передний план. Расположение этих окон интерфейса можно компоновать на своё усмотрение так, чтобы было удобно работать со средой IDE. Окно текста программы предназначено для просмотра, написания и редактирования текста программы. Переключаться между формой и текстом программы можно с помощью команд Вид → Код и Вид → Конструктор (View/Code и View/Designer). В дальнейшем, если окна дизайна и кода уже открыты, переключаться можно по ярлычкам соответствующих окон, расположенными вверху. При первоначальной загрузке в окне текста программы находится текст, содержащий 1 3 2 4 Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 7 минимальный набор операторов для нормального функционирования пустой формы в качестве Windows-окна. При помещении элемента управления в окно формы, текст программы автоматически дополняется описанием необходимых для его работы библиотек стандартных программ (раздел using, вверху кода программы) и переменных для доступа к элементу управления (в скрытой части класса формы). Программа на языке C# составляется как описание алгоритмов1 , которые необходимо выполнить, если возникает определенное событие, связанное с формой (например, щелчок «мыши» на кнопке – событие Click, загрузка формы – Load). Для каждого обрабатываемого в форме события, с помощью окна свойств, в тексте программы организуется метод, в котором программист записывает на языке C# требуемый алгоритм. 1.2. Настройка формы Настройка формы начинается с настройки размера формы. С помощью мыши, «захватывая» одну из кромок формы или выделенную строку заголовка отрегулируйте нужные размеры формы. Для настройки будущего окна приложения задаются свойства формы. Для задания любых свойств формы и элементов управления на форме используется окно свойств. Новая форма имеет одинаковые имя (Name) и заголовок (Text) – Form1. Для изменения заголовка формы Вашего приложения щелкните кнопкой мыши на форме; окне Свойства (Properties; (2) на рис. 1.2) найдите и щелкните ‘мышкой’ на строчке с названием Text. В выделенной строке ввода наберите «Лаб. раб. N1. Ст. гр. 1А91 Иванов А. А.». Для задания цвета окна используйте настройки в свойстве BackColor. 1.3. Размещение элементов управления на форме Для размещения различных элементов управления на форме используется Панель элементов (Toolbox). Панель элементов содержит элементы управления, сгруппированные по типу. Каждую группу элементов управления можно свернуть, если она в настоящий момент не нужна. Для выполнения лабораторных работ потребуются элементы управления из группы Стандартные элементы управления (Common Controls). Рис. 1.3. Панель элементов 1 Как и во многих других объектно-ориентированных средах разработки, например, Delphi, Builder (теперь объединены в RAD Studio). Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 8 Технология создания элемента на форме и его корректировка Щёлкните на элементе управления (в Панели элементов, Toolbox), который хотите добавить, а затем щёлкните в нужном месте формы – элемент появится на форме. Элемент можно перемещать по форме, схватившись за него левой кнопкой мышки (иногда это можно сделать лишь за появляющийся при нажатии на элемент квадрат со стрелками ). Если элемент управления позволяет изменять размеры, то на соответствующих его сторонах появятся белые квадратики, ухватившись за которые и можно изменить размер. После размещения элемента управления на форме, его можно выделить щелчком ‘мыши’ и при этом получить доступ к его свойствам в окне свойств. Окно Свойства (Properties) возможно придётся активировать отдельно. Но в нём будет перечень свойств выделенного компонента. 1.4. Размещение строки ввода Если необходимо ввести из формы в программу или вывести на форму информацию, которая вмещается в одну строку, используют окно однострочного редактора текста, представляемого элементом управления TextBox. В данной программе с помощью однострочного редактора будет вводиться имя пользователя. Выберите на Панели элементов (ToolBox) пиктограмму с названием TextBox; щелкните ‘мышью’ в том месте формы, где вы хотите ее поставить. Захватив его ‘мышкой’, отрегулируйте размеры элемента управления и его положение. Обратите внимание на то, что теперь в тексте программы можно использовать переменную textBox1, которая соответствуют добавленному элементу управления. В этой переменной в свойстве Text будет содержаться строка символов (тип string) и отображаться в соответствующем окне TextBox. С помощью окна свойств установите шрифт и размер символов, отражаемых в строке TextBox (необходимо настроить свойство Font). 1.5. Размещение надписей На форме могут размещаться пояснительные надписи. Для нанесения таких надписей на форму используется элемент управления Label. Выберите на панели элементов (Toolbox) пиктограмму с названием Label, щелкните на ней ‘мышью’. После этого в нужном месте формы щелкните ‘мышью’, появится надпись label1. Щелкнув на ней ‘мышью’, отрегулируйте её размер и, изменив свойство Text в окне свойств (Properties), введите строку текста, например, «Введите своё имя:», а также выберите размер символов (свойство Font). Обратите внимание, что в тексте программы теперь можно обращаться к новой переменной типа Label. В ней хранится пояснительная строка к элементу формы. Текст и другие параметры можно будет изменять в процессе работы программы (динамическое изменение свойств). 1.6. Написание программы обработки события С каждым элементом управления на форме и с самой формой могут происходить события во время работы программы. Например, с кнопкой может произойти событие – нажатие кнопки, а с окном, которое проектируется с помощью формы, может произойти ряд событий: создание окна, изменение размера окна, щелчок ‘мыши’ на окне и т. п. Эти события могут быть обрабатываться в программе. Для обработки таких событий необходимо создать обработчики события – специальный метод. Для создания обработчика события существует два способа. Первый способ – создать обработчик для события по умолчанию (обычно это самое часто используемое событие данного элемента управления). Например, для кнопки таким образом создаётся обработчик события нажатия на неё. Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 9 1.7. Написание программы обработки события нажатия кнопки Поместите на форму кнопку, которая описывается элементом управления Button. С помощью окна свойств измените заголовок (Text) на слово «Привет» или другое, по Вашему желанию. Отрегулируйте положение и размер кнопки. После этого два раза щелкните ‘мышью’ на кнопке (двойной клик, double click); в тексте программы появятся строки: private void button1_Click(object sender, EventArgs e) { } Это и есть обработчик события нажатия на кнопку. Вы можете добавлять свой код между скобками { }. Например, наберите: MessageBox.Show("Привет, " + textBox1.Text + "!"); Такая команда будет вызывать отдельное окно с сообщением. 1.8. Написание программы обработки события загрузки формы Второй способ создания обработчика события заключается в выборе на вкладке Событий ( , Events) соответствующего события для выделенного элемента на форме. При этом используется окно Свойств (Properties) и его вкладка . Рассмотрим этот способ. Выделите форму щелчком по ней, чтобы вокруг неё появилась рамка из точек. В окне Свойств (Properties) найдите вкладку События ( ) и там событие Load. Щелкнете по данной строчке дважды мышкой. В тексте программы появятся строки для этого метода: private void Form1_Load(object sender, EventArgs e) { } Эта функция на языке C# является обработчиком данного события Load. Она будет вызвана на исполнение только в тот момент, когда форма будет создана в оперативной памяти, перед появлением формы на экране. Между фигурными скобками { } вставьте текст кода программы: BackColor = Color.AntiqueWhite; Каждый элемент управления на форме имеет свой набор обработчиков событий. Однако некоторые из них присуши большинству элементов управления. Наиболее часто применяемые события представлены в таблице: Событие Описание события Activated Форма получает это событие при активации. Load Возникает при загрузке формы. В обработчике данного события следует задавать действия, которые должны происходить в момент создания формы, например установка начальных значений. KeyPress Возникает при нажатии кнопки на клавиатуре. Параметр e.KeyChar имеет тип char и содержит код нажатой клавиши (клавиша Enter клавиатуры имеет код #13, клавиша Esc – #27 и т. д.). Обычно это событие используется в том случае, когда необходима реакция на нажатие одной из клавиш. KeyDown Возникает при нажатии клавиши на клавиатуре. Обработчик этого события получает информацию о нажатой клавише и состоянии клавиш Shift, Alt и Ctrl, а также о нажатой кнопке мыши. Информация о клавише передается параметром e.KeyCode, который представляет собой перечисление Keys с Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 10 кодами всех клавиш, а информацию о клавишах-модификаторах Shift и др. можно узнать из параметра e.Modifiers. KeyUp Является парным событием для KeyDown и возникает при отпускании ранее нажатой клавиши Click Возникает при нажатии кнопки мыши в области элемента управления DoubleClick Возникает при двойном нажатии кнопки ‘мыши’ в области элемента управления Важное примечание! Если какой-то обработчик был добавлен по ошибке или больше не нужен, то для его удаления нельзя просто удалить программный код обработчика! Сначала нужно удалить строку с именем обработчика в окне свойств на закладке . В противном случае программа может перестать компилироваться и даже отображать форму в дизайнере Visual Studio. 1.9. Запуск и работа с программой Запустить программу можно выбрав в меню Отладка (Debug) команду Начать отладку (Start Debugging). При этом происходит трансляция и, если нет ошибок, компоновка программы и создание единого загружаемого файла с расширением .exe. На экране появляется активное окно программы. Необходимо помнить! Прежде чем вернуться к редактированию формы и кода необходимо завершить работу программы. (не среды) Для завершения работы программы и возвращения в режим проектирования формы не забудьте закрыть окно программы! 1.10. Динамическое изменение свойств Свойства элементов на окне могут быть изменены динамически – во время выполнения программы. Например, можно изменить текст надписи или цвет формы. Изменение свойств происходит внутри обработчика события некоторого компонента (например, обработчика события нажатия на кнопку). Для этого используют оператор присвоения вида: . = ; Например: label1.Text = "Привет"; определяется на этапе проектирования формы, при размещении элемента управления на форме. Например, при размещении на форме ряда элементов типа TextBox, эти элементы получают имена textBox1, textBox2, textBox3 и т. д. Эти имена могут быть замены программистом в окне свойств (Properties) в свойстве (Name) для текущего элемента. Допускается использование латинских или русских символов, знака подчеркивания и цифр (цифра не должна стоять в начале идентификатора). Список свойств для конкретного элемента можно посмотреть в окне свойств, а также в приложении к данным методическим указаниям. Если требуется изменить свойства формы, то никакое имя элемента перед точкой вставлять не нужно2 , как и саму точку. Например, чтобы задать цвет формы, нужно просто написать: BackColor = Color.Green; 2 Можно не указывать. А можно указать для четкого понимания кода программы. То есть указывается переменная Form1 или Form2, Form3 и т.д. для последующих форм. Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 11 Основные свойства компонентов форм в среде MS Visual Studio (дополнено) Каждый компонент, размещенный на форму, и сама форма, имеют множество свойств – поля с параметрами. Список свойств текущего/выделенного компонента (выбранного в дизайнере) отображается на вкладке Properties. Конечно, для сложных проектов, может потребоваться любое из свойств вынесенное на вкладку Properties. Но в простых проектах (начальных, учебных) используется небольшой набор свойств, часто встречающихся почти у всех компонентов. Необходимо помнить, что свойств много, поэтому они разбиты на группы. И одно и тоже свойство у разных компонентов входит в одну и ту же группу, что облегчает их поиск у нового, незнакомого компонента. К основным свойствам можно отнести: Text (Appearance) – отображаемое текстовое значение на локальном языке (русском) или другом; на форме, в метках – наименование; в полях редактирования это содержимое поля – текст набранный пользователем. Location (Layout) – координаты левого верхнего угла по отношению к рабочей области формы (холст, Canvas). Size (Layout) – размер компонента3 . Enabled (Behavior) – компонент является видимым, но неактивным/активным в зависимости от значения true или false; например, на такую кнопку или пункт меню пользователь может нажимать, но команда не будет выполняться. Часто этим полем управляет программа, если требуется деактивировать команду, на некотором этапе работы. Visible (Behavior) – компонент становится видимым или невидимым (не отображается на форме) в зависимости от значения true или false. Checked (Appearance) – наличие/отсутствие галочки; некоторые компоненты позволяют управлять переключением в два или более положения; такое свойство фиксирует одно из значений true/false, а на компоненте внешне отображается или не отображается галочка. (Name) (Design) – имя компонента в программе; пишется по правилам идентификатора – на английском языке, начинается с буквы, единым словом (без пробелов). Это в общем-то и не свойство компонента, а идентификатор для среды разработки – имя по которому собственно и обращаться к этому компоненту в тексте программы, например, чтобы получить текст из однострочного редактора и т.п. Необходимо понимать, что эти свойства вынесены в интерфейс среды, чтобы разработчику было удобно их настраивать, при разработке формы. Но все эти свойства (и другие) доступны из кода программы. То есть программа, если это необходимо, может менять их значения в ходе функционирования. В тексте программы свойства компонентов это конструкция с которой можно оперировать как с переменной – присваивать или считывать её значения. Но за таким простым действием в программе спрятан набор действий, который необходимо совершить если выполнено присвоение нового значения, или выполняют чтение. 3 Свойства Location и Size так указаны на вкладке Properties. Из программного кода с параметрами размера компонента и положения его на форме необходимо по-другому – свойства Top, Left, Height, Width. Как из программного кода работать именно с параметрами Location и Size можно спросить и преподавателя. Адаптировано и дополнено для классов 102÷104 ИК ТПУ. Рыбалка С.А. 12 Программное использование свойств включает два ключевых момента: а) Свойство является частью некоего компонента, поэтому указывается составное имя – .. (Цепочка имён может быть и подлиннее, так как нужный компонент, может быть частью другого компонента). б) Свойству присваивают (или считывают) значения соответствующего типа, например: checkBox1.Checked = true; // для булевских свойств textBox1.Text = “Город Томск!”; // для текстовых значений button1.Width = 125; // для числовых значений Регулирование (присваивание значений) размеров и положения компонента из программного кода осуществляется через свойства Top (верхний край), Left (левый край), Height (высота), Width (ширина). Это можно осуществить следующими операторами: button2.Top = 10; button2.Left = 350; button1.Height = 100; button1.Width = 150; Считывание значений также осуществляется через эти свойства. Свойства Location и Size для считывания и установки значений в программном коде можно использовать тоже. Но это делается более громоздкой конструкцией языка C#. Помимо это необходимо помнить, что компоненты ‘ведут двойную жизнь’ – во время разработки некоторые свойства ‘не работают’, например, Visible, чтобы разработчик всегда имел доступ к компоненту на форме. Или, наоборот, при разработке формы положение и размер компонентов легко изменяются ‘мышью’, а при работе приложения только через изменение значений соответствующего свойства.