Display Image Using JList

Program Description:

The program below is a Java Program JList demonstration that allows you to display image in a JPanel by clicking or selecting an item in a JList. Each item has designated image which is controlled by an array in line 19-21. To understand more, see the "Important Part of the Program" section and look at line 19-21 and see how it worked.

Output:

Code:

/**
 * File: displayImageUsingJList.java
 * Tiltle: Display Image Using JList
 * Author: http://java-program-sample.blogspot.com/
 */

//Java Core Package
import javax.swing.*;
import javax.swing.event.*;
//Java Extension Package
import java.awt.*;

public class displayImageUsingJList extends JFrame {
	
	//Initializing JList, JPanel, JLabel, String classes and names and the class Icon
	private JList list;
	private JPanel p1,p2;
	private JLabel image;
	private String names[] = {"Orcs","Mage","Dwarf","Warrior","Elf"};
	private String classes[] = {"orcs.jpg","mage.jpg","dwarf.jpg","warrior.jpg","elf.jpg"};
	private Icon graphics[] = {new ImageIcon(classes[0]),new ImageIcon(classes[1]),new ImageIcon(classes[2]),new ImageIcon(classes[3]),new ImageIcon(classes[4])};

	//Setting up GUI
    public displayImageUsingJList() {
    	
    	//Setting up the Title of the Window
    	super("Display Image Using JList");

    	//Set Size of the Window (WIDTH, LENGTH)
    	setSize(540,290);

    	//Exit Property of the Window
    	setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    	
    	//Constructing JLabel which is going to be used to display images
    	image = new JLabel("Image Display Here");
		
		//Constructing JList and its property
		list = new JList(names);
		list.setVisibleRowCount(4);
		list.setFixedCellHeight(30);
		list.setFixedCellWidth(235);
		list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
		
		//Constructing JPanel with border
    	p1 = new JPanel();
    	p1.setBorder(BorderFactory.createTitledBorder("Select Image: "));
    	p1.add(new JScrollPane(list)); //Adding JList in JPanel 1 with JScrollPane that automatically creates Horizontal and Vertical Scroll bar
    	
    	//Constructing JPanel 2 with border
    	p2 = new JPanel();
    	p2.setBorder(BorderFactory.createTitledBorder("Image Preview: "));
    	p2.add(image); //Adding JLabel image in JPanel 2 where the images are to be displayed

    	//Setting up the container ready for the components to be added.
    	Container pane = getContentPane();
    	setContentPane(pane);

		//Setting up the container layout
    	GridLayout grid = new GridLayout(1,2);
    	pane.setLayout(grid);
    	
    	//Set up event handler on JList
    	list.addListSelectionListener(
    		
    		//Handle JList event if selected index is click
    		new ListSelectionListener() {
    			public void valueChanged(ListSelectionEvent event) {
    				
    				image.setText(null); //set the label to null ready for the image to be displayed
    				image.setIcon(graphics[list.getSelectedIndex()]); //display the selected image
    			}
    		});
    	
    	//Adding JPanel 1 and 2 to the container
    	pane.add(p1);
    	pane.add(p2);

    	/**Set all the Components Visible.
    	 * If it is set to "false", the components in the container will not be visible.
    	 */
    	setVisible(true);
    }
    
	//Main Method
    public static void main (String[] args) {
    	displayImageUsingJList diujl = new displayImageUsingJList();
	}
}

Important Part of the Program:

//Set up event handler on JList
    	list.addListSelectionListener(
    		
    		//Handle JList event if selected index is click
    		new ListSelectionListener() {
    			public void valueChanged(ListSelectionEvent event) {
    				
    				image.setText(null); //set the label to null ready for the image to be displayed
    				image.setIcon(graphics[list.getSelectedIndex()]); //display the selected image
    			}
    		});

Posted in: JList,JPanel