Free the pixel

Animated Scrolling text

2010-06-05T23:04:00.002+02:00

Some days ago, a friend(hey Luiz!) asked me about a component that could display text with a kind of scrolling animation as you see in many media players where you see the band name / title name going from right to left. He wanted to add this kind of component to one of his application. As he knows I like to play with swing/java2D he asked me about it.
I like the idea of creating such component; so I had to come up with an implementation, even If I guess you can find some basic implementations on the net.

I wanted to add a way to control the animation to be able to have some basic animations (Left to right / Right to left / Top to bottom / Bottom to top) and also some more complex animation like sinusoidal animation.

I rapidly had a first draft working, doing the wished animation, but it took a few refractor sessions to have some clean code that gives full control over the animation.

Let’s have a look at the code.

First the interface that will be used to control the animation:

public static interface IScrollTextUtils {
    int getYpos(float animProgress, int charnum);

    int getXpos(float animProgress, int charnum);

    double getRotate(float animProgress, final int charnum);

    float getTransformedFontSize(float animProgress, int fontSize, final int charnum);

    boolean isTimeTolaunchNewTimeline(float animProgress);

    void textChanged();

    void paintCharacter(Graphics2D g, String s);

    int getDuration();
}

It will be used to find out the position of each character, paint the text, the duration of the animation and to determine when to start the next animation.

More than one of the same animation can run at the same time (you want to start the next animation before the end of the current one to always have some text to display).

So to deal with multiple animations at the same time we need a list of something that can handle an animation.
AnimationProgressHandler is used for this purpose.
It contains a timeline and a way to start the next animation when required

public static class AnimationProgressHandler {
        private Timeline timeline;
        private float animProgress = 0;
        private boolean AlreadyStartedNext = false;
        private ScrollingText scrolling;

        private AnimationProgressHandler(final ScrollingText scrolling) {
            this.scrolling = scrolling;
            //prepare the timeline
            this.timeline = new Timeline(this);
            this.timeline.addPropertyToInterpolate("animProgress", 0f, 1f);
            this.timeline.setDuration(scrolling.scrollTextUtils.getDuration());
            this.timeline.addCallback(createCallBack(this.timeline));
        }

        public void setAnimProgress(final float animProgress) {
            this.animProgress = animProgress;
            if (!this.AlreadyStartedNext && this.scrolling.scrollTextUtils.isTimeTolaunchNewTimeline(animProgress)) {
                this.AlreadyStartedNext = true;
                //start the next animation
                this.scrolling.createTimeline().play();
            }
            this.scrolling.repaint();
        }

        private TimelineCallback createCallBack(final Timeline parent) {
            return new TimelineCallbackAdapter() {
                @Override
                public void onTimelineStateChanged(final TimelineState oldState, final TimelineState newState,
                        final float durationFraction, final float timelinePosition) {
                    if (newState == TimelineState.DONE) {
                        //when the animation is done 
                        //remove it
                        AnimationProgressHandler.this.scrolling.animHandlers.remove(this);
                    }
                }
            };
        }
    }

the interesting methods in scrolling text are the paint methods

paintComponent paint the text for every active timeline

    protected void paintComponent(final Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g.create();
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        // paint the text for each running animation
        for (int i = 0; i < this.animHandlers.size(); i++) {
            paintText(g2, this.animHandlers.get(i).animProgress);
        }
        g2.dispose();
    }

paintText call scrollTextUtils to find the x and y coordinates
check if the coordinates are in the visible area
get and set the rotation/font and then paint each character of the text


protected void paintText(final Graphics2D g2, final float animProgress) {
        Font f = getFont();
        for (int i = 0; i < this.text.length(); i++) {
            int x = this.scrollTextUtils.getXpos(animProgress, i);
            if (x < -f.getSize() || x > getWidth()) {
                // do not paint, out of the visible bounds
            } else {
                int y = this.scrollTextUtils.getYpos(animProgress, i);
                if (y < 0 || y > getHeight() + f.getSize()) {
                    // do not paint, out of the visible bounds
                } else {
                    double angle = this.scrollTextUtils.getRotate(animProgress, i);
                    g2.rotate(angle, x, y);
                    g2.setFont(f.deriveFont(this.scrollTextUtils.getTransformedFontSize(animProgress, f.getSize(), i)));
                    g2.translate(x, y);
                    this.scrollTextUtils.paintCharacter(g2, String.valueOf(this.text.charAt(i)));
                    g2.translate(-x, -y);
                    g2.rotate(-angle, x, y);
                }
            }
        }
        g2.setFont(f);
    }

you can try it here

the full source code is available at https://free-the-pixel.dev.java.net/source/browse/free-the-pixel/trunk/src/com/community/xanadu/components/text/ScrollingText.java

GHOST drag and drop, over multiple windows

2010-04-02T23:21:00.001+02:00

I guess many people seen the example(the photocollage application) from Romain Guy, when he was still playing with java, about ghost drag and drop using the glass pane to render the ghost image:
http://www.jroller.com/gfx/entry/drag_and_drop_effects_the

One problem with this implementation is that it used the glasspane, a unique resource of a window.
If that’s a problem for you, you can simply fix it by using JLayeredPane or JXlayer (I won’t talk about this implementation in this article).

The biggest problem is (and even more lately considering that palettes/multi windows application are vastly used now), how to allow ghost DnD through multiple windows?
You can easily imagine, in the photocollage application of Romain, that the photo thumbnails would be inside a different window than the drop location.
To do that, it’s not possible to use any kind of trick that span over only a window to draw the ghost image.

The solution I came up with is to use a non opaque window on which the ghost image is drawn and that is dragged around

While implementing this solution I ran into a unexpected problem: the drop method from DropTarget was never call, so in the DragGestureListener.dragDropEnd(DragSourceDropEvent) , DragSourceDropEvent.getDropSuccess() was always returning false.
I didn’t investigate much on that but I guess it’s because when the drop happen the cursor is over a window (the window where the ghost image is drawn) and not actually over the component that has the drop target.
So my first fix for this, was to add an offset of 1 pixel between the cursor and the ghost window, it worked well. But what I actually wanted is to have the cursor in the middle of the ghost window.
So the true problem was how to get the mouse event to be consumed by the component below the ghost window.
At this time I remember the testing I have done with non opaque window, you could click through a non opaque window if nothing was painting were the click takes place.

In the example below ,it contains 2 buttons with a bit of space between them, if you click between them the window will lose focus and it’s actually the component behind the window that will grab the focus.


JDialog d = new JDialog();
WindowsUtils.setOpaque(d, false);
JButton b1 = new JButton("button 1");
JButton b2 = new JButton("button 2");
d.getContentPane().setLayout(new FlowLayout());
d.getContentPane().add(b1);
d.getContentPane().add(b2);
d.pack();
d.setVisible(true);

So how could I apply this to my ghost window?

I need the mouse release event to get through the window, so that’s mean the pixel behind the cursor should not be painted. So that’s lead in my implementation to change the clip of the graphics when I am painting the image to keep away one pixel from being painted:

Area a1 = new Area(getBounds());
//remove the center point (where the cursor is)
a1.subtract(new Area(new Rectangle(getWidth() / 2, getHeight() / 2, 1, 1)));
g2.setClip(a1);

The missing pixel is normaly not visible by the user as the cursor is over it, but you can see it by taking a screen shot that does not contain the cursor.

To allow a component to be drag:

DnDGhostManager.enableDrag(JComponent,Transferable)

to declare a drop location

DnDGhostManager.enableDrop(JComponent,DataFlavor,DnDSuccessCallBack)

where DnDSuccessCallBack is an interface containing a single method

void dropSuccess(DataFlavor,DropTargetContext,Transferable,Point);

Demo:

Substance L&F: Button with multiline text

2010-03-14T16:11:00.000+01:00

Usually when you need a button with text on multiple lines, you have to use html to format the text.

This works fine, but as I am using Substance L&F, I ran into an unsupported featured concerning the foreground colour using html.
First, let’s see how substance displays the text in a button.
The foreground color depend of the button state (default,pressed,armed,…)
There is an animated transition when switching state.

When using html as text the htmlView won’t behave like normal text, I mean by that, that the foreground color will not change because the rendering is delegated to the basicHtml View and not to substance.

SubstanceButtonUI default state with HTML text

SubstanceButtonUI rollover state with HTML text, here you can barely see the text

SubstanceButtonUI default state with normal text

In most of the substance LAF, it’s not big a problem as the foreground color doesn’t change with the button state. But with some LAF as SubstanceMagellanLookAndFeel there is a problem as the text become barely readable during the rollover state.
And even if it stay readable, it just seem strange that some buttons have a black foreground when rollover and some a white one as it’s the case for my custom substance LAF.

So the plan was to make a custom SubstanceButtonUI to manage multiple text lines on JButton, without using the basic html rendering, using \n to split the text.

There are 2 things to do:
To split the text when it’s changing
To paint the text

Splitting the text
Cache of the lines


private String[] splittedText = null;

private class TextChangeListener implements PropertyChangeListener {
        @Override
public void propertyChange(final PropertyChangeEvent evt) {
    if (evt.getNewValue() != null && !evt.getNewValue().toString().isEmpty()) {
        SubstanceMultiLineButtonUI.this.splittedText = evt.getNewValue().toString().split("\n");
    } else {
        SubstanceMultiLineButtonUI.this.splittedText = null;
    }
    SubstanceMultiLineButtonUI.this.button.repaint();
}
};

Install the text change listener

@Override
    protected void installListeners(final AbstractButton b) {
        super.installListeners(b);
        this.textChangeListener = new TextChangeListener();
        b.addPropertyChangeListener("text", this.textChangeListener);
    }

Painting:
Loop through the lines
Find the correct position to paint each line
Paint the line using the paintButtonText from substanceButtonUI
Find the correct position for the icon and paint it.

for (final String s : this.splittedText) {
    viewRect.x = i.left;
    viewRect.y = i.top;
    viewRect.width = b.getWidth() - (i.right + viewRect.x);
    viewRect.height = b.getHeight() - (i.bottom + viewRect.y);

    textRect.x = textRect.y = textRect.width = textRect.height = 0;
    iconRect.x = iconRect.y = iconRect.width = iconRect.height = 0;

    String line = SwingUtilities.layoutCompoundLabel(c, fm, s, b.getIcon(), b.getVerticalAlignment(), b.getHorizontalAlignment(), b.getVerticalTextPosition(), b.getHorizontalTextPosition(), viewRect, iconRect, textRect, b.getText() == null ? 0 : b.getIconTextGap());

    // find the icon location
    if (b.getIcon() != null) {
        if (trueIconRect.x != 0) {
            trueIconRect.x = Math.min(trueIconRect.x, iconRect.x);
        } else {
            trueIconRect.x = iconRect.x;
        }
        trueIconRect.y = iconRect.y;
        trueIconRect.width = iconRect.width;
        trueIconRect.height = iconRect.height;
    }

    //compute the text Y position
    double part = fontMetrics.getStringBounds(line, g2).getHeight();
    double y = 0.5 * this.button.getHeight();
    y -= part * 0.5 * this.splittedText.length;
    y += part * lineNumber;
    textRect.y = (int) y;
    //deletegate to substance
this.paintButtonText(g2, b, textRect, line);
                        
    lineNumber++;
}





//paint the icon
if (b.getIcon() != null) {
    if (this.splittedText==null||this.splittedText.length==0) {
    // if no text
        SwingUtilities.layoutCompoundLabel(c, fontMetrics, "", b.getIcon(), b.getVerticalAlignment(), b.getHorizontalAlignment(),viewRect, trueIconRect, textRect, b.getText() == null ? 0 : b.getIconTextGap());
    }
    paintIcon(g2, c, trueIconRect);
}

SubstanceMultiLineButtonUI default state

SubstanceMultiLineButtonUI rollover state

To use this UI on a button:

JButton b = new JButton("Do this\nand that");
b.setUI(new SubstanceMultiLineButtonUI(b));

Customs Toggle buttons

2010-03-01T19:39:00.001+01:00

First I will talk about why I ended up creating this customs jtoggle button.

I was asked, what would be the best way to show a choice among 2 available options (option A or option B).

Usually when you want the user to select one option among a few (let’s say less than 5) you can use some JRadioButton/JCheckBox/JToggleButton.
JCombobox/JList are usually used if you have more possible options, doesn’t really make sense (at least for me) to have a JComboBox/JList with only 2 or 3 available options

I had to show the icon corresponding to each of the 2 options.
I could have used JRadioButton + a JLabel (to show the icon) or a JToggleButton.
The image being quiet big (> 100*100 pixels), using a JToggleButton is just wrong and plain ugly for this kind of icon.
So my only option left was to use a JRadioButton with a JLabel to show the icon.

After some tests, I wasn’t really satisfied about how it looked.
I really don’t like the look of the selected/unselected icon sticked to the icon representing the option.

So I though why not use directly the image as component with some kind of visual feedback apply to the image (and not outside like for the JRadioButton)

The visual feedbacks I considered for this are the following:
-translucent if not selected
-smaller image if not selected
-a selection ring
And of course it should have animated transition between selected/unselected state switch

You can find the implementation at: ShrinkingToggleImageButton

Some time later, I needed to have a panel to select among 3 options, but this time there was no icon. So I should have just used 3 JRadioButton and be done with it. But considering the application is running on a device with touch-screen and that selecting an option trigger a big change in the screen, it made more sense to have JToggleButton used there.

As having 3 JToggleButton side by side doesn’t look that great, I decided to see If I could get something that make sense with a better look.

I rapidly decided to try using ShrinkingToggleImageButton, after playing a bit to create the image, I came up with the following result.

I was happy about the result, it looks way better on the screen it’s used on, than some JRadioButton/JToggleButton.

Some time later, I needed a way to select options among 3 again, but this time it had an icon + some text, as I had the same constraints (touch-screen – big buttons needed), I started to play again with ShrinkingToggleImageButton.

This time I created a class to hold this component, instead of just giving the right image to the shrinkingToggleImageButton: ShrinkingToggleImageAndTextButton

Also it can deal with multiple line text, use \n to wrap to the next line

Bean reader JTable

2010-02-11T18:18:00.005+01:00

I have already written about JTable on this blog, a lot can be written about it.
This time I will talk about a custom jtable I developed in order to have the simplest way to show READ ONLY data.

First how I was coding before:


class Person{
String firstName;
String lastName;
/*..*/
}

DefaultTableModel dtm= new DefaultTableModel();
for(Person p: getListPersons()){
Dtm.add(new Object[]{p.getFirstName(),p.getLastName()});
}

Dtm.addColumn(“firstName”);
Dtm.addColumn(“lastName”);

JTable table=new JTable();
table.setModel(dtm);

And to know which Object is currently selected:

Int index=table.getSelectedIndex();
Int modelIndex=table.convertRowIndexToModel(index);
Person selected=getListPersons.get(modelIndex);

After coding this way too many time I wondered:
As we only show only one kind of object in the table, wouldn’t it be easier:
to have a table of T
to be able to add/remove a T
to be able to get the selected T
All this without coding a custom JTable or/and TableModel each time

So the plan is to have an easy way to
-Define the class of objects to show using the JTable
-Define the columns
-Add/remove an object from the table
-Get the selected objects

So now let’s see the implementation I called BeanReaderJTable

First we need a generic parameter

public class BeanReaderJTable<T> extends JTable {/*…*/}

The contructor take the field names and the column names you want as header value.


public BeanReaderJTable(String[] fields, String[] title)

Adding/removing a row or getting the selected objects can’t be easier:

addRow(T)
addRow(T[])
addRow(Collection<T>)
removeRow(T)
getSelectedObject():T
getSelectedObjects():T[]

What is doing the actual job is the GenericTableModel.
The important job is done in getValueAt(int,int). The reflexion API is used to retrieve the value of a given pair field+row

Now let’s see a sample:

// declare the type + fields+column title

String[] fields = new String[] { "size", "size.width", "size.height", "class", "visible", null };
String[] titles = new String[] { "size", "width", "height", "class", "is visible", null };
BeanReaderJTable<Component> table = new BeanReaderJTable<Component>(fields, titles);
//populate the table
table.addRow(getAllComponents(frame));

You may have noticed, I left the last field empty, doing so, an empty column is created that can be used to set for example a button cell editor

And also what you can see, is that you can access nested field like size.width

This time you should actually be able to access the code source repository, my java.net project has been approved:
BeanReaderJTable

Closing windows in style

2010-02-07T20:44:00.011+01:00

This week some fun stuff!

In the post about dialog with drop shadow i mentioned the class WindowFadeInManager to open or close a window with a fadein / fadeout effect, but there is another way to close window in style.

First, don’t make me say what I didn’t, such close transitions should not be used on every windows in your app, if you do it will just annoy the user.
I usually use them to close loading/splash/main frame of an application.

The base class where all the main work is done is
CloseTransition , it’s an abstract class where the only abstract method is

protected abstract void paintImage(Graphics g,float animFraction);

This method is responsible of drawing the closing window for a given animation fraction (from 0 to 1)

The CloseTransition class take care of making a screenshot of the actual window that will get closed. Then it starts the close animation.

So what to do in this paintImage method?
One easy thing is to show that a window is closing via shapes. For example simply by making the window shrink.

This is done by extending the ShapeTransition class.
This class has one abstract method:

public abstract Shape getShape(float animFraction);

This method will get called to set the clip before painting the image of the closing window. There is also an option to automaticly shrink the image of the closing screen.
So to create a close transition, this method will have to return an empty shape when animFraction=1 and a shape that cover totally the original window when animFraction=0

By default in the ShapeTransition the original window is painted with an alpha value of 1-animfraction to make the window disappear smoothly, you can change this behaviour by setting the fadeout property to false.

In the repository you will find the following implementation of close transitions:
ShrinkTransition
CircleTransition
RectanglesTransition (the one I use in my apps)
FadeOutTransition
RotationTransition
PinchTransition, the funniest one, only work well on small window

To start a close transition you can follow this example:

myFrame.setDefaultCloseOperation(JFrame.DO_NOTHING_ON_CLOSE);
myFrame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e) {
RectanglesTransition transition = new RectanglesTransition(myFrame);
transition.startCloseTransition();
}
});

By default the action at the end of the transition is system.exit(0); because those close transitions are meant to be used to close main frame of an application but anyway you can set the end action:

transition.setEndAction(AbstractAction);

Moving to java.dev.net

2010-02-05T23:07:00.003+01:00

As kenai is closing i am moving my code repository to https://free-the-pixel.dev.java.net

edit:
here is the mail i got a few hours after migrating to java.net :

In an effort to get information out to the Kenai community quickly, while trying to manage the integration of our two companies, I think we did a poor job at communicating our plans for Kenai.com to you. I would like to remedy that now. Our strategy is simple. We don't believe it makes sense to continue investing in multiple hosted development sites that are basically doing the same thing. Our plan is to shut down kenai.com and focus our efforts on java.net as the hosted development community. We are in the process of migrating java.net to the kenai technology. This means that any project currently hosted on kenai.com will be able to continue as you are on java.net. We are still working out the technical details, but the goal is to make this migration as seamless as possible for the current kenai.com projects. So in the meantime I suggest that you stay put on kenai.com and let us work through the details and get back to you later this month.

Thanks for your feedback and patience.

Ted Farrell
Oracle Corporation

that's great news,
well i did the manual migrating to java.net but i won't complain i didn t have so many stuff as i only started begining on this years.

Table and actions.

2010-01-28T17:47:00.011+01:00

If you have been developing client software you certainly already ran into the following situation:
You have a table full of data, each line corresponding to an object you can interact with. Where and how should I put buttons for this purpose?

I will explore several implementations in order to handle this situation.

Cell editors/renderers

This way is often seen to handle this situation, you have to add one column per action, and then the button will appear on each line thanks to a cell renderer/editor.
I don’t find it really appealing visually, because repeating the same button over and over again on each line seems wrong to me, but at least it’s easy to see that the action on the button will be applied to the selected row.
Adding columns + most likely increasing the row height (to display properly an icon) are a waste of space if you don’t have so much of it at first.

I know by experience that developers that do not understand swing correctly (well, that’s a nice 99% of the people I worked with) tend to fail miserably at writing cell renderer/editor, is why I tried not to advice people to use custom cell editor/renderer.

Buttons outside the table

It’s possible to add buttons somewhere on the screen that will do something related to the selected row in the table, that’s the easiest solution. The main problem of this implementation is that buttons are actually outside the table and hence that the buttons are not yet directly linked to the selected row, it might confuse the user.

Popup menu

Right click on the table to show a popup menu
This one is also an easy solution.
The main drawback of this solution is that at first the user has no idea there is actions available on the selected row via a popup menu

Overlay buttons

So far the main drawbacks of the above solutions are: buttons not directly linked to the selected row, popup not visible at first, repeating the same button again and again.
So why not try to come with a solution that will meet the following requirement:
Only one button per action visible at the same time, linked to the selected row.
Let’s have a look at the outside button way. What was is main problem? The buttons are not linked to the selected row. So how would it be possible to link it?

The solution I came up with is to use a JLayeredPane to position the buttons next to the selected row: here

Mixed approach

What happen now if there are more than 2 actions, so 2+ buttons.
The cell renderer approach will need more even more column, so even more space wasted.
The button overlay approach will also need some space to show the button, and the furthest button will not seems so much connected to the selected row

Only the popup approach is behaving well in this case, but at the same time it’s not user friendly as the possibility to see the popup is not explicit.

(I am not talking about the buttons outside the table way because I consider it not user friendly, because of how unrelated are the buttons with the table)

So why not mixed the popup approach with the 2 others?

Popup + cell renderer/editor / Popup + overlay button
The principle is the same in both approach, that is, to show a button that say “click me to see the popup” and put it either as a cell renderer or as an overlay button.

You can find all the above implementations here

web start demo:

Validation overlays

2010-01-21T18:29:00.017+01:00

What I mean validation is for example to have an error icon in a corner of a text field if the input is wrong.

Like a year ago I read a serie of articles about validation overlays on Kirill Grouchnikov blog at http://www.pushing-pixels.org/?p=69 that I really encourage you to read to have some information/idea how this can be implemented. I came to the conclusion that there were only easy 2 ways of doing this, using glasspane or jxlayer.
The glasspane suffer a performance issue and by the fact that there is only 1 glasspane per window.
JXlayer only drawback is that you can’t put the icon outside of the component.

One day I noticed that jide provide an easy way to add an overlay component to any component.
There is one problem although with jide you have to override the paintComponent Method(and add the required code) of each component you want to have the overlay component.
That’s a constraint I really didn’t want to deal with to have validation overlays, that’s make the code too complicated/unreadable

If you don’t override the paint method, the error icon won’t get repainted after the overlaid component, so the result is that the error icon will be partially/totally hidden by the overlaid component.

So the idea was to have a way to repaint the error icon each time the overlaid component is painted without to have to override the paintcomponent method of each overlaid component.

I came up with the idea to wrap the jide overlayable component inside a JXLayer, and to call the paint component of the overlay component inside the paint layer of the jxlayer, and Voila! Now we have the better of the 2 worlds: the error icon can be outside out the overlaid component and the error icon will be repainted each time the overlaid component does.

The error icon appears/disappear with a smooth animation as I like it.
The icon is a true component so it can have a tooltip, in our case the tooltip will be the error message.
You can change the default error icon for all or for one component:

ValidationPanelIcon.setDefaultIcon(BufferedImage)
ValidationOverlay.setIcon(BufferedImage newicon)

You can change the default location of the icon:
By changing the values of

ValidationPanelIcon.DEFAULT_XOFFSET
ValidationPanelIcon.DEFAULT_YOFFSET
ValidationPanelIcon.DEFAULT_ICON_LOCATION

Or by calling

ValidationIOverlay.setIconLocation(int xoffset, int yoffset, int location)

As there is a JXlayer in use, why not also us it fully and paint something on the layer?

You can specify a ValidationPaint :

ValidationIOverlay.setPaint(ValidationPaint)

ValidationPaint is an abstact class with the following method:


/**
*
* @param g
* @param msg the list of error message
* @param width width of the layer
* @param height height of the layer
* @param animProgress goes from 0 to 1 and then from 1 to 0, the duration of the animation can be set using ValidationOverlay.setAnimationDuration
*/
public abstract void paint(Graphics2D g, List<String> msg, JXLayer<JComponent> layer, float animProgress);

A default implementation is available :

ValidationPaint.getColorValidationPaint(Color)

This default implementation paint a rectangle over the component of the given color with a blink animation

As an example with a custom ValidationPaint it’s possible to write the error messages directly on the layer

ValidationOverlayFactory

To create the validation component use ValidationOverlayFactory:

createBlinking(T, List<Validator<T>>)
createBlinking(T, Validator<T>)
createBlinkingAndIcon(T, Validator<T>)
createBlinkingAndIconComponent(T, List<Validator<T>>)
createErrorOverlayedIcon(T, List<Validator<T>>)
createErrorOverlayedIcon(T, Validator<T>)

Validator is a simple interface

public interface Validator<T extends JComponent> {
String validate(T comp);
}

The validate method should return the error message or null if no error has been detected.

To execute the validator you have to call

ValidationOverlayFactory.validate(JComponent)

The jcomponent given to this method is your original component on wich you add the overlay

TextValidationOverlayFactory is a facility class to create validation overlaid component for text component, it installs automatically a listener to call ValidationOverlayFactory.check on a text changed.

validation overlays source code here

Animated cell renderer

2010-01-16T13:25:00.005+01:00

This article will take as example list cell renderer but the same way can be applied to animate tree/table renderer.

Let’s start from where the last article end: the renderer is bigger when the cell is selected, why not animate the fact that the renderer size increase over time, to let the user know it’s actually the one that he selected that get bigger.

First we need a way to store the animation value for each cell:


Map<Integer, Float> mapAnimation = new HashMap<Integer, Float>();

The renderer will look up for the animation value:


public Component getListCellRendererComponent(JList list, Object value, int index, boolean isSelected, final boolean cellHasFocus) {

JLabel label = (JLabel) super.getListCellRendererComponent(list, value, index,isSelected, cellHasFocus);

Float progress = mapAnimation.get(index);
if (progress == null) {
  progress = 0f;
}
label.setFont(label.getFont().deriveFont(10 + 20 * progress));
label.setPreferredSize(new Dimension(50, (int) (15 + 35 * progress)));
return label;
}

A selection listener to start the animation:

list.getSelectionModel().addListSelectionListener(new ListSelectionListener() {
@Override
public void valueChanged(final ListSelectionEvent e) {
  if (e.getValueIsAdjusting()) {
      return;
  }
  final Timeline timeline = new Timeline();
  timeline.setDuration(200);
  timeline.addCallback(new TimelineCallback() {
      /*…see below…*/  
  });
  timeline.play();
}
});

The TimelineCallBack allow us to define what to do on each timeline pulse, it’s where the animation map will get populated.

new TimelineCallback() {
@Override
public void onTimelinePulse(float durationFraction,float TimelinePosition) {
  // set the progress for the selected index
   mapAnimation.put(list.getSelectedIndex(), durationFraction);
  //set the progress for the last selected index
  if (oldSelected[0] != -1) {
      mapAnimation.put(oldSelected[0], 1 - durationFraction);
  }
//compute the size for each cell with the new animation values
  SwingUtilities.invokeLater(new Runnable(){
      Override
      public void run(){
          JlistUtils.computeListSize(list);
      }
  });
}

And that’s it! You now have an animated renderer.

A bit more complex examples:

as always you can find the source code in the source code repository here

Dynamic size cell list renderer

2010-01-16T12:20:00.010+01:00

What I mean by dynamic size is that the renderer can changed size for a given index.

Let’s take what can be seen at first as a very easy example:
For example when you select an item, you would like to increase the font size of the label.

It seems easy, let’s just create a custom renderer and change the font size based on the isSelected parameter.


public Component getListCellRendererComponent(JList list, Object value,int index, boolean isSelected, boolean cellHasFocus) {
JLabel label = (JLabel) super.getListCellRendererComponent(list, value, index, isSelected, cellHasFocus);
if (isSelected) {
label.setFont(label.getFont().deriveFont(35f));
} else {
label.setFont(label.getFont().deriveFont(10f));
}
return label;
}

The font size is bigger but the size of the label is not increased, hence the label is partly hidden .

So let’s try to change the size of the label:

public Component getListCellRendererComponent(JList list, Object value,int index, boolean isSelected, boolean cellHasFocus) {

JLabel label = (JLabel) super.getListCellRendererComponent(list, value, index, isSelected, cellHasFocus);
if (isSelected) {
  label.setFont(label.getFont().deriveFont(35f));
  label.setPreferredSize(new Dimension(50, 50));
} else {
  label.setFont(label.getFont().deriveFont(10f));
  label.setPreferredSize(new Dimension(50, 15));
}
return label;
}

To our surprise it doesn’t work. Why?

The answer is in the BasicListUI class, the height of each cell is cached, it doesn’t get computed each time the getListCellRendererComponent method get called. That’s where our problem lies.

By looking a bit more closely at BasicListUI, one can see that the cache is populated in the updateLayoutState method and that’s only getting called after a change in the model.

We have to call this method in order to compute the new size of each cell, but this method is protected,so we won’t be able to call this method directly so we will use reflection.

public static void computeListSize(final JList list) {
if (list.getUI() instanceof BasicListUI) {
 BasicListUI ui = (BasicListUI) list.getUI();

 try {
     Method method = BasicListUI.class.getDeclaredMethod("updateLayoutState");
     method.setAccessible(true);
     method.invoke(ui);
     list.revalidate();
     list.repaint();
 } catch (Exception e) {
     e.printStackTrace();
 }
}
}

In our case we need to compute the cell size when a cell gets selected:

list.getSelectionModel().addListSelectionListener(new ListSelectionListener() {
@Override
public void valueChanged(final ListSelectionEvent e) {
JlistUtils.computeListSize(list);
}
});

But as you can see if you run this webstart demo , it doesn’t work, so why ?
The answer is in the updateLayoutState method.:

protected void updateLayoutState(){
//…
Component c = renderer.getListCellRendererComponent(list, value, index, false, false);
//…
}

The 2 last parameters are isSelected and cellHasFocus, which means we can’t use isSelected+cellHasFocus to determine the size of the renderer.

So the last version of our renderer is:


public Component getListCellRendererComponent(JList list,Object value, int index, boolean isSelected, boolean cellHasFocus) {

JLabel label = (JLabel) super.getListCellRendererComponent(list, value, index, isSelected, cellHasFocus);
if (list.getSelectedIndex() == index) {
label.setFont(label.getFont().deriveFont(35f));
label.setPreferredSize(new Dimension(50, 50));
} else{
label.setFont(label.getFont().deriveFont(10f));
label.setPreferredSize(new Dimension(50, 15));
}
return label;
}

This time we actually have what we expected: the cell selected is bigger.

You can find the source of those demo in the following package in the source code repository here

all the jars files has been signed to run via webstart; that was needed because of the use of Method.setAccessible to be able to call a protected method

DialogWithDropShadow +JXLayer use case

2010-01-14T17:50:00.006+01:00

The drop shadow dialog/frame from the last article is indeed not something to use everywhere.
There is one situation although I like to use it:

While opening a dialog over a JFrame, a gray filter is applied over the JFrame using JXLayer, the gray filter is of course faded in using a fast animation (500ms => the same time it take for the dialogWithDropShadow to fade in). I really like the result, it makes the dialog really stand out, and make the user focus on it.
Launch the web start demo to see the animation.

The fade in of the gray filter is done by animating the alpha property in the ColorLayerUI class.
This ColorLayerUI is really simple; it’s just paint a grey rectangle in the paintLayer method.

Customs JDialog/JFrame

2010-01-09T11:24:00.028+01:00

I wanted a JDialog/JFrame that looks better than the standards ones, so I ended up coding these classes : DialogWithDropShadow/FrameWithDropShadow , and yes something I am really bad at is naming.

They are JDialog / JFrame with round corner and drop shadow.

It’s JDialog/JFrame which has been set non opaque using the WindowsUtils class( wrapper around AWTUtilities + some other methods). It’s the custom content pane that deal with painting the background+shadow, and the layered pane is used to position the title bar

Under SubstanceDustCoffeeLookAndFeel

under metal LAF

Title bar

For the dialog you can choose to have (default value) or not the close button using the following constructor
DialogWithDropShadow (Window frame, boolean draggable, boolean withCloseButton)
or the setter
setWithCloseButton(boolean)
If the close button is not visible and that the title is empty there will be not y offset.

Background

You can change the background color using either getContentPane().setBackground(Color)

or setContentPaneBackground(Paint)

Fade in / Fade out

This window can be shown or hidden using a fade in/fade out animation with the 2 followings methods:

startShowAnim()

startHideAnim()

Those 2 methods in fact only call WindowFadeInManager.fadeIn/fadeout

WindowFadeInManager is a utility class used to fade in or fade out windows, you can use it on any window, but you will need at least java 6 update 10 to use this feature, if you don’t, it won’t crash, it will just setVisible true/false on the given window

Resizable

By default they are resizable, it uses com.jidesoft.swing.Resizable behind the scene to make it resizable, just call setResizable(false) to remove this default behavior.

Draggable
Both dialog and frame are draggable by default, not only on the title bar, from anywhere if the mouse event is not catched by another component. draggable class

You can find the source code here

dialog under substance

frame under substance

dialog under metal

frame under metal

Text prompt

2010-01-08T23:24:00.006+01:00

I really like the solution to create a text prompt I saw at http://tips4java.wordpress.com/2009/11/29/text-prompt/

Something I really like also is smooth transition between component states, so I had to add fade in / fade out transition for this text prompt component!

My first idea was to do the animation using the alpha component of the foreground. But after the first test i noticed that i forgot the icon of the JLabel!

So i ended up using JXPanel on which one i add the JLabel, and then doing the animation of the JXPanel alpha property.

You can find the source in the repository here

Feel free to try it out:

I have one problem with this component, it only hapens under substance LAF, i have to create the textPrompt component in another invokeLater else i can't see the text prompt, i still need to investigate this point.

Ok, that's it for my first article on a swing component, i hope i didn't forget anything and that the web start demo works.

Libraries dependencies + source code repository

2010-01-08T21:30:00.004+01:00

You can find the required libraries at:
http://kenai.com/projects/mabs-swing/downloads/download/lib.zip

You can find the source code repository at:
https://svn.kenai.com/svn/mabs-swing~source-code-repository

The source code contains already several components/demos. I am trying to centralise there all the common components I am usually using in my projects, I will try to write articles about most of them.

The main required libraries, I am using, are the following:
-Substance: My favourite LAF .
-Trident: for animations + required by substance
-Miglayout: the easiest and most readable layout manager around imho.
-SwingX
-JXlayer
-Filers from jhlabs
-jide-oss

Some components are developed to match specialy substance LAF by querying the skin to get colors, but even if I do that, I try to always see first if substance is the current LAF, if not I use some default colors.

Welcome to my blog

2010-01-04T17:56:00.001+01:00

Hi and welcome to my blog.
That's been a few now that i am following some blogs about java swing/java2d.
I have been thinking to create this blog for a few now; with a new year it's a good time to start, so here we go.

So here will be the place where i will share interresting components or cool effects developed in swing/java2d