Creating a GUI program (not HTML Applet)



The finer details in GUI

Common Attributes we like to mess with

• attributes add another dimension to our GUI Components

o remember your audience when designing our application

• refer to the Java Component Reference for a comprehensive list

o given on website

• all attribute setups should be completed in the constructor

• changes to the JComponents can be done ANYWHERE in the class since the components are private members of the GUI class

|Common Attribute Setups |

| |

|JBnum1.setBackground(Color.red); |

|JBnum1.setPreferredSize(new Dimension(50, 50)); |

|JBnum1.setText(“Option 1”); |

|JBnum1.setForeground(Color.red); |

|String answer = JTFcalculator.getText(); |

Spacing between GUI Components

• places distance between components, but not an overall border

|Different Layout setup for Spacing |

| |

|this.setLayout(new GridLayout(2,3, 20, 30)); //(rows, cols, hgap, vgap) |

| |

|this.setLayout(new BorderLayout(20, 30)); |

| |

|this.setLayout(new FlowLayout(FlowLayout.CENTER, 20, 30)); // you find the rest!!! |

|[pic][pic] |

Setting the size of Java Components

• you can set the size of ANY GUI Component, even JPanels!!

o all have a default size

• set with setPreferredSize and Dimensions (width, height) in PIXELS

o map it out!!

• BUT there are issues in which Layout you use!!

button1.setPreferredSize(new Dimension(25, 25)); // JButton

LeftJFwindow.setPreferredSize(new Dimension(200, 70)); // JFrame/JPanel

FlowLayout and non-issues in setting sizes

• FlowLayout respects the sizes of each component

o cannot say that about all Layouts

• even gives some spacing in between

GridLayout and Setting size issues

• any change to ONE component’s size, and the rest follow of the grid will follow

|GridLayout PreferredSize Issues |

|no preferred size change |preferred size change |

| | |

|JBnum1.setBackground(Color.red); |JBnum1.setBackground(Color.red); |

| |JBnum1.setPreferredSize(new Dimension(200, 70)); |

|[pic] |[pic] |

• you can cheat this slightly, by using sub panels, and placing components of varying sizes.

o The Panel should be the largest item in the combination

|The gridlayout cheat |

| |

|this.setLayout(new GridLayout(2,3)); |

| |

|// setting properties of the GUI components |

|JBnum1.setBackground(Color.red); |

|JBnum1.setPreferredSize(new Dimension(50, 50)); |

| |

|JBnum2.setBackground(Color.blue); |

|JBnum2.setPreferredSize(new Dimension(25, 25)); |

| |

|JPanel JsubPanel1 = new JPanel(); |

|JsubPanel1.setPreferredSize(new Dimension(100, 70)); |

|JsubPanel1.add(JBnum1); |

| |

|JPanel JsubPanel2 = new JPanel(); |

|JsubPanel2.setPreferredSize( )); |

|JsubPanel2.add(JBnum2); |

| |

|this.add(JsubPanel1); |

|this.add(JsubPanel2); |

|this.add(JBnum3); |

|this.add(JBnum4); |

|this.add(JBnum5); |

|this.add(JBnum6); |

|[pic] |

|Notice the overall grid sizes are STILL the same!! |

Spacing around JPanels and GUI Components

• using Border Factory

• pick any from the List

o in Lupoli’s Java Component Reference document

• just add a BorderLayout to the Panel the GUI Components reside

• Individual GUI Component Spacing

o works the same as setting the border or a JPanel

o some may not appear or are REALLY small

|Placing a border around a Panel |

|[pic] |

| |

|Calc() |

|{ |

|this.setLayout(new GridLayout(2,3, 20, 30)); |

|this.setBorder(BorderFactory.createEmptyBorder(5,5,5,5)); |

|// the order is top, left, bottom, and right |

| |

|// setting properties of the GUI components |

|JBnum1.setBackground(Color.red); |

|JBnum1.setPreferredSize(new Dimension(50, 50)); |

|JBnum1.setBorder(BorderFactory.createTitledBorder ("Title")); |

Setting the size for Objects in a Mixed Layout

• One major item to remember is that the BIGGEST ITEM will skew all other panels

o GridLayout did not respect the size of ALL components!!

• but sub panels can help in respecting the size you really want your component

|What didn’t work!!! (No sub panel) |

| | |

|this.add(reset, BorderLayout.EAST); |this.add(reset, BorderLayout.EAST); |

| |reset.setPreferredSize(new Dimension(30,30)); |

|[pic] |[pic] |

| |// notice WIDTH is 30, but not height!! |

• How to fix the Problem

o Create a (little) JPanel for the EAST Panel

o add Button to EAST subPanel

o set Button’s preferredSize in the subPanel

|What did work!! Using subPanels |

|Code |Results |

|JPanel subPanelEast = new JPanel(); |[pic] |

|subPanelEast.add(reset); | |

| | |

|// added to the MASTER Panel | |

|this.add(subPanelEast, BorderLayout.EAST); | |

| | |

|reset.setPreferredSize(new Dimension(30,30); | |

With your new knowledge, create the JPanel (constructor method only) that will look like below. Use only JButtons(A,B,C,D) and JLabels(you need to create). Add all items to something OTHER than a BorderLayout. Ignore the border in between Components.

|[pic] |A = 30 x 30 |

| |B = 15 x 15 |

| |C = 15 x 30 |

| |D = 15 x 30 |

Answersb:

ButtonGroups

• button groups are for RadioButtons, ToggleButtons, etc… where you only want ONE selected out the of many

o called mutually exclusive

|JToggleButton |JRadioButton |

|[pic] |[pic] |

|ButtonGroup Procedure |

|private JRadioButton choiceA1 = new JRadioButton("Celsius"); |1. create the GUI Components (JToggle and JButton) |

|private JRadioButton choiceB1 = new JRadioButton("Fahrenheit"); | |

|private JRadioButton choiceC1 = new JRadioButton("Kelvin"); |2. create ButtonGroup(s) after GUI Components, but |

|private JRadioButton choiceD1 = new JRadioButton("None"); |in same section |

|… | |

| |3. Add GUI to JPanel as normal |

|// WITHIN CONSTRUCTOR!! | |

|ButtonGroup question1 = new ButtonGroup(); |4. Then add GUI Components to the ButtonGroup |

|ButtonGroup question2 = new ButtonGroup(); | |

|ButtonGroup question3 = new ButtonGroup(); | |

|… | |

|centerPanel.add(choiceA1); // added to JPanel | |

|centerPanel.add(choiceB1); | |

|centerPanel.add(choiceC1); | |

|centerPanel.add(choiceD1); | |

| | |

|question1.add(choiceA1); // added to ButtonGroup | |

|question1.add(choiceB1); | |

1. The JRadioButtons are already created in your LAST lab. In the constructor, create the code:

a. Create ONE button group named “question” for all JRadioButtons

b. ADD all buttons to the PANEL

c. ADD all buttons to the ButtonGroup

ImageIcons and Text in our JButtons

|Messing with ImageIcons and Text |

|Without setting Position |Setting Positions |

|[pic] |[pic] |

• A button can have an image and text on top if it

• How to add an image to the Eclipse project

o get the image first!

o place it carefully in the Eclipse Project

▪ NOT in the src

|Where to place the image in the Eclipse Project |

|[pic] |

• Including the image in the JButton (or JComponent)

o declaring the image is done in the PRIVATE section

o adding the image to the JButton is done of course INSIDE the constructor

o things to think about

▪ 1. The image’s default size will size the JButton

▪ 2. The text on the JButton will be there, but might be difficult to read

▪ 3. The text’s position on the button

|First Rough ImageIcon Example |

|code |

|public class Calc extends JPanel |

|{ |

|private JTextField JTFanswer = new JTextField("0", 40); |

|private JButton JBnum1 = new JButton("1"); |

|private JButton JBnum2 = new JButton("2"); |

|private JButton JBnum3 = new JButton("3"); |

|private final ImageIcon kermie = new ImageIcon("Kermit4.jpg"); |

| |

|OR |

| |

|private final ImageIcon kermie = new ImageIcon(this.getClass().getResource("Kermit4.jpg")); |

| |

|Calc() |

|{ |

|JBnum1.setIcon(kermie); |

| |

|// adding everyone to the BASE panel, by default, FlowLayout |

|this.add(JBnum1); |

|this.add(JBnum2); |

|this.add(JBnum3); |

|… |

|the raw results |

|[pic] |

|Cleaned Up ImageIcon Example |

|code |

| |

|public class Calc extends JPanel |

|{ |

|private JTextField JTFanswer = new JTextField("0", 40); |

|private JButton JBnum1 = new JButton("1"); |

|private JButton JBnum2 = new JButton("2"); |

|private JButton JBnum3 = new JButton("3"); |

|private final ImageIcon kermie = new ImageIcon(this.getClass().getResource("Kermit4.jpg")); |

| |

|Calc() |

|{ |

|JBnum1.setIcon(kermie); |

|JBnum1.setVerticalTextPosition(SwingConstants.CENTER); |

|JBnum1.setHorizontalTextPosition(SwingConstants.CENTER); |

|JBnum1.setPreferredSize(new Dimension(100,100)); |

| |

|// adding everyone to the BASE panel, by default, FlowLayout |

|this.add(JBnum1); |

|this.add(JBnum2); |

|this.add(JBnum3); |

|… |

|the raw results |

|[pic] |

Notice the image is cut!! So work your image to the size you need!!!

Importing Images into your Project

• please make sure that your images are already edited and ready to go

• place the image file somewhere easy to find (desktop, documents, etc…)

o it will then be copied into your project

• inside Eclipse

o select the Project

o then right click and select Import

o select General

o select File

o find file

From the previous exercise, add the code to place an image on any of the buttons. You will need to copy and paste a picture in the src folder first. Then add the code to center the text on the button

Reducing Action Listener Code – Written on Button

• so far what I have shone you for an actionlistener is not the most efficient

• but the application must be right

o various buttons do ALMOST the exact same thing

o or have ALMOST the same written text on the Button

▪ notice those NOT similar will not work

o and the overall result need to be same

▪ we mark those that are not, place them in an if-else structure later

|Reduce ActionListener Code – by written value |

|Before |

| |

|private buttonListener(eventSource e) implements actionListener |

|{ |

|String actionCommand = e.getActionCommand(); // what’s written |

| |

|if(actionCommand == “1”) |

|{ display.setText(display.getText()+"1"); } |

|if(actionCommand == “2”) |

|{ display.setText(display.getText()+"2"); } |

| |

|… |

| |

|if(actionCommand == “0”) |

|{ display.setText(display.getText()+"0"); } |

|if(actionCommand ==call){ updateBox("..Calling"); } |

|if(actionCommand ==end){ clearBox(); } |

|} |

|After |

| |

|private class ButtonListener implements ActionListener |

|{ |

|public void actionPerformed(ActionEvent e) |

|{ |

|String actionCommand = e.getActionCommand(); |

|// gets what was written on GUI Component |

| |

|if(actionCommand == “call”){ updateBox("..Calling"); } |

|else if(actionCommand == “end”){ clearBox(); } |

|else { JTFanswer.setText(JTFanswer.getText() + actionCommand); } |

|} |

|} |

Reducing A.L. Code – Written on Button (Option 2)

• New to Java 7, we can use Strings in switch/case statements

• will not be as concise as the previous example, but not bad, and easy to copy/paste and change

• will match what is written on the button

|Switch statements in ActionListeners |

|public void actionPerformed(ActionEvent e) |

|{ |

|String actionCommand = e.getActionCommand(); |

| |

|switch(actionCommand) |

|{ |

|case "Exit": JTFanswer.setText("Exit"); break; |

|case "Clear": JTFanswer.setText("Clear"); break; |

|case "3": JTFanswer.setText(JTFanswer.getText() + "3"); break; |

|case "4": JTFanswer.setText(JTFanswer.getText() + "4"); break; |

|case "5": JTFanswer.setText(JTFanswer.getText() + "5"); break; |

|case "6": JTFanswer.setText(JTFanswer.getText() + "6"); break; |

|case "7": JTFanswer.setText(JTFanswer.getText() + "7"); break; |

|case "8": JTFanswer.setText(JTFanswer.getText() + "8"); break; |

|case "9": JTFanswer.setText(JTFanswer.getText() + "9"); break; |

|case "0": JTFanswer.setText(JTFanswer.getText() + "0"); break; |

|} |

|} |

Reducing A.L. Code – Written on Button (Option 3)

• this option works when the text on JButtons are just numbers

• will match what is written (a number) on the button

• will cast the getActionCommand to an integer

o notice case 1 not case “1”

• uses a simpler switch/case statement to differentiate

• the number can -1 too!!

• other types of numbers??

o casting needs to be different datatype

o case statements can use char, byte, short, int, Character, Byte, Short, Integer and String (not Double!!)

|Switch statements (non Strings) in ActionListeners |

|private class ButtonListener implements ActionListener |

|{ |

|public void actionPerformed(ActionEvent e) |

|{ |

|int actionCommand = Integer.parseInt(e.getActionCommand()); |

| |

|switch(actionCommand) |

|{ |

|case 1: JTFanswer.setText(JTFanswer.getText() + "1"); break; |

|case 2: JTFanswer.setText(JTFanswer.getText() + "2"); break; |

|case 3: JTFanswer.setText(JTFanswer.getText() + "3"); break; |

|case 4: JTFanswer.setText(JTFanswer.getText() + "4"); break; |

|case 5: JTFanswer.setText(JTFanswer.getText() + "5"); break; |

|case 6: JTFanswer.setText(JTFanswer.getText() + "6"); break; |

|case 7: JTFanswer.setText(JTFanswer.getText() + "7"); break; |

|case 8: JTFanswer.setText(JTFanswer.getText() + "8"); break; |

|case 9: JTFanswer.setText(JTFanswer.getText() + "9"); break; |

|case 10: JTFanswer.setText(JTFanswer.getText() + "10"); break; |

|} |

|} |

|} |

Reducing Action Listener Code – Buttons Similar

• so far what I have shone you for an actionlistener is not the most efficient

• but the application must be right

o various buttons do AMLOST the exact same thing

o or have ALMOST the same instance name for the Button

o and the overall result need to be same

• We can’t do YET!!!

• There is no way to retrieve the instance name of the button pressed

o using the DEFAULT JButton

• There is a way, if we extend the JButton class

o covered in the next lecture

|Reduce ActionListener Code – by Instance name |

|Before |

| |

|private buttonListener(eventSource e) implements actionListener |

|{ |

|if(e.getSource()== num1) |

|{ display.setText(display.getText()+"1"); } |

|if(e.getSource()== num2) |

|{ display.setText(display.getText()+"2"); } |

| |

|… |

| |

|if(e.getSource()== num9) |

|{ display.setText(display.getText()+"9"); } |

|if(e.getSource()== num0) |

|{ display.setText(display.getText()+"0"); } |

|if(e.getSource()==call){ updateBox("..Calling"); } |

|if(e.getSource()==end){ clearBox(); } |

|} |

|After |

| |

|Not yet!!! |

The world of ActionListeners

• there are a massive amounts of listeners we can adapt

• here are just a few

o Document Listener

o Focus Listener

o Item Listener

o Key Listener

o Mouse Listener

o etc…

• java has examples of all of these at

o

• when reviewing make sure to watch what type of GUI Component they are using

o Item Listener ( check boxes, check menu items, toggle buttons, …

• I will go over the most common ones

Creating a Simple Right Click feature

• the feature must be attached (or added) to a GUI Component

o much like a normal actionListener

o if we click AROUND the GUI component, the action is not activated

• we will use the MouseListener ActionListener

o we have to identify two things

▪ when the mouse has been pressed

▪ AND that it was the RIGHT button

|Very Simple Right Click Feature |

|private class RightClicker extends MouseAdapter |

|{ |

|public void mousePressed(MouseEvent e) |

|{ |

|if( e.isMetaDown() ) // used to determine is was a RIGHT click |

|{ |

|// the line below will need to be Custom |

|// if the GUI Component has been customized |

|JButton temp = (JButton) e.getSource(); |

| |

|// whatever is to happen when the button is clicked is here |

|temp.setBackground(Color.red); |

| |

|// again, since it MAY be a custom button, |

|// we may be able to retrieve values |

|// such as row and column |

|} |

|} |

|} |

Passing GUI components

• any GUI component is treated like a variable. In most cases accessing a GUI component within the SAME class is not passed since it already has access to it.

• But if a DIFFERENT class needs access to the GUI component, it must be passed EXACTLY LIKE PASSING VARIABLES TO A FUNCTION

|Passing GUI Components |

|GUI_II_Examples() |

|{ |

|add(combo1); |

| |

|combo1.addActionListener(new ComboListener()); |

| |

|prepButton(choiceA1); |

|add(choiceA1); |

|} |

| |

|void prepButton(JRadioButton x) |

|{ |

|x.setBackground(Color.BLUE); |

|x.setForeground(Color.yellow); |

|} |

Using 2 or more GUI Windows

• the setup is exactly the same as before but

o the Driver now has 2 or more JFrames to initiate

o Should have a class for EACH JFrame you create

Creating a Runnable JAR file with Images

• creating an executable JAR file enables us to run the program we created

• it will compile all of the files we have in our PROJECT into ONE file

o double click the file an it will run

• there is one issue, when it comes to images

o the image is NOT included unless we use the “getResouce” code

• click on your project, then export, Java, and Runnable jar file

|Creating a runnable JAR File |

|[pic] |

FYI Section

Making a JTextArea into a ListBox

• You can make the JTextArea list items on different line

• Creating it is just the same but you must use the APPEND command and a ‘n’ to denote an end to THAT line

textbox.append(String + '\n');

1. The JTextArea is already created. In the constructor, create the code:

a. change the text to “Lupoli is da man”

b. ADD the text on a new line “Well, not really”

c. the background color to Blue

d. make it uneditable

e. add it to the Panel and run the project

ActionListener for ComboBox

• The ActionListener is unique because of the list of items inside the comboBox

• Notice I use another class name, just to help differentiate between different Components

• Must import java.awt.event.*;

|ActionListener for ComboBox Example |

|private class ComboListener implements ActionListener |

|{ |

|public void actionPerformed(ActionEvent event) |

|{ |

|// Get the source of the component, which is our combo box. |

|JComboBox comboBox = (JComboBox) event.getSource(); |

| |

|// Print the selected items and the action command. |

|System.out.println("Selected Item = " + comboBox.getSelectedItem()); |

|System.out.println("Action Command = " + event.getActionCommand()); |

| |

|// select statements would be located |

| |

|} |

|} |

1. The JComboBox is already created. In the constructor, create the code:

a. Find JComboBox in the Java APIs

b. Using the Java Component Reference (link), add items to your comboBox

c. ADD another item to the comboBox “Need a Vacation”

d. Add an actionListener named ComboListener

e. In the actionListener, use an if-else if structure to display (JOptionPane) what the user displayed

f. add it to the Panel and run the project

Action Listener for a Checkbox

• does not work with the normal “actionPerformed” function in an actionlistener

• uses “itemStateChange” reserved function inside the SAME actionListener class

o shown below

| |

| |

public void itemStateChanged(ItemEvent ie) {

// TODO Auto-generated method stub

Checkbox cb = (Checkbox) ie.getItemSelectable();

if (cb.getLabel().equals("English")){

langEN();

} else if (cb.getLabel().equals("German")){

langDE();

} else if (cb.getLabel().equals("Spanish")){

langSP();

} else if (cb.getLabel().equals("French")){

langFR();

}

}

Answers Section

|Lupoli’s Weird Buttons |

|// thanks Dustin Filippi Summer 2012 |

| |

|import java.awt.*; |

|import java.awt.event.*; |

| |

|import javax.swing.*; |

| |

|public class Panels extends JPanel |

|{ |

|private JTextField answer = new JTextField("0", 40); |

|// 0 is placed into the text, 40 chars long |

| |

|private JButton number1 = new JButton("A"); |

|private JButton number2 = new JButton("B"); |

|private JButton number3 = new JButton("C"); |

|private JButton number4 = new JButton("D"); |

|private JLabel empty = new JLabel(" "); |

| |

|Panels() |

|{ |

|number1.setPreferredSize(new Dimension(100,120)); |

|number2.setPreferredSize(new Dimension(50,50)); |

|number3.setPreferredSize(new Dimension(100,40)); |

|number4.setPreferredSize(new Dimension(100,50)); |

|empty.setPreferredSize(new Dimension(40,40)); |

| |

|this.setLayout(new GridLayout(1, 3)); |

|JPanel panel1 = new JPanel(); |

|panel1.add(number1); |

| |

|JPanel panel2 = new JPanel(); |

|JPanel panel2Inner = new JPanel(); |

|panel2Inner.setLayout(new GridLayout(2, 1)); |

|JPanel panel2InnerInner = new JPanel(); |

|panel2InnerInner.setLayout(new FlowLayout()); |

|panel2InnerInner.add(empty); |

|panel2InnerInner.add(number2); |

|panel2Inner.add(panel2InnerInner); |

|panel2Inner.add(number3); |

|panel2.add(panel2Inner); |

|JPanel panel3 = new JPanel(); |

|JPanel panel3Inner = new JPanel(); |

|panel3Inner.setLayout(new GridLayout(2, 1)); |

|panel3Inner.add(number4); |

|panel3.add(panel3Inner); |

|this.add(panel1); |

|this.add(panel2); |

|this.add(panel3); |

|} |

|} |

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download