week8. Graphic User Interface

week7. practical lab test ~ pass (...ㅠ.ㅜ...망했따능)

다음주 시험은 잘봐야지!!! 

◆ Graphic Applications and Frame Windows

◇ Steps to show a frame

1. Construct and object of the JFrame class

JFrame frame = new JFrame();

2. Set the size of the frame

frame.setSize(300,400);

3. If you'd like, set the title of the frame

frame.setTitle("An Empty Frame");

4. Set the "default close operation"

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

5. Make the frame visible

frame.setVisible(true);

◆ Drawing on a Component

- Define a class that extends the JComponent class

◆ Classes Graphics and Graphics2D

- Graphics class lets you manipulate the graphics state (such as current color)

- Graphics2D class has methods to draw shape objects

- Use a cast to recover the Graphics2D object from the Graphics parameter:

public class RectangleComponent extends JComponent

{

public void paintComponent(Graphics g)

{

// Recover Graphics2D

Graphics2D g2 = (Graphics2D) g;

....

}

}

- Call method draw of Graphics2D class to draw shapes, such as rectangles, ellipses, line segments, polygon, and arcs :

public class RectangleComponent extends JComponent

{

public void paintComponent(Graphics g)

{

...

Rectangle box = new Rectangle(5, 10, 20, 30);

g2.draw(box);

....

}

}

◆ Ellipses

- Ellipse2D.Double describes an ellipse

- This class is an inner class - doesn't matter to us except for the import statement

   :

     import java.awt.geom.Ellipse2D ;

- Must construct and draw the shape

   :

     Ellipse2D.Double ellipse = new Ellipse2D.Double(x,y,width,height);

     g2.draw(ellipse);

◆ Drawing Lines

- To draw a line:

* 방법1

  Line2D.Double segment =

new Line2D.Double(x1, y1, x2, y2);

g2.draw(segment);

* 방법2

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.draw(segment);

◆ Colors

- Standard colors

: Color.BLUE, Color.RED, Color.PINK

- Specify red, green, blue between 0 and 255:

Color magenta = new Color(255, 0, 255);

- Set color in graphics context:

g2.setColor(magenta);

- Color is used when drawing and filling shapes

g2.fill(rectangle);

◆ Processing Text Input

- The actionPerformed method of the button's ActionListener reads the user input from the text fields (use getText) 

:

  class AddInterestListener implements ActionListener

  {

     public void actionPerformed(ActionEvent event)

    {

       double rate =

          Double.parseDouble(rateField.getText());

       double interest = account.getBalance() * rate / 100;

       account.deposit(interest);

       resultLabel.setText("balance: ”

          + account.getBalance());

    }

 }

◆ Text Areas

- Use a JTextArea to show multiple lines of text

- You can specify the number of rows and columns :

 final int ROWS = 10;

 final int COLUMNS = 30;

 JTextArea textArea = new JTextArea(ROWS, COLUMNS); 

- setText : to set the text of a text field or test area

- append : to add text to the end of a text area

- Use newline characters to separate lines:

textArea.append(account.getBalance() + "\n"); 

- To use for display purposes only:

  textArea.setEditable(false);

   // program can call setText and append to change it

- Classes JTextField and JTextArea are subclasses of library class JTextComponent

- Methods setText and setEditable are declared in the JTextComponent class and inherited by JTextField and JTextArea

- Method append is declared in the JTextArea class

- To add scroll bars to a text area:

JTextArea textArea = new JTextArea(ROWS, COLUMNS);

JScrollPane scrollPane = new JScrollPane(textArea);

◆ Layout Management

- Useful layout management :

* border layout

* flow layout

* grid layout

* grid-bag layout

- By default, JPanel places components from left to right and starts a new row when needed

- Panel layout carried out by FlowLayout layout manager

◆ Border Layout

-

North
West	Center	East
South

- Default layout manager for a frame

- When adding a component, specify the position like this.

panel.add(component, BorderLayout.NORTH); 

◆ Grid Layout

- Arranges components in a grid with a fixed number of rows and columns

- Resizes each component so that they all have same size (Equally)

- Expands each component to fill the entire allotted area

- Add the components, row by row, left to right :

JPanel numberPanel = new JPanel(); numberPanel.setLayout(new GridLayout(4, 3));numberPanel.add(button7); 
numberPanel.add(button8); 
numberPanel.add(button9); 
numberPanel.add(button4); 
...

7	8	9
4	5	6
1	2	3
0	.	CE

◆ Grid Bag Layout (Grid와 같지만 each cell의 size가 다를 수 있음)

- Tabular arangement of components

* Columns can have different sizes

* Components can span multiple columns

- Quite complex to use

- Not covered in the book

◆ Radio Buttons

- only one button can be selected at a time

- when a button is selected, previously selected button in set is automatically turned off

- isSelected : called to find out if a button is currently selected or not

if(largeButton.isSelected()) size = LARGE_SIZE

- ex.

JRadioButton smallButton = new JRadioButton("Small"); 
JRadioButton mediumButton = new JRadioButton("Medium");
JRadioButton largeButton = new JRadioButton("Large");

// Add radio buttons into a ButtonGroup so that 
// only one button in group is on at any time 
ButtonGroup group = new ButtonGroup(); group.add(smallButton); 
group.add(mediumButton); 
group.add(largeButton);

- ButtonGroup-> 그룹으로 묶어야 radio_button기능 (only one choice)

◆ Borders

- Place a border around a panel to group its content visually

- EtchedBorder : Three-dimensional etched effect

JPanel panel = new JPanel(); 

panel.setBorder(new EtchedBorder());

- TitledBorder : A border with a title

panel.setBorder(new TitledBorder(new EtchedBorder(),"Size"));

◆ Check Boxes

- 2 States : Checked and unchecked

- Use one checkbox for a binary choice

- Use a group of check boxes when one selection does not exclude another

- Don't place into a button group

- Individual function ≠ radio button

◆ Combo Boxes

- For a large set of choices, use a combo box

- "Combo" : combination of a list and a text field

- If combo box is editable, user can type own selection

* Use setEditable method

- Add strings with addItem method :

JComboBox facenameCombo = new JComboBox(); 
facenameCombo.addItem("Serif"); facenameCombo.addItem("SansSerif"); 
... 

◆ Menus

- A frame contains a menu bar

- The menu bar contains menus

- A menu contains submenus and menu items