Размещаем объекты на форме

Что на Рис. 1.4 должно вас больше всего интересовать, так это серый прямоугольник или квадрат, расположенный на белом фоне. Он покрыт сеткой из точек и имеет заголовок Form1. Это так называемая форма. Если форму вы по какой-то причине не видите или впоследствии потеряли из виду, то в главном меню окна VS выберите View ® Designer.

Что же это такое – форма? Вспомним нашу игрушечную железную дорогу. Так вот, форма – это пустой стол, тот самый стол, на котором мы эту дорогу будем собирать. Когда вы запустите проект, он станет приложением Windows, а форма станет окном Windows, в котором будет работать ваше приложение.

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

Начнем работу над проектом с 1 этапа. Чтобы собрать железную дорогу, нам нужны объекты: рельсы, вагоны и т.п. Чтобы создать проект, нам тоже нужны объекты – и VB нам их предоставляет. В левой части главного окна VS мы видим значок . Поставим на него курсор мыши и, может быть, даже щелкнем. На экран выплывет слева вертикальное серое окно, на окно не похожее (Рис. 1.5).

Рис. 1.5

Это окно Toolbox(«Ящик» с элементами управления), то есть набор наиболее популярных стандартных объектов, применяемых при создании проектов на VB (это наши паровозики и вагончики). Каждый объект-элемент управления имеет свое название: кнопка, текстовое поле, таймер, графическое поле и т.п.

Если вы убрали мышку с окна Toolbox, то оно уплывет обратно, мудро освобождая дефицитное место на экране. Чтобы снова увидеть его, поставьте опять мышку на значок.

Замечание: Понятие «Объект» – центральное в VB. Оно имеет гораздо более широкий смысл, чем форма или элемент управления, но поскольку других объектов мы пока не знаем, я буду называть объектами именно их. Постепенно я буду расширять и уточнять понятие объекта.

Ну что ж, начнем сборку. Я пока не буду объяснять «зачем», а буду только объяснять «что» и «как». Поместим на форму так называемую кнопку. Для этого щелкнем в Toolbox по кнопке(Button). Мышиный курсор приобретет характерный вид крестика с кнопкой. Затем проведем мышкой внутри формы небольшую «рамочку». Что значит провести «рамочку»? Это значит поместить мышиный курсор куда-нибудь внутрь формы, нажать на левую клавишу мыши и, не отпуская клавишу, «протащить» мышь немного наискосок. При этом за курсором будет тянуться «рамочка». Отпустите мышь. На месте рамочки возникнет кнопка с надписью Button1. Впрочем, рамочку можно и не проводить, достаточно просто щелкнуть где-нибудь внутри формы.

По краям кнопки вы увидите 8 белых квадратиков - маркеровизменения размеров (Рис. 1.5). Если щелкнуть по форме мимо кнопки, они пропадут, если снова щелкнуть по кнопке – появятся. Только не надо пока двойных щелчков (если все-таки сделаете двойной щелчок, у вас на месте прежнего откроется другое окно. В этом случае просто выберите в окне закладку Form1.vb [design] и все вернется на место. Перетащите мышкой любой из маркеров – размеры кнопки изменятся. Можно таскать кнопку по форме, если ухватиться мышью не за маркер, а за любое место внутри кнопки. Можно передвигать кнопку клавишами перемещения курсора на клавиатуре. Чтобы уничтожить кнопку, щелкните по ней правой клавишей мыши и в выскочившем контекстном меню выберите опцию Delete или нажмите клавишу стирания на клавиатуре. Проделайте все это. А теперь, если вы ее уничтожили, то снова создайте.

Аналогичным образом поместите из Toolbox на форму еще одну кнопку, а также следующие объекты: метку (Label), несколько флажков (CheckBox), несколько элементов переключателя (RadioButton), горизонтальную полосу прокрутки (HScrollBar), вертикальную полосу прокрутки (VScrollBar) итекстовое поле(TextBox). Расположите их примерно так, как в левой половине Рис. 1.6.

Рис. 1.6

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

Обратите внимание на слово [design] (дизайн, проектирование) в заголовке главного окна VS. Оно говорит о том, что в настоящий момент VB находится в режиме проектирования, во время которого мы можем собирать, конструировать наш проект (1 этап) и писать для него программу (2 этап). Белое окно с формой, в котором мы выполняем конструирование, называется окном конструктора (дизайнера) форм(Windows Forms Designer).

Обратите внимание, что когда мы размещаем на форме несколько одинаковых объектов, например Button, VB надписывает их с указанием порядкового номера: Button1, Button2, Button3…

Пробный запуск

Запускаем. Пока мы с вами создаем то – «сами не знаем что». Ведь никакой конкретной задачи мы перед собой не поставили за исключением туманного пожелания «покрасить форму». Тем не менее, перескочим через 2 этап (составление программы) и сразу выполним 3 этап, то есть запустим наш бессмысленный проект на выполнение. Для этого щелкнем мышкой по кнопке (Start)на панели инструментов(не путайте панель инструментов с Toolbox – «ящиком» элементов управления) или нажмем клавишу F5.

Запустили. Исторический момент. Что мы видим? Некоторое время проект компилируется, то есть с языка VB переводится на язык близкий к машинному (подробнее, что такое компиляция, написано в Приложении 1). Через несколько секунд работы компьютера на экране появляется «еще один экземпляр» нашей формы. Это и есть наше приложение Windows, то есть запущенный, откомпилированный и работающий проект (см. правую половину Рис. 1.6). То, что мы видим, это уже не форма, а окно приложения. Оно отличается от формы, как дочь от матери, то есть они очень похожи. Поэтому в дальнейшем я часто буду называть работающее окно нашего приложения тоже формой. Я надеюсь, вы не будете путать ее с ее родительницей в окне проектирования.

Мы видим, что наша работающая форма все-таки немного отличается от формы на этапе проектирования, из которой она родилась: пропали точки, преображенная форма потеряла связь с главным окном VS и ведет себя, как независимое окно, каковым она, в общем, и является. Для убедительности сверните главное окно VS на панель задач. Теперь форма одна царит на экране. Ее можно таскать по всему экрану, ухватившись за заголовок, и ее значок вы можете видеть на панели задач Windows. Она надлежащим образом реагирует на щелчки по кнопкам в ее правом верхнем углу. Если подвести острие курсора к краю или углу формы, то можно менять ее размеры. А вот размеры кнопок и других элементов мы не можем больше менять.

Зато теперь на кнопки можно нажимать мышкой. Нажимаем. Ничего не происходит. Естественно – мы ведь не написали программу, объясняющую компьютеру, что нужно делать при нажатии на кнопку. В текстовое поле теперь можно вводить текст и как угодно там его менять и стирать. Щелчками мыши вы можете ставить и убирать флажки (галочки) в элементах CheckBox. Щелчками мыши вы можете устанавливать переключатель в какое угодно положение из четырех. Вы можете мышкой перемещать ползунок на полосах прокрутки. Но все это без толку. Компьютер никак не реагирует, что бы вы там ни делали. Причина та же.

Итак, мы видим, что без программы наш проект не стоит ни гроша.

Если работающая форма находится на фоне какого-нибудь окна (например, главного окна VS) и вы случайно щелкнете по этому окну мышкой мимо формы, то форма пропадет из вида, так как будет загорожена этим окном. Не беда – щелчок по значку формы на панели задач Windows вернет ее на передний план.

Обратите внимание на слово [run] (бег, работа) в заголовке главного окна VS. Оно говорит о том, что в настоящий момент VB находится в режиме работы, то есть в режиме выполнения проекта (3 этап), во время которого мы ни собирать проект (1 этап), ни писать для него программу (2 этап) не можем, о чем сообщают слова [Read Only] в том же заголовке.

Завершаем. Завершим выполнение проекта кнопкой (Stop Debugging) на панели инструментов или щелкнув по крестику в правом верхнем углу работающей формы. VB вышел из режима [run] и вернулся в режим [design]. Теперь в проекте можно что-нибудь поменять и снова его запустить. И так далее.

Сетка. В режиме проектирования мы видим, что форма покрыта сеткой из точек. Цель у сетки двоякая. С одной стороны она помогает нам визуально оценивать положение элементов управления на форме, с другой стороны мы можем настроить VS так, чтобы очертания элементов управления располагались строго по линиям сетки. Это помогает программисту делать элементы управления одинаковыми по величине и располагать их на форме правильными рядами.

Пишем программу

Давайте придумаем себе задачу для нашего проекта. Пусть на экране при нажатии кнопки или, скажем, при передвижении ползунка на полосе прокрутки что-нибудь происходит. Легко сказать – пусть! Для этого нужно знать, что вообще умеет делать VB при нажатии на кнопки или при передвижении ползунков. А если даже мы это знаем, то все равно не знаем, как это приказать, то есть как правильно написать программу. Ну что ж. Программирование мы будем изучать постепенно и постепенно всему научимся, а сейчас я выберу что-нибудь самое простое и подскажу, как это делается. К компьютеру не подходите, пока я не дам знак.

Придумали оператор. Забудем пока о «покраске формы» и прикажем компьютеру для начала при нажатии кнопки Button1 сделать ширину горизонтальной полосы прокрутки равной 100 пикселямH. Команда (оператор) для этого пишется так:

HScrollBar1.Width = 100

Разберемся, что здесь написано.

HScrollBar1 – это имя нашей горизонтальной полосы прокрутки (Его дал VB. О том, как узнавать имена объектов и изменять их, я скажу позже).

Width – переводится «ширина».

Смысл оператора очевиден: это приказ сделать ширину объекта HScrollBar1 равной 100.

Теперь о том, что обозначают точка и знак равенства. Пока правило такое:

Слева от точки мы записываем имя объекта, справа от точки – название его свойства, а справа от знака равенства – значение этого свойства. Точку нужно писать обязательно.

Вот аналогии:

Коля.рост = 140

Бразилия.климат = жаркий

Нина.фамилия = Рыбакова

 

В будущем мы увидим, что свойство само может быть объектом, а значит, у него тоже могут быть свои свойства. Вот аналогии:

Нина.фамилия.число букв = 8

Буратино.нос.длина = 30

Танк.двигатель.шестеренка.материал = сталь

 

Говорят: Свойству Width объекта HScrollBar1 присваивается значение 100.

Окно кода. Теперь поговорим о том, как нам сделать, чтобы компьютер выполнил этот оператор, причем именно при нажатии на кнопку Button1, а не в какой-либо другой момент. Снова садитесь за компьютер. Вы еще не стерли наш проект? Проверьте, находимся ли мы в режиме проектирования [design]. Сделайте двойной щелчок по кнопке Button1. Перед вами возникнет новое окно – окно программного кода или просто окно кода(Рис. 1.7).

Рис. 1.7

Будем называть кодомлюбой текст программы. В окно кода будем записывать весь код нашего проекта (а большие проекты могут использовать и несколько окон кода).

Если по какой-то причине окно кода вы потеряли из виду, то в главном меню окна VS выберите View ® Code.

Заготовка процедуры. Мы видим, что в окне кода уже что-то написано. Это написал сам VB. Ситуация, как в ресторане: мы еще ничего не заказали, а соль и перец уже на столе. Кроме этого, многое из написанного Бейсиком мы даже и не видим, да и знать нам этого невидимого пока не надо. Если вы человек опытный и вам любопытно увидеть этот невидимый код, щелкните по малюсенькому плюсику возле строки Windows Form Designer generated code, но не каждому затем удастся отыскать получившийся минусик и щелкнуть по нему, чтобы все вернулось к прежнему виду. Если вы все-таки попались и не знаете, как выбраться из ситуации, то или бросьте этот проект, или почитайте 6.1.3.

Остановимся пока на смысле двух видимых на рисунке строк.

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Слово Subобозначает «процедура». Слово Clickозначает «щелкнуть мышкой». На смысле остальных слов в строке пока не останавливаемся. Эту строку можно вольно перевести как «Что делать, если щелкнуть мышкой по кнопке Button1». А более точно так: «Заголовок процедуры, в которой компьютеру пишется инструкция, что делать, если человек мышкой нажмет на кнопку Button1».

Ниже оставлено свободное место и там уже мигает курсор, приглашая нас вводить туда какие нам угодно операторы. Они-то и будут выполнены при щелчке по кнопке.

Еще ниже находится строка End Sub, что означает «конец процедуры». Все пространство между этими двумя строками, которое мы будем заполнять операторами, будем называть телом процедуры.

Таким образом, мы видим перед собой не что иное, как заготовку процедуры, которая должна выполниться при щелчке по кнопке Button1. Услужливый VB догадался создать эту заготовку, когда мы дважды щелкнули по кнопке Button1.

Вам нужно ввести с клавиатуры на свободное место между этими двумя строками наш оператор

HScrollBar1.Width = 100

Если у вас нет опыта ввода текста в компьютер, то прервитесь и изучите Приложение 2. Вы не имеете права допустить ни малейшей ошибки в строке. Даже лишний пробел может быть ошибкой.

Вводим оператор. Начнем потихоньку вводить. Введите слово HScrollBar1 и точку, причем VB простит вас, если вы где-нибудь вместо заглавной буквы введете строчную или наоборот. Как только вы введете точку, VB (чтобы вам не утомлять свои персты вводом слова Width) развернет перед вами список всех уместных после точки слов. Вам останется только сделать двойной щелчок на нужном слове (Рис. 1.8) или выделить его и нажать на клавиатуре клавишу Tab.

Рис. 1.8

Если вам не хочется прокручивать этот список в поисках нужного слова, вы можете просто начать вводить это слово с клавиатуры сразу после точки, компьютер тогда сам прокрутит список и нужное слово найдет и выделит. Не ленитесь после этого все же нажать клавишу Tab, пусть даже слово и совсем почти вами дописано, потому что это обережет вас от возможных грамматических ошибок.

Но вот ввод оператора закончен. Уберите теперь текстовый курсор из строки, которую вводили. VB при этом проверит грамматическую правильность строки и немного подправит ее внешний вид, исходя из своих представлений об изяществе. Если он обнаружит ошибки, то ошибочные части строки подчеркнет. Если вы увидели, в чем ошибка, исправьте ее. Если не увидели, то читайте 1.3.8.

Теперь окно кода должно иметь такой вид:

Public Class Form1

Inherits System.Windows.Forms.Form

 

Windows Form Designer generated code

 

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

HScrollBar1.Width = 100

End Sub

End Class

 

Перед вами готовая процедура. Проверьте, не ввели ли вы нечаянно что-нибудь выше, ниже или правее этих строк. Если ввели, то сотрите.

Запускаем проект. Пришла пора снова запускать проект. Предположим, что ошибок в коде нет. Щелкните кнопку Start. На экране опять появляется знакомый вид работающей формы. Щелкните по кнопке Button1 – горизонтальная полоса прокрутки изменила свою ширину (Рис. 1.9).

Рис. 1.9

Поздравляю! Ваш первый проект заработал. Щелкните еще раз. Ничего не изменилось. Естественно. Завершим выполнение проекта.

Если у вас при запуске получилось не то, что нужно, или же VB выдал какое-то сообщение, прочтите чуть ниже подраздел 1.3.8.

Быстрое переключение между окнами кода и конструктора. Над окном кода вы видите закладки (Рис. 1.7). Вы можете в любой момент щелкнуть по любой из них и увидеть соответственно стартовую страницу или окно конструктора форм, или снова окно кода.