Указываем в двойных кавычках значение –путь, где находится блокировщик и его название: "C:\blok.jar"(см. рис. 7.32), т. е. путь к блокировщику,запускаемому при старте Windows.
Рис. 7.32
Нажимаем Ok, появляется новое значение (см. рис. 7.33).
Рис. 7.33
Закрываем реестр. Для проверки работы блокировщика выполним перезапуск операционной системы Windows: закроем все приложения и сделаем рестарт Windows.
Происходит перезапуск операционной системы, начинается её загрузка.
Из автозагрузки загружается блокировщик, содержащийся в корне диска C:\.Запускается Windows, появляется фон рабочего стола.Появился блокировщик Windows.
При запуске Windowsнаблюдается такая последовательность:
Загружается операционная система, рабочий стол, другие приложения, и затем, в определенный момент,автоматически загружается блокировщик,перекрывающий сверху остальные окна.Вызовем Диспетчер задачWindows. Он появляется и сразу же перекрывается окном блокировщика.
Таким образом,приложение работает успешно, выполнение нашей задачи закончено.
Занятие 8. "Визуальные средства разработки. Создание интерфейса приложения"
На этом занятии мы познакомимся с визуальными средствами разработки приложений Java. Они используются при создании интерфейсов для пользователя.
На предыдущих занятиях мы создавали интерфейсы пользователя,добавляли на форму такие элементы, как текстовые поля, надписи, кнопки. Эти элементы являются основными, они присутствуют на любой форме.
Добавлялись они из программного кода.
Например, для создания кнопки, использовалась переменная типаJButton, при помощи неё создавался объект типа JButton, затем задавались характеристики этого объекта. Объект добавлялся на панель, панель вкладывалась в окно JFrame.
При разработке крупных приложений такой подход не очень удобен,уходит много времени на рутинную работу.Приходится задавать разные характеристики из программного кода: отступы в пикселях,ширину, высоту элементов и т. д.
В реальной практике при разработке приложений часто применяются,так называемые, визуальные средства разработки, которые позволяют автоматизировать некоторые процессы при помощи добавления элементов из панели инструментов мышью. Так,например, в панели инструментов разработчик может выбрать кнопку,поместить её на форму, задать при помощи мыши её размеры, и она сразу появится на форме создаваемого приложения. Скорость разработки интерфейсов пользователя повышается в несколько раз. Познакомимся такими визуальными средами разработки.
Откроем среду разработкиEclipseдля Javaи создадим новый проект(Файл –Создать, Проект Java). Проект назовёмlesson20и нажмем кнопку "Готово".
Среда разработки Eclipse, кроме создания интерфейса пользователя из программного кода, позволяет использовать и визуальные средства разработки.
Для того чтобы воспользоваться этим функционалом в средеEclipse, выделим созданный нами проект, нажмём правую клавишу мыши, в контекстном меню выберем кнопку "Создать".
В появившемся окне, в самом низу, выбираем раздел "Прочее" (см. рис.8.1). В появившемся окне, в списке разделов открываем раздел WindowBuilder.
Рис. 8.1
В появившемся списке откроем раздел Swing Designer(см. рис. 8.2):
Рис. 8.2
Среди содержимого этого раздела выбираем JFrame (см. рис. 8.3).
Рис. 8.3
JFrame –это класс окна, мы его многократно использовали. При помощи класса JFrameсоздаётся форма окна, выводимая на экран.Нажмем на кнопку "Далее", и введем имя,например, prog(см. рис. 8.4),нажимаем кнопку "Готово".
Рис. 8.4
Появилась начальная заготовка приложения (см.рис. 8.5).
Эта заготовка предоставляется средой разработки Eclipseкак начальный каркас для создания приложений.Рассмотрим, из каких элементов она состоит.
Две основные закладки,которые понадобится периодически переключать, находятся внизу (см. рис. 8.5).
Рис. 8.5
Нажмем на закладку"Design" (см. рис. 8.6), перейдем на вторую закладку.
Рис. 8.6
Именно на этой закладке и находится редактор, который используется для создания формы окна приложения.
Появились следующие компоненты:
В самой правой части расположено пустое окно –оно создано автоматически и предоставлено для разработки. Его можно наполнять элементами формы.
Если осуществить запуск,не добавив ни единой строки программного кода и не поменяв ни единой настройки,изначально видно созданное окно. Это окно пока пустое, без элементов (см. рис. 8.7).
Рис. 8.7
В окне нашего проекта, в средней его части мы видим панель инструментов, позволяющую выбирать элементы для добавления на форму (см. рис. 8.8).
Рис. 8.8
С некоторыми мы уже знакомы. Например, с кнопкой JButtonв разделе Компоненты. Это та самая кнопка, которую мы уже много раз добавляли программно. Кроме этого мы видим знакомые нам элементы:JLabel–метка или надпись;JTextArea–текстовое поле (оно может быть многострочным).
Рассмотрим принцип работы с визуальным редактором.
При помощи мыши выбирается нужный элемент, например,кнопка и помещается на форму.
В этот момент из соседней закладке в самом низу, левее от закладки Design,можно вернуться на программный код.
После добавления в визуальном редакторе нового элемента, в программном коде автоматически формируются строки программного кода,добавляющие кнопку на форму. Эти строки программного кода нам уже знакомы.
Прежде чем начать работу с формой, нужно сделать небольшую настройку в свойствах панели:
Обратим внимание на самую левую часть окна –здесь представлен список свойств (см. рис.8.9), элемента формы.
Рис. 8.9
На нашей форме есть2элемента–сама форма(JFrame) ипанель(JPanel), к которой можно "прикрепить" элементы –кнопки, надписи и т.д.
Если нажать на заголовок окна, по контуру формы появляется рамка выделения, по границам рамки располагаются чёрные квадратики, захватывая которые,можно менять размер формы (см. рис. 8.10).
Рис. 8.10
Попробуйте изменить размер формы –в квадратных скобках видно, сколько в данный момент в пикселях составляет размер формы (см. рис. 8.11):
Рис. 8.11
В примере, показанном на рисунке первый параметр (450)– ширина,второй (111) – высота.
Установив нужный нам размер, запустим приложение. Окно имеет меньший размер, мы его изменили.
Теперь однократным нажатием левой клавиши мыши нажимаем на внутреннюю часть окна. Панель окна выделилось рамкой с такими же черными квадратиками (см. рис.8.12).
Рис. 8.12
Именно эту панель мы ранее многократно вкладывали в окно при помощи переменной типа Container. По умолчанию она уже присутствует внутри окна, и можно помещать на неё различные элементы.
Обратите внимание!!!Список свойств в левой части окна соответствует выделенному элементу на форме!
Щёлкнем по заголовку окна, выделим все окно JFrame, список свойств,представленный слева, изменился (см. рис. 8.13).
Рис. 8.13
Нажимаем кнопкой мыши на панель –выделяется панель, список свойств снова меняется (см. рис. 8.14).
Таким образом,действительно, свойства, отображаемые в левой части –это свойства для элемента, выделенного в текущий момент.
Рис. 8.14
Выделяем панель окна,выбираем свойство Layout(см. рис. 8.14). Справа находится стрелка,открывающая список.
Нажимаем её и выбираемAbsolute layout (см. рис. 8.15). Это свойство даёт возможность произвольного размещения элементов формы на панели окна,т.е. в любом месте.
Рис. 8.15
Если указать здесь другое свойство, элементы будут размещаться друг относительно друга,свободное размещение будет отключено.
Первое, что мы добавляем на панель –кнопку. Для этого выбираем в центральной части в компонентах JButton(см.рис. 8.16).
Рис. 8.16
Курсор мыши наводим на панель. Появляется кнопка (см. рис. 8.17). Конкретно она ещё нигде не размещена. Перемещая её по панели, можно выбрать для неё подходящее место, и затем нажать ещё раз левую клавишу мыши.
Рис. 8.17
Кнопка появляется на панели (см. рис. 8.18).
Рис. 8.18
По умолчанию стоит название кнопки "New button". Это название можно удалить и задать свое, например, "Кнопка". Выполним запуск приложения.
В окне появилась Кнопка, только что добавленная в визуальном редакторе (см. рис. 8.19).
Рис. 8.19
Посмотрим, как изменился программный код после добавления кнопки.Перейдем в нижней части на соседнюю левую закладку, в программный код (см. рис. 8.20):
Рис. 8.20
Здесь мы увидим 3 строки(см. рис. 8.21):
Рис. 8.21
Первая строка–создание нового объекта (new JButton). Этот объект записывается в переменную buttonтипаJButton.
При создании кнопки в кавычках указываются символы, из которых состоит название кнопки. В данном случае,символы представлены в виде кодов символов. Каждая буква отображается в виде кода символов, визуально такое отображение воспринимается неудобно, но среда разработки делает это автоматически.Надпись, присутствующую на кнопке, всегда можно посмотреть в удобном виде на закладке Design.
В программном коде надпись прописывается в, так называемом,формате Unicode.
JButton("\u041A\u043D\u043E\u043F\u043A\u0430")
Каждый символ представлен группой. Буква "К", первая буква названия ("Кнопка"), представляет собой код символа: 041А. Каждый символ имеет свой код,причем этот код уникален. Среда разработки автоматически прописывает название в виде кодов.
Вторая строка–задание размеров и расположения кнопки заданы при помощи метода setBounds. Напомним,первые две характеристики –отступы её верхней левой угловой точки, третий параметр–ширина в пикселях, четвертый параметр – высота.
Третья строка при помощи метода addдобавляет Кнопку на панель.
contentPane.add(button);
contentPane–переменная типа JPanel,панель, многократно создаваемая на предыдущих занятиях.
Таким образом, если при использовании визуальной среды разработки добавить мышью на форму кнопку,автоматически прописываются строки программного кода. Без использования визуального редактора их пришлось бы писать вручную.
Вернёмся на закладку визуального редактора.
Перейдем на закладкуDesign. Щелкнем левой клавишей мыши на кнопку и увидим рамку (см. рис. 8.22), выделяющую кнопку и чёрные квадратики, при помощи которых можно менять размер кнопки.
Рис. 8.22
Захватим нижний правый квадрат, зажмём левую клавишу мыши, изменим размер кнопки (см. рис.23). Она стала больше.
Рис. 8.23
Вернёмся в программный код. Внутри скобок метода setBoundsтеперь стоят другие значения (см. рис.24), т. е. значения, созданные в визуальном редакторе, автоматически изменились и здесь. Визуальный редактор напрямую связан с программным кодом. Если в программном коде будет допущена ошибка,визуальный редактор некорректно отобразит саму форму.
Рис. 8.24
Важно!!!Все изменения, сделанные в визуальном редакторе, автоматически происходят в программном коде, и, наоборот, изменения, сделанные в программном коде, автоматически отображаются в визуальном редакторе.
Выделим и удалим строки,создающие кнопку (см. рис.8.21), прикрепляющие её к панели, задающие её размеры и положение на панели.
Переходим в визуальный редактор –кнопка с панели исчезла, т. к. в программном коде удалены добавляющие её строки.
Таким образом,визуальный редактор позволяет добавлять элементы формы при помощи панели инструментов и вносить изменения в программном коде.
Ну а теперь напишем первое приложение при помощи визуального редактора:
Создадим текстовую надпись с названием "Введите имя", текстовое поле и кнопку. Если пользователь ничего не ввёл, при нажатии на кнопку будет выводиться сообщение "Введите имя!".Если пользователь ввел своё имя,будет выдаваться сообщение "Привет!" и имя, указанное пользователем.
Для решения этой задачи понадобятся три основные элемента:
o JLabel–метка (вводимая текстовая надпись).
o JTextField–текстовое поле.
o JButton– кнопка формы(см. рис. 8.25).
Рис. 8.25
Создадим эти элементы.Начнем с текстовой надписи JLabel. В центральной части раздела Компоненты левой клавишей мыши выбираем JLabel, переводим курсор мыши на форму. Нажимаем левую клавишу,надпись фиксируется в выбранном месте.
Пишем "Введите имя:", нажимаем клавишу "Enter", появляется надпись. Если надпись не отображается на форме полностью, увеличим размер элемента.
Если необходимо передвинуть элемент на форме, он выделяется рамкой щелчком левой клавишей мыши, удерживается мышью при нажатом положении клавиши и перемещается в любое место формы. В выбранном месте левая клавиша мыши отпускается, и элемент появляется в новом месте. Перейдём в программный код.
После добавления метки появились строки:
JLabel label =
new JLabel("\u0412\u0432\u0435\u0434\u0438\u0442\u0435\u0438\u043C\u044F:");
label.setBounds(25, 26, 88, 14);
contentPane.add(label);
Т.е. создана переменная под названием label, типа JLabel–текстовая надпись. В скобках, в двойных кавычках находится запись в формате Unicode.
Метод setBoundsустанавливает размеры надписи. Как обычно, первые 2параметра –координаты верхней левой точки: 88–ширина и 14–высота. В данном случае, это размеры области, внутри которой вписана надпись.
Третья строка, при помощи метода add, добавляет данную надпись к панелиcontentPane.
Далее, снова переходим на закладку Designи создадим текстовое поле –элементJTextField.После создания перейдем в программный код- появились новые строки, которые система опять создала автоматически.
textField = new JTextField();
textField.setBounds(121, 23, 164, 20);
contentPane.add(textField);
textField.setColumns(10);
Т.о. создан объект JTextField–текстовое поле и помещен в переменную под названием textField. При помощи метода setBoundsзаданы его размеры, положение на панели.При помощи метода addэтот элемент добавлен к панелиJPanel.
Возвратимся на закладкуDesignи создадим кнопку. Выбираем элементJButton, размещаем кнопку на форме, задаем ей имя –"Вход".
Меняем её размеры,выравниваем так, чтобы всё было на одном уровне. Надпись можно сделать поуже,уменьшить размер прямоугольной области,содержащей эту надпись.
Возвращаемся в программный код. Переходим в самую нижнюю часть и видим строки, добавляющие кнопку на форму.
JButton button = new JButton("\u0412\u0445\u043E\u0434");
btnNewButton.setBounds(295, 22, 89, 23);
contentPane.add(btnNewButton);
Запустим приложение на исполнение. Появилась надпись "Введите имя", а также текстовое поле – в него можно вводить какую-либо надпись (см. рис.8.26).
Рис. 8.26
Рассмотрим свойства этих элементов.
Окно, находящееся в левой части, отображает свойства присутствующих на форме элементов. Здесь всегда отображаются свойства выделенного элемента. В данном случае, выделена панель(см. рис. 8.26) (об этом говорит идущий по краям панели контур с чёрными квадратиками).
Если щёлкнуть левой клавишей мыши на надпись, выделяется надпись. Свойства в левой части изменились,теперь это свойства надписи.
Если нажать на текстовое поле (см. рис.8.27), то появятся его свойства.
Рис. 8.27
При нажатии на кнопку они снова меняются –теперь отображаются свойства кнопки.
Основные свойства могут быть разными, они отличаются в зависимости от типа элемента.
Однако любой элемент формы имеет одно свойство, присущее всем элементам –это основное его свойство, называемоеVariable. Для выбранной текстовой надписи его значение–label. label–имя переменной,доступной внутри программного кода. Таким образом, в левой части идет название свойства, в правой части – его значение.
Перейдём в программный код. В программном коде тип переменной под названием label–типJLabel.
JLabel label =
new JLabel("\u0412\u0432\u0435\u0434\u0438\u0442\u0435\u0438\u043C\u044F:");
Если поменять имя этой переменной, например, на label1, вновь перейти в программный код, можно увидеть, что имя переменной в программном коде изменилось и стало также label1.
Таким образом,изменение свойств, сделанное в визуальном редакторе, приводит к автоматическому изменению и в программном коде.
И наоборот, если поменять значение свойства в программном коде –в визуальном редакторе оно также изменится.
Рассмотрим основные свойства элементов на примере только что созданных элементов "Надпись", "Кнопка", "Текстовое поле".
К таким свойствам относятся характеристики элемента формы,такие как цвет надписи, её размер, цвет фона и др.
К основным можно отнести и свойство под названием "text"–текстовое описание элемента формы.
В нашем случае значение свойства "text" (см. рис. 8.28)–это и есть наша надпись ("Введите имя"), отображаемая на элементе формы.
Рис. 8.28
Откроем свойства кнопки, выделив этот элемент на форме(см. рис.8.29):
Рис. 8.29
В самом верху, в палитре свойств найдем свойство Variable(см.рис. 8.30). Значение этого свойства – имя переменной, в которую будет записан наш элемент. По умолчанию стоит значениеbutton. Такое наименование было дано средой разработки автоматически при создании кнопки в визуальном редакторе.
Рис. 8.30
Значением свойстваtext, является та надпись, которую мы сделали на кнопке–"Вход"(см. рис. 8.31).
Рис. 8.31
Любое текстовое представление элемента задается при помощи свойства "text". Если нужно поменять эту надпись, можно в палитре свойств изменить значение этого свойства –элемент получит новую надпись автоматически.
Выделим всю форму.(см. рис. 8.32),перейдём к свойству Title.
Рис. 8.32
Текстовое представление для формы находится в свойстве "Title". Зададим значение этого свойства, например,"Мое окно"(см.рис. 8.33).
Рис. 8.33
Сверху формы появилась надпись "Мое окно"(см. рис.8.34).
Рис. 8.34
Поменяем значение еще одного свойства для формы: иконку, по умолчанию отображаемую в виде чашечки кофе заменим на другую.
Для выбора новой иконки выбираем в палитре свойство iconImage и нажимаем кнопку ("Выбрать") (см. рис. 8.35).
Рис. 8.35
В появившемся окне выбираем пункт –resources.jar.Здесь хранятся все иконки, присутствующие в среде разработки. Раскроем содержимое(см. рис. 8.36).
Рис. 8.36
Выберем разделjavax.swing, в списке видим несколько иконок. Возьмем иконку Inform.gif(см. рис. 8.37):
Рис. 8.37
Нажмем на кнопку "Ok".Иконка окна изменилась на новую (см. рис. 8.38), теперь она представляет собой обычный графическийgif-файл размером32х32пикселя по ширине и высоте, соответственно.
Рис. 8.38
Мы перечислили основные свойства элементов.
Теперь перейдем к программированию кнопки. Чтобы обработать значение, введённое пользователем после того, как он нажмет на кнопку "Вход", нужно его проанализировать. Другими словами нужно написать обработчик события (нажатия пользователем на кнопку "Вход"). Что мы сейчас и сделаем. В визуальном редакторе обработчики события присутствуют в готовом виде. Нажатие на кнопку –основное событие для кнопки, но могут присутствовать и другие события.
Запустим программу на исполнение.
Перед нами находится окно. Предположим, пользователь нажимает на кнопку – это событие. Пользователь наводит курсор на кнопку –это тоже событие, событие другого типа.Пользователь убирает курсор с кнопки–это также событие, уже третьего типа.
Для того, чтобы увидеть список событий, присутствующих у текущего элемента формы, его выделить, нажав на него левой клавишей мыши, перейти в левую часть,туда, где находятся свойства этого элемента, и нажать кнопку .При наведении на нее появляетсянадпись Show events. Еvents–это и есть обработчики событий.
Нажмем на кнопку – появляется объёмный список всех событий, которые могут происходить с этим элементом (см. рис. 8.39).
Рис. 8.39
Например, раздел mouse(см.рис. 8.40)–это все события, связанные с мышью.
Рис. 8.40
Нам интересно событие –нажатие на кнопку, событие называетсяaction-performed (см. рис. 8.41).
Рис. 8.41
Для создания обработчика события при нажатии на кнопку -необходимо выбрать нужный элемент, (в нашем случае кнопку), и два раза щёлкнуть на этот элемент левой кнопкой мыши (см. рис. 8.42):
Рис. 8.42
После этого в программном коде автоматически появляется обработчик события. Он генерируется визуальной средой разработки (см. рис. 8.43).
Рис. 8.43
Обработка события при нажатии на кнопку происходит в методеactionPerformed. При нажатии на кнопку будут исполняться команды, прописанные в фигурных скобках внутри метода.
Вернёмся на время в визуальный конструктор. Вновь выделим кнопку на форме и перейдём в левую часть,туда, где находятся свойства и события.Откроем закладку action -performed.
Здесь прописан номер строки, в которую автоматически вставился обработчик события. Щелкнув два раза по номеру строки мы попадем в сам обработчик.Теперь перейдём в программный код.
Внутри метода actionPerformedнеобходимо прописать программный код, анализирующий данные, введённые пользователем.Программный код представлен ниже.
JButton button = new JButton("\u0412\u0445\u043E\u0434");
Для проведения этого анализа создана переменная типа String–строка под названием str. В эту переменную нужно записать данные,введённые пользователем. Для этого нужно обратиться к текстовому полю.
В визуальном редакторе выделим Текстовое поле, и перейдём к палитре свойств этого элемента. Но вместо списка свойств сразу появился список обработчиков событий, т. к. раньше была нажата кнопка (см.рис. 8.44). Если нужно вернуться к свойствам, необходимо вновь нажать эту кнопку. Таким образом, эта кнопка является переключателем двух разделов –свойств элемента и обработчиков событий.
Рис. 8.44
Оставим раздел"Свойства". нас интересует свойство,находящееся в Variable. Это свойство –textField,имя переменной.
Таким образом, для программного обращения к текстовому полю,необходимо обратиться к переменной с именем textField,она отвечает за текстовое поле. МетодgetTextпозволяет получить текст из текствого поля. Метод trimудаляет пробелы справа и слева текста. Это нужно на тот случай, если пользователь случайно ввел пробелы до или после введенного текста, чтобы не учитывать пробелы.
String str = textField.getText().trim();
В этой строке при помощи переменной textFieldмы обращаемся к текстовому полю и применяем метод getText. Этот метод получит содержимое текстового поля, т. е. надпись введённую пользователем. К полученному значению применим метод trim, который срежет пробелы справа и слева. Результат запишем в переменнуюstr. Таким образом, в переменную strпопадает содержимое текстового поля с удалёнными справа и слева пробелами.
Необходимо проверить,заполнено ли текстовое поле пользователем(ввел ли он свое имя). Для этого используется конструкция if.
В круглой скобке конструкции if,обращаясь к переменной str, после оператора"точка" (.)в списке доступных методов выберем методisEmpty.
Метод isEmptyопределяет будет ли пустой искомая строка ( с англиского"Empty"–пустой). Этот метод возвращает значение типа булево. "Истина" –строка пустая, "Ложь" –в противном случае. В случае, если метод возвратит истинное значение, при помощи диалогового окна, пользователю будет выведена надпись.
Для вызова диалогового окна необходимо обратиться к классу JOptionPane. С при помощи оператора "точка"(.)выберем метод showMessageDialog.
Первый параметр методаshowMessageDialog– родительское окно. Укажем значение метода –null, т. е. пустой параметр. Считаем, что у нашего диалогового окна не будет родительского окна, оно будет выводиться само по себе.
Второй параметр –сообщение в двойных кавычках. Указываем сообщение, выводимое пользователю: "Введите имя!"
Таким образом, если пользователь ничего не ввёл, ему будет выводиться сообщение "Введите имя!"
Перейдем в визуальный редактор, запустим приложение на исполнение. Отобразилось окно, иконка сверху теперь новая, название задано нами. Нажимаем на кнопку "Вход", ничем не заполнив текстовое поле (см.рис. 8.45).
Рис. 8.45
Появляется сообщение -маленькое диалоговое окно с текстом"Введите имя!" (см. рис. 8.46).
("Выбрать") (см. рис. 8.35).
.При наведении на нее появляетсянадпись Show events. Еvents–это и есть обработчики событий.
