Creating a custom user interface

Custom User Interface Example.png

The code below is an example of how to create a custom user interface, this is a panel that is added to the righthand side of the 'Edit' window and allows objects to have their own variables. You can use this as a base to create custom user interfaces for your own skins. The code below creates a panel that looks like this.







/** 
 * This script is being run when a skin is selected
 * The script installs a small custom user interface into Jalbum's
 * edit panel that is specific to the image being edited
 * Author David Ekholm
 */
 
import se.datadosen.component.*;
import se.datadosen.jalbum.JCustomPanel;
import se.datadosen.jalbum.JAlbumContext;
import se.datadosen.jalbum.PluginContext;
import se.datadosen.jalbum.EditPanel;
import se.datadosen.jalbum.event.*;
import se.datadosen.util.PropertyBinder;

/**
 * Our custom edit view panel
 */
class CustomUI extends JCustomPanel {

	JComboBox kategori = new JComboBox(new Object[] {"Family", "Work", "Sports"});
	JTextField plats = new JTextField();
	JColorSelector backgroundColor = new JColorSelector("Background color");
	
	public CustomUI(JAlbumContext context) {
		super(context);

		backgroundColor.setColor("white");
		
		// Set up the UI
		setBackground(SystemColor.text);
		setOpaque(true);
		add(new JLabel("Category"));
		add("tab hfill", kategori);
		add("br", new JLabel("Location"));
		add("tab hfill", plats);
		add("br", new JLabel("Background"));
		add("tab", backgroundColor);

		// Make sure changes are saved even if one doesn't move between images
		FocusListener fl = new FocusAdapter() {
			private void focusLost(FocusEvent e) {
				saveUI();
			}
		};

		ActionListener al = new ActionListener() {
			private void actionPerformed(ActionEvent e) {
				saveUI();
			}
		};
		kategori.addFocusListener(fl);
		plats.addFocusListener(fl);
		backgroundColor.addActionListener(al);

		// Subclasses like us should call init after components are initiated
		init();
	}
}

// Make some convenient references available
JAlbumContext context = JAlbumContext.getInstance();
PluginContext pc = context.getPluginContext();
EditPanel editPanel = pc.getEditPanel();

CustomUI customUI = new CustomUI(context);
// Install our custom panel in Jalbum's edit panel
editPanel.addCustomTab("Custom", customUI);

If you need more space for your interface then you can modify the above so the controls are opened in a new window:

Custom user interface example2.png
/** 
 * This script is being run when a skin is selected
 * The script installs a small custom user interface into Jalbum's
 * edit panel that is specific to the image being edited
 * Author David Ekholm
 */
 
import se.datadosen.component.*;
import se.datadosen.jalbum.JCustomPanel;
import se.datadosen.jalbum.JAlbumContext;
import se.datadosen.jalbum.PluginContext;
import se.datadosen.jalbum.EditPanel;

import se.datadosen.jalbum.event.*;
import se.datadosen.util.PropertyBinder;

/**
 * Our custom edit view panel
 */

class CustomUI extends JCustomPanel {

    JComboBox kategori = new JComboBox(new Object[]{"Family", "Work", "Sports"});
    JTextField plats = new JTextField();
    JColorSelector backgroundColor = new JColorSelector("Background color");
    JFrame extWindow = new JFrame("ext window for image settings");//@TomCee - declare new frame
    ControlPanel cuiPanel = new ControlPanel();//@TomCee - declare new ControlPanel
    JButton openButton = new JButton("open window");//@TomCee - open the ext window
    JButton closeButton = new JButton("close");//@TomCee - close the ext window

    public CustomUI(JAlbumContext context) {
        super(context);

        backgroundColor.setColor("white");

        // Set up the UI
        setBackground(SystemColor.text);
        setOpaque(true);

        //@TomCee - add the variables to our ControlPanel
        cuiPanel.add(new JLabel("Category"));
        cuiPanel.add("tab hfill", kategori);
        cuiPanel.add("br", new JLabel("Location"));
        cuiPanel.add("tab hfill", plats);
        cuiPanel.add("br", new JLabel("Background"));
        cuiPanel.add("tab", backgroundColor);
        cuiPanel.add("br right",closeButton);
        //@TomCee - add the ControlPanel to our frame
        extWindow.add(cuiPanel);
        //@TomCee - specify the window
        //width x height
        cuiPanel.setPreferredSize(new Dimension(300, 200));
        //place on screen relative to jalbum
        extWindow.setLocationRelativeTo(this);
        //using the close button ensures saving changes
        extWindow.setDefaultCloseOperation(javax.swing.WindowConstants.DO_NOTHING_ON_CLOSE);
        //no way to forget this window is open
        extWindow.setAlwaysOnTop(true);
        extWindow.getContentPane().add(cuiPanel);
        extWindow.pack();

        add("center",new JLabel("<html><i>settings can be done<br>in an external window:</i></html>"));
        add("br", openButton);

        //@TomCee - create the action listeners for the buttons
        ActionListener openAL = new ActionListener() {

            public void actionPerformed(ActionEvent e) {
                extWindow.setVisible(true);
            }
        };
        ActionListener closeAL = new ActionListener() {

            public void actionPerformed(ActionEvent e) {
                saveUI();
                extWindow.dispose();
            }
        };
        openButton.addActionListener(openAL);
        closeButton.addActionListener(closeAL);

        //@TomCee - these listeners are not needed anymore, saving is done by the closeButton
        // Make sure changes are saved even if one doesn't move between images
       /* FocusListener fl = new FocusAdapter() {

            public void focusLost(FocusEvent e) {
                saveUI();
            }
        };
        ActionListener al = new ActionListener() {

            public void actionPerformed(ActionEvent e) {
                saveUI();
            }
        };
        kategori.addFocusListener(fl);
        plats.addFocusListener(fl);
        backgroundColor.addActionListener(al);*/


        // Subclasses like us should call init after components are initiated
        init();
    }
}

// Make some convenient references available
JAlbumContext context = JAlbumContext.getInstance();
PluginContext pc = context.getPluginContext();
EditPanel editPanel = pc.getEditPanel();

CustomUI customUI = new CustomUI(context);
// Install our custom panel in Jalbum's edit panel
editPanel.addCustomTab("Custom", customUI);