Swing Error Dialog with Exception Displayer

Posted on January 30, 2015 by felixzacat

When you get an error popup dialog in your application, sometimes you want to quickly have a look at what the exception is, instead of having to rummage around for a log file. This component, “ErrorDialogWithException” allows you to pop up a text area in a panel below the main dialog area.

Closed :

Open :

As a developer developing an application it is nice to get a quick look at what the problem is, and it can also be helpful for regular users calling support with the problem, as they can easily copy and paste the text from the text area.

How to use it :

Use the ExceptionDialog in catch statements like in the code snippet below :

try {
	String g = "";
	g = null;
	g.length();
	
}catch(Throwable e) {
	
	ExceptionDialog ld = new ExceptionDialog("Unexpected System Error!", "Something hugely badly unexpectadly went awfully wrong", e);

	ld.setVisible(true);
}

try {

String g = "";

g = null;

g.length();

}catch(Throwable e) {

ExceptionDialog ld = new ExceptionDialog("Unexpected System Error!", "Something hugely badly unexpectadly went awfully wrong", e);

ld.setVisible(true);

}

Code :

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Insets;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.PrintWriter;
import java.io.StringWriter;

import javax.swing.JButton;
import javax.swing.JDialog;
import javax.swing.JLabel;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.UIManager;
import javax.swing.border.EmptyBorder;

/**
 * 
 * ExceptionDialog.
 * 
 * Displays an exception stack trace in a panel south of the main dialog area.
 * 
 * 
 * @author Oliver Watkins (c)
 */
public class ExceptionDialog extends JDialog {

	private int dialogWidth = 500;
	private int dialogHeight = 140;

	private JLabel iconLabel = new JLabel();

	// is error panel opened up
	private boolean open = false;

	private JLabel errorLabel = new JLabel();
	private JTextArea errorTextArea = new JTextArea("");

	private JTextArea exceptionTextArea = new JTextArea("");
	private JScrollPane exceptionTextAreaSP = new JScrollPane();

	private JButton okButton = new JButton("OK");
	private JButton viewButton = new JButton("View Error");
	private JButton emailButton = new JButton("Email Error");

	private JPanel topPanel = new JPanel(new BorderLayout());

	public ExceptionDialog(String errorLabelText, String errorDescription,
			Throwable e) {

		StringWriter errors = new StringWriter();
		e.printStackTrace(new PrintWriter(errors));

		setSize(dialogWidth, dialogHeight);

		setResizable(false);

		errorTextArea.setText(errorDescription);

		errorLabel.setText(errorLabelText);

		exceptionTextArea.setText(errors.toString());

		exceptionTextAreaSP = new JScrollPane(exceptionTextArea);

		iconLabel.setBorder(new EmptyBorder(new Insets(10, 10, 10, 10)));

		iconLabel.setIcon(UIManager.getIcon("OptionPane.errorIcon"));
		setupUI();

		setUpListeners();
	}

	public ExceptionDialog(String errorLabelText, Throwable e) {
		this(errorLabelText, null, e);
	}

	public void setupUI() {

		this.setTitle("Error");

		errorTextArea.setLineWrap(true);
		errorTextArea.setWrapStyleWord(true);
		errorTextArea.setEditable(false);

		JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));

		buttonPanel.add(okButton);
		buttonPanel.add(emailButton);
		buttonPanel.add(viewButton);

		errorTextArea.setBackground(iconLabel.getBackground());

		JScrollPane textAreaSP = new JScrollPane(errorTextArea);

		textAreaSP.setBorder(new EmptyBorder(new Insets(5, 5, 5, 5)));

		errorLabel.setBorder(new EmptyBorder(new Insets(5, 5, 5, 5)));

		exceptionTextArea.setPreferredSize(new Dimension(100, 100));

		topPanel.add(iconLabel, BorderLayout.WEST);

		JPanel p = new JPanel(new BorderLayout());
		p.add(errorLabel, BorderLayout.NORTH);
		p.add(textAreaSP);

		topPanel.add(p);

		this.add(topPanel);

		this.add(buttonPanel, BorderLayout.SOUTH);
	}

	private void setUpListeners() {

		okButton.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				ExceptionDialog.this.setVisible(false);
			}
		});

		viewButton.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {

				if (open) {
					viewButton.setText("View Error");

					topPanel.remove(exceptionTextAreaSP);

					ExceptionDialog.this.setSize(dialogWidth, dialogHeight);

					topPanel.revalidate();

					open = false;

				} else {

					viewButton.setText("Hide Error");

					topPanel.add(exceptionTextAreaSP, BorderLayout.SOUTH);

					ExceptionDialog.this.setSize(dialogWidth,
							dialogHeight + 100);

					topPanel.revalidate();

					open = true;
				}
			}
		});

	}

	
	
	
	
	/**
	 * Testing code here !!!!!!
	 * 
	 * PUtting in lots of redundant methods to make a big stack!!!!
	 * 
	 * @param args
	 */
	public static void main(String[] args) {
		run();
	}

	public static void run() {
		run2();
	}

	public static void run2() {
		run3();
	}

	public static void run3() {
		run4();
	}

	public static void run4() {
		run5();
	}

	public static void run5() {
		run6();
	}

	public static void run6() {
		run7();
	}

	public static void run7() {
		run8();
	}

	public static void run8() {
		run9();
	}

	public static void run9() {

		try {

			String g = "";
			g = null;
			g.length();

		} catch (Throwable e) {

			ExceptionDialog ld = new ExceptionDialog(
					"Unexpected System Error!",
					"Something hugely badly unexpectadly went awfully wrong", e);

			ld.setVisible(true);
		}

	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

import java.awt.BorderLayout;

import java.awt.Dimension;

import java.awt.FlowLayout;

import java.awt.Insets;

import java.awt.event.ActionEvent;

import java.awt.event.ActionListener;

import java.io.PrintWriter;

import java.io.StringWriter;

import javax.swing.JButton;

import javax.swing.JDialog;

import javax.swing.JLabel;

import javax.swing.JOptionPane;

import javax.swing.JPanel;

import javax.swing.JScrollPane;

import javax.swing.JTextArea;

import javax.swing.UIManager;

import javax.swing.border.EmptyBorder;

/**

* ExceptionDialog.

* Displays an exception stack trace in a panel south of the main dialog area.

* @author Oliver Watkins (c)

public class ExceptionDialog extends JDialog {

private int dialogWidth = 500;

private int dialogHeight = 140;

private JLabel iconLabel = new JLabel();

// is error panel opened up

private boolean open = false;

private JLabel errorLabel = new JLabel();

private JTextArea errorTextArea = new JTextArea("");

private JTextArea exceptionTextArea = new JTextArea("");

private JScrollPane exceptionTextAreaSP = new JScrollPane();

private JButton okButton = new JButton("OK");

private JButton viewButton = new JButton("View Error");

private JButton emailButton = new JButton("Email Error");

private JPanel topPanel = new JPanel(new BorderLayout());

public ExceptionDialog(String errorLabelText, String errorDescription,

Throwable e) {

StringWriter errors = new StringWriter();

e.printStackTrace(new PrintWriter(errors));

setSize(dialogWidth, dialogHeight);

setResizable(false);

errorTextArea.setText(errorDescription);

errorLabel.setText(errorLabelText);

exceptionTextArea.setText(errors.toString());

exceptionTextAreaSP = new JScrollPane(exceptionTextArea);

iconLabel.setBorder(new EmptyBorder(new Insets(10, 10, 10, 10)));

iconLabel.setIcon(UIManager.getIcon("OptionPane.errorIcon"));

setupUI();

setUpListeners();

}

public ExceptionDialog(String errorLabelText, Throwable e) {

this(errorLabelText, null, e);

}

public void setupUI() {

this.setTitle("Error");

errorTextArea.setLineWrap(true);

errorTextArea.setWrapStyleWord(true);

errorTextArea.setEditable(false);

JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));

buttonPanel.add(okButton);

buttonPanel.add(emailButton);

buttonPanel.add(viewButton);

errorTextArea.setBackground(iconLabel.getBackground());

JScrollPane textAreaSP = new JScrollPane(errorTextArea);

textAreaSP.setBorder(new EmptyBorder(new Insets(5, 5, 5, 5)));

errorLabel.setBorder(new EmptyBorder(new Insets(5, 5, 5, 5)));

exceptionTextArea.setPreferredSize(new Dimension(100, 100));

topPanel.add(iconLabel, BorderLayout.WEST);

JPanel p = new JPanel(new BorderLayout());

p.add(errorLabel, BorderLayout.NORTH);

p.add(textAreaSP);

topPanel.add(p);

this.add(topPanel);

this.add(buttonPanel, BorderLayout.SOUTH);

}

private void setUpListeners() {

okButton.addActionListener(new ActionListener() {

@Override

public void actionPerformed(ActionEvent e) {

ExceptionDialog.this.setVisible(false);

}

});

viewButton.addActionListener(new ActionListener() {

@Override

public void actionPerformed(ActionEvent e) {

if (open) {

viewButton.setText("View Error");

topPanel.remove(exceptionTextAreaSP);

ExceptionDialog.this.setSize(dialogWidth, dialogHeight);

topPanel.revalidate();

open = false;

} else {

viewButton.setText("Hide Error");

topPanel.add(exceptionTextAreaSP, BorderLayout.SOUTH);

ExceptionDialog.this.setSize(dialogWidth,

dialogHeight + 100);

topPanel.revalidate();

open = true;

}

});

}

/**

* Testing code here !!!!!!

* PUtting in lots of redundant methods to make a big stack!!!!

* @param args

public static void main(String[] args) {

run();

}

public static void run() {

run2();

}

public static void run2() {

run3();

}

public static void run3() {

run4();

}

public static void run4() {

run5();

}

public static void run5() {

run6();

}

public static void run6() {

run7();

}

public static void run7() {

run8();

}

public static void run8() {

run9();

}

public static void run9() {

try {

String g = "";

g = null;

g.length();

} catch (Throwable e) {

ExceptionDialog ld = new ExceptionDialog(

"Unexpected System Error!",

"Something hugely badly unexpectadly went awfully wrong", e);

ld.setVisible(true);

}

Feel free to use this component. Please leave a comment!

Posted in Uncategorized | Leave a comment

Simple Login Dialog in Java Swing

Posted on January 23, 2015 by felixzacat

Here is a simple login dialog for anyone to use for free. It looks like this :

Creating a login dialog is not rocket science, however I come across login dialogs all the time. It’s just nice to not have to “roll-your-own” so to speak, so I thought I’d share this bit of code for anyone that it could help.

It basically uses BorderLayout as a base, a FlowLayout aligned to the right for the two buttons, and the textfields and labels use a GridBagLayout for correct placement in the center panel. I’ve added some event listeners to the code for convenience.

I will add it to my Swing Library github project soon : https://github.com/oliverwatkins/swing_library

Here is the code :

import java.awt.BorderLayout;
import java.awt.FlowLayout;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;

import javax.swing.JButton;
import javax.swing.JDialog;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;

/**
 * A Simple Login Dialog
 * 
 * @author Oliver Watkins (c)
 */
public class LoginDialog extends JDialog {

	JLabel nameLabel = new JLabel("Name : ");
	JLabel passwordLabel = new JLabel("Password : ");

	JTextField nameField = new JTextField();
	JPasswordField passwordField = new JPasswordField();

	JButton okButton = new JButton("OK");
	JButton cancelButton = new JButton("Cancel");

	public LoginDialog() {
		setupUI();

		setUpListeners();

	}

	public void setupUI() {

		this.setTitle("Login");

		JPanel topPanel = new JPanel(new GridBagLayout());
		JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));

		buttonPanel.add(okButton);
		buttonPanel.add(cancelButton);

		GridBagConstraints gbc = new GridBagConstraints();

		gbc.insets = new Insets(4, 4, 4, 4);

		gbc.gridx = 0;
		gbc.gridy = 0;
		gbc.weightx = 0;
		topPanel.add(nameLabel, gbc);

		gbc.gridx = 1;
		gbc.gridy = 0;
		gbc.fill = GridBagConstraints.HORIZONTAL;
		gbc.weightx = 1;
		topPanel.add(nameField, gbc);

		gbc.gridx = 0;
		gbc.gridy = 1;
		gbc.fill = GridBagConstraints.NONE;
		gbc.weightx = 0;
		topPanel.add(passwordLabel, gbc);

		gbc.fill = GridBagConstraints.HORIZONTAL;
		gbc.gridx = 1;
		gbc.gridy = 1;
		gbc.weightx = 1;
		topPanel.add(passwordField, gbc);

		this.add(topPanel);

		this.add(buttonPanel, BorderLayout.SOUTH);

	}

	private void setUpListeners() {

		passwordField.addKeyListener(new KeyAdapter() {

			@Override
			public void keyPressed(KeyEvent e) {
				if (e.getKeyCode() == KeyEvent.VK_ENTER) {
					login();
				}
			}
		});

		okButton.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				login();
			}
		});

		cancelButton.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				LoginDialog.this.setVisible(false);
			}
		});
	}
	
	
	private void login() {
		System.out.println("You logged in!");
		LoginDialog.this.setVisible(false);
	}

	public static void main(String[] args) {

		LoginDialog ld = new LoginDialog();

		ld.setSize(400, 150);
		ld.setVisible(true);

	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

import java.awt.BorderLayout;

import java.awt.FlowLayout;

import java.awt.GridBagConstraints;

import java.awt.GridBagLayout;

import java.awt.Insets;

import java.awt.event.ActionEvent;

import java.awt.event.ActionListener;

import java.awt.event.KeyAdapter;

import java.awt.event.KeyEvent;

import javax.swing.JButton;

import javax.swing.JDialog;

import javax.swing.JLabel;

import javax.swing.JPanel;

import javax.swing.JPasswordField;

import javax.swing.JTextField;

/**

* A Simple Login Dialog

* @author Oliver Watkins (c)

public class LoginDialog extends JDialog {

JLabel nameLabel = new JLabel("Name : ");

JLabel passwordLabel = new JLabel("Password : ");

JTextField nameField = new JTextField();

JPasswordField passwordField = new JPasswordField();

JButton okButton = new JButton("OK");

JButton cancelButton = new JButton("Cancel");

public LoginDialog() {

setupUI();

setUpListeners();

}

public void setupUI() {

this.setTitle("Login");

JPanel topPanel = new JPanel(new GridBagLayout());

JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));

buttonPanel.add(okButton);

buttonPanel.add(cancelButton);

GridBagConstraints gbc = new GridBagConstraints();

gbc.insets = new Insets(4, 4, 4, 4);

gbc.gridx = 0;

gbc.gridy = 0;

gbc.weightx = 0;

topPanel.add(nameLabel, gbc);

gbc.gridx = 1;

gbc.gridy = 0;

gbc.fill = GridBagConstraints.HORIZONTAL;

gbc.weightx = 1;

topPanel.add(nameField, gbc);

gbc.gridx = 0;

gbc.gridy = 1;

gbc.fill = GridBagConstraints.NONE;

gbc.weightx = 0;

topPanel.add(passwordLabel, gbc);

gbc.fill = GridBagConstraints.HORIZONTAL;

gbc.gridx = 1;

gbc.gridy = 1;

gbc.weightx = 1;

topPanel.add(passwordField, gbc);

this.add(topPanel);

this.add(buttonPanel, BorderLayout.SOUTH);

}

private void setUpListeners() {

passwordField.addKeyListener(new KeyAdapter() {

@Override

public void keyPressed(KeyEvent e) {

if (e.getKeyCode() == KeyEvent.VK_ENTER) {

}

});

okButton.addActionListener(new ActionListener() {

@Override

public void actionPerformed(ActionEvent e) {

}

});

cancelButton.addActionListener(new ActionListener() {

@Override

public void actionPerformed(ActionEvent e) {

LoginDialog.this.setVisible(false);

}

});

}

private void login() {

System.out.println("You logged in!");

LoginDialog.this.setVisible(false);

}

public static void main(String[] args) {

LoginDialog ld = new LoginDialog();

ld.setSize(400, 150);

ld.setVisible(true);

}

Posted in Swing | Tagged java, Swing | Leave a comment

Creating a RCP Application in Netbeans – [Part 2]

Posted on January 3, 2015 by felixzacat

Adding a Module with Functionality.

In our last tutorial we made a pretty bare bones application with nothing in it.

We made two modules –

a branding module that offers a splash screen
and an application module that acts as an entry point to the application (like a main() method if you want to see it that way)

Now we want to add modules with some proper functionality.

Add a new Maven module by selecting ‘Create New Module..’ via a right click on the modules folder. Call it something like CustomerModule.

By default the Project name is the same as the Maven Artifact Id. Change it to something like ‘HappyDog CustomerModule’.

Now we should see something like this :

Let’s create some packages in our CustomerModule and add three java files :

The java files represent standard patterns you might find in a Swing application; the MVC pattern and delegate pattern.

The Customer is a simple POJO :

public class Customer {
    public String name;
    public String petsname; 
    public String pettype; 
    public String lastvisit; 
}

public class Customer {

public String name;

public String petsname;

public String pettype;

public String lastvisit;

}

The CustomerTableModel is a Swing table model class which uses the Customer POJO to display data in a table.

import java.util.ArrayList;
import java.util.List;
import javax.swing.table.AbstractTableModel;

public class CustomerTableModel extends AbstractTableModel {

    private List customers = new ArrayList();
    
    public CustomerTableModel(List users) {
        this.customers = users;
    }

    @Override
    public int getRowCount() {
        return this.customers.size();
    }

    @Override
    public int getColumnCount() {
        return 4;
    }
    
    @Override
    public String getColumnName(int i) {

        switch (i) {
            case 0:
                return "Name";
            case 1:
                return "Pets Name";
            case 2:
                return "Pet Type";
            case 3:
                return "Last Visit";
        }
        return "";
    }        

    @Override
    public Object getValueAt(int rowIndex, int columnIndex) {

        Customer u = (Customer)this.customers.get(rowIndex);

        switch (columnIndex) {
            case 0:
                return u.name;
            case 1:
                return u.petsname;
            case 2:
                return u.pettype;
            case 3:
                return u.lastvisit;
        }
        return null;
    }
}

import java.util.ArrayList;

import java.util.List;

import javax.swing.table.AbstractTableModel;

public class CustomerTableModel extends AbstractTableModel {

private List customers = new ArrayList();

public CustomerTableModel(List users) {

this.customers = users;

}

@Override

public int getRowCount() {

return this.customers.size();

}

@Override

public int getColumnCount() {

return 4;

}

@Override

public String getColumnName(int i) {

switch (i) {

case 0:

return "Name";

case 1:

return "Pets Name";

case 2:

return "Pet Type";

case 3:

return "Last Visit";

}

return "";

}

@Override

public Object getValueAt(int rowIndex, int columnIndex) {

Customer u = (Customer)this.customers.get(rowIndex);

switch (columnIndex) {

case 0:

return u.name;

case 1:

return u.petsname;

case 2:

return u.pettype;

case 3:

return u.lastvisit;

}

return null;

}

Finally we have a delegate which centralizes calls associated with the customer module.

import com.happydog.customermodule.model.Customer;
import java.util.ArrayList;
import java.util.List;


public class CustomerDelegate {
    
    private static CustomerDelegate INSTANCE = new CustomerDelegate();
    
    private CustomerDelegate() {
    }

    public static CustomerDelegate getInstance() {
        return CustomerDelegate.INSTANCE;
    }

    public List getCustomers() {
        
        Customer customer = new Customer();
        
        customer.name = "Bob";
        customer.petsname = "Henry";
        customer.pettype = "dog";
        customer.lastvisit = "10-10-2009";

        Customer customer2 = new Customer();
        
        customer2.name = "Jane";
        customer2.petsname = "Donnie";
        customer2.pettype = "fish";
        customer2.lastvisit = "9-4-2009";
        
        Customer customer3 = new Customer();
        
        customer3.name = "Tyrone";
        customer3.petsname = "Malcom";
        customer3.pettype = "budgie";
        customer3.lastvisit = "8-8-2009";
        
        ArrayList list = new ArrayList();
        list.add(customer);
        list.add(customer2);
        list.add(customer3);
        
        return list;
    }
    
    
    public void createCustomer(Customer customer) {
        //TODO
    }
    
    public void deleteCustomer(Customer customer) {
        //TODO
    }
}

import com.happydog.customermodule.model.Customer;

import java.util.ArrayList;

import java.util.List;

public class CustomerDelegate {

private static CustomerDelegate INSTANCE = new CustomerDelegate();

private CustomerDelegate() {

}

public static CustomerDelegate getInstance() {

return CustomerDelegate.INSTANCE;

}

public List getCustomers() {

Customer customer = new Customer();

customer.name = "Bob";

customer.petsname = "Henry";

customer.pettype = "dog";

customer.lastvisit = "10-10-2009";

Customer customer2 = new Customer();

customer2.name = "Jane";

customer2.petsname = "Donnie";

customer2.pettype = "fish";

customer2.lastvisit = "9-4-2009";

Customer customer3 = new Customer();

customer3.name = "Tyrone";

customer3.petsname = "Malcom";

customer3.pettype = "budgie";

customer3.lastvisit = "8-8-2009";

ArrayList list = new ArrayList();

list.add(customer);

list.add(customer2);

list.add(customer3);

return list;

}

public void createCustomer(Customer customer) {

//TODO

}

public void deleteCustomer(Customer customer) {

//TODO

}

The delegate is a thread safe singleton that contains some incomplete methods that we may want to implement later.

Creating the GUI

Create a Panel

Now right click the happydog.customermodule.ui package and select New àWindow.
Make sure the ‘Open on Application Start’ checkbox is set.

Select ‘Next’.
Add a ClassName prefix called ‘Customer’

Select ‘Finish’.

The New Window wizard has created a java file ending in TopComponent and a form file also ending in TopComponent.

TopComponent is the basic unit of display in NetBeans and represents a window, tabbed pane or inner frame. A lot of the code in the java file is auto-generated and non-editable. It may look a bit scary but it is really simple if understand that there are only a few points where you can modify the code. The designer handles most of the wiring.

The CustomerTopComponent.form file is a file that NetBeans uses internally to store information about the GUI component. Generally this file is kept as invisible as possible to the end user.

Add GUI Components

If we open the CustomerTopComponent file and select design mode we will see a palette where we can drag components onto a panel :

Drag a table and three buttons onto the panel as shown in the picture.
Select the jTable, and then switch the ‘properties’ view to the ‘code’ view. Change the name to something more readable such as CustomerTable :

Hookup Events

When we fire up the screen we want to load up all our customers in the system, ie we want to populate the table with all the data from our CustomerDelegate.getCustomers() call.

Open the CustomerTopComponent file and change the constructor by adding this code :

    public CustomerTopComponent() {
        initComponents();
        setName(Bundle.CTL_CustomerTopComponent());
        setToolTipText(Bundle.HINT_CustomerTopComponent());
        
        RequestProcessor.getDefault().post(new Runnable () {
            @Override
            public void run() {
                
                List al = CustomerDelegate.getInstance().getCustomers();
        
                CustomerTableModel model = new CustomerTableModel(al);
                
                customerTable.setModel(model);
            }
        });
    }

public CustomerTopComponent() {

initComponents();

setName(Bundle.CTL_CustomerTopComponent());

setToolTipText(Bundle.HINT_CustomerTopComponent());

RequestProcessor.getDefault().post(new Runnable () {

@Override

public void run() {

List al = CustomerDelegate.getInstance().getCustomers();

CustomerTableModel model = new CustomerTableModel(al);

customerTable.setModel(model);

}

});

}

We can change the text on our buttons too by changing the text property on the buttons. Make sure you also rename the variable name of the buttons as well (via the Code tab).

Change the button text via the properties tab :

The event hooks can be found in the Events tab next to the Code tab. Just select one of the event methods you want to implements (eg. actionPerformed).

Select the actionPerformed event :

For now we can put some dummy code in the empty methods.

    private void createButtonActionPerformed(java.awt.event.ActionEvent evt) {
        Customer c = new Customer();
        c.name = "TODO";
        CustomerDelegate.getInstance().createCustomer(c);
    }

private void createButtonActionPerformed(java.awt.event.ActionEvent evt) {

Customer c = new Customer();

c.name = "TODO";

CustomerDelegate.getInstance().createCustomer(c);

}

Incorporating Module Into Super Project

If we do a ‘clean build’ on the project and then run it, we should see :

Ignore the start screen and other tabs that appear. The module is not supposed to run by itself but sometimes it’s good to get a quick look at how it might look.

As we can see it all looks pretty correct. The ‘TopComponent’ is being shown on startup with the table data.

At the end of the day we really want to run this module within our super project HappyDog. So we should add the module we created as a dependency in the application module.

Right click HappyDog app à dependency.
Select ‘Add Dependency..’
Under ‘Open Projects’ select the Customer Module.

Your folder structure should look like this :

Do a Maven clean and build on the super project, followed by a clean and build on the ‘HappyDog app’ project.

Right click on the HappyDog app, select ‘Run’ and you should see the module has magically appeared in the app project.

Part 3 Coming Soon!!!

All the code for this tutorial can be found on github.

Posted in Netbeans RCP | Tagged java, netbeans, rcp | Leave a comment

Row Number Column in JTable

Posted on December 30, 2014 by felixzacat

Ever wanted to have a number column in your JTable similar to Excel?

This utility class I made takes in a JTable and appends a number column.

Let’s take a look at it!

The rendering of the number column matches the rendering of the headers :

As you scroll horizontally, the row column remains fixed in place :

Highlighting of rows also incorporates the number column :

As the numbers increase, the width of the column needs to be changed. This happens automatically and also shrinks when the numbers get smaller :

How does this work?

The row column is really just a JTable with a single column. This table is then lined up next to the main table making sure that all metrics match, so that it appears to just be another column in the JTable. A simple table model is required which is just an numerical incrementation, and listeners need to be set up to link the two tables. When the vertical scrollbar is moved, the numerical table listens and changes its position respectively. When a horiyontal scroll happens then the numerical table ignores it.

All the code can be found on my github repository

Or you can just copy and paste the code below :

package com.gg.tablerownumbers;

import java.awt.Component;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.FontMetrics;
import java.awt.Point;
import java.awt.event.AdjustmentEvent;
import java.awt.event.AdjustmentListener;
import java.awt.event.ComponentAdapter;
import java.awt.event.ComponentEvent;
import java.util.ArrayList;

import javax.swing.JLabel;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.JViewport;
import javax.swing.UIManager;
import javax.swing.border.Border;
import javax.swing.event.ListSelectionEvent;
import javax.swing.event.ListSelectionListener;
import javax.swing.event.TableModelEvent;
import javax.swing.event.TableModelListener;
import javax.swing.plaf.UIResource;
import javax.swing.table.AbstractTableModel;
import javax.swing.table.JTableHeader;
import javax.swing.table.TableCellRenderer;


/**
 * TalbeRowUtilities. Utility for adding a row column to a JTable
 * 
 * @author Oliver Watkins
 */
public class TableRowUtilities {

	/**
	 * Adds a number column in the row header of the scrollpane, to match rows
	 * in the table. Assumes that table has already been added to a scollpane.
	 * If the table is not in a scrollpane nothing will happen.
	 * 
	 * @param userTable - Table to have column added to (if it is in a scrollpane)
	 * @param startingNumber - Number to start number column with, typically 0 or 1.
	 */
	public static void addNumberColumn(final JTable userTable, int startingNumber, boolean isRowSelectable) {
		Container parentContainer = userTable.getParent();

		if (parentContainer instanceof JViewport) {
			Container parentParentContainer = parentContainer.getParent();

			if (parentParentContainer instanceof JScrollPane) {
				final JScrollPane scrollPane = (JScrollPane) parentParentContainer;

				// Make certain we are the viewPort's view and not, for
				// example, the rowHeaderView of the scrollPane -
				// an implementor of fixed columns might do this.
				JViewport viewport = scrollPane.getViewport();

				if (viewport == null || viewport.getView() != userTable) {
					return;
				}

				JTableHeader tableHeader = (JTableHeader) userTable.getTableHeader();
				scrollPane.setColumnHeaderView(tableHeader);

				final JTable rowHeadersTable = new JTable(new TableRowUtilities().new RowHeadersTableModel(userTable.getModel()
						.getRowCount(), startingNumber));
				
				// rowHeadersTable.getModel().addTableModelListener()
				userTable.getModel().addTableModelListener(new TableModelListener() {

					public void tableChanged(TableModelEvent e) {
						RowHeadersTableModel m = (RowHeadersTableModel) rowHeadersTable.getModel();

						if (userTable.getRowCount() != m.getRowCount()) {
							if (userTable.getRowCount() > m.getRowCount()) {

								int rowDiff = userTable.getRowCount() - m.getRowCount();

								for (int i = 0; i < rowDiff; i++) {
									m.addNumber();
								}
							} else if (userTable.getRowCount() < m.getRowCount()) {

								int rowDiff = m.getRowCount() - userTable.getRowCount();

								for (int i = 0; i < rowDiff; i++) {
									m.removeNumber();
								}
							}
							m.fireTableDataChanged();
						}
					}
				});

				// label used for rendering and for
				final JLabel label = new JLabel();

				scrollPane.getVerticalScrollBar().addAdjustmentListener(new AdjustmentListener() {
					public void adjustmentValueChanged(AdjustmentEvent e) {
						int scrollBarValue = e.getValue();

						adjustColumnWidth(rowHeadersTable, label, scrollBarValue);
					}
				});

				// this is where you set the width of the row headers
				rowHeadersTable.createDefaultColumnsFromModel();

				// make the rows look like headers
				rowHeadersTable.setBackground(rowHeadersTable.getTableHeader().getBackground());
				rowHeadersTable.setForeground(rowHeadersTable.getTableHeader().getForeground());
				rowHeadersTable.setFont(rowHeadersTable.getTableHeader().getFont());

				rowHeadersTable.setRowHeight(userTable.getRowHeight());

				rowHeadersTable.getTableHeader().setReorderingAllowed(false);
				/**
				 * If selectable then change the colouring in the renderer
				 */
				if (isRowSelectable) {
					// adding a renderer
					rowHeadersTable.getColumnModel().getColumn(0).setCellRenderer(new TableCellRenderer() {
						public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected,
								boolean hasFocus, int row, int column) {
							label.setText("" + value);

							if (isSelected) {
								label.setForeground(rowHeadersTable.getSelectionForeground());
								label.setBackground(rowHeadersTable.getSelectionBackground());
							} else {
								label.setBackground(rowHeadersTable.getBackground());
								label.setForeground(rowHeadersTable.getForeground());
							}
							return label;
						}
					});

					rowHeadersTable.setRowSelectionAllowed(true);
					rowHeadersTable.setCellSelectionEnabled(true);
					rowHeadersTable.setFocusable(true);
					rowHeadersTable.setDragEnabled(true);

				}
				scrollPane.setRowHeaderView(rowHeadersTable);

				// set the row header name into the top left corner
				scrollPane.setCorner(JScrollPane.UPPER_LEFT_CORNER, rowHeadersTable.getTableHeader());

				Border border = scrollPane.getBorder();
				if (border == null || border instanceof UIResource) {
					scrollPane.setBorder(UIManager.getBorder("Table.scrollPaneBorder"));
				}

				scrollPane.addComponentListener(new ComponentAdapter() {

					/**
					 * Whenever the component is resized need to re-adjust the
					 * column width if necessary. This method is also called
					 * when the screen is first layed out.
					 */
					public void componentResized(ComponentEvent e) {
						adjustColumnWidth(rowHeadersTable, label, scrollPane.getVerticalScrollBar().getValue());
					}
				});

				rowHeadersTable.setSelectionMode(userTable.getSelectionModel().getSelectionMode());

				new TableRowUtilities().new TableListener(rowHeadersTable, userTable);
			}
		}
	}

	/**
	 * Table Model for the row number column. It just has one column (the numbers)
	 * 
	 * @author Oliver Watkins 
	 */
	class RowHeadersTableModel extends AbstractTableModel {
		private ArrayList numbersList = new ArrayList();
		private int startNumber;

		
		/**
		 * Initalise model
		 * 
		 * @param maxNumber determined by JTable row size
		 * @param startingNumber usually zero or 1
		 */
		public RowHeadersTableModel(int maxNumber, int startingNumber) {
			// start at starting number and then go to row count (plus starting
			// number amount)
			this.startNumber = startingNumber;
			int j = 0;
			for (int i = startingNumber; i < maxNumber + startNumber; i++) {
				numbersList.add(new Integer(j + startNumber));
				j++;
			}
		}

		public int getRowCount() {
			if (numbersList != null)
				return numbersList.size();
			else
				return 0;
		}

		public int getMaxIntValue() {
			if (numbersList != null && numbersList.size() != 0) {
				Integer integer = (Integer) getValueAt(numbersList.size() - 1, 0);
				return integer.intValue();
			} else
				return 0;
		}

		public int getColumnCount() {
			return 1;
		}

		public String getColumnName(int columnIndex) {
			return "";
		}

		public Class getColumnClass(int columnIndex) {
			return Integer.class;
		}

		public boolean isCellEditable(int rowIndex, int columnIndex) {
			return false;
		}

		public Object getValueAt(int rowIndex, int columnIndex) {
			return numbersList.get(rowIndex);
		}

		public void addNumber() {
			if (numbersList.size() != 0) {
				Integer maxNum = (Integer) numbersList.get(numbersList.size() - 1);

				numbersList.add(numbersList.size(), new Integer(maxNum.intValue() + 1));
			} else {
				numbersList.add(numbersList.size(), new Integer(startNumber));
			}
			this.fireTableDataChanged();
		}

		public void removeNumber() {
			numbersList.remove(numbersList.size() - 1);
		}

		public void setValueAt(Object aValue, int rowIndex, int columnIndex) {
		}

		public void addTableModelListener(TableModelListener l) {
			super.addTableModelListener(l);
		}

		public void removeTableModelListener(TableModelListener l) {
			super.removeTableModelListener(l);
		}

	};

	/**
	 * Adjusts the column width of the row headers table containg the number
	 * column. The font metrics are extracted from the label of the row at the
	 * bottom of the viewport and used to determing the appropriate width.
	 * 
	 * The reason why this method is important, is that when the row number increases by an extra digit
	 * the column needs to get wider. It also needs to shrink when scrolling to smaller digit numbers.
	 * 
	 * @param rowHeadersTable - single column table in the row header
	 * @param label - label used to get font metrics
	 * @param scrollBarValue - int value for determing point of lowest row
	 */
	private static void adjustColumnWidth(final JTable rowHeadersTable, final JLabel label, int scrollBarValue) {
		
		label.setFont(rowHeadersTable.getFont());
		label.setOpaque(true);
		label.setHorizontalAlignment(JLabel.CENTER);

		int v = rowHeadersTable.getVisibleRect().height;

		int row = rowHeadersTable.rowAtPoint(new Point(0, v + scrollBarValue));

		Integer modelValue = null;
		if (row != -1) {
			modelValue = (Integer) rowHeadersTable.getModel().getValueAt(row, 0);
		} else {
			RowHeadersTableModel tm = (RowHeadersTableModel) rowHeadersTable.getModel();
			modelValue = new Integer(tm.getMaxIntValue());
		}

		label.setText("" + modelValue);
		FontMetrics fontMetrics = label.getFontMetrics(label.getFont());

		int widthFactor = 0;

		if (fontMetrics != null && label.getText() != null) {
			widthFactor = fontMetrics.stringWidth(label.getText());

			rowHeadersTable.setPreferredScrollableViewportSize(new Dimension(widthFactor + 8, 100)); // height
																										// is
																										// ignored
			rowHeadersTable.repaint();
		}
	}

	/**
	 * Listener that joins the two tables; the main table, and the single column row number table. When either
	 * are moved or selected, then the affect is passed on to the other table.
	 * 
	 * @author Oliver Watkins
	 */
	class TableListener implements ListSelectionListener {
		
		private JTable rowHeadersTable;
		private JTable userTable;
		private JViewport userTableViewPort;
		private JViewport rowHeadersViewPort;

		public TableListener(JTable rowHeadersTable, JTable userTable) {
			this.userTable = userTable;
			this.rowHeadersTable = rowHeadersTable;

			Container p = userTable.getParent();
			userTableViewPort = (JViewport) p;

			Container p2 = rowHeadersTable.getParent();
			rowHeadersViewPort = (JViewport) p2;

			Point newPosition = userTableViewPort.getViewPosition();
			rowHeadersViewPort.setViewPosition(newPosition);

			// userTableViewPort.setViewPosition(newPosition);

			rowHeadersTable.getSelectionModel().addListSelectionListener(this);
			userTable.getSelectionModel().addListSelectionListener(this);

		}

		public void valueChanged(ListSelectionEvent e) {
			System.out.println("ListSelectionEvent");

			if (e.getSource() == userTable.getSelectionModel()) {
				rowHeadersTable.getSelectionModel().removeListSelectionListener(this);
				rowHeadersTable.getSelectionModel().clearSelection();

				int[] rows = userTable.getSelectedRows();

				for (int i = 0; i < rows.length; i++) {
					System.out.println("adding row selection to rowHeaders table : " + rows[i]);
					rowHeadersTable.getSelectionModel().addSelectionInterval(rows[i], rows[i]);

				}
				int[] iarr = rowHeadersTable.getSelectedRows();

				rowHeadersTable.getSelectionModel().addListSelectionListener(this);
			} else if (e.getSource() == rowHeadersTable.getSelectionModel()) {
				System.out.println("in rowHeadersTable");
				System.out.println("e.getValueIsAdjusting() " + e.getValueIsAdjusting());

				boolean isColumnSelectionAllowed = userTable.getColumnSelectionAllowed();
				boolean isRowSelectionAllowed = userTable.getRowSelectionAllowed();
				boolean isCellSelectionAllowed = userTable.getCellSelectionEnabled();

				userTable.getSelectionModel().removeListSelectionListener(this);
				userTable.getSelectionModel().clearSelection();

				int[] rows = rowHeadersTable.getSelectedRows();

				if (isRowSelectionAllowed && !isCellSelectionAllowed && !isColumnSelectionAllowed) {
					for (int i = 0; i < rows.length; i++) {
						userTable.addRowSelectionInterval(rows[i], rows[i]);
						System.out.println("NI? - viewPort1 y = " + userTableViewPort.getViewPosition().y + " viewPort2 y = "
								+ rowHeadersViewPort.getViewPosition().y);
						userTableViewPort.setViewPosition(rowHeadersViewPort.getViewPosition());

					}
				} else {
					// looks cleaner
					userTableViewPort.setScrollMode(JViewport.BACKINGSTORE_SCROLL_MODE);

					System.out.println("");

					for (int i = 0; i < rows.length; i++) {
						if (i == 0) {
							// need to create row first with change selection
							userTable.changeSelection(rows[i], 0, false, false);
							userTable.changeSelection(rows[i], userTable.getColumnCount(), false, true);

						} else {
							userTable.addRowSelectionInterval(rows[i], rows[i]);
						}
					}
				}
				// re-adding the listener to the user table
				userTable.getSelectionModel().addListSelectionListener(this);
			} else {
				System.out.println("no table selestion model");
			}
		}
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

package com.gg.tablerownumbers;

import java.awt.Component;

import java.awt.Container;

import java.awt.Dimension;

import java.awt.FontMetrics;

import java.awt.Point;

import java.awt.event.AdjustmentEvent;

import java.awt.event.AdjustmentListener;

import java.awt.event.ComponentAdapter;

import java.awt.event.ComponentEvent;

import java.util.ArrayList;

import javax.swing.JLabel;

import javax.swing.JScrollPane;

import javax.swing.JTable;

import javax.swing.JViewport;

import javax.swing.UIManager;

import javax.swing.border.Border;

import javax.swing.event.ListSelectionEvent;

import javax.swing.event.ListSelectionListener;

import javax.swing.event.TableModelEvent;

import javax.swing.event.TableModelListener;

import javax.swing.plaf.UIResource;

import javax.swing.table.AbstractTableModel;

import javax.swing.table.JTableHeader;

import javax.swing.table.TableCellRenderer;

/**

* TalbeRowUtilities. Utility for adding a row column to a JTable

* @author Oliver Watkins

public class TableRowUtilities {

/**

* Adds a number column in the row header of the scrollpane, to match rows

* in the table. Assumes that table has already been added to a scollpane.

* If the table is not in a scrollpane nothing will happen.

* @param userTable - Table to have column added to (if it is in a scrollpane)

* @param startingNumber - Number to start number column with, typically 0 or 1.

public static void addNumberColumn(final JTable userTable, int startingNumber, boolean isRowSelectable) {

Container parentContainer = userTable.getParent();

if (parentContainer instanceof JViewport) {

Container parentParentContainer = parentContainer.getParent();

if (parentParentContainer instanceof JScrollPane) {

final JScrollPane scrollPane = (JScrollPane) parentParentContainer;

// Make certain we are the viewPort's view and not, for

// example, the rowHeaderView of the scrollPane -

// an implementor of fixed columns might do this.

JViewport viewport = scrollPane.getViewport();

if (viewport == null || viewport.getView() != userTable) {

return;

}

JTableHeader tableHeader = (JTableHeader) userTable.getTableHeader();

scrollPane.setColumnHeaderView(tableHeader);

final JTable rowHeadersTable = new JTable(new TableRowUtilities().new RowHeadersTableModel(userTable.getModel()

.getRowCount(), startingNumber));

// rowHeadersTable.getModel().addTableModelListener()

userTable.getModel().addTableModelListener(new TableModelListener() {

public void tableChanged(TableModelEvent e) {

RowHeadersTableModel m = (RowHeadersTableModel) rowHeadersTable.getModel();

if (userTable.getRowCount() != m.getRowCount()) {

if (userTable.getRowCount() > m.getRowCount()) {

int rowDiff = userTable.getRowCount() - m.getRowCount();

for (int i = 0; i < rowDiff; i++) {

m.addNumber();

}

} else if (userTable.getRowCount() < m.getRowCount()) {

int rowDiff = m.getRowCount() - userTable.getRowCount();

for (int i = 0; i < rowDiff; i++) {

m.removeNumber();

}

m.fireTableDataChanged();

}

});

// label used for rendering and for

final JLabel label = new JLabel();

scrollPane.getVerticalScrollBar().addAdjustmentListener(new AdjustmentListener() {

public void adjustmentValueChanged(AdjustmentEvent e) {

int scrollBarValue = e.getValue();

adjustColumnWidth(rowHeadersTable, label, scrollBarValue);

}

});

// this is where you set the width of the row headers

rowHeadersTable.createDefaultColumnsFromModel();

// make the rows look like headers

rowHeadersTable.setBackground(rowHeadersTable.getTableHeader().getBackground());

rowHeadersTable.setForeground(rowHeadersTable.getTableHeader().getForeground());

rowHeadersTable.setFont(rowHeadersTable.getTableHeader().getFont());

rowHeadersTable.setRowHeight(userTable.getRowHeight());

rowHeadersTable.getTableHeader().setReorderingAllowed(false);

/**

* If selectable then change the colouring in the renderer

if (isRowSelectable) {

// adding a renderer

rowHeadersTable.getColumnModel().getColumn(0).setCellRenderer(new TableCellRenderer() {

public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected,

boolean hasFocus, int row, int column) {

label.setText("" + value);

if (isSelected) {

label.setForeground(rowHeadersTable.getSelectionForeground());

label.setBackground(rowHeadersTable.getSelectionBackground());

} else {

label.setBackground(rowHeadersTable.getBackground());

label.setForeground(rowHeadersTable.getForeground());

}

return label;

}

});

rowHeadersTable.setRowSelectionAllowed(true);

rowHeadersTable.setCellSelectionEnabled(true);

rowHeadersTable.setFocusable(true);

rowHeadersTable.setDragEnabled(true);

}

scrollPane.setRowHeaderView(rowHeadersTable);

// set the row header name into the top left corner

scrollPane.setCorner(JScrollPane.UPPER_LEFT_CORNER, rowHeadersTable.getTableHeader());

Border border = scrollPane.getBorder();

if (border == null || border instanceof UIResource) {

scrollPane.setBorder(UIManager.getBorder("Table.scrollPaneBorder"));

}

scrollPane.addComponentListener(new ComponentAdapter() {

/**

* Whenever the component is resized need to re-adjust the

* column width if necessary. This method is also called

* when the screen is first layed out.

public void componentResized(ComponentEvent e) {

adjustColumnWidth(rowHeadersTable, label, scrollPane.getVerticalScrollBar().getValue());

}

});

rowHeadersTable.setSelectionMode(userTable.getSelectionModel().getSelectionMode());

new TableRowUtilities().new TableListener(rowHeadersTable, userTable);

}

/**

* Table Model for the row number column. It just has one column (the numbers)

* @author Oliver Watkins

class RowHeadersTableModel extends AbstractTableModel {

private ArrayList numbersList = new ArrayList();

private int startNumber;

/**

* Initalise model

* @param maxNumber determined by JTable row size

* @param startingNumber usually zero or 1

public RowHeadersTableModel(int maxNumber, int startingNumber) {

// start at starting number and then go to row count (plus starting

// number amount)

this.startNumber = startingNumber;

int j = 0;

for (int i = startingNumber; i < maxNumber + startNumber; i++) {

numbersList.add(new Integer(j + startNumber));

j++;

}

public int getRowCount() {

if (numbersList != null)

return numbersList.size();

else

return 0;

}

public int getMaxIntValue() {

if (numbersList != null && numbersList.size() != 0) {

Integer integer = (Integer) getValueAt(numbersList.size() - 1, 0);

return integer.intValue();

} else

return 0;

}

public int getColumnCount() {

return 1;

}

public String getColumnName(int columnIndex) {

return "";

}

public Class getColumnClass(int columnIndex) {

return Integer.class;

}

public boolean isCellEditable(int rowIndex, int columnIndex) {

return false;

}

public Object getValueAt(int rowIndex, int columnIndex) {

return numbersList.get(rowIndex);

}

public void addNumber() {

if (numbersList.size() != 0) {

Integer maxNum = (Integer) numbersList.get(numbersList.size() - 1);

numbersList.add(numbersList.size(), new Integer(maxNum.intValue() + 1));

} else {

numbersList.add(numbersList.size(), new Integer(startNumber));

}

this.fireTableDataChanged();

}

public void removeNumber() {

numbersList.remove(numbersList.size() - 1);

}

public void setValueAt(Object aValue, int rowIndex, int columnIndex) {

}

public void addTableModelListener(TableModelListener l) {

super.addTableModelListener(l);

}

public void removeTableModelListener(TableModelListener l) {

super.removeTableModelListener(l);

}

};

/**

* Adjusts the column width of the row headers table containg the number

* column. The font metrics are extracted from the label of the row at the

* bottom of the viewport and used to determing the appropriate width.

* The reason why this method is important, is that when the row number increases by an extra digit

* the column needs to get wider. It also needs to shrink when scrolling to smaller digit numbers.

* @param rowHeadersTable - single column table in the row header

* @param label - label used to get font metrics

* @param scrollBarValue - int value for determing point of lowest row

private static void adjustColumnWidth(final JTable rowHeadersTable, final JLabel label, int scrollBarValue) {

label.setFont(rowHeadersTable.getFont());

label.setOpaque(true);

label.setHorizontalAlignment(JLabel.CENTER);

int v = rowHeadersTable.getVisibleRect().height;

int row = rowHeadersTable.rowAtPoint(new Point(0, v + scrollBarValue));

Integer modelValue = null;

if (row != -1) {

modelValue = (Integer) rowHeadersTable.getModel().getValueAt(row, 0);

} else {

RowHeadersTableModel tm = (RowHeadersTableModel) rowHeadersTable.getModel();

modelValue = new Integer(tm.getMaxIntValue());

}

label.setText("" + modelValue);

FontMetrics fontMetrics = label.getFontMetrics(label.getFont());

int widthFactor = 0;

if (fontMetrics != null && label.getText() != null) {

widthFactor = fontMetrics.stringWidth(label.getText());

rowHeadersTable.setPreferredScrollableViewportSize(new Dimension(widthFactor + 8, 100)); // height

// is

// ignored

rowHeadersTable.repaint();

}

/**

* Listener that joins the two tables; the main table, and the single column row number table. When either

* are moved or selected, then the affect is passed on to the other table.

* @author Oliver Watkins

class TableListener implements ListSelectionListener {

private JTable rowHeadersTable;

private JTable userTable;

private JViewport userTableViewPort;

private JViewport rowHeadersViewPort;

public TableListener(JTable rowHeadersTable, JTable userTable) {

this.userTable = userTable;

this.rowHeadersTable = rowHeadersTable;

Container p = userTable.getParent();

userTableViewPort = (JViewport) p;

Container p2 = rowHeadersTable.getParent();

rowHeadersViewPort = (JViewport) p2;

Point newPosition = userTableViewPort.getViewPosition();

rowHeadersViewPort.setViewPosition(newPosition);

// userTableViewPort.setViewPosition(newPosition);

rowHeadersTable.getSelectionModel().addListSelectionListener(this);

userTable.getSelectionModel().addListSelectionListener(this);

}

public void valueChanged(ListSelectionEvent e) {

System.out.println("ListSelectionEvent");

if (e.getSource() == userTable.getSelectionModel()) {

rowHeadersTable.getSelectionModel().removeListSelectionListener(this);

rowHeadersTable.getSelectionModel().clearSelection();

int[] rows = userTable.getSelectedRows();

for (int i = 0; i < rows.length; i++) {

System.out.println("adding row selection to rowHeaders table : " + rows[i]);

rowHeadersTable.getSelectionModel().addSelectionInterval(rows[i], rows[i]);

}

int[] iarr = rowHeadersTable.getSelectedRows();

rowHeadersTable.getSelectionModel().addListSelectionListener(this);

} else if (e.getSource() == rowHeadersTable.getSelectionModel()) {

System.out.println("in rowHeadersTable");

System.out.println("e.getValueIsAdjusting() " + e.getValueIsAdjusting());

boolean isColumnSelectionAllowed = userTable.getColumnSelectionAllowed();

boolean isRowSelectionAllowed = userTable.getRowSelectionAllowed();

boolean isCellSelectionAllowed = userTable.getCellSelectionEnabled();

userTable.getSelectionModel().removeListSelectionListener(this);

userTable.getSelectionModel().clearSelection();

int[] rows = rowHeadersTable.getSelectedRows();

if (isRowSelectionAllowed && !isCellSelectionAllowed && !isColumnSelectionAllowed) {

for (int i = 0; i < rows.length; i++) {

userTable.addRowSelectionInterval(rows[i], rows[i]);

System.out.println("NI? - viewPort1 y = " + userTableViewPort.getViewPosition().y + " viewPort2 y = "

+ rowHeadersViewPort.getViewPosition().y);

userTableViewPort.setViewPosition(rowHeadersViewPort.getViewPosition());

}

} else {

// looks cleaner

userTableViewPort.setScrollMode(JViewport.BACKINGSTORE_SCROLL_MODE);

System.out.println("");

for (int i = 0; i < rows.length; i++) {

if (i == 0) {

// need to create row first with change selection

userTable.changeSelection(rows[i], 0, false, false);

userTable.changeSelection(rows[i], userTable.getColumnCount(), false, true);

} else {

userTable.addRowSelectionInterval(rows[i], rows[i]);

}

// re-adding the listener to the user table

userTable.getSelectionModel().addListSelectionListener(this);

} else {

System.out.println("no table selestion model");

}

Posted in Swing | Tagged cellrenderer, java, Swing | 1 Comment

Javascript Framework Review

Posted on December 12, 2014 by felixzacat

Recently I had to do a Javascript Framework evaluation for a client.

Prerequisites for the frameworks was that the framework should have sophisticated tables (aka Grids) and sophisticated dialogs. Also of interest in our evaluation was if the framework could do treetables.

The things we were interested in for a grid were standard functionality that you would expect in a grid widget; sorting, filtering, cell editing, and also some less common features such as ‘column picker’ – that is, being able to choose which columns to display using a palette. We were also looking at column manipulation (resize, position), and file export.

What we were looking for in a dialog/window, was ability to display as modal dialog, and also dialog manipulation, ie moving, resizing.

These are the results of our research (click on image for better quality) :

The four yellow highlighted columns are the shortlist of candidates (we eventually went with extjs). Y=Feature is offered, N=Not offered, and we also have question marks in our analysis, where it wasn’t clear if it was offered or not. It would have been possible to dig deeper had we more time.

The bottom row is Stackoverflow References (SOR). Which is an indication of popularity and adoptability.

We also looked at cost, but that was not so much of an issue.

The frameworks can be broadly divided into those that are grid-only (SlickGrid, Flexigrid, Ingrid, Datatables and jqGrid), and those that offer a complete GUI framework (jQueryUI, extjs, yUI, DHTMLX, qooxdoo, Smartclient, Wakanda, Webix).

Some of these can also be lumped into a category as ‘framework for plugins’. jQuery and Dojo offer a foundation framework, on top of which plugins can be developed. In hindsight I guess AngularJS/Ember/Bootstrap and friends could also be lumped into that category.

A few words on some of the technologies :

jQueryUI – disappointing. Only really offers a pop-up dialog.

ExtJS – very comprehensive, high adoption, not exactly cheap.

yUI – fairly inconsistent, and has now been discontinued.

DHTMLX – simlar somewhat to extjs

qooxdoo – comprehensive and suprisingly free. The only thing that put us off was the low adoption rate, but hopefully that will change in the future.

SmartClient – Powerful rich components that costs money. Suffers from low adoption rate.

Dojo – Looks quite good. I think we didn’t go for this because of its plugin architecture.

Posted in JavaScript | Tagged dhtmlx, extjs, javascript, jquery, qooxdoo, yui | Leave a comment

What is a Tree Table?

Posted on October 24, 2014 by felixzacat

One of the most advanced GUI Components is the treetable. It looks really fancy, but what exactly is it and what scenarios can it be used with?

As the name suggests a treetable is a melding of a table and tree. The left side behaves like a tree component, nodes can be expanded or collapsed, and the right side behaves somewhat like a table with columns and rows of data.

To understand a treetable lets first have a look at a standard tree component.

Tree

A tree component is probably most famously known from Windows Explorer. Visually it is a series of indented nodes that may or may not be expandable.

There are two main ways of using a tree to represent a data structure, and then there is everything in between.

(1) Hierarchy

First it can represent a hierarchical structure. This is very evident in Windows Explorer. A folder can contain many folders, which can also contain many folders, and so on.

As a class diagram it would look like this:

This is a classic Composite Pattern. Each object instance can contain a number of instances of itself.

(2) One-to-Many

A tree component can be used to represent a one to many relationship. For example the Devices Manager in Windows lists a number of devices for a computer:

This model will only expand to one level.

More than one one-to-many relationships can also be represented. Each entity that contains a further entity can be expanded:

(Make sure to use icons judiciously to clearly illustrate to the end user the different entities. In the above example the device nodes should use a different icon).

(3) Combination

The previous two structures can be combined :

As you can see each folder can contain an instance of itself, however a file cannot, and can only be a leaf node.

TreeTable

A treetable supplies extra columns to the right of the tree. The intention is to illustrate that all the nodes and leafs in the tree share properties represented by the columns.

The below example shows how things might look using the ‘combined structure’ example above.

The property ‘type’ is common across all entities. However the property ‘size’ is common only to the file entity. Notice the empty space in the ‘size’ column for the folders.

Sorting

A disadvantage of a treetable is that you can’t sort over all rows like in a normal table.

If you were to sort all the rows, then you would break the tree.

In Treetables you can only sort groups of children in nodes. For example in our previous example performing a sort on ‘size’ would only have an effect on a group of children belonging to a node like so :

Filtering

Filtering a treetable presents the same issues as filtering a standard tree.

In a traditional table, performing a filter operation simply removes rows from the table. However when filtering a tree, the structure needs to be maintained all the way down to the root.

This maintaining of nodes in a filtering operation can create a lot of visual fluff.

For example :

Final Points

When to use:

· Hierarchical relationship with properties that need to be shown
· One-To-Many or Combination where the entities share a lot of properties.

When not to use:

· A full sort is required of rows.
· Small number of leafs, of which properties to be shown do not exist in the hierarchy entity. Ie A lot of real estate on the widget is not used. See below:

Framework Examples:

Posted in Usability | Tagged treetable, tutorial, Usability | Leave a comment

Loading Spinner with jQuery Promises

Posted on October 15, 2014 by felixzacat

In your website you want to call a web service that performs some long running task. It may be loading a large set of data or performing a complex calculation on the server, so you want to animate a spinner or a loading indicator over the screen or component.

You can achieve this effect using jQuery promises.

Assume your web service call looks like this :

this.backendAsynchCall = function() {

    return $.ajax({
        url: ‘www.myURL.com’,
        dataType: 'json',
        async: true,
        type: 'GET'
    }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {

        //maybe do something with your data
    })
}

this.backendAsynchCall = function() {

return $.ajax({

url: ‘www.myURL.com’,

dataType: 'json',

async: true,

type: 'GET'

}).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {

//maybe do something with your data

})

}

Because your function returns an AJAX object it can be used with the $.when function in jQuery.

If you start your spinner, then place your function in the $.when function, and then disabling the spinner in the always block, you will get seamless spinner activity.

 
    //1. spinner on
    window.setLoading(true);

    //2. asynch backend call
    $.when(backendAsynchCall ()).always(function () {

        //3. remove spinner
        window.setLoading(false)
    });

//1. spinner on

window.setLoading(true);

//2. asynch backend call

$.when(backendAsynchCall ()).always(function () {

//3. remove spinner

window.setLoading(false)

});

All I am using for the spinner is an extjs loading panel using the call window.setLoading(true). However most frameworks have some kind of a spinner, or progress bar. Eg. angular has http://fgnass.github.io/spin.js/ .

Promises tidy things up by not needing to have the callback method inside the ‘always’ block in the ajax code, making the method more reusable.

Posted in JavaScript | Tagged extjs, javascript, jquery | Leave a comment

Layouts in Extjs

Posted on September 22, 2014 by felixzacat

This is a quick overview of layouts in ExtJS.

absolute

The absolute layout positions an element using x,y coordinates.

    layout: 'absolute',
    width:250,
    height:250,
    items: [{
        x: 50,
        y: 50,
        width:50,
        height:50,
        html: '50 50 '
    }, {
        x: 70,
        y: 70,
        width:50,
        height:50,
        html: '70 70 '
    }
    ]

width:250,

height:250,

items: [{

x: 50,

y: 50,

width:50,

height:50,

html: '50 50 '

}, {

x: 70,

y: 70,

width:50,

height:50,

html: '70 70 '

}

]

This type of layout should be avoided, as resizing the panel will not resize the components. Only use it if you know what you are doing, and you know why you are doing it.

accordion

Allows slider layout. Most famously used in Microsoft Outlook.

    layout: {
        type: 'accordion',
        animate: true
    },
    items: [{
        title: 'Inbox',
        html: 'My unread emails'
    },{
        title: 'Sent Items',
        html: 'My sent items'
    },{
        title: 'Drafts',
        html: 'My drafts'
    }],

type: 'accordion',

animate: true

items: [{

title: 'Inbox',

html: 'My unread emails'

},{

title: 'Sent Items',

html: 'My sent items'

},{

title: 'Drafts',

html: 'My drafts'

}],

A number of other options like ‘animate’ and ‘activeOnTop’ offer some interesting effects.

anchor

This layout anchors components to the edge of a container. Useful for forms. Takes string of two values that can be percent or offset pixels (as a negative number). For example, anchor: ‘50% -400’ will always be 50% wide from the left and -400 pixels from the bottom.

layout: 'anchor',
    items: [
    {
        xtype: 'label',
        text: 'Name',
    },
    {
        xtype: 'textfield',
        anchor: '50%' //50% width
    },
    {
        xtype: 'label',
        text: 'Description',
    },
    {
        xtype: 'textfield',
        anchor: '-10 30%' //5 pixel offset to the right + 30% height  
    }
]

items: [

{

xtype: 'label',

text: 'Name',

{

xtype: 'textfield',

anchor: '50%' //50% width

{

xtype: 'label',

text: 'Description',

{

xtype: 'textfield',

anchor: '-10 30%' //5 pixel offset to the right + 30% height

}

]

All components are anchored to the top left corner.

It is best used in conjunction with a hbox layout. The hbox defines a number of columns, and the anchor layout can lay out the components inside each of these columns.

Appears to ignore sizing of non-container components like labels.

border

For java developers very similar to BorderLayout in Swing. Useful for your application foundation, where you have a footer on the bottom, a navigation tree on the left, a header on top, and an editor in the middle.

    layout: 'border',
    items: [{
        title: 'South',
        region: 'south', 
        xtype: 'panel',
        height: 100,
    }, {
        title: 'West ',
        region: 'west',
        xtype: 'panel',
        items: [{
            xtype: 'textfield',
            width: 90
        }]
    }, {
        title: 'Center',
        region: 'center', 
        xtype: 'panel',
        layout: 'fit',
    }],

items: [{

title: 'South',

region: 'south',

xtype: 'panel',

height: 100,

}, {

title: 'West ',

region: 'west',

xtype: 'panel',

items: [{

xtype: 'textfield',

width: 90

}]

}, {

title: 'Center',

region: 'center',

xtype: 'panel',

}],

If no width or height is defined for a container, then it will go down the hierarchy to find the widest element. In the above example, the west panel will have a width of 90 because a child element has its width set to 90. If another element is defined in this panel that is wider, then the panel will be set to the width of that element.

This layout is great, and should be the foundation for all your applications.

collapsable and split modes are a couple of interesting options.

card

For java developers, it’s just like Cardlayout in Swing.

var active = 0;

var p = Ext.create('Ext.panel.Panel', {
    layout: 'card',
        tbar: [{
        text: 'Switch',
        handler: function(){
            var layout = p.getLayout();
            if (active == 0)
                active = 1;
            else if (active == 1)
                active = 0;            
            layout.setActiveItem(active);
        }
    }],
    
    items: [
        { html: 'Panel 1' },
        { html: 'Panel 2' }
    ],
    renderTo: Ext.getBody()
});

p.getLayout().setActiveItem(1);

var active = 0;

var p = Ext.create('Ext.panel.Panel', {

tbar: [{

text: 'Switch',

handler: function(){

var layout = p.getLayout();

if (active == 0)

active = 1;

else if (active == 1)

active = 0;

layout.setActiveItem(active);

}

}],

items: [

{ html: 'Panel 1' },

{ html: 'Panel 2' }

renderTo: Ext.getBody()

});

p.getLayout().setActiveItem(1);

Extjs has two flavours: wizard and tab. A tabbed panel is just a panel with a navigation tool above the panel. A wizard is a panel with ‘next’ and ‘back’ buttons usually on the bottom of the panel.

column

A Column layout defines a number of columns using percent or fixed width. Fixed width is calculated first, then percent.

    layout: 'column',
    items: [{
        columnWidth: .40,
        html: 'Content 1 Content 1 Content 1 Content 1 Content 1'
    }, {
        columnWidth: .20,
        html: 'Content 2'
    }, {
        width: 50,
        html: 'Content 3'
    }]

items: [{

columnWidth: .40,

html: 'Content 1 Content 1 Content 1 Content 1 Content 1'

}, {

columnWidth: .20,

html: 'Content 2'

}, {

width: 50,

html: 'Content 3'

}]

Percentage values are calculated from the remainder after the fixed width elements have been added.

I wouldn’t bother too much with this layout. It is more or less deprecated as the hbox layout can fulfill everything that it does plus some more.

More info here.

fit

This layout is very simple. It just fits component into container. It is basically the same as border layout, but with only the center part.

layout:'fit',
items: {
    title: 'Fit Panel',
    html: 'Content',
    border: false
}

layout:'fit',

items: {

title: 'Fit Panel',

html: 'Content',

border: false

}

form

All elements are stretched across horizontally from top to bottom. If a fieldLabel exists, then a label will be added to the left of the component. The label will not be stretched, but the corresponding component will be stretched until reaching the labels minimum width.

    layout: 'form',
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }, {
        xtype: 'textfield',
        fieldLabel: 'Address'
    }, {
        xtype: 'textarea',
        fieldLabel: 'Description'
    }, {
        xtype: 'checkbox',
        fieldLabel: 'Paid'
    }, {
        xtype: 'label',
        text: 'Additional Info :'
    }, {
        xtype: 'textarea'
    }]

items: [{

xtype: 'textfield',

fieldLabel: 'Name'

}, {

xtype: 'textfield',

fieldLabel: 'Address'

}, {

xtype: 'textarea',

fieldLabel: 'Description'

}, {

xtype: 'checkbox',

fieldLabel: 'Paid'

}, {

xtype: 'label',

text: 'Additional Info :'

}, {

xtype: 'textarea'

}]

A large number of forms can be done using this layout.

hbox

Aligns components along the horizontal axis. Used with the flex attribute. Flex is a ratio but represented as an integer number. The below example puts a next to b, but b will take up 75% of the space.

layout: {
    type: 'hbox'
    align : 'stretch',
    pack  : 'start',
},
items: [
    {html:'a', flex:1},
    {html:'b', flex:3}
]

type: 'hbox'

align : 'stretch',

pack : 'start',

items: [

{html:'a', flex:1},

{html:'b', flex:3}

]

Fixed height items can also be added. Use align : ‘stretch’ or the components will anchor themselves to the left of the container.

table

Starts at top left corner and lays out component left to right based on the column value.

layout: {
        type: 'table',
        columns: 3,
        tdAttrs: {
            style: 'padding: 3px;'
        }
    },
    items: [{
        html: 'Content 1 Content 1 Content 1 Content 1 Content 1'
    }, {
        html: 'Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 ',
        rowspan:2
     
    }, {
        width: 50,
        html: 'Content 3'
    }, {
        html: 'Content 4'
    }]

type: 'table',

columns: 3,

tdAttrs: {

style: 'padding: 3px;'

}

items: [{

html: 'Content 1 Content 1 Content 1 Content 1 Content 1'

}, {

html: 'Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 Content 2 ',

rowspan:2

}, {

width: 50,

html: 'Content 3'

}, {

html: 'Content 4'

}]

The table layout is not a sizing layout. Its cells expand depending on the components added. The cells ‘push out’ if you will. A layout like column or hbox will explicitly set the column widths, however this layout will not.

The attributes colspan and rowspan can be used to make cells stretch over more than one cell.

vbox

same as hbox but vertical! That’s all there is to say about this one.

Posted in extjs | Tagged extjs | Leave a comment

Creating a simple RCP app with Netbeans and Maven

Posted on August 31, 2014 by felixzacat

Netbeans offers a powerful way of modularising a desktop application. In this tutorial we will be creating a simple application. While this tutorial does not showcase many benefits of the netbeans rich client platform (more to come in other tutorials!), it should be enough to get someone started.

Create A New Project

In the file menu select ‘New Project’, then navigate to the Maven folder and choose Netbeans Application :

Select ‘Next’ and enter in a name and location for your project. Other Maven properties may also be entered such as Group Id and version.

In the last screen leave everything as it is :

Select ‘Finish’.
Netbeans should have created three new projects. They all should have the same name, but are appended differently with –app, -branding and –parent.

This is not actually a flat structure. If you expand the HappyDog-parent, you will see that the other two projects are defined as modules.

This is also reflected in the directory structure :

This is classic Maven inheritance in action. The two sub projects have the parent project defined in the tag. All Maven plugins and dependencies defined in the super project can also be accessed in the sub projects. Also, the parent POM file has the two sub projects listed as modules. Thus the association between parent and children is two way.

Clean and build the parent maven project HappyDog-parent (Right click HappyDog-parent and select ‘Clean and Build’). This action will also do the same to the sub modules.
You will often get an error when you first do this. This is because the RCP Archetype includes a Junit test that fails.

Just delete the file ‘ApplicationTest.java’

Run Project

To compile, ‘clean and build’ on the parent HappyDog-parent.

To run, right click on HappyDog-app and select ‘Run’

If everything is set up right, then you should see this :

This is the basic frame for your application. All that is missing is modules you need to create, which we will look at in another tutorial.

Splash Screen

We want out own splash screen instead of the default blue Netbeans spash screen that always pops up. To do this, we need an image, and we need to save it somewhere in the src/main/resources folder in the branding project :

Now If you right click the branding project you should see a ‘Branding’ option listed in the context menu. Select this menu item.

A number of branding related features are presented. Select ‘Splash Screen’. In this tab you can browse to the image you want for the splash screen, as well as customize other graphical features.

NEXT Part2. In the next tutorial we will be adding functional modules to the simple application we created in this tutorial.

All the code for this tutorial can be found on github.

Thanks to Luann Snawder Photography for the dog image https://www.flickr.com/photos/luann_snawder_photography/

Posted in Netbeans RCP | Tagged Netbeans RCP, tutorial | Leave a comment

ExtJS Filter Across All Grid Cells

Posted on June 30, 2014 by felixzacat

ExtJS offers the ability to filter rows based on a column. By setting filters features in grid like so :

this.features = {
  ftype: 'filters',
  encode: false,
  local: true
};

this.features = {

ftype: 'filters',

encode: false,

local: true

};

and defining filters on your columns like so :

dataIndex: 'myColumnId',
  text: 'My Column',
  filter: {
  type: 'string'
}

dataIndex: 'myColumnId',

text: 'My Column',

filter: {

type: 'string'

}

You can get some pretty cool filtering functionality in your grids by clicking on the column drop down

However what if you wanted to filter grid rows globally (Ie. not restricted on a column) ?

The best way would be to add a textfield to your toolbar, or somewhere above your grid, and then have some method that filters across all rows based on the text you input.

The following code filters rows based on a text string.

    /**
     * Search across all visible cells in the grid, for the string
     *
     * @param tablestore tablestore for grid. May have more columns than grid.
     * @param {string} search string to pass in
     * @param grid
     */
    searchAcrossAllVisibleColumns: function (tablestore, string, grid) {

        tablestore.clearFilter();

        var gridColumns = grid.query('gridcolumn:not([hidden])'); //1

        //iterate and set flag
        tablestore.each(function (rec, idx) { //2
            contains = false;

            for (field in rec.data) { //2


                /**
                 * Give a field id, find its column via dataIndex
                 * TODO could be improved for performance
                 *
                 * @param {string} field
                 * @returns {Column}
                 */
                var findColumnForField = function(field) { //3

                    for (x in gridColumns) {
                        var col = gridColumns[x]

                        if (col.dataIndex == field) {
                            return col;
                        }
                    }
                }

                var column = findColumnForField(field);

                var cellValueAsString = null;

                /**
                 * If a column is found (ie. it may not because a datastore may have more columns than the visible columns in the grid)
                 * then check to see if it has a renderer. If so, then process the data field throught the renderer, so that we get
                 * the visually displayed value.
                 */
                if (column) { //4
                    var renderer = column.renderer;

                    if (renderer) { //5
                        cellValueAsString = "" + renderer(rec.data[field]);
                    }else {
                        cellValueAsString = "" + rec.data[field]
                    }

                    if (cellValueAsString.indexOf(string.getValue()) > -1) { //6
                        contains = true;
                    }

                }
            }
            if (!contains) { //7
                rec.filterMeOut = false;
            } else {
                rec.filterMeOut = true;
            }
        });
        
        tablestore.filterBy(function (rec, id) { //8
            if (rec.filterMeOut) {
                return true;
            }
            else {
                return false;
            }
        });
    },

/**

* Search across all visible cells in the grid, for the string

* @param tablestore tablestore for grid. May have more columns than grid.

* @param {string} search string to pass in

* @param grid

searchAcrossAllVisibleColumns: function (tablestore, string, grid) {

tablestore.clearFilter();

var gridColumns = grid.query('gridcolumn:not([hidden])'); //1

//iterate and set flag

tablestore.each(function (rec, idx) { //2

contains = false;

for (field in rec.data) { //2

/**

* Give a field id, find its column via dataIndex

* TODO could be improved for performance

* @param {string} field

* @returns {Column}

var findColumnForField = function(field) { //3

for (x in gridColumns) {

var col = gridColumns[x]

if (col.dataIndex == field) {

return col;

}

var column = findColumnForField(field);

var cellValueAsString = null;

/**

* If a column is found (ie. it may not because a datastore may have more columns than the visible columns in the grid)

* then check to see if it has a renderer. If so, then process the data field throught the renderer, so that we get

* the visually displayed value.

if (column) { //4

var renderer = column.renderer;

if (renderer) { //5

cellValueAsString = "" + renderer(rec.data[field]);

}else {

cellValueAsString = "" + rec.data[field]

}

if (cellValueAsString.indexOf(string.getValue()) > -1) { //6

contains = true;

}

if (!contains) { //7

rec.filterMeOut = false;

} else {

rec.filterMeOut = true;

}

});

tablestore.filterBy(function (rec, id) { //8

if (rec.filterMeOut) {

return true;

}

else {

return false;

}

});

Notes :

To get all visible columns the codes uses the Ext.ComponentQuery functionality. This allows us to query components in the grid. Don’t ask me how it works, but the following returns just the columns that are visible : grid.query(‘gridcolumn:not([hidden])’);
we need to iterate over each row, and then each cell so we have two loops here
this function gets a column for a given field ID. We need this column later.
A field may not be associated with a column. In extJS your store’s table of data may include additional columns that are not visible in the extjs grid.
Now we check if the column has a renderer. With our filter function we can only filter on string values. Because column types may vary, the only way we can filter across strings is to get the rendered value. So we get the render function and pass our rec data value through it to get the string value.
comparison
set filterMeOut flag
call the filterBy method on the store, passing in a custom function which does the comparison on our filterMeOut flag.

You can then call the method through a text field like this.

xtype: 'textfield',
tooltip: 'Search',
enableKeyEvents: true,
listeners: {
keyup: function (string) {

     var grid = this.up('grid');

     _self.searchAcrossAllVisibleColumns(grid.store, string, grid);
}

xtype: 'textfield',

tooltip: 'Search',

enableKeyEvents: true,

listeners: {

keyup: function (string) {

var grid = this.up('grid');

_self.searchAcrossAllVisibleColumns(grid.store, string, grid);

}

Posted in extjs | Tagged extjs, javascript | Leave a comment

THREE_COLUMN_PAGE

January 2015
M	T	W	T	F	S	S
« Dec
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Posts on Swing

Javascript

Pages

Who's Online

Tags

Swing Design Patterns

Archives

Swing Error Dialog with Exception Displayer

Closed :

Open :

How to use it :

Code :

Simple Login Dialog in Java Swing

Creating a RCP Application in Netbeans – [Part 2]

Adding a Module with Functionality.

Creating the GUI

Create a Panel

Add GUI Components

Hookup Events

Incorporating Module Into Super Project

Row Number Column in JTable

Javascript Framework Review

What is a Tree Table?

Tree

(1) Hierarchy

(2) One-to-Many

(3) Combination

TreeTable

Sorting

Filtering

Final Points

Loading Spinner with jQuery Promises

Layouts in Extjs

absolute

accordion

anchor

border

card

column

fit

form

hbox

table

vbox

Creating a simple RCP app with Netbeans and Maven

Create A New Project

Run Project

Splash Screen

ExtJS Filter Across All Grid Cells

Recent Posts

Swing Error Dialog with Exception Displayer

Simple Login Dialog in Java Swing

Creating a RCP Application in Netbeans - [Part 2]

Row Number Column in JTable

Javascript Framework Review

Meta

Blogroll

My links

Other Java Rich Client Blogs

UML

Posts on UML

Categories

Java Desktop

Archives