Занятие 2. Проектирование интерфейса пользователя




На этом занятии мы научимся проектировать интерфейс пользователя:

- познакомимся с основными элементами интерфейса: кнопками, текстовыми полями, надписями и др.;

- определим схему, по которой элементы интерфейса можно добавить на панель окна приложения;

- с их помощью спроектируем интерфейс нашего нового приложения «Калькулятор»

 

На предыдущих занятиях мы создавали оконные формы, внутри которых размещали панель. На панели выводили некоторые графические объекты.

Сейчас мы научимся добавлять на оконную форму различные элементы интерфейса пользователя: надписи, кнопки, текстовые поля, элементы прокрутки, меню и др. Т.е. те элементы, которые вы можете видеть на всех оконных формах различных приложений.

При помощи элементов интерфейса мы создадим новое приложение под названием "Калькулятор" которое будет производить некоторые арифметические расчеты.

Создадим новый проект обычным образом.

Вспомним!!! Чтобы открыть новый проект, необходимо открыть среду разработки Eclipse, выполнить команды: Файл® Создать® Проект Java, указать номер урока, в данном случае Lessonl4 и нажать на кнопку Готово. Появится папка под названием Lesson14. Наведите на неё курсор мыши, нажав правую клавишу, выполните команду Создать®Класс. Далее следует назвать будущую программу progl4 установить галочку public static void main

Весь процесс добавления элементов на форму условно можно разбить на следующие шаги:

1. Создается переменная определенного типа (в зависимости от выбранного элемента "кнопка", "переключатель", "список" и др.).

2. Задаются свойства элемента (ширина, высота, цвет текста надписи, шрифт и др

3. Подключаются обработчики событий.

4. Созданный элемент отображается на панели, размещенной внутри оконной формы JFrame.

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

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

Нам понадобятся в очередной раз три библиотеки: javax.swing.*, Java.awt.* и java.awt.event.*, которые позволят работать с оконными формами, с элементами интерфейса пользователя, с элементами графики, обработчиками событий и др.

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

Внутри метода main создадим новый объект - окно. Новая переменная будет иметь тип "оknо":

// Создаем объект окна

okno nf = new okno();

Таким образом, объект создан ранее, чем сам класс. Программный код на данном этапе будет иметь следующий вид;

// Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event,*;   public class prog {   public static void main(String[] args) { // Создаем объект окна okno nf = new okno();   }   }

 

Теперь можно перейти к созданию нового класса. Класс будет называться «оkno» и наследоваться от класса JFrame. Напомним, что если класс наследуется от класса JFrame, он сразу же получает весь функционал, который есть в классе JFrame. Следовательно, объекты нового класса будут являться окнами:

// Создаем класс окна, наследуется от класса JFrame class okno extends JFrame {   }

Внутри этого класса создадим конструктор класса (имя конструктора всегда совпадает с именем класса), внутри которого укажем начальные характеристики окна для отображения его на экране. Характеристики можно указать, воспользовавшись уже знакомой командой setBounds:

// Устанавливаем расположение и размеры окна

setBounds(0, 0, 800, 600);

Первые два параметра команды setBounds - это координаты его верхней левой угловой точки. Мы поставили значение 0,0. Следовательно, верхний левый угол окна будет размещаться четко по левому верхнему углу экрана. Третий параметр (600 пикс.) - это ширина окна, а последний, четвертый параметр (500 пикс.) - высота окна.

Можно установить заголовок окна, воспользовавшись методом setTitle:

//Устанавливаем заголовок окна

setTitle ("Калькулятор");

Чтобы форма окна отображалась на экране, воспользуемся методом setVisible со значением "true" ("истина"):

// Показываем (отображаем) окно

setVisible(true);

В целом, программный код будет выглядеть так:

// Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event,*;   public class prog {   public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } } // Создаем класс окна, наследуется от класса JFrame class okno extends JFrame { {   } // Конструктор класса окна public okno() { // Устанавливаем расположение и размеры окна setBounds(0, 0, 800, 600); //Устанавливаем заголовок окна setTitle ("Калькулятор"); // Показываем (отображаем) окно setVisible(true);   } }

Можно запустить программу на исполнение. Если ошибок в программном коде нет, то на экране появится окно с названием "Калькулятор", шириной 600 пикc., высотой 500 пикc., а его верхний левый угол четко совпадет с углом экрана, т. е. без отступов сверху и слева.

Теперь свяжем панель типа JPanel и оконную форму. Для этого в самом начале конструктора класса окна создадим переменную cont типа "container". При помощи метода getContentPane можно получить в эту переменную контент окна. Контент окна - это его содержимое. Переменная типа "container" позволяет вложить панель JPanel в нашу оконную форму JFrame:

//Создаем переменную для доступа к содержимому окна

Container cont = getContentPane();

Теперь создадим переменную pan типа JPanel - это и есть наша панель:

//Создаем панель для окна

JPanel pan = new JPanel();

Обратимся к переменной cont, чтобы при помощи метода add добавить панель к нашему окну:

// Прикрепляем панель к окну

cont.add(pan);

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

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

А теперь нужно создать интерфейс, который необходим для нашего калькулятора. Нам понадобятся следующие элементы:

- кнопки, которые отображают все цифры от 0 до 9;

- кнопки, которые отображают арифметические операции ("+","-", "*", "/");

- кнопка "Равно";

- кнопка "Очистить поле";

- кнопка "Выход";

- текстовое поле, в котором будет располагаться результат наших вычислений.

Наш будущий калькулятор будет выглядеть примерно так (см. рис. 2.1):

Результат:

Рис.2.1

Создадим в классе "окно" несколько переменных, которые будут использоваться внутри нашего класса. Первая переменная text будет закрытой, т.е. доступной только внутри класса и иметь тип JTextArea (текстовое поле, в которое пользователь может ввести какой-то текст).

// Текстовое поле для результата

private JTextArea text;

Переменная text предназначается только для отображения результата вычисления, а не для ввода текстовой информации пользователей.

Создадим две переменные типа "double", которые будут хранить результаты для арифметических операций. Арифметические операции у нас будут проводиться с двумя числами. Переменная p1 будет хранить первое число, а переменная р2 будет хранить второе число (это те числа, которые будет вводить пользователь):

//Две переменные для хранения двух введенных чисел

private double pl=0,p2=0;

Предположим, что каждая наша арифметическая операция будет соответствовать определенной цифре. Например:

сложение - 1;

вычитание - 2;

умножение - 3;

деление - 4;

Номер арифметической операции будет хранить переменная орег. Эта переменная будет являться переменной целого типа с начальным значением 0. Когда пользователь будет нажимать на кнопку операции, значение переменной ореr будет принимать значение 1, 2, 3 или 4:

//Тип операции, выбранной пользователем

private int oper=0;

А теперь приступим к реализации интерфейса пользователя. Предположим, что на панель можно добавлять элементы формы в произвольном размещении, т.е. можно указывать их отступы от краев формы в произвольном виде. Такая настройка напоминает размещение тэгов на html-странице. Для создания настройки воспользуемся методом setLayout со значением "null":

//Включаем возможность произвольного размещения

//всех элементов формы (кнопок, текстовых полей и т.д.)

pan.setLayout(null);

Можно также добавить несколько различных шрифтов для кнопок, надписей и текстового поля. Чтобы задать шрифт, нам нужно создать переменную типа "font" и указать конкретные характеристики шрифта. Создадим новый объект с именем переменной btnFont и с типом "font":

Font btnFont = new Font("serif",0,20);

В круглых скобках указаны следующие параметры: "serif” - имя шрифта; 0 - стиль отображения (0 - обычный (прямой), 1 - жирный, 2 - курсив и т. д.); 20 - размер шрифта. Эти параметры должны быть вам известны по использованию различных программ - текстовых, табличных редакторов и др. В таких программах можно выбирать шрифт с определенным наименованием, можно указывать его размер, стиль. Создадим еще два шрифта:

Font labFont = new Font("arial",l,30);

Font textFont = new Font("arial",2,30);

Шрифт btnFont будет использоваться для надписи на кнопках, labFont - для вывода текстовых надписей, textFont - для вывода в текстовое поле результата арифметических вычислений.

Теперь создадим элементы формы - кнопки. Кнопка имеет вид JButton. Для создания кнопки, следует задать имя переменной и создать новый объект JButton. В круглых скобках (без использования кавычек) можно указать ту надпись, которая будет выводиться на этой кнопке: Как только переменная JButton будет создана, то, обращаясь к этой переменной по имени, можно задавать ее свойства. Свойства можно задать с помощью следующих методов:

- setSize (а,b) позволяет указать ширину и высоту. В скобках 1 указываются значения параметров: а - ширина кнопки, b - высота кнопки.

- setFont (с) позволяет указать шрифт, который будет использоваться для отображения надписи на этой кнопке. В скобках указывается нужный шрифт.

- setLocation (а,b) позволяет указать отступы ее верхней угловой точки от верхней угловой точки панели.

Мы создадим кнопку со следующими значениями параметров:

// Создаем кнопку btn[i] = new JButton(); // Устанавливаем размер btn[i].setSize(100, 25); // Устанавливаем шрифт btn[i].setFont(btnFont); // Устанавливаем ее расположение Btn[i].setLocation(100, 100);

Добавим кнопку к панели JPanel при помощи метода add:

pan.add(btn)

В целом, программный код будет иметь следующий вид:

// Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event.*; public class prog { public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } // Создаем класс окна, наследуется от класса JFrame class okno extends DFrame { // Текстовое поле для результата private JTextArea text; // Две переменные для хранения двух введенных чисел private double pl=0,p2=0; //Тип операции, выбранной пользователем private int oper=0; { } // Конструктор класса окна public okno() { // Создаем переменную для доступа к содержимому окна Container cont = getContentPane(); // Создаем панель для окна JPanel pan = new JPanel(); // Включаем возможность произвольного размещения // всех элементов формы (кнопок, текстовых полей и т.д.) pan.setLayout(null); // Устанавливаем шрифт btn[i].setFont(btnFont);  

// Устанавливаем ее расположение btn[i].setLocation(100, 100); // Прикрепляем кнопку к панели pan.add(btn); } // Прикрепляем панель к окну cont.add(pan); //Устанавливаем расположение и размеры окна setBounds(0, 0, 800, 600); //Устанавливаем заголовок окна setTitle ("Калькулятор"); // Показываем (отображаем) окно setVisible(true); } }

Запустим приложение на исполнение. Мы увидим кнопку, расположенную на панели окна приложения (см. рис. 2.2):

Рис. 2,2

По подобной схеме добавляются различные элементы на оконную форму приложения. Большинство элементов интерфейса имеют следующие характеристики:

- текстовое представление, например, текстовое представление кнопки — это та надпись, которая указывается на ней;

- размеры — ширина и высота;

- шрифт - используется для вывода текстовых надписей;

- расположение - отступы от верхней левой части панели, которые необходимы для отображения элемента в нужном месте.

Нам понадобится семнадцать кнопок, поэтому для удобства лучше все кнопки поместить в массив. Поэтому блок, в котором мы описали процесс создания кнопки:

// Создаем кнопку btn[i] s= new HButton(); // Устанавливаем размер btn[i].setSize(100, 25); // Устанавливаем шрифт btn[i].setFont(btnFont); // Устанавливаем ее расположение btn[i].setLocation(100, 100); // Прикрепляем кнопку к панели pan.add(btn);  

нужно удалить, и перейти к созданию массива кнопок:

JButton[] btn = new JButton[17];

btn - имя массива кнопок. Напомним, что квадратные скобки говорят о том, что мы создали массив. JButton - тип элементов массива. В правой части в квадратных скобках указывается количество элементов в массиве. Теперь нужно добавить в массив сами элементы. Добавлять элементы будем с помощью цикла for. В цикле зададим характеристики для всех кнопок, которые будут присутствовать в массиве. Так как нумерация элементов массива начинается с нуля, переменной целого типа под названием i (счетчик цикла) присвоим начальное значение 0. Кроме того, элементов в нашем массиве должно быть 17. Следовательно нужно указать условие: пока i<17;i++. Данное условие означает, что переменная i будет увеличиваться на единицу на каждом шаге цикла. Таким образом, переменные будут принимать значения 0>1>2...16;

// Устанавливаем для всех кнопок один шрифт и // и одинаковый размер, подключаем обработчик события // и сразу прикрепляем кнопки к панели for (int i=0;i<17;i++) { }

 

Будет создаваться новая кнопка, которая помещается в массив btn. При создании кнопки в цикле следует обратиться к элементу массива, указав в квадратных скобках счетчик /:

// Создаем кнопку

btn[i] = new JButton();

Затем указываем размеры кнопки: ширина пусть будет равна 100, а высота 25:

// Устанавливаем размер

btn[i].setSize(100, 25);

Укажем шрифт, который будет использоваться при создании надписи на кнопках:

// Устанавливаем шрифт

btn[i].setFont(btnFont);

btnFont - это тот шрифт, который мы определили выше.

При помощи метода setLocation нужно указать координаты размещения кнопки на панели:

// Устанавливаем ее расположение

btn[i].setLocation(30, 50 + i*30);

Значение 30 - это отступ в пикселях от левой части панели. Значение второго параметра записано в виде формулы: 50 + i * 30. Таким образом, отступ от верхней части панели для каждой кнопки будет каждый раз увеличиваться на 30 пикс., и получится так, что каждая последующая кнопка будет находиться ниже, чем предыдущая кнопка.

Добавляем кнопку к панели:

//Прикрепляем кнопку к панели

pan.add(btn[i]);

Программный код на данном этапе нашей работы получился следующим:

// Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event.*;   public class prog { public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } } // Создаем класс окна, наследуется от класса JFrame class okno extends JFrame { // Текстовое поле для результата private JTextArea text; // Две переменные для хранения двух введенных чисел private double pl=0,p2=0; // Тип операции, выбранной пользователем private int oper=0; // Метод для обработки нажатия клавиш private void btnClick(JButton btn) { } // Конструктор класса окна public okno() { // Создаем переменную для доступа к содержимому окна Container cont = getContentPane(); // Создаем панель для окна JPanel pan = new DPanelQ; // Включаем возможность произвольного размещения // всех элементов формы (кнопок, текстовых полей и т.д.) pan.setLayout(null); // Создаем три шрифта для кнопок, надписей и текстовых полей Font btnFont = new Font("serif",0,20); Font labFont = new Font(“arial", 1,30); Font textFont = new Font("arial",2,30); // Создаем массив из 17 кнопок JButton[] btn = new JButton[17]; // Устанавливаем для всех кнопок один шрифт и // и одинаковый размер, подключаем обработчик события // и сразу прикрепляем кнопки к панели for (int i=0;i<17;i++) {    

 

// Создаем кнопку btn[i] = new JButton(); // Устанавливаем размер btn[i].setSize(100, 25); // Устанавливаем шрифт btn[i].setFont(btnFont); // Устанавливаем ее расположение btn[i].setLocation(30, 50 + i*30); // Прикрепляем кнопку к панели pan.add(btn[i]); } // Создаем текстовую надпись JLabel lab = new JLabel("Результат: "); // Устанавливаем шрифт lab.setFont(labFont); // Устанавливаем размеры lab.setBounds(130, 0, 300, 50); // Прикрепляем надпись к панели pan.add(lab); // Прикрепляем панель к окну cont.add(pan); // Устанавливаем расположение и размеры окна setBounds(0, 0, 800, 600); //Устанавливаем заголовок окна setTitle ("Калькулятор"); // Показываем (отображаем) окно setVisible(true);   } }  

Можно запустить наше приложение. На экране должно появится окно под названием "Калькулятор". На панели окна располагаются 17 кнопок одинакового размера (см. рис. 2.3):

Рис. 2.3

Так как кнопок довольно много, то все они могут не поместиться на форму. В этом случае размер окна можно увеличить, изменив значение последнего параметра в методе setBounds():

// Устанаваливаем расположение и размеры окна

setBounds(0, 0, 800, 600);

Чтобы кнопка работала, ее не достаточно просто отобразить на экране. К ней нужно добавить обработчик события. Добавлять обработчик мы будем к каждой из 17-ти кнопок. Поэтому в цикле for, с помощью которого мы добавляли кнопки, перед тем, как прикрепить кнопку к панели, нужно добавить следующие строки:

// Подключаем обработчик события btn[i].addActionlistener(new ActionListener() { // Метод, который выполняется при нажатии кнопки public void actionPerformed(ActionEvent е){ // Вызов метода для обработки нажатия клавиш btnClick((JButton)e.getSource()); }});

Таким образом, мы обращаемся к очередному элементу массива и вызываем метод addActionListener(). В круглых скобках метода addActionListener запишем "new ActionListener".

Если вы начнете записывать название этого метода: new Action, - и нажмете комбинацию клавиш Ctrl+"Пробел", то у вас открывается окно подсветки. В этом окне вы найдете единственный метод - ActionListener. При нажатии на клавишу Enter среда разработки автоматически вставляет его содержание: new ActionListener - это новый класс, actionPerformed - метод, который появился внутри этого класса.

При помощи метода ActionListener мы подключили обработчик событий ко всем кнопкам, которые находятся на форме. Метод actionPerformed - это метод, который срабатывает при нажатии на кнопку.

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

JOptionPane.showMessageDialog (null, "Привет!");

Внутри метода showMessageDialog указаны два параметра. Первый параметр - так называемое "родительское окно" данного диалогового окна, а второй параметр - это то сообщение, которое будет выводиться при нажатии на кнопку. Родительского окна у нас нет, поэтому в качестве первого параметра указываем значение "null" (пустой параметр, пустое значение). Можно запустить программу на исполнение и попробовать нажать на одну из кнопок. На экране должно появиться диалоговое окно, в котором выведено сообщение - "Привет!" (см. рис. 2.4):

Рис. 2.4

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

Нам нужно описать метод, который будет обрабатывать нажатие на кнопку – btnClick(). Внутри этого метода будет анализироваться, какая именно кнопка была нажата: цифра от 0 до 9, арифметическая операция, символ равенства, кнопка, очищающая поле вывода результата, кнопка выхода. И в зависимости от того, какая именно кнопка нажата, будут производиться те или иные действия.

В параметр этого метода (в круглых скобках) передадим ту кнопку, которая нажата в текущий момент. При помощи переменной типа ActionEvent, находящуюся в круглых скобках метода actionPerformed, можно получить характеристики события, произошедшего в текущий момент. Например, обратившись к этой переменной через оператор при помощи метода getSource() можно получить ту кнопку, которая сейчас нажата. Запишем следующую команду:

//Вызов метода для обработки нажатия клавиш

btnClick((JButton)e.getSource());

В круглых скобках мы указали тип JButton. Это так называемое явное приведение типа переменной к типу JButton, то есть к типу "кнопка".

Теперь создадим непосредственно сам метод btnClick(). Он будет располагаться над конструктором класса, под объявлением переменных класса. Этот метод будет закрытым, поэтому записываем слово private ("закрытый"). Поскольку этот метод не возвращает значение, нужно указать слово void:

// Метод для обработки нажатия клавиш private void btnClick(JButton btn) { }

В круглых скобках мы указали переменную типа JButton с именем btn. Внутреннюю часть метода пока не записываем. Но следует понимать, что этот метод будет каждый раз вызываться при срабатывании одной из кнопок. И для того чтобы это продемонстрировать, можно уже внутри метода btnClick() записать тот же самый метод вызова диалогового окна с двумя параметрами: родительское окно (значение null) и сообщение:

JOptionPane.showMessageDialog (null, "Кнопка нажата!");

Рис.2.5

Команды метода btnClick() будут описываться уже после того, как будет полностью реализован оконный интерфейс.

Если вы попробуете запустить приложение на исполнение, то при нажатии на кнопку появится диалоговое окно с сообщением "Кнопка нажата!" (см. рис. 2.5):

Возвратимся к реализации интерфейса. Теперь нам нужно, чтобы на кнопках, которые отображаются на форме, выводились определенные надписи — цифры от 0 до 9, знаки арифметических операции и др. Начнем с указания цифр.

Создадим еще один цикл со счетчиком i. Условие работы цикла: пока i < 10, значение счетчика увеличивается на 1. Внутри цикла записываем следующую команду: обращаемся к массиву btn, в квадратных скобках указав счетчик i, и вызываем метод setText(). Внутри метода setText записываем следующую конструкцию: ""+i ("" - пустая строка, то есть строка, в которой нет символов). Такая форма записи нужна для того, чтобы числовую переменную целого типа, которой является у нас счетчик, перевести в строковый тип. Дело в том, что метод setText требует, чтобы в его круглых скобках была указана переменная типа "string" (строка). Таким образом, наш цикл примет следующий вид:

for (int i=0;i<10;i++) btn[i].setText("”+i);

Программный код должен выглядеть так:

//Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event.*; public class prog { public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } } // Создаем класс окна,наследуется от класса JFrame class okno extends JFrame {

// Текстовое поле для результата private JTextArea text; // Две переменные для хранения двух введенных чисел private double p1=0,p2=0; // Тип операции,выбранной пользователем private int oper=0; // Метод для обработки нажатия клавиш private void btnClick(JButton btn) { } // Конструктор класса окна public okno() { // Создаем переменную для доступа к содержимому окна Container cont = getContentPane(); // Создаем панель для окна JPanel pan = new JPanel(); // Включаем возможность произвольного размещения // всех элементов формы(кнопок, текстовых полей и т.д.) pan.setLayout(null); // Создаем три шрифта для кнопок, надписей и текстовых полей Font btnFont = new Font("serif",0,20); Font labFont = new Font("arial",1,30); Font textFont = new Font("arial",2,30); // Создаем массив из 17кнопок JButton[] btn = new JButton[17]; // Устанавливаем для всех кнопок один шрифт и // и одинаковый размер, подключаем обработчик события // и сразу прикрепляем кнопки к панели for (int i=0;i<17;i++) { // Создаем кнопку btn[i] = new JButton(); // Устанавливаем размер btn[i].setSize(100, 25); // Устанавливаем шрифт btn[i].setFont(btnFont); // Устанавливаем ее расположение btn[i].setLocation(30, 50 + i*30); // Подключаем обработчик события btn[i].addActionListener(new ActionListener() { // Метод, который выполняется при нажатии кнопки public void actionPerformed(ActionEvent e) {

// Вызов метода для обработки нажатия клавиш btnClick((JButton)e.getSource()); }}); // Прикрепляем кнопку к панели pan.add(btn[i]); } // Формируем надписи на кнопках for (int i=0;i<10;i++) btn[i].setText(""+i); // Прикрепляем панель к окну cont.add(pan); // Устанаваливаем расположение и размеры окна setBounds(0, 0, 800, 600); //Устанавливаем заголовок окна setTitle ("Калькулятор"); // Показываем(отображаем) окно setVisible(true); } }

Запустите программу на исполнение — первые десять кнопок должн получить свои наименования - цифры от 0 до 9.

Рис. 2.6

В данном случае цикл использовался для того, чтобы задать наименования кнопок в автоматическом режиме. Но, к сожалению, такая операция автоматически не может быть выполнена к другим кнопкам, потому что их названия уже не поддаются какой-то закономерности. У нас с вами остались кнопки, т.е. элементы массива кнопок, с номерами 10, 11, 12, 13, 14, 15, 16. Обратимся к каждой из оставшихся кнопок по ее номеру и укажем с помощью метода setText() их названия: "+", "-", "/", "*", "С", "Выход". Таким образом, мы получим следующие строчки:

btn[10].setText("+"); btn[11].setText("-"); btn[12].setText("/"); btn[13].setText("*"); btn[14].setText("="); btn[15].setText("C"); btn[16].setText ("Выход");

Рис. 2.7

Переходим к размещению на форме окна текстовой надписи. Текстовая надпись JLabel - надпись, которая выводится на форму. Нам нужно создать переменную типа JLabel под названием leb и новый объект типа JLabel. В круглых скобках записываются символы, которые нужно вывести. Мы выведем надпись: "Результат: ":

// Создаем текстовую надпись

JLabel lab = new JLabel("Результат: ");

После создания самого объекта можно указать его свойства:

- шрифт. Воспользуемся шрифтом Lebfont, который был определен выше:

// Устанавливаем шрифт

lab.setFont(labFont);

- отступы от левой верхней части экрана, ширина и высота области, в которой будет находиться надпись. Зададим эти параметры при помощи метода setDown():

// Устанавливаем размеры

lab.setBounds(130, 0, 300, 50);

130 и 0 - это отступы от левой и верхней части экрана, 300 - ширина области, в которой будет располагаться надпись, 50 - высота этой области.

После указания характеристик, текстовую надпись следует прикрепить к панели при помощи метода add:

// Прикрепляем надпись к панели

pan.add(lab);

Запустите программу на исполнение - на форме окна приложения должна появиться надпись "Результат: " (см. рис. 2.8):

Рис. 2.8

Теперь нам осталось определить текстовое поле для вывода результата. Для создания такого поля будем использовать переменную с названием text. Это переменная типа "текстовое поле", которая определена в самом вверху класса. Поскольку переменная уже определена, можно записать ее имя и создать новый объект:

//Создаем текстовое поле

text = new JTextArea();

Это объект "многострочное текстовое поле", то есть теоретически оно предназначено для ввода нескольких строк текста. После создания объекта указываем нужные нам свойства:

шрифт. Вновь воспользуемся шрифтом, который определили выше - Text Font.

//Устанавливаем шрифт

text.setFont(textFont);

- отступы от левой верхней части экрана, ширинам высота текстового поля, которые можно задать с помощью метода setDown():

//Устанавливаем размеры текстового поля

text.setBounds(300, 10, 300, 35);

- цвет текста, который будет вводиться в это поле. Цвет текста можно указать при помощи метода setForground(). Создадим новый объект под названием Color (с помощью метода new), с указанием параметров R, G, В. Это три составляющих цвета, соответственно, R("red”) - красный, G(“green") - зеленый и В("blие") - синий. Все три составляющие могут принимать значения от 0 до 255. Если значение G и В равно 0, а значение В числу, то мы получим синий цвет определенного оттенка, например:

// Устанавливаем цвет текста ТЕМНО-СИНИЙ

text.setForeground(new Color(0,0,100));

- цвет фона текстового поля. Выберем в качестве фонового цвета белый цвет. Его можно задать при помощи метода setBackground() и перечисления Color.

// Устанавливаем фон текстового поля – БЕЛЫЙ

text.setBackground(Color.WHITE);

После указания свойств, текстовое поле следует прикрепить к окну при помощи метода add.

// Прикрепляем текстовое поле к панели

pan.add(text);

Таким образом, программный код будет иметь следующий вид:

 


import javax.swing.*;

 

import java.awt.*;

import java.awt.event.*;

 

public class prog14

{

 

 

public static void main(String[] args)

{

 

okno nf = new okno();

 

 


}

}

 

class okno extends JFrame

{

private JTextArea text;

private double p1=0, p2=0;

private int oper=0;

 

private void btnClick(JButton btn)

{

 

}

 

public okno()

{

Container cont = getContentPane();

JPanel pan = new JPanel();

pan.setLayout(null);

 

Font btnFont = new Font("serif",0,20);

Font labFont = new Font ("arial",1,30);

Font textFont = new Font ("arial",2,30);

 

JButton[] btn = new JButton[17];

for (int i=0; i<17; i++)

{

btn[i] = new JButton();

btn[i].setSize(100,25);

btn[i].setFont(btnFont);

btn[i].setLocation(30,50+i*30);

 

btn[i].addActionListener(new ActionListener()

{

 

public void actionPerformed(ActionEvent e) {

btnClick((JButton)e.getSource());

 

}});

 

pan.add(btn[i]);

}

for (int i=0; i<10;i++) btn[i].setText(""+i);

btn[10].setText("+");

btn[11].setText("-");

btn[12].setText("/");

btn[13].setText("*");

btn[14].setText("=");

btn[15].setText("C");

btn[16].setText ("Выход");

 

JLabel lab = new JLabel("Результат: ");

lab.setFont(labFont);

lab.setBounds(130, 0, 300, 50);

 

pan.add(lab);

text = new JTextArea();

text.setFont(textFont);

text.setBounds(300,10,300,35);

text.setForeground(new Color(0,0,100));

text.setBackground(Color.WHITE);

pan.add(text);

cont.add(pan);

 

setBounds(0, 0, 800, 600);

setTitle("Калькулятор");

setVisible(true);

 

}

}

Запустим программу на исполнение - на форме окна появилось текстовое поле (см. рис. 2.9):

Рис. 2.9

В текстовое поле можно вводить текст. Если вы введете в это поле какой- либо текст, то вы увидите, что символы получаются синего цвета, т.к. мы указали значение составляющих R, G, В - 0, 0 и 100 соответственно. В качестве эксперимента, можно изменять значения составляющих - запустив приложение после изменения этих значений, вы увидите, что цвет текста изменяется. Аналогичные опыты можно провести и с цветом фона. Мы задали белый цвет, можно его изменить и перезапустить приложение.

Таким образом, setForeground - это цвет текста, то есть цвет надписи, setBackground - это цвет фона. Оба эти метода требуют указания определенного цвета. Цвет можно указать, выбрав стандартный цвет из перечисления Color, либо с помощью конструктора new color, указав значение составляющих R, G, В в круглых скобках.

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



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2019-03-17 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: