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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- problem 1 20 points general questions about topics
- cs 1301 ch 6 handout 1
- implementation plan template
- software requirements specification
- valdosta state university
- installation and deployment guide
- creating a gui program not html applet
- interface control document icd template
- system design document template cms
Related searches
- creating a mission statement worksheet
- creating a business model
- creating a business plan step by step
- importance of creating a will
- creating a budget worksheet pdf
- creating a resume
- creating a vision statement exercise
- creating a business email
- creating a business plan
- creating a vision statement worksheet
- creating a marketing campaign example
- steps to creating a business plan