Screaming Penguin - Source Does Matter

In the last post we made a real simple flickr browser. Now I am going to modify it to support tags on the search. You can see the results here.

There is now a text box where you can type comma delimited sets of tags to search flickr for. (Hit return to update the results) This feature demonstrates the use of the Converter interface in bindings. We want to bind the TextBox to the "tags" property on the FlickrSearch bean, so we use a converter to split the tags:

VerticalPanel vp = new VerticalPanel();
        vp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);

        TextBox box = new TextBox(false);
        Label title = new Label();
        
        vp.add(box);
        vp.add( title );

 ReflectedImageGroup group = new ReflectedImageGroup(100, 75, .2, .5);
        FlickrSearch search = new FlickrSearch();
        group.setRenderer(
            new Renderer() {
                public Object render(Object o) {
                    return ((FlickrPhoto) o).getThumbnail();
                }
            });

        Binding images = new Binding(group, "value", search, "photos");
        // Here we are creating a child binding for the text box.
        images.getChildren().add(
            new Binding(
                box, "value",
                // Add a converter to convert from the Box's String to 
                // the String[] that the FlickrSearch.setTags() expects.
                new Converter() {
                public Object convert(Object original) {
                    if (original == null) {
                        return original;
                    } else {
                        return original.toString().split(",");
                    }
                }
            }, search, "tags",
                //On the other side, we convert from String[] to a 
                // comma delimited string.
                new Converter() {
                public Object convert(Object original) {
                    if (original == null) {
                        return original;
                    } else {
                        String[] strings = (String[]) original;
                        StringBuffer ret = new StringBuffer();

                        for (int i = 0; i < strings.length; i++) {
                            ret.append(strings[i]);

                            if (i < (strings.length - 1)) {
                                ret.append(",");
                            }
                        }

                        return ret.toString();
                    }
                }
            }));
        // Add another simple binding for Title to see what we searched
        // on.
        images.getChildren().add( new Binding( title, "value", search, "title" ) );
        images.setLeft();
        images.bind();

       //... rest of the code goes on as before.

Why do we need a converter here, rather than just the "Renderer" we used before? Well, because the TextBox is an Primitive type widget, when it sets its own value, it will always be a String. Unlike Selector type widgets, where the one-way opertaion of a Renderer works for display purposes, even if you set a String[] as the value on the text box, when it fires its next change, it will be a String again. So, we simply take this conversion out and make it a pair of Converter implementations on the binding.

You will also notice we are adding these bindings to the images.getChildren() list. This means that when .setLeft() and .bind() are called they cascade into the children, and all the bindings can be managed as a single set.