JAVA 프로그래밍 4. 그래픽프로그래밍 한동일 학습목표 To be able to write simple GUI applications To display graphical shapes such as lines and ellipses To use colors To display drawings consisting of many shapes To read input from a dialog box To develop test cases that validate the correctness of your programs 2/48
Java Foundation Classes JFC(Java Foundation Classes) 그래픽, 이미지처리, GUI 등의개발에사용되는클래스들로구성 AWT, Swing, Java2D, 접근성 (Accessibility), 드래그앤드롭 (Drag and Drop) 등의영역으로구성 AWT(Abstract Window Toolkit) 그래픽, 이미지처리, GUI 등의개발에사용 관련클래스들과인터페이스들의모임 3/48 AWT AWT 의기본적인기능 기본적인그래픽생성 폰트조작 이미지처리 프린팅기능 GUI 개발기능 버튼, 리스트, 박스, 메뉴등의컴포넌트생성 생성된컴포넌트의컨테이너내조직화 컴포넌트의배치 이벤트처리 4/48
AWT AWT 의단점 호스트운영체제에의존 JVM을지원하는모든컴퓨터에일관된룩앤필을갖는 GUI 의작성이불가능 GUI 의모습이세련되지못함 특정플랫폼의고유한특징이포함안됨 컴포넌트의수가적음 AWT 의기능보완 => 스윙 5/48 스윙 AWT 의한계를극복하기위해개발 스윙의고유컴포넌트 이미지를포함하는레이블과버튼 툴바, 툴팁, 진행상황을표현하는바 슬라이더, 리스트등 J 로시작 (JFrame, JLabel 등 ) AWT 와구분 운영체제에독립적 자바내에서컴포넌트를생성하고관리 OS(Window, Solaris 등 ) 에무관한룩앤필 http://download.oracle.com/javase/6/docs/technotes/guides/swing/index.html 참고 6/48
스윙 paint(graphics g) 메소드의기능을보강 paintcomponent(graphics g) 메소드추가 Graphics 추상클래스 하위클래스에서구현된메소드가호출 Graphics2D 드로잉공간의모습을다른모습으로변경하는기능제공 fill(), draw(), scale(), shear(), rotate() 등다양한기능제공 7/48 AWT 드로잉메커니즘 AWT(Abstract t Window Toolkit, 추상윈도우툴킷 ) 자바의그래픽사용자인터페이스 그래픽, 이미지처리, GUI 등의개발에사용 관련클래스들과인터페이스들의모임 색, 폰트, 도형, 컴포넌트등을제공 http://download.oracle.com/javase/6/docs/technotes/guides/awt/index.html 참고 GUI 구성예 8/48
AWT : 컴포넌트 컴포넌트 (Component Class) 그래픽화면을구성하는구성요소 버튼, 텍스트필드, 대화상자등 java.awt.component 의하위클래스 각컴포넌트들은자신의모양을스스로그릴수있음 9/48 Button Checkbox Choice CheckboxGroup List Object Component Label TextComponent TextField TextArea Container Panel Applet MenuComponent Canvas Scrollbar MenuBar MenuItem Window ScrollPane Window Menu Frame Dialog FileDialog BorderLayout CheckboxMenuItem FlowLayout GridLayout GridLayout CardLayout GridBagLayout GridBagConstraints Class Abstract class 10/48
주요컴포넌트및기능 (AWT) 11/48 스윙의특징 스윙의주요특징 완전히자바내에서컴포넌트를생성하고관리 호스트운영체제에종속되지않음 모든컴포넌트를생성하고드로잉하는코드제공 OS(Window, Solaris 등 ) 에무관한룩앤필을정의가능 Windows, Solaris, 메킨토쉬등의룩앤필정의가능 AWT 에없는기능 룩앤필지정 느린동작으로그리기 풍선도움말의사용 더블버퍼링의지원 12/48
스윙컴포넌트들의계층구조 AWT 의 Container 를확장한클래스들과 JComponent 클래스를확장한컴포넌트들로구성 JComponent 는 Container 클래스를확장 JComponent 클래스의기능 이벤트청취자관리 이벤트처리 마우스, 키보드에반응 툴팁 (Tool Tips) 의생성과표시 포커스처리 컴포넌트의외형처리 13/48 스윙컴포넌트들의계층구조 Object Font FontMetrics Component Dimension Color Graphics AWT Button Label TextComponent Container List Canvas Scrollbar Panel Window Checkbox Choice Applet Frame Dialog Swing JComponent JApplet JFrame JDialog JLabel JList JComboBox JSlider JTextComponent AbstractButton JScrollBar JPanel JLayeredPane JEditorPane JTextField JTextArea JOptionPane JTabbedPane JSplitPane JSeparator JRootPane JToolBar JPasswordField JMenuItem JButton JToggleButton JMenuBar JToolTip JPopupMenu JFileChooser JMenu JCheckBox JColorChooser JTree JTable JTableHeader JCheckBoxMenuItem JRadioButton JProgressBar JSpinner JScrollPane JInteralFrame 14/48 JRadioButtonMenuItem
스윙컴포넌트들의예 JButton JCheckBox JRadioButton JSlider JTextField JPasswordField JSpinner JTextArea JComboBox 15/48 JList 스윙컴포넌트들의예 JProgressBar JToolTip JMenu JScrollPane JDialog JApplet 16/48 JFrame
기본스윙컴포넌트 스윙을이용한 GUI 구성시가장기본이되는컴포넌트 JFrame, JButton, JLabel 클래스 JFrame 프레임감추기, 닫기, 최대화, 최소화등의기능 레이아웃관리자지정 프레임영역의구성 경계, 메뉴바, 타이틀바, 컨텐츠 컨텐츠부분은컨텐츠페인으로표현 컨텐츠페인내에보여줄컴포넌트배치 레이아웃관리자가컨텐츠페인에지정 17/48 기본스윙컴포넌트 JButton 스윙의모든버튼클래스들은추상클래스인 AbstractButton 클래스의하위클래스 메뉴항목도하나의버튼으로간주 메뉴항목의클릭시버튼처럼행동 JLabel AWT 의단순텍스트형식보완 스윙에서는텍스트, HTML 포맷의텍스트, 아이콘구성가능 18/48
스윙컴포넌트 모든스윙컴포넌트들은컨테이너 JComponent 는 Container 의하위클래스 JSplitPane 하나의프레임을둘로나눌때사용 수평, 수직분할가능 초기위치지정및분할위치이동가능 JDesktopPane, JInternalFrame 데스크탑내에존재하는경량의프레임구성가능 19/48 스윙컴포넌트 AWT 컴포넌트에대한스윙컴포넌트제공 AWT 와의호완성유지 AWT 클래스이름에 J 를붙여서사용 스윙자체의새로운컴포넌트추가 20/48
스윙컴포넌트 AWT 에대응되는컴포넌트들 JButton, JMenuItem, JMenu, JCheckbox, JLabel, JList, JMenuBar, JPanel, JPopupMenu, JScrollBar, JScrollPane, JTextArea, JTextField, JApplet, JDialog, JFrame, JWindow 스윙고유의컴포넌트들 JRadioButton, JColorChooser, JComboBox, JCheckBoxMenuItem, JRadioButtonMenuItem, JInternalFrame, JSplitPane, JProgressBar, JSlider, JTabbedPane, JPasswordField, JToolBar, JTree, JTable http://download.oracle.com/javase/tutorial/uiswing/components/index.html 참고 21/48 프레임윈도우의생성 JFrame 클래스 : javax.swing package 에포함 import javax.swing.*; 이용 프레임윈도우생성과정 1) JFrame 클래스의객체생성 JFrame frame = new JFrame(); 2) 프레임크기설정 frame.setsize(300, 400); 3) 필요시, 프레임제목지정 frame.settitle("an Empty Frame"); 4) 디폴트닫힘연산지정 : 프레임종료시프로그램자동종료위함 frame.setdefaultcloseoperation(jframe.exit_on_close); 5) 프레임보여줌 frame.setvisible(true); 22/48
EmptyFrameViewer.java 실습 강의홈페이지의 EmptyFrameViewer.java code 를이해하라. ( 교재 193 페이지참고 ) 실행결과를확인하라. 교재 194 페이지의자습문제 1 번을해결하라. 제목표시줄에 Hello, World! 라는내용표시 동시에두개의프레임을표시 이때아래의 API 를참고하라. JAVA API 의 JFrame 클래스참고 JAVA API 의 Frame 클래스참고 23/48 도형그리기 추상클래스인 JComponent 를확장 JComponent 를확장한클래스에서그려야할도형생성 public void paintcomponent(graphics g): 자신의도형을생성하는메소드 윈도우가처음생성되거나다시보여야할때자동적으로호출됨 사용자가원하는모양을그리고자할때 paintcomponent(graphic g) 를재정의 (overriding) public class RectangleComponent extends JComponent { public void paintcomponent(graphics g) { // Recover Graphics2D Graphics2D g2 = (Graphics2D) g;... // 필요한그리기코드작성 } } 24/48
도형그리기 Graphics 클래스 : 그리는작업에사용되는색상, 폰트와같이그래픽생성에필요한정보와메소드제공 Graphics2D 클래스 : draw 메소드보유 2차원그래픽객체를그리기위해좀더정교한메소드가필요할때캐스팅을통하여 Graphics2D 클래스로만들어사용 좀더강력한객체지향접근법제공 Rectangle box = new Rectangle(5, 10, 20, 30); g2.draw(box); // draw(shape s) vs. drawoval, drawpolygon, drawline, etc. java.awt.graphics, java.awt.graphics2d 클래스참고 25/48 컴포넌트객체의표현예 RectangleComponent: paintcomponent 메소드를이용하여 2개의사각형을생성 RectangleViewer: 그림이그려진컴포넌트를프레임에추가한후화면을생성 프레임생성 컴포넌트클래스의객체생성 RectangleComponent component = new RectangleComponent(); 컴포넌트객체를프레임에추가 frame.add(component); 프레임보여줌 26/48
RectangleViewer.java 실습 강의홈페이지의 RectangleComponent.java, RectangleViewer.java code를이해하라. ( 교재 196, 197 페이지참고 ) 실행결과를확인하라. 교재 198 페이지의자습문제 3~5번을해결하라. 두개의정사각형을그려라. 하나의사각형과하나의정사각형을그리도록수정하라. g2.draw(box) 대신 g.draw(box) 를호출하면? Graphics2D 객체가아닌 Graphic 객체를이용하여 RectangleComponent.java 를구성하라. JAVA API의 Graphics, Graphics2D 클래스참고 27/48 Applet 이용한도형그리기 뷰어클래스불필요, 대신 HTML 파일이용 애플리케이션프로그램과의차이 JComponent 대신 Applet 를확장 paintcomponent 대신 paint 메소드에서그림그리는작업수행 import java.applet.*; applet public class MyApplet extends Applet { public void paint(graphics p g) { // Recover Graphics2D Graphics2D g2 = (Graphics2D) g; // Drawing instructions go here... } }// import javax.swing.japplet; 를 import할경우 JApplet을확장 28/48
Application vs. Applet 실습 강의홈페이지의 applet 폴더내의 RectangleApplet.java, RectangleApplet.html code를이해하라. 실행결과를확인하라. RectangleViewer.java 코드와비교하면서애플리케이션프로그램과애플릿프로그램과의차이를이해하라. 교재 198 페이지자습문제 3~5번의해결책은같은가? 두개의정사각형을그려라. 하나의사각형과하나의정사각형을그리도록수정하라. g2.draw(box) 대신 g.draw(box) 를호출하면? JAVA API 의 Applet 클래스참고 29/48 그래픽도형 원, 타원그리기 import java.awt.geom.ellipse2d; // no.double... Ellipse2D.Double ellipse = new Ellipse2D.Double(x, y, width, height); g2.draw(ellipse);... (0,0) X 축 Y 축 캔버스구조 30/48
그래픽도형 혹은 java.awt.graphics 클래스에있는메소드사용 원, 타원 drawoval 메소드와 filloval 메소드이용 drawoval(20,20, 50,50); // 시작점, 폭, 높이 호 (Arc) drawarc 메소드이용 6 개의매개변수 처음 4개의매개변수 : 사각형을그리는매개변수값과동일 5 번째매개변수 : 호를그리기위한시작각 6번째매개변수 : 호의중심각 g.drawarc(20,20,50,50, 90,180); 31/48 그래픽도형 선그리기 Line2D.Double segment = new Line2D.Double(x1, y1, x2, y2); // 혹은 Point2D.Double from = new Point2D.Double(x1, y1); Point2D.Double to = new Point2D.Double(x2, y2); Line2D.Double segment = new Line2D.Double(from, to); 텍스트입력 g2.drawstring("message", " 50, 100); // 문자열과기본점의 x, y 좌표 32/48
그래픽도형 혹은 java.awt.graphics 클래스에있는메소드사용 선 (Line) drawline() 메소드이용 g.drawline(20,20, 80,80); // 시작점과끝점의 x,y 의좌표 사각형 (Rectangle) 일반적인사각형, 둥근모서리사각형, 3 차원사각형제공 drawrect() 메소드, drawroundrect() 메소드 drawrect(20,20, 50,50); // 시작점, 폭, 높이 각사각형에대한채워진사각형을그릴수있는메소드제공 fillrect 메소드, fillroundrect 메소드 33/48 그래픽도형 다각형 (Polygon) drawploygon(polygon p) drawpolygon(int[] xpoints, int[] ypoints, int npoints) // 혹은 Polygon p = new Polygon(); p.addpoint (30, 30); p.addpoint (5, 50); p.addpoint (40, 75); p.addpoint (70, 20); p.addpoint (35, 10); g2.drawpolygon(p); int[] xpnts = {30, 5, 40, 70, 35}; int[] ypnts = {30, 50, 75, 20, 10}; int npnts = xpnts.length; g2.drawpolygon(xpnts, ypnts, npnts); 34/48
그래픽도형 색 java.awt.color 클래스 자바의칼라상수 Color.black, Color.green, Color.red, Color.blue, Color.lightGray, Color.white, Color.cyan, Color.magenta, Color.yellow,Color.darkgray, Color.orange, Color.gray, Color.pink 객체생성자 Color(int, int, int) // red, green, blue 순서 Color(float, float, float) 35/48 그래픽도형 그래픽객체의색상변경 g2.setcolor(magenta); 도형의내부를색칠할때 draw 메소드대신 fill 메소드사용 g2.fill(rectangle); // filled with current color 36/48
그래픽도형 폰트 java.awt.font 클래스 제공글꼴 Dialog DialogInput Serif SansSerif Monospaced 객체생성자 Font(String name, int style, int size) // 글꼴이름, 스타일 ( 볼드, 이탤릭등 ), 폰트크기정의 37/48 텍스트입력 JOptionPane 클래스를통해대화상자를보여주고사용자입력처리가능 showinputdialog 를사용하여사용자입력 showinputdialog는사용자가입력한문자열을리턴 필요시문자열을 integer 나 double 형태로변환하여사용 Integer.parseInt (String s) : 문자열을 integer로변환 Double.parseDouble (String s) : 문자열을 double 로변환 String input = JOptionPane.showInputDialog("Enter x"); double x = Double.parseDouble(input); 38/48
복잡한모양그리기 각각의복잡한모양을독립된클래스로생성 class Car {... public void draw(graphics2d g2) { // Drawing instructions... } } 복잡한모양은모눈종이에스케치를통해좌표파악 39/48 [ 실습 1] House 그림이해 강의홈페이지의 HouseComponent.java, HouseViewer.java code를테스트하고프로그램을이해하라. paintcomponent 메소드명을다음과같이변경후테스트하라. paint paintcomp 출력이달라질경우그이유는무엇인가? house 폴더및오른쪽그림내용참고 Applet 을상속받는 HouseApplet 클래스를설계하고같은그림을 Applet으로그려라. 40/48
[ 실습 2] Polygon 생성 실습 1 의코드를수정하여아래의왼쪽그림과같은 polygon을생성하라. 좌표는다음의정보를사용하라. int[] xpnts = {30, 5, 40, 70, 35}; int[] ypnts = {30, 50, 75, 20, 10}; 아래의오른쪽그림과같이 polygon 내부에적절한색상을지정하라. 41/48 [ 실습 3] Car 그림생성 강의홈페이지의 CarComponent.java code를테스트하고프로그램을이해하라. ( 교재 209~212 페이지참고 ) Car.java 파일을수정하여아래의두번째그림처럼차의본체나바퀴등에적절한컬러를입혀라. 이후 CarComponent.java 파일을수정하여아래의세번째그림처럼 3개이상의차를생성하라. 복수개의 Car 생성을위해서이용한세 java 코드의구성을이해하라. 42/48
[ 실습 4] 텍스트입력 강의홈페이지의 ColoredSquareComponent.java code 를테스트하고다양한컬러를생성해보고프로그램을이해하라. ( 교재 220~222 페이지참고 ) 43/48 [ 실습 5] 시계화면생성 강의홈페이지의 ClockComponent.java code 를완성하라. ( 아래그림참고 ) 44/48
[ 실습 6] 동심원생성 ClockComponent.java code 를변형하여아래그림과같은동심원을생성하라. 컬러를변형하여아래그림과같은과녁판을생성하라. 45/48 [ 실습 7] Font 의사용 강의홈페이지의 FontViewer.java code 를테스트하고프로그램을이해하라. 폰트의종류와크기, 위치등을변경하여다양한종류의폰트들을생성하라. 46/48
[ 실습 8] 시계화면보강 실습 5 와실습 7 을결합하여다음과같은시계화면을그리도록 ClockComponent.java code를수정하라. ( 아래그림참고, 시각폰트정보추가 ) 47/48 Reading Assignment 5 강강의자료 ( 결정문및반복문 ) 읽어올것. 48/48