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-code-complete.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

    			}

    		});