1 / 23

Designing User Interfaces with Swing

Java Programming Language. Designing User Interfaces with Swing. Designing User Interfaces with Swing. Introduction Layout Management Panels Text Input Text Area Labels Making Choices Lists Advanced Layout Management Menu Scroll Bars Dialog Boxes.

faris
Download Presentation

Designing User Interfaces with Swing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Java Programming Language Designing User Interfaceswith Swing

  2. Designing User Interfaces with Swing • Introduction • Layout Management • Panels • Text Input • Text Area • Labels • Making Choices • Lists • Advanced Layout Management • Menu • Scroll Bars • Dialog Boxes Java Programming Language

  3. Designing User Interfaces with Swing • Java Swing provides various building block called components such as button,list box,check box, etc. for designing GUI. • The same user interface components are used to build both stand-alone programs and applets • every graphics application uses a class derived from the JFrame class to describe top-level window • every applet uses a class derived form theJApplet class to describe top-level window • Steps to design/code GUI. 1. make the components in the user interface look 2. position(layout) the user interface components 3. handle user input(events) Java Programming Language

  4. Swing Component Inheritance Hierarchy JButton JMenuItem JToggleButton Abstract Button JComboBox JLabel JList JMenuBar JOptionPane JPanel JScrollBar JTextComponent Object Component JCheckBox JRadioButton JComponent Window Container JTextField JTextArea Frame Dialog JFrame JDialog Java Programming Language

  5. Model-View-Controller Pattern • A good design pattern to design an application using graphical user interfaces • A basic architecture of swing components • Model-view-controller pattern • the model, which stores the contents • the view, which displays the contents • the controller, which handles user input :View 1:user input 2:update (visual only) :Controller 4: get data 3:notifies to update 2:update :Model Java Programming Language

  6. Applying MVC Pattern • Example: Bank Application 1.user input Deposit BalanceView1 BalanceView2 2.notify event 5a.update 3.get data Controller for Deposit Text Field 5b.update 6a. get data 6b. get data 4. update balance Balance Data Java Programming Language

  7. Layout Management • Layout Manager help arrange the various components you wish to add to a container • Types of Layout Managers • FlowLayout(default at JPanel and Applet) • BorderLayout(default at the contentPane of JFrame) • GridLayout • etc • Instead you do not specify absolute position for interface components, you specify a general rule for the layout (Platform independent) Java Programming Language

  8. North East West Center South Layout Management • Flow Layouts • alignment options and horizontal and vertical gaps FlowLayout.LEFT FlowLayout.CENTER (default) FlowLayout.RIGHT new FlowLayout(FlowLayout.LEFT) new FlowLayout(FlowLayout.LEFT, 10,10) • Border Layout • five areas • If none of the layout schemes fit your needs, break the surface of your window into separate panels, and lay out each panel separately. Java Programming Language

  9. Layout Management • Example public class BorderLayoutTest extends JFrame { public BorderLayoutTest() { setTitle("BorderLayoutTest"); JPanel p = new JPanel(); p.setLayout(new FlowLayout(FlowLayout.LEFT)); p.add(new JButton("Left")); p.add(new JButton("Right")); p.add(new JButton("Up")); p.add(new JButton("Down")); p.add(new JButton("Close")); Container contentPane = getContentPane(); contentPane.add("North", p); contentPane.add("East", new JScrollbar(Adjustable.VERTICAL)); contentPane.add("South", new JScrollbar(Adjustable.HORIZONTAL)); } Java Programming Language

  10. Panels • Panels act as(smaller) containers for interface elements and can themselves be arranged inside the window. • Panel allows more precise method of locating element(hierarchical layers) • Steps to use a Panel • build up a panel the way you want it to look • then add the panel to the window • Example Java Programming Language

  11. Panels • Code fragment for the example public class PanelTest extends JFrame implements ActionListner { public PanelTest() { setTitle("PanelTest"); JPanel p = new JPanel(); p.setLayout(new FlowLayout()); tick = new JButton(“Tick”); tick.addActionListner(this); p.add(new JButton("Tick")); reset = new JButton(“Reset”); reset.addActionListner(this); p.add(new JButton("Reset")); close = new JButton(“Close”); close.addActionListner(this); p.add(new JButton("Close")); clock = new ClockPanel(); Container contentPane = getContentPane(); contentPane.add("South", p); contentPane.add(“Center”, clock); // rest of constructor code } //rest of the panel test code goes here private JButton tick, reset, close; private ClockPanel clock; } Java Programming Language

  12. Event Handling • Class Diagram • Collaboration Diagram(event handling) JFrame JPanel Panel Test Clock Panel 1 contentPane: Container 1 listner JButton JPanel 3 1.click button Button:tick 2. actionPerformed Action Listener Clock Panel: clock aPanelTest 3. tick Java Programming Language

  13. Event Handling import java.awt.*; import java.event.*; import javax.swing.*; import javax.swing.event.*; public class PanelTest extends JFrame implements ActionListner { public PanelTest() { setTitle("PanelTest"); // ... } public void actionPerformed(ActionEvent evt) { Object source = evt.getSource(); if(source==tick) clock.tick(); else if(source==reset) clock.reset(); else if(source==close) System.exit(0); } } Java Programming Language

  14. Clock class ClockPanel extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); g.drawOval(0, 0, 100, 100); double hourAngle = 2 * Math.PI * (minutes - 3 * 60) / (12 * 60); double minuteAngle = 2 * Math.PI * (minutes - 15) / 60; g.drawLine(50, 50, 50 + (int)(30 * Math.cos(hourAngle)), 50 + (int)(30 * Math.sin(hourAngle))); g.drawLine(50, 50, 50 + (int)(45 * Math.cos(minuteAngle)), 50 + (int)(45 * Math.sin(minuteAngle))); } public void tick() { minutes++; repaint(); } public void reset() { minutes=0; repaint(); } private int minutes = 0; } Java Programming Language

  15. Text Input • Text input components • text field – single line input • text area – multiple lines of text • Text Component Classes • A text component has a document as model (MVC) • the document fires an document event (DocumentEvent) when the document changes • you can listen the document event using document listener(DocumentListener) Java Programming Language

  16. Text Fields • Text Fields • A text field is a basic text control that lets the user enter a small amount of text. • When the user indicates that text entry is complete (usually by pressing Return), the text field fires an action event (ActionEveent) • Example(JTextField) : Clock Java Programming Language

  17. Text Fields • Event Handling (using document listener) • Document and DocumentListener • Document : the model of all text components • textField.getDocument().addDocumentListener(listener); • Implementing DocumentListener // in the frame class private class ClockFieldListener implements DocumentListener { public void insertUpdate(DocumentEvent e) { setClock(); } public void removeUpdate(DocumentEvent e) { setClock(); } public void changedUpdate(DocumentEvent e) {} } 1. update TextField :hourField 2. insertUpdate or removeUpdate Clock Panel: clock Document Listener :aClockField Listener 3. setTime Java Programming Language

  18. Text Fields • Creating Text Fields class TextTestFrame extends JFrame { public TextTestFrame() { setTitle("TextTest"); setSize(DEFAULT_WIDTH, DEFAULT_HEIGHT); Container contentPane = getContentPane(); DocumentListener listener = new ClockFieldListener(); // add a panel with text fields JPanel panel = new JPanel(); hourField = new JTextField("12", 3); panel.add(hourField); hourField.getDocument().addDocumentListener(listener); minuteField = new JTextField("00", 3); panel.add(minuteField); minuteField.getDocument().addDocumentListener(listener); contentPane.add(panel, BorderLayout.SOUTH); // add the clock clock = new ClockPanel(); contentPane.add(clock, BorderLayout.CENTER); } Java Programming Language

  19. Text Fields // within the class TextTestFrame public void setClock() { try { int hours = Integer.parseInt(hourField.getText().trim()); int minutes = Integer.parseInt(minuteField.getText().trim()); clock.setTime(hours, minutes); } catch (NumberFormatException e) {} // don't set the clock if the input can't be parsed } public static final int DEFAULT_WIDTH = 300; public static final int DEFAULT_HEIGHT = 300; private JTextField hourField; private JTextField minuteField; private ClockPanel clock; Java Programming Language

  20. Text Fields class ClockPanel extends JPanel { public void paintComponent(Graphics g) { // draw the circular boundary super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; Ellipse2D circle = new Ellipse2D.Double(0, 0, 2 * RADIUS, 2 * RADIUS); g2.draw(circle); // draw the hour hand double hourAngle = Math.toRadians(90 - 360 * minutes / (12 * 60)); drawHand(g2, hourAngle, HOUR_HAND_LENGTH); // draw the minute hand double minuteAngle = Math.toRadians(90 - 360 * minutes / 60); drawHand(g2, minuteAngle, MINUTE_HAND_LENGTH); } public void drawHand(Graphics2D g2, double angle, double handLength) { Point2D end = new Point2D.Double(RADIUS + handLength * Math.cos(angle), RADIUS - handLength * Math.sin(angle)); Point2D center = new Point2D.Double(RADIUS, RADIUS); g2.draw(new Line2D.Double(center, end)); } public void setTime(int h, int m) { minutes = h * 60 + m; repaint(); } private double minutes = 0; private double RADIUS = 100; private double MINUTE_HAND_LENGTH = 0.8 * RADIUS; private double HOUR_HAND_LENGTH = 0.6 * RADIUS; } Java Programming Language

  21. Text Areas • Text area displays multiple lines of text and allows the user to edit the text with the keyboard and mouse. JTextArea textArea = new JTextArea( "This is an editable JTextArea " + "that has been initialized with the setText method. " + "A text area is a \"plain\" text component, " + "which means that although it can display text " + "in any font, all of the text is in the same font." ); textArea.setFont(new Font("Serif", Font.ITALIC, 16)); textArea.setLineWrap(true); textArea.setWrapStyleWord(true); • A text area is typically managed by a scroll pane • If you put a text area in a scroll pane, be sure to set the scroll pane's preferred size or use a text area constructor that sets the number of rows and columns for the text area JScrollPane areaScrollPane = new JScrollPane(textArea); areaScrollPane.setPreferredSize(new Dimension(250, 250)); • In the JTextArea, changes are broadcasted from the model via a DocumentEvent to DocumentListeners Java Programming Language

  22. Text Areas • Example : TextEditTest • creating text area with scroll pane textArea = new JTextArea(8, 40); textArea.setText ("The quick brown fox jumps over the lazy dog."); JScrollPane scrollPane = new JScrollPane(textArea); contentPane.add(scrollPane, BorderLayout.CENTER); Java Programming Language

  23. Text Areas • Event Handling JButton replaceButton = new JButton("Replace"); panel.add(replaceButton); eplaceButton.addActionListener(new ReplaceAction()); ... private class ReplaceAction implements ActionListener { public void actionPerformed(ActionEvent event) { String f = from.getText(); int n = textArea.getText().indexOf(f); if (n >= 0 && f.length() > 0) textArea.replaceRange(to.getText(), n, n + f.length()); } } Java Programming Language

More Related