Java GUI

Об’єктно-ориєнтоване програмування мовою
Java, частина V: GUI та аплети

Нотатки до лекцiй
Олексiй Тихомиров
Кафедра експериментальної фiзики

Фiзичний факультет
Вересень 2008
О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

Змiст

Загальнi коментарi до GUI
MacIntosh програми—кнопки, меню, слайдери, текстовi

дiлянки. Комп’ютерна миша.
Нова ера для користувачiв комп’ютерiв. GUI.
Програмування GUI — вимоги користувача та вимоги до
програмиста.
Widget’и — елементи GUI.
Якщо створюються програми, що спираються на
GUI-програми, розробка розбивається на три етапи.
Продемонструємо розробку GUI–програми на прикладi
калькулятора.











Модель— (1 iз 2)
На першому етапi ми моделюємо проблему подумки та

будуємо модель. Без GUI!
Як у життi — уявимо складанню двох чисел.
1 Ввiд дiйсної та мнимою частинки числа (число на екранi)
та потiм +
2 Ввiд нового числа та натиснення = .
Модель потрiбна зберiгати (дiлянки)
1 Число, що вводиться;
2 Число, що було пiд час натискання + або =
3 Операцiю (не тiльки + )


та потiм +


та потiм +


та потiм +


та потiм +


та потiм +


та потiм +


та потiм +

Модель потрiбна виконувати (методи)

1 отримати щойно введене число,
2 додати цифру до щойно введеного числа,
3 очистити щойно введене число,
4 встановити/видати операцiю,
5 отримати число, що було введене перед вводом кнопки
операцiї;
6 виконати операцiю;
7 встановити точку в числi.


операцiї;


операцiї;


операцiї;


операцiї;


операцiї;


операцiї;


операцiї;

Вигляд — the View
GUI — iєрархiя widget’iв.

1 Контейнери — щоб розмiщувати в собi iншi widget’и, що
також можуть бути контейнерами. Розмiтка.
2 Примiтивнi — тi, що ми бачимо на екранi та з якими
працюємо.
Дерево GUI має кореневий widget iз гiлками–контейнерами
та листя — примiтивними widget’ами.
Статичний вигляд widget’iв (кнопки, меню, позначки,
тощо), який показує поточний стан моделi, зветься
виглядом (the View)
GUI-будiвники та програмування. JBuilderTM , NetBeansTM
etc.


працюємо.
etc.


працюємо.
etc.


працюємо.
etc.


працюємо.
etc.


працюємо.
etc.

Контролер
GUI мусить вiдповiдати, тобто бути динамiчним. Потрiбно

виконувати дiї при натисканнi кнопки або введеннi тексту.
Калькулятор. Наприклад, якщо натиснути + , треба
додати число, що показується у вiдповiдної дiлянцi
вигляду, до попередньо введеного числа та показати
результат у виглядi.
Задача роздiлення команд вводу даних та обчислень та
видача вiдповiдних команд для оновлення вигляду є
задачею контролера.

Контролер


Контролер


Концепцiя МВКa , 1 з 2
a
The Model, View and Controller — the MVC concept
1 Модель
(Model)
2 Вигляд
(View)
3 Контролер
(Controller)

c O.Tykhomyrov

a
1 Модель
(Model)
2 Вигляд
(View)
(Controller)

c O.Tykhomyrov

a
1 Модель
(Model)
2 Вигляд
(View)
(Controller)

c O.Tykhomyrov

a
1 Модель (Model)
Вирiшує реальну задачу
Зберiгає поточну стан у змiнних об’єкту
2 Вигляд (View)
Будує графiчний iнтерфейс
Повiдомляє про дiї користувача
Оновлює сама себе згiдно поточного стану моделi
3 Контролер (Controller)
Перехоплює подiї моделi та вигляду,
Повiдомляє модель про дiї
Повiдомляє вигляд про змiни

a

a

a

a

a

a

a

a

a

a

Змiст

Введення
Один приклад часто важить бiльше за тисячi слiв. Тому

продемонструємо створення програми – простого калькулятора
для комплексних чисел.
Плануємо:
Побудуємо GUI (вигляд)
Додамо декiлька простих дiй для демонстрацiї
Створимо модель
Об’єднаємо все до купи.

Введення

Плануємо:

Введення

Плануємо:

Введення

Плануємо:

Плануємо вигляд
Перед початком роботи слiд намалювати, що нам потрiбно.

c O.Tykhomyrov
Будемо мало-помалу досягати такого малюнку.


c O.Tykhomyrov


c O.Tykhomyrov

Розмiтка — Layout
Щоб розмiстити елементарнi widget’и в контейнерi, слiд

знати, в якої послiдовностi та куди.
Закон розмiщення елементарних widget’iв зветься
розмiткою
Iснує багато способiв розмiщення. Кожен спосiб є окремим
об’єктом.


розмiткою
об’єктом.


розмiткою
об’єктом.

Розмiтка — основне
BorderLayout

c O.Tykhomyrov

BoxLayout:

c O.Tykhomyrov

FlowLayout:

c O.Tykhomyrov

GridLayout:

c O.Tykhomyrov

GridBagLayout:

c O.Tykhomyrov

GridBagLayout:

c O.Tykhomyrov

CardLayout: для показу рiзних widget’iв в одному

контейнерi
SpringLayout
GroupLayout

Аналiз вигляду калькулятора
Кореневий контейнер — jFrame з GridBagLayout;

Три контейнера jPanel
1 jPanel iз GridLayout для цифрової клавiатури
2 jPanel iз GridLayout для клавiатури з операцiями
3 jPanel iз GridLayout для дисплею









Змiст

Програмнi компоненти
Граємось зi побудовниками GUI. LegoTM . .

Складовi програми як програмнi компоненти.
Java beansTM


Java beansTM


Java beansTM

Подiї
GUI без дiй — непотрiб. Активацiя GUI.

Натискання кнопки – вiдпускання кнопки
button down–up = button press
Активацiя кнопки — activation — ActionEvent
Слухач подiй — ActionListener.
Щоб „розумiти” кнопку, треба створити ActionListener
та додати його до списку слухачiв кнопки.

Подiї


Подiї


Подiї


Подiї


ActionListener
Слухач подiй — ActionListener — це iнтерфейс iз одним

методом actionPerformed(ActionEvent).
Слухач подiй — контролер
Iнформацiя про джерело подiї — об’єкт — передається
разом iз об’єктом Event1
Повiдомлення об’єкту getSource() повертає вказiвку на
об’єкт – джерело подiї.
1
подiя
ActionListener

1
подiя
ActionListener

1
подiя
ActionListener

1
подiя
Конструктор GUI
У конструкторi GUI слiд створити Контролер.

Контролер мусить знати про GUI, тому конструктор GUI може
виглядати приблизно так:
CalcController controller; // controller declaration;
/** Creates new form ComplexCalcView */
public ComplexCalcView() {
/* Creating the Controller */
controller= new CalcController(this);
/* Next line is generated by NetBeans */

initComponents();
}

Пiдмикаємо ActionListener до кнопки

c O.Tykhomyrov

Створення контролера — ActionListener

public class CalcController implements ActionListener {
ComplexCalcView parent; // GUI to control
// more code
У конструкторi слiд передбачити зв’язок iз GUI

/** Creates a new instance of CalcController */
public CalcController(ComplexCalcView parent) {
this.parent=parent;
}
Спробуємо найпростiше, додамо реакцiю на натискання

кнопки „0”:
public void actionPerformed(ActionEvent e) {
System.out.println("Meow"); }


// more code

this.parent=parent;
}



// more code

this.parent=parent;
}


ActionListener — розпiзнавання джерела подiй (1 з 2)
Коти нявчать по-рiзному, кнопки треба розрiзняти!

Об’єкт класу подiї має дiлянку з вказiвкою джерела подiй,
а кнопка має мiтку
Дiзнаємось про кнопку–джерело подiї
JButton activatedButton = (JButton) e.getSource();
Дiзнаємось, чим ця кнопка було помiчена:
String buttonLabel = activatedButton.getText();
Занявчимо по-рiзному:
if (buttonLabel.equals("0")) System.out.println("Meow");
else if (buttonLabel.equals("1")) System.out.println("Mew");
У GUI додамо контролер до кнопки "1" як слухача подiй:
jButton1.addActionListener(controller);











Добре, якщо нявчать коти. Але ж i кiшка нявчить!

Оператор JButton activatedButton=(JButton) e.getSource();
буде працювати правильно для кнопок. Але джерелом
подiй можуть бути й iншi елементи GUI.
Звернемо увагу на властивiсть actionCommand:

c O.Tykhomyrov
Тодi можна дiзнатись про джерело подiї

if (e.getActionCommand().equals("Input Real Part")) . . .



c O.Tykhomyrov




c O.Tykhomyrov


Iнформування моделi
З подальшим шляхом для розробки кнопок з’ясовано. А

що з моделлю?
GUI був параметром для контролера, але контролер мусить
взаємодiяти з моделлю.
Модель керується контролером i не залежить вiд GUI.
Конструктор може виглядати так:
ComplexModel model; // model
public CalcController (CalcView ui) {
complexUI = ui; // Pointing GUI
model = new ComplexModel(); // Creating the Model
}


}


}


}

Модель
Найбiльш складна частина для програмування

Описує та вирiшує дiйсну практичну задасу
Увагу слiд сконцентрувати на практичну послiдовнiсть.
... стандарт стилю ООП!

Модель


Модель


Модель


Як вводимо число
public void addDigit(byte digit)

// Lots of declaration etc...
if (point) { if(floatIndex > 7)
return;
floatPart[floatIndex++]=digit;
floatBytes=new byte[floatIndex];
for (i=0;i<floatIndex;i++)
floatBytes[i]=floatPart[i];
c O.Tykhomyrov
resultString =
new String(floatBytes);
newRealPart =
Double.parseDouble(resultString);
result.setReal(newRealPart);
// do the same for the integer part

Як вводиться оператор
// Some declarations
public static final int INVALID=0;
public static final int ADD =1;
public static final int SUB =2;
public static final int MUL =3;
public static final int DIV =4;
public static final int NORM =5;
// Some more code and declarations
public void setOperator(int op)
{
if ((operator < ADD) && (operator > DIV))
return;
if(debug)
System.out.println("Operator set to " + op);
operator = op;
newNumber = true;
}

Як пiдраховуємо результат
if ((operator < ADD) || (operator > NORM))

return;
result=getResult(); /* assemble byte strings into complex */
switch(operator) {
case ADD:
result=firstNumber.add(result);
clearFirstNumber();
if(debug)
System.out.println("Execution result:"
+ result.getReal() + " "
+ result.getImaginary());
break;

Перетворення масиву байтiв до числа double
public double byteArray2Double(byte[] intArray,

byte[] floatArray){
double result;
String numberString = new String(intArray) +

"." + new String(floatArray);
result = Double.parseDouble(numberString);
if (debug)
System.out.println("byteArray2Double: double value "
+ result);
return result;
}

Перетворення числа double до масиву байтiв
/** Extracts the integer part
* from a double in form of length = 0;
* a character array */ tmpAll = valString.getBytes();
public byte[] for (i=0;i<tmpAll.length;i++) {
double2IntArray(double val){ /* get at the position
DecimalFormat df; * of the decimal point
String valString; */
byte[] intArray,tmpAll; if (tmpAll[i] == ’.’)
int i,length; break;
df=new DecimalFormat else
("0.0######"); length++;
valString=df.format(val); }
/* Extract the byte array intArray = new byte[length];
* from the String that should for (i=0;i<length;i++)
* be in the form ii.fff intArray[i] = tmpAll[i];
* with a least 1 i and 1 f return intArray;
*/ }

Як показати результат у Виглядi
private void setResult() {

Complex result = model.getResult();
DecimalFormat df = new DecimalFormat("0.0######");
String resultString=df.format(result.getReal());
complexUI.setRealPartText(resultString);
resultString=df.format(result.getImaginary());
complexUI.setImagPartText(resultString);
}

Що таке Java апплети (1 iз 2)
Апплет – спецiальна Java–програма, що виконуєтесь в

браузерах iз пiдтримкою технологiї Java.
Апплети вбудовуються до web–сторiнок.
Будь-який апплет є пiдкласом java.applet.Applet, який
утворює взаємозв’язок помiж апплетом та браузером.
SWING має пiдклас javax.swing.JApplet, що є пiдкласом
java.applet.Applet.


java.applet.Applet.


java.applet.Applet.


java.applet.Applet.

javax.swing.JApplet є корiнним для апплетiв, що мають iншi

компоненти SWING.
javax.swing.JApplet пов’язує вiкно iз базовим вiкном у
спосiб, схожий до JFrame за винятком його деяких
можливостей.
Браузер управляє апплетом через спецiальнi повiдомлення.
Вони складають життєвий цикл апплету.





Життєвий цикл апплету
init Iнiцiалiзацiя апплету, виконується, пiсля завантажння

вiдповiдного html–тегу.
start Автоматично викликається пiсля методу init.
stop Автоматично викликається, якщо користувач виїде за
сторiнку, що має апплет.
destroy Автоматично викликається, якщо браузер
закривається.
Iнiцiалiзацiя та руйнування — винятково один раз, iншi —
багато разiв.









Апплет vs програма
На апплет накладаються додатковi вимоги безпеки.

Пiсочниця. (Sandbox)
Java Web Start


Java Web Start


Java Web Start

Змiст

Перетвореня програми до апплету (View)
1 public class ComplexCalcViewApplet extends JApplet

2 Закоментаримо метод main
3 public void init() {
new ComplexCalcViewApplet().setVisible(true);}
4 private void setDefaultCloseOperation(int
EXIT_ON_CLOSE) {}
5 private void pack() {}


EXIT_ON_CLOSE) {}


EXIT_ON_CLOSE) {}


EXIT_ON_CLOSE) {}


EXIT_ON_CLOSE) {}

Перетвореня програми до апплету (Controller)
1 public CalcController(ComplexCalcViewApplet ui)

2 ComplexCalcViewApplet complexUI;




Модель залишається без змiн!

Вбудова до html
Створимо файл applet.html:
<head><title> A Calculator for Complex Numbers </title></head>

<h1> A Calculator for Complex Numbers</h1>
<html>
<body bgcolor="#c4c4c4">
<div align="center">

<object archive="ComplexCalculator.jar" height="450" width="350"
type="application/x-java-applet"
code="ComplexCalcViewApplet.class"></object>
</div>
</body>
</html>
Запуск: appletviewer applet.html

Java GUI

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java GUI

Uploaded by

Copyright:

Available Formats

Об’єктно-ориєнтоване програмування мовою

Java, частина V: GUI та аплети

Кафедра експериментальної фiзики

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

MacIntosh програми—кнопки, меню, слайдери, текстовi

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

MacIntosh програми—кнопки, меню, слайдери, текстовi

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

MacIntosh програми—кнопки, меню, слайдери, текстовi

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

MacIntosh програми—кнопки, меню, слайдери, текстовi

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

MacIntosh програми—кнопки, меню, слайдери, текстовi

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

MacIntosh програми—кнопки, меню, слайдери, текстовi

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

На першому етапi ми моделюємо проблему подумки та

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

На першому етапi ми моделюємо проблему подумки та

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

На першому етапi ми моделюємо проблему подумки та

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

На першому етапi ми моделюємо проблему подумки та

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

На першому етапi ми моделюємо проблему подумки та

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

На першому етапi ми моделюємо проблему подумки та

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

На першому етапi ми моделюємо проблему подумки та

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

На першому етапi ми моделюємо проблему подумки та

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

Модель потрiбна виконувати (методи)

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

Модель потрiбна виконувати (методи)

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

Модель потрiбна виконувати (методи)

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

Модель потрiбна виконувати (методи)

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

Модель потрiбна виконувати (методи)

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

Модель потрiбна виконувати (методи)

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

Модель потрiбна виконувати (методи)

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

Модель потрiбна виконувати (методи)

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

GUI — iєрархiя widget’iв.

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

GUI — iєрархiя widget’iв.

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

GUI — iєрархiя widget’iв.

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

GUI — iєрархiя widget’iв.

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

GUI — iєрархiя widget’iв.

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

GUI — iєрархiя widget’iв.

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

GUI мусить вiдповiдати, тобто бути динамiчним. Потрiбно

О. Тихомиров ООП мовою Java, ч. V: GUI та аплети

GUI мусить вiдповiдати, тобто бути динамiчним. Потрiбно