Скачать презентацию Основы программирования на Java Занятие 3 GUI приложения Скачать презентацию Основы программирования на Java Занятие 3 GUI приложения

Основы_программирования_Java_04_2014_3_зан.ppt

  • Количество слайдов: 36

Основы программирования на Java Занятие 3. GUI приложения на Java. Window. Builder. Рисование при Основы программирования на Java Занятие 3. GUI приложения на Java. Window. Builder. Рисование при помощи класса Graphics. Власенко Олег Федосович

Задача 1 Создать GUI приложение App 1 при помощи Window. Builder. Приложение имеет одну Задача 1 Создать GUI приложение App 1 при помощи Window. Builder. Приложение имеет одну кнопку, два поля для ввода A и N, одно для вывода X и метки около каждого поля, поясняющие смысл поля. При нажатии кнопки из первого поля берется целое число A, из второго поля – целое число N, вычисляется X=A^N, и число X заносится во поле для вывода.

Получение числа из контрола int n = 0; try { String str. N = Получение числа из контрола int n = 0; try { String str. N = text. Field. N. get. Text(); n = Integer. parse. Int(str. N); } catch (Number. Format. Exception ex) { text. Field. F. set. Text(ex. get. Message()); return; }

Вычисление степени и вывод значения int x = 1; int i = 1; while Вычисление степени и вывод значения int x = 1; int i = 1; while (i <= n) { x = x * a; i++; } String str. X = "" + x; text. Field. X. set. Text(str. X);

Трассировка циклического алгоритма На примере вычисления степени изучаем трассировку циклов Трассировка циклического алгоритма На примере вычисления степени изучаем трассировку циклов

Демо 1 Создание приложения с собственной панелью My. Panel с картинкой «Домик» . I Демо 1 Создание приложения с собственной панелью My. Panel с картинкой «Домик» . I Создание приложения с панелью: 1. Создали новый проект Proj. Lab 4 2. Создали Window. Builder/Swing. Designer/Application Window Lab 4 App 0 3. Добавляем Absolute Layout 4. Добавляем JPanel 5. Свойство border меняем на Bevel. Border Получится так:

Демо 1 часть 2 II Создание собственного класса My. Panel: 1. Создали новый класс Демо 1 часть 2 II Создание собственного класса My. Panel: 1. Создали новый класс My. Panel – в области проекта Proj. Lab 4 нажали правую кнопку мыши: Контекстное меню/New/Class Name: My. Panel Superclass: Browse… Choose a type = Jpanel Matching items: JPanel – java. Swing OK Галочку возле «public static void main» НЕ СТАВИМ! Нажимаем Finish. 2. Создается класс со следующим исходным кодом: import javax. swing. JPanel; public class My. Panel extends JPanel { }

Демо 1 часть 3 III На My. Panel добавляем красную линию 1. Добавляем в Демо 1 часть 3 III На My. Panel добавляем красную линию 1. Добавляем в класс My. Panel метод public void paint(Graphics g) 2. В метод paint() добавляем код, который вызывает метод paint стандартного класса JPanel: super. paint(g); 3. В метод paint() добавляем код изменяющий активный цвет на красный: g. set. Color(Color. RED); 3. В метод paint() добавляем код рисующий линию: g. draw. Line(10, 100, 10); Получится код My. Panel – см следующий слайд

Демо 1 часть 4 Код My. Panel с красной линией: import java. awt. Color; Демо 1 часть 4 Код My. Panel с красной линией: import java. awt. Color; import java. awt. Graphics; import javax. swing. JPanel; public class My. Panel extends JPanel { public void paint(Graphics g) { super. paint(g); g. set. Color(Color. RED); g. draw. Line(10, 100, 10); } }

Демо 1 часть 5 IV Заменить в классе Lab 4 App 0 создание JPanel Демо 1 часть 5 IV Заменить в классе Lab 4 App 0 создание JPanel на создание My. Panel: 1. Откройте файл Lab 4 App 0 и найдите в нем текст метода initialize(): private void initialize() { frame = new JFrame(); frame. set. Bounds(100, 450, 300); frame. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); frame. get. Content. Pane(). set. Layout(null); JPanel panel = new JPanel(); panel. set. Border(new Bevel. Border(Bevel. Border. LOWERED, null, null)); panel. set. Bounds(48, 45, 312, 184); frame. get. Content. Pane(). add(panel); } 2. Строку JPanel panel = new JPanel(); надо заменить на JPanel panel = new My. Panel();

Демо 1 часть 6 V Запуск Lab 4 App 0 с панелью My. Panel: Демо 1 часть 6 V Запуск Lab 4 App 0 с панелью My. Panel: 1. Если все сделано правильно, то после запуска на выполнение класса Lab 4 App 0 появиться окно, в панели которого отчетливо видна красная линия:

Экранная система координат Экранная система координат

Graphics. draw. Line() void draw. Line(int x 1, int y 1, int x 2, Graphics. draw. Line() void draw. Line(int x 1, int y 1, int x 2, int y 2) Draws a line, using the current color, between the points (x 1, y 1) and (x 2, y 2) in this graphics context's coordinate system. g. draw. Line(10, 50, 100, 50);

Graphics. draw. Rect() draw. Rect(int x, int y, int width, int height) Draws the Graphics. draw. Rect() draw. Rect(int x, int y, int width, int height) Draws the outline of the specified rectangle. The left and right edges of the rectangle are at x and x + width. The top and bottom edges are at y and y + height. The rectangle is drawn using the graphics context's current color. g. draw. Rect(10, 50, 100, 50);

Graphics. draw. Round. Rect() void draw. Round. Rect(int x, int y, int width, int Graphics. draw. Round. Rect() void draw. Round. Rect(int x, int y, int width, int height, int arc. Width, int arc. Height) Draws an outlined round-cornered rectangle using this graphics context's current color. The left and right edges of the rectangle are at x and x + width, respectively. The top and bottom edges of the rectangle are at y and y + height. g. draw. Round. Rect(10, 50, 10, 30);

Graphics. draw. Oval() void draw. Oval(int x, int y, int width, int height) Draws Graphics. draw. Oval() void draw. Oval(int x, int y, int width, int height) Draws the outline of an oval. The result is a circle or ellipse that fits within the rectangle specified by the x, y, width, and height arguments. The oval covers an area that is width + 1 pixels wide and height + 1 pixels tall. g. draw. Oval(10, 50, 100, 50);

Graphics. draw. Arc() void draw. Arc(int x, int y, int width, int height, int Graphics. draw. Arc() void draw. Arc(int x, int y, int width, int height, int start. Angle, int arc. Angle) Draws the outline of a circular or elliptical arc covering the specified rectangle. g. draw. Arc(10, 50, 100, 50, 180);

Graphics. draw. String() void draw. String(String str, int x, int y) Draws the text Graphics. draw. String() void draw. String(String str, int x, int y) Draws the text given by the specified string, using this graphics context's current font and color. The baseline of the leftmost character is at position (x, y) in this graphics context's coordinate system. g. draw. String("Test String!", 100, 50);

Graphics. fill. Oval () void fill. Oval(int x, int y, int width, int height) Graphics. fill. Oval () void fill. Oval(int x, int y, int width, int height) Fills an oval bounded by the specified rectangle with the current color. g. fill. Oval(10, 50, 100, 50);

Graphics. fill. Rect() void fill. Rect(int x, int y, int width, int height) Fills Graphics. fill. Rect() void fill. Rect(int x, int y, int width, int height) Fills the specified rectangle. The left and right edges of the rectangle are at x and x + width - 1. The top and bottom edges are at y and y + height - 1. The resulting rectangle covers an area width pixels wide by height pixels tall. The rectangle is filled using the graphics context's current color. g. fill. Rect(10, 50, 100, 50);

Graphics. set. Color() void set. Color(Color c) Sets this graphics context's current color to Graphics. set. Color() void set. Color(Color c) Sets this graphics context's current color to the specified color. All subsequent graphics operations using this graphics context use this specified color. g. set. Color(Color. BLUE); g. fill. Rect(10, 50, 100, 50); g. fill. Rect(115, 60, 50, 20);

Задача 2 Создать приложение App 2 с собственной панелью My. Panel 1, на которой Задача 2 Создать приложение App 2 с собственной панелью My. Panel 1, на которой нарисовать простейший рисунок дома. 1. На листе бумаги в координатной сетке нарисовать дом 2. Оцифровать изображение – вычислить координаты всех точек 3. Написать код рисующий линии – с координатами концов линий вычисленными на шаге 2

Задача 2 – пример реализации Координатная сетка для рисования картинки: Задача 2 – пример реализации Координатная сетка для рисования картинки:

Задача 2 – пример реализации Картинка в координатной сетке: Задача 2 – пример реализации Картинка в координатной сетке:

Задача 2 – пример реализации Оцифровка точек на картинке: Точка 1: (X=72; Y=3) Точка Задача 2 – пример реализации Оцифровка точек на картинке: Точка 1: (X=72; Y=3) Точка 2: (X=20; Y=50) …

Задача 2 – пример реализации Код рисующий линию между точками 1 и 2: g. Задача 2 – пример реализации Код рисующий линию между точками 1 и 2: g. draw. Line(72, 3, 20, 50);

Задача 3 Создать приложение App 3 с собственной панелью My. Panel 2, на которой Задача 3 Создать приложение App 3 с собственной панелью My. Panel 2, на которой нарисовать узор из линий, используя цикл и изменяющиеся координаты точек x 1, y 1 и x 2, y 2. 1. На листе бумаги в координатной сетке нарисовать линию 2. Задать формулу изменения координат точек линий 3. Создать код с циклом, изменяющим координаты

Задача 3 – пример реализации Шаг 1 public class My. Panel 2 extends JPanel Задача 3 – пример реализации Шаг 1 public class My. Panel 2 extends JPanel { public void paint(Graphics g) { super. paint(g); g. set. Color(Color. RED); int x 1 = 10; int y 1 = 50; int x 2 = 200; int y 2 = 50; g. draw. Line(x 1, y 1, x 2, y 2); } }

Задача 3 – пример реализации Шаг 2 public void paint(Graphics g) { super. paint(g); Задача 3 – пример реализации Шаг 2 public void paint(Graphics g) { super. paint(g); g. set. Color(Color. RED); int x 1 = 10; int y 1 = 50; int x 2 = 200; int y 2 = 50; while (y 2 < 150) { g. draw. Line(x 1, y 1, x 2, y 2); y 2 = y 2 + 10; } }

Задача 3 – пример реализации Шаг 3 public void paint(Graphics g) { super. paint(g); Задача 3 – пример реализации Шаг 3 public void paint(Graphics g) { super. paint(g); g. set. Color(Color. RED); int x 1 = 10; int y 1 = 50; int x 2 = 200; int y 2 = 50; while (y 2 < 150) { g. draw. Line(x 1, y 1, x 2, y 2); y 2 = y 2 + 10; y 1 = y 1 - 5; } }

Задача 4 Создать приложение Lab 4 App 3 с собственной панелью My. Panel 3, Задача 4 Создать приложение Lab 4 App 3 с собственной панелью My. Panel 3, на которой нарисовать прямоугольный узор из маленьких повторяющихся фигур. 1. На листе бумаги в координатной сетке нарисовать маленькую фигуру 2. Создать код, рисующий маленькую фигуру в произвольном месте (X, Y) 3. Создать код с циклом, рисующий одно линию состоящую из маленьких фигур 4. Сделать вложенные циклы с прямоугольником, образованным маленькими фигурами

Задача 4 – пример реализации public class My. Panel 3 extends JPanel { public Задача 4 – пример реализации public class My. Panel 3 extends JPanel { public void paint(Graphics g) { super. paint(g); g. set. Color(Color. RED); int x = 100; int y = 100; g. draw. Oval(x - 10, y - 10, 21); g. draw. Line(x, y, x, y - 10); g. draw. Line(x, y, x - 9, y + 6); g. draw. Line(x, y, x + 9, y + 6); } }

Задача 4 – пример реализации public void paint(Graphics g) { super. paint(g); g. set. Задача 4 – пример реализации public void paint(Graphics g) { super. paint(g); g. set. Color(Color. RED); int y = 100; int x = 30; while (x < 300) { g. draw. Oval(x - 10, y - 10, 21); g. draw. Line(x, y, x, y - 10); g. draw. Line(x, y, x - 9, y + 6); g. draw. Line(x, y, x + 9, y + 6); x = x + 30; } }

Задача 4 – пример реализации public void paint(Graphics g) { super. paint(g); g. set. Задача 4 – пример реализации public void paint(Graphics g) { super. paint(g); g. set. Color(Color. RED); int y = 50; while (y <= 150) { int x = 30; while (x < 300) { g. draw. Oval(x - 10, y - 10, 21); g. draw. Line(x, y, x, y - 10); g. draw. Line(x, y, x - 9, y + 6); g. draw. Line(x, y, x + 9, y + 6); x = x + 30; } y = y + 50; } }

Домашнее задание 3 Создать приложение, показывающего Ваши возможности рисования при помощи класса Graphics. Не Домашнее задание 3 Создать приложение, показывающего Ваши возможности рисования при помощи класса Graphics. Не используйте массивы и циклы for. Приложение. Свободная тема. Минимум 30 независимых элементов изображения. Можно использовать циклы и вложенные циклы для создания отдельных фрагментов картины. Примеры: 1. Дом с садом. 2. Автомобиль на трассе 3. В кабинете программиста 4. Цветочная поляна 5. На поле танки грохотали… И т. д. Задание считается выполненным при наличии бумажного листка с оцифровкой точек картинки.

Спасибо за внимание! Власенко Олег Федосович E-mail: vlasenko. oleg@gmail. com Vk: vk. com/oleg. f. Спасибо за внимание! Власенко Олег Федосович E-mail: vlasenko. [email protected] com Vk: vk. com/oleg. f. vlasenko Телефон: 8 902 246 05 47