Wicket by Example http://wicketbyexample.com Examples of using Apache Wicket for Java Fri, 12 Feb 2010 18:36:13 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Apache Wicket Clustering With Multiple Options http://wicketbyexample.com/apache-wicket-clustering-with-multiple-options/ http://wicketbyexample.com/apache-wicket-clustering-with-multiple-options/#comments Thu, 11 Feb 2010 05:23:35 +0000 kinabalu http://wicketbyexample.com/?p=215

We’ve been seeing more and more implementations of IPageStore out in the wild for Apache Wicket. The interface basically decides how Wicket will store the Pagemap for your application. The default that ships with Wicket uses DiskPageStore which is an implementation that stores the serialized pages grouped in a single file per pagemap. After reading a wonderful blog post on Letsgetdugg a few days ago: Clustering Wicket for fun and profit!, I decided to take a look at writing an implementation using Hazelcast – an “open source clustering and highly scalable data distribution platform”.

The implementation below borrows heavily from Victor. It basically creates a HazelcastInstance in the constructor and then overrides all the methods necessary from AbstractPageStore. Here’s some quick code to put in your app’s Application implementation that will use this new IPageStore:

?View Code JAVA
    @Override
    protected ISessionStore newSessionStore() {
        return new SecondLevelCacheSessionStore(this,
                new HazelcastPageStore("default"));
    }

And here’s the code for HazelcastPageStore:

?View Code JAVA
public class HazelcastPageStore extends AbstractPageStore 
                                      implements SecondLevelCacheSessionStore.IClusteredPageStore {
 
    private Logger logger = LoggerFactory.getLogger(HazelcastPageStore.class);
 
    private String mapName;
    private HazelcastInstance client;
 
    public HazelcastPageStore(String mapName) { this(mapName, null); }
 
    public HazelcastPageStore(String mapName, Config config) {
        this.mapName = mapName;
        client = Hazelcast.newHazelcastInstance(config);
    }
 
    public String getKey(final String sessId, final String pageMapName, final int pageId, final int pageVersion) {
        return getKey(sessId, pageMapName, pageId, pageVersion, -1);
    }
 
    public String getKey(final String sessId, final String pageMapName, final int pageId, final int pageVersion, final int ajaxVersion) {
        String key = sessId + ":" + pageMapName + ":" + pageId + ":" + pageVersion + ":" + ajaxVersion;
        if (logger.isDebugEnabled()) {
            logger.debug("GetKey: " + key);
        }
        return key;
    }
 
    public String storeKey(final String sessionId, final Page page) {
        String key = sessionId + ":" + page.getPageMapName() + ":" + page.getId() + ":" + page.getCurrentVersionNumber() + ":" + (page.getAjaxVersionNumber() - 1);
        if (logger.isDebugEnabled()) {
            logger.debug("StoreKey: " + key);
        }
        return key;
    }
 
    public boolean containsPage(final String sessionId, final String pageMapName, final int pageId, final int pageVersion) {
        return client.getMap(mapName).containsKey(getKey(sessionId, pageMapName, pageId, pageVersion));
    }
 
    public void destroy() {
        client.shutdown();
    }
 
    public <T> Page getPage(final String sessionId, final String pagemap, final int id, final int versionNumber, final int ajaxVersionNumber) {
        IMap<String, Page> map = client.getMap(mapName);
 
        return map.get(getKey(sessionId, pagemap, id, versionNumber, ajaxVersionNumber));
    }
 
    public void pageAccessed(final String sessionId, final Page page) {
    }
 
    public void removePage(final String sessionId, final String pagemap, final int id) {
        String key = getKey(sessionId, pagemap, id, 0);
        key = key.substring(0, key.lastIndexOf(":"));
 
        IMap<String, Page> map = Hazelcast.getMap(mapName);
        for (String k : map.keySet()) {
            if (k.startsWith(key)) {
                map.remove(k);
            }
        }
    }
 
    public void storePage(final String sessionId, final Page page) {
        IMap<String, Page> map = client.getMap(mapName);
        map.put(storeKey(sessionId, page), page);
    }
 
    public void unbind(final String sessionId) {
        IMap<String, Page> map = client.getMap(mapName);
        for (String key : map.keySet()) {
            if (key.startsWith(sessionId)) {
                map.remove(key);
            }
        }
    }
}

Several other IPageStore implementations available:

Let us know if you find any others out in the wild so we can add them here.

]]> http://wicketbyexample.com/apache-wicket-clustering-with-multiple-options/feed/ 3 Wicket Ajax Confirmation Modal window http://wicketbyexample.com/wicket-ajax-confirmation-modal-window/ http://wicketbyexample.com/wicket-ajax-confirmation-modal-window/#comments Wed, 10 Feb 2010 18:24:56 +0000 kinabalu http://wicketbyexample.com/?p=207

(Editor’s note: Tomasz Dziurko contributed this column from Code Hard Go Pro.)

While developing web application with Wicket I sometimes need to check whether the user really, really does want to do something, for example to delete an entity from the database. The first and easiest choice that comes to my mind is to use JavaScript window.

So we have HomePage.html:

?View Code HTML
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
    <head>  
        <title>Wicket Ajax 'Are you sure?' Modal Window</title>
    </head>
    <body>
        <div align="center">
            <strong>Wicket Ajax 'Are you sure?' Modal Window</strong>
            <form action="" wicket:id="formWithJavaScript">
                <input type="submit" wicket:id="buttonWithJavaScript" value="Action!"/>
            </form>
        </div>        
    </body>
</html>

and corresponding Java class:

?View Code JAVA
package pl.tdziurko.ajaxmodalwindowapp;
 
// imports omitted
 
/**
 * Author: Tomasz Dziurko
 */
 
public class HomePage extends WebPage {
 
    private static final long serialVersionUID = 1L;
 
    public HomePage(final PageParameters parameters) {
 
        Form formWithJavaScript = new Form("formWithJavaScript");
 
        Button buttonWithJavaScript = new Button("buttonWithJavaScript") {
 
            @Override
            public void onSubmit() {
                System.out.println("Doing my job");
            }
        };
        buttonWithJavaScript.add(new SimpleAttributeModifier(
                "onclick", "if(!confirm('Do you really want to perform this action?')) return false;"));
 
        formWithJavaScript.add(buttonWithJavaScript);
        add(formWithJavaScript);
 
    }
 
}

Finally, we can see how it looks:

It solves our problem but in the era of Web2.0, rounded corners and shiny looks it isn’t enough. Why can’t we use ajax modal window to ask user for confirmation? It would make our application look good and our css magician could make it look even better.

So let’s try with creating reusable ‘Are you sure?’ ajax modal window with Wicket.

At the beginning we must prepare panel which will be displayed in our modal window. Let’s name it YesNoPanel.

?View Code HTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wicket>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title></title>
    </head>
    <body>
        <wicket:panel>
            <form wicket:id="yesNoForm" action="">
                <span wicket:id="message">Are you sure?</span>
                <table style="width: 65%;" align="center">
                    <tr>
                        <td align="left">
                            <input type="submit" wicket:id="noButton" value="No" />
                        </td>
                        <td align="right">
                            <input type="submit" wicket:id="yesButton" value="Yes" />
                        </td>
                    </tr>
                </table>
            </form>
        </wicket:panel>
    </body>
</html>

and Java class:

?View Code JAVA
package pl.tdziurko.ajaxmodalwindowapp.areyousuremodal;
 
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.basic.MultiLineLabel;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.Panel;
import pl.tdziurko.ajaxmodalwindowapp.areyousuremodal.AreYouSurePanel.ConfirmationAnswer;
 
public class YesNoPanel extends Panel {
 
    public YesNoPanel(String id, String message, final ModalWindow modalWindow, final ConfirmationAnswer answer) {
        super(id);
 
        Form yesNoForm = new Form("yesNoForm");
 
        MultiLineLabel messageLabel = new MultiLineLabel("message", message);
        yesNoForm.add(messageLabel);
        modalWindow.setTitle("Please confirm");
        modalWindow.setInitialHeight(200);
        modalWindow.setInitialWidth(350);
 
        AjaxButton yesButton = new AjaxButton("yesButton", yesNoForm) {
 
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form form) {
                if (target != null) {
                    answer.setAnswer(true);
                    modalWindow.close(target);
                }
            }
        };
 
        AjaxButton noButton = new AjaxButton("noButton", yesNoForm) {
 
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form form) {
                if (target != null) {
                    answer.setAnswer(false);
                    modalWindow.close(target);
                }
            }
        };
 
        yesNoForm.add(yesButton);
        yesNoForm.add(noButton);
 
        add(yesNoForm);
    }
 
}

Everything looks pretty straightforward. We pass to the constructor text which will be displayed as a confirmation question, references to ModalWindow object in which YesNoPanel is placed and to ConfirmationAnswer object.
ConfirmationAnswer class will be created in the next paragraph and will be used to store information whether user pressed ‘Yes’ or ‘No’ button in our panel.

Now it’s time to prepare wrapping form to our YesNoPanel. We could simply achieve it by creating panel with form and one button in it. In our example it will be AreYouSurePanel class:

?View Code HTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wicket>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title></title>
    </head>
    <body>
        <wicket:panel >
            <form wicket:id="confirmForm" action="" style="display: inline;">
                <input type="submit" wicket:id="confirmButton" value="Default name" />
                <span style="display: none;" wicket:id="modal"></span>
            </form>
        </wicket:panel>
    </body>
</html>

and in Java:

?View Code JAVA
package pl.tdziurko.ajaxmodalwindowapp.areyousuremodal;
 
import java.io.Serializable;
import java.util.Map;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.Model;
 
 
public abstract class AreYouSurePanel extends Panel {
 
    protected ModalWindow confirmModal;
    protected ConfirmationAnswer answer;
    protected Map<string,string> modifiersToApply;
 
 
    public AreYouSurePanel(String id, String buttonName, String modalMessageText) {
        super(id);
        answer = new ConfirmationAnswer(false);
        addElements(id, buttonName, modalMessageText);
    }
 
    protected void addElements(String id, String buttonName, String modalMessageText) {
 
        confirmModal = createConfirmModal(id, modalMessageText);
 
        Form form = new Form("confirmForm");
        add(form);
 
        AjaxButton confirmButton = new AjaxButton("confirmButton", new Model(buttonName)) {
 
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form form) {
                confirmModal.show(target);
            }
        };
 
        form.add(confirmButton);
 
 
        form.add(confirmModal);
 
    }
 
    protected abstract void onConfirm(AjaxRequestTarget target);
    protected abstract void onCancel(AjaxRequestTarget target);
 
    protected ModalWindow createConfirmModal(String id, String modalMessageText) {
 
        ModalWindow modalWindow = new ModalWindow("modal");
        modalWindow.setCookieName(id);
        modalWindow.setContent(new YesNoPanel(modalWindow.getContentId(), modalMessageText, modalWindow, answer));
        modalWindow.setWindowClosedCallback(new ModalWindow.WindowClosedCallback() {
 
            @Override
            public void onClose(AjaxRequestTarget target) {
                if (answer.isAnswer()) {
                    onConfirm(target);
                } else {
                    onCancel(target);
                }
            }
        });
 
        return modalWindow;
    }
 
    public class ConfirmationAnswer implements Serializable {
 
        private boolean answer;
 
        public ConfirmationAnswer(boolean answer) {
            this.answer = answer;
        }
 
        public boolean isAnswer() {
            return answer;
        }
 
        public void setAnswer(boolean answer) {
            this.answer = answer;
        }
    }
 
}

Here we do following steps:

  1. Create form with one AjaxButton which shows modalWindow when clicked.
  2. Create modalWindow with YesNoPanel in it. As mentioned earlier, we pass there references to our modal window and to confirmationAnswer object.
  3. Add WindowClosedCallback to modalWindow and basing on user choice perform onConfirm or onCancel method. These methods are both abstract to force developer extending AreYouSurePanel to implement them according to his needs.

That’s it, we are done. To test how it’s working we must change a bit our page class and html file:

?View Code HTML
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
    <head>  
        <title>Wicket Ajax 'Are you sure?' Modal Window</title>
    </head>
    <body>
 
 
 
 
        <div align="center">
            <strong>Wicket Ajax 'Are you sure?' Modal Window</strong>
 
 
 
 
            <form action="" wicket:id="formWithJavaScript">
                <input type="submit" wicket:id="buttonWithJavaScript" value="Action!"/>
            </form>
        </div>
 
 
 
        <div align="center">
            <span wicket:id="yesNoPanel"/>
        </div>
 
    </body>
</html>

and

?View Code JAVA
package pl.tdziurko.ajaxmodalwindowapp;
 
// imports omitted
 
public class HomePage extends WebPage {
 
    private static final long serialVersionUID = 1L;
 
    public HomePage(final PageParameters parameters) {
 
        Form formWithJavaScript = new Form("formWithJavaScript");
 
        Button buttonWithJavaScript = new Button("buttonWithJavaScript") {
 
            @Override
            public void onSubmit() {
                System.out.println("Doing my job");
            }
        };
        buttonWithJavaScript.add(new SimpleAttributeModifier(
                "onclick", "if(!confirm('Do you really want to perform this action?')) return false;"));
 
        formWithJavaScript.add(buttonWithJavaScript);
        add(formWithJavaScript);
 
        AreYouSurePanel yesNoPanel = new AreYouSurePanel("yesNoPanel", "Ajax Action!", "Do you really want to perform this action?") {
 
            @Override
            protected void onConfirm(AjaxRequestTarget target) {
                System.out.println("Doing my job after ajax modal");
            }
 
            @Override
            protected void onCancel(AjaxRequestTarget target) { }
 
        };
 
        add(yesNoPanel);
    }
 
}

And after clicking ‘Ajax Action!’ we could see that it’s working as intended:

]]> http://wicketbyexample.com/wicket-ajax-confirmation-modal-window/feed/ 0 New article about OpenID in Java, uses Wicket http://wicketbyexample.com/new-article-about-openid-in-java-uses-wicket/ http://wicketbyexample.com/new-article-about-openid-in-java-uses-wicket/#comments Tue, 09 Feb 2010 16:58:11 +0000 ildella http://wicketbyexample.com/?p=203

Last week I was searching examples while working in integrating OpenID in a Java Web Applications and I found a very recent article (January 27th) on the IBM developerWorks.

OpenID for Java Web applications, Part 1 by J Steven Perry offer a panoramic about OpenID in a modern web applications and uses Apache Wicket as Web framework for the example. The article is really good and offers the whole source code as download.

This article talk about implementing an OpenID consumer Service while the part two will focus on writing an OpenID provider.

]]> http://wicketbyexample.com/new-article-about-openid-in-java-uses-wicket/feed/ 0 Integrating HTML5 and Wicket http://wicketbyexample.com/integrating-html5-and-wicket/ http://wicketbyexample.com/integrating-html5-and-wicket/#comments Mon, 01 Feb 2010 07:13:34 +0000 kinabalu http://wicketbyexample.com/?p=191

After following some of the debates raging about Apple’s new iPad and the future of Adobe’s Flash, the discussion usually turned to the coming future of HTML5.

Seeing as we love Apache Wicket at Mystic, I thought I’d tinker around to see how hard it would be to start adding some support for the new HTML5 tags. There are quite a few examples out there that show off canvas, geolocation, storage, and of course video and audio.

First thing I set about doing, was to define the video tag. It takes an optional src attribute among others, or multiple source tags for offering up different video streams for the browser to choose from. Firefox uses Ogg Vorbis, and Safari uses H.264, so of course, the browser vendors still don’t agree. Here’s some code to use what I’d want to see from a video component:

?View Code JAVA
        final List<MediaSource> mm = new ArrayList<MediaSource>();
        mm.add(new MediaSource("/dizzy.mp4", "video/mp4"));
        mm.add(new MediaSource("/dizzy.ogv", "video/ogg"));
 
        IModel<List<MediaSource>> mediaSourceList = new AbstractReadOnlyModel<List<MediaSource>>() {
            public List<MediaSource> getObject() {
                return mm;
            }
        };
 
        add(new Html5Video("dizzy", mediaSourceList) {
 
            @Override
            protected boolean isControls() {
                return true;
            }
 
            @Override
            protected boolean isAutoPlay() {
                return true;
            }
        });

We’ve defined a custom Object for use with our new Html5Video component, and it will hold the appropriate attributes we would need to output either a src attribute or a source tag. You can also see from this example that we’ve got a few booleans we’re overriding by default, and more available in the actual implementation. Let’s take a look at the Html5Video component:

?View Code JAVA
public class Html5Video extends Html5Media {
 
    public Html5Video(String id, IModel<List<MediaSource>> model) {
        super(id, model);
    }
 
    protected int getWidth() { return 0; }
 
    protected int getHeight() { return 0; }
 
    @Override
    protected void onComponentTag(final ComponentTag tag) {
        if(getWidth()>0) {
            tag.put("width", getWidth());
        }
 
        if(getHeight()>0) {
            tag.put("height", getHeight());
        }
 
        super.onComponentTag(tag);
    }
 
    protected String getTagName() {
        return "video";
    }
}

So you can see we’ve abstracted this out even further into an Html5Media object which we’ll look at shortly. For now, we have width and height which are specific to just the video tag. And we’re also overriding onComponentTag to throw those attributes into the video tag if they aren’t zero. We also steal from some ideas in wicket core, and implement a method in Html5Media to checkComponentTag based on the results of a method that can be overridden getTagName.

Let’s take a look at Html5Media which is where we’ll find most of the meat:

?View Code JAVA
public class Html5Media extends WebMarkupContainer {
 
    private IModel<List<MediaSource>> sources;
 
    public Html5Media(String id, final IModel<List<MediaSource>> model) {
        super(id, model);
        this.sources = wrap(model);
        add(new Html5UtilsBehavior());
    }

First thing we see, is we’re extending WebMarkupContainer, basically because our component can have body text (useful for fallback support). Next you’ll see that we’re adding a behavior Html5UtilsBehavior. The basic purpose is to header contribute a useful javascript file when working with browsers that don’t yet support HTML5 (Internet Explorer I’m looking at you!). Some more code:

?View Code JAVA
    @Override
    protected void onComponentTag(final ComponentTag tag) {
        String tagName = getTagName();
        if (tagName != null) {
            checkComponentTag(tag, tagName);
        }
 
        List<MediaSource> sources = getSources();
 
        if (sources != null && sources.size() == 1) {
            MediaSource source = sources.get(0);
            tag.put("src", source.getSrc());
        }
 
        if (isAutoBuffer()) {
            tag.put("autobuffer", true);
        }
 
        if (isAutoPlay()) {
            tag.put("autoplay", true);
        }
 
        if (isLoop()) {
            tag.put("loop", true);
        }
 
        if (isControls()) {
            tag.put("controls", true);
        }
 
        // Default handling for component tag
        super.onComponentTag(tag);
    }
 
    protected String getTagName() {
        return null;
    }

Here we check the component tag to ensure it is the acceptable name. Then if we only have a single source, we add this to the video tag instead of separate elements in the body. The next bunch of statements pull from methods and add boolean attributes to the tag if they are true. And we provide an implementation of getTagName that returns null as a sensible default.

onComponentTagBody is where we optionally will define source tags and the optional attributes that go along with it:

?View Code JAVA
    @Override
    protected void onComponentTagBody(final MarkupStream markupStream, final ComponentTag openTag) {
 
        List<MediaSource> sources = getSources();
 
        if (sources != null && sources.size() > 1) {
            final AppendingStringBuffer buffer = new AppendingStringBuffer();
            for (int index = 0; index < sources.size(); index++) {
                final MediaSource source = sources.get(index);
                buffer.append("\n<source ");
                buffer.append("src='");
                buffer.append(source.getSrc());
                buffer.append("'");
                if (source.getType() != null) {
                    buffer.append(" type='");
                    buffer.append(source.getType());
                    buffer.append("'");
                }
                if (source.getMedia() != null) {
                    buffer.append(" media='");
                    buffer.append(source.getMedia());
                    buffer.append("'");
                }
 
                buffer.append(" />");
            }
 
            buffer.append("\n");
 
            getResponse().write(buffer.toString());
 
        }
        super.onComponentTagBody(markupStream, openTag);
    }

Here we’re ensuring things aren’t empty, and then if we have more than one source element (often the case for compatibility between Firefox and Safari), we’ll output each source tag.

We’ve also gone through the trouble of adding an implementation of Html5Audio which consisted of overriding the getTagName method and returning audio. Pretty simple stuff.

When we put our example into place, we get a video with controls like so:

So what’s next? If you download the project available and linked below, it also contains an example of using the audio component. The Html5UtilsBehavior gives us the ability to CSS style the new HTML5 tags even with Internet Explorer, so our code can be more semantic instead of littering it with div’s for lack of an alternative. There are a ton more interactions and behaviors that can be added to support video and audio, support for canvas, postMessage, storage, Web Database. Web Workers, geolocation, Content Editable, etc. I have no reason to think any of these would be impossible to integrate into a sensible component with Wicket.

If you’d like to download the example and run it locally, or take a look at the components written, I’ve started a project over at Google Code called wicket-html5. Contact me if you’d like to contribute and start hacking away at some of these components.

To infinity, and beyond!

]]> http://wicketbyexample.com/integrating-html5-and-wicket/feed/ 0 Latest Wicket Core Examples available via Simple URL http://wicketbyexample.com/latest-wicket-core-examples-available-via-simple-url/ http://wicketbyexample.com/latest-wicket-core-examples-available-via-simple-url/#comments Sat, 30 Jan 2010 22:27:55 +0000 kinabalu http://wicketbyexample.com/?p=175

After a recent week long training Mystic gave a week ago, one item that came up was the examples as posted on the official Wicket website are a version behind. Available here: http://www.wicketstuff.org/wicket13/.

In response to throwing up the latest javadoc at a simple to remember URL on this website, the examples seem to be the next logical step to make available. So point your browser here:

http://wicketbyexample.com/examples

This is running the latest 1.4.6 release of Apache Wicket. Enjoy.

]]> http://wicketbyexample.com/latest-wicket-core-examples-available-via-simple-url/feed/ 2 Wicket Javadoc Access Via Simple URL http://wicketbyexample.com/wicket-javadoc-access-via-simple-url/ http://wicketbyexample.com/wicket-javadoc-access-via-simple-url/#comments Sat, 30 Jan 2010 05:56:00 +0000 kinabalu http://wicketbyexample.com/?p=172

There are definitely times, that I wish I had easy access to the javadoc for something in the Wicket internals, without opening the IDE, or keeping my own local versions available.

I usually resort to a quick Google search and unfortunately 9 / 10 I get a non-recent javadoc version.

Today I’ve gone through and downloaded all the core library javadocs for Wicket and as of version 1.4.6 they are all available from the following link:

wicketbyexample.com/api

Click through to the library you’d like and get immediate access. It follows a simple structure /api/<module name>/<version>/

That’s it. Hope some of you find it useful.

]]> http://wicketbyexample.com/wicket-javadoc-access-via-simple-url/feed/ 1 Autocomplete with an Object http://wicketbyexample.com/autocomplete-with-an-object/ http://wicketbyexample.com/autocomplete-with-an-object/#comments Thu, 28 Jan 2010 02:37:01 +0000 sswinsburg http://wicketbyexample.com/?p=156

The Wicket Extensions package provides a neat component called the AutoCompleteTextField.

In a nutshell, this allows you to provide a TextField with a List of Strings and when you start typing, the ones that match the input show up. This is a great component, but consider this scenario:

You have a list of contacts, one of which you want to send an email to. Each person has a unique id and a name. You want to search based on their name, but send the message to their id.

class Person {
  long uuid;
  String displayName;
  String email;
  ...
}

This is not possible with the AutoCompleteTextField, as it uses a list of Strings and will submit whatever is entered in the text field.
What you need is to be able to separate the key from the value.

Enter the ObjectAutoCompleteTextField. This is a class from WicketStuff and allows you to provide a List of Objects and tell the AutoCompleteTextField what value should be the displayed value, and what values should be submitted.

Firstly, the markup is the same as a normal text field:
<input type="text" wicket:id="toField" />

Now lets build the parts we need:

1. The list of objects:

final List contacts = dao.getContacts();

2. The AutoCompletionChoicesProvider:

AutoCompletionChoicesProvider provider = new AutoCompletionChoicesProvider() {
	private static final long serialVersionUID = 1L;

	public Iterator getChoices(String input) {
		return logic.getMatchingContacts(contacts, input).iterator();
	}
};

This is called whenever the input changes and allows us to get a list of items from our master list that match the input. In this example we already have the list of contacts, so we just need to return an Iterator of the matches for that list. You could use something like this:

public List getMatchingContacts(List contacts, String search) {
	List subList = new ArrayList();

	for(Person p : connections){
		if(StringUtils.startsWithIgnoreCase(p.getDisplayName(), search)) {
			if(subList.size() == Constants.MAX_CONNECTIONS_PER_SEARCH) {
				break;
			}
			subList.add(p);
		}
	}
	return subList;
}

3. The ObjectAutoCompleteRenderer:

ObjectAutoCompleteRenderer renderer = new ObjectAutoCompleteRenderer(){
	private static final long serialVersionUID = 1L;

	protected String getIdValue(Person p) {
		return p.getUuid();
	}
	protected String getTextValue(Person p) {
		return p.getDisplayName();
	}
};

This separates out the key from the value. From the Person class we want to use the uuid as the submitted value
and the displayName as the one that shows up in the textfield and we search based on that.

4. Putting it all together is the ObjectAutoCompleteBuilder which takes the provider and sets the renderer.

ObjectAutoCompleteBuilder builder = new ObjectAutoCompleteBuilder(provider);
builder.autoCompleteRenderer(renderer);

5. Finally, we create the ObjectAutoCompleteField from the builder.

ObjectAutoCompleteField autocompleteField = builder.build("toField", new PropertyModel(newMessage, "to"));
final TextField toField = autocompleteField.getSearchTextField();
toField.setRequired(true);
form.add(autocompleteField);

We now have a textfield that allows us to search through a list of items but submit a different value associated with each of those items.
autocomplete

Advanced tip:
Once we have found an item in the list, it is set into the TextField. If we want to clear the selection, by default the link is a textual [x]. We can override this to be whatever we want, different text, or even an Image.
autocomplete_search

To use an icon like in the example above, add something like this to the builder:

builder.searchLinkImage(new ContextRelativeResource("images/cross.png"));
]]> http://wicketbyexample.com/autocomplete-with-an-object/feed/ 2 A Gravatar Image component for Wicket http://wicketbyexample.com/a-gravatar-image-component-for-wicket/ http://wicketbyexample.com/a-gravatar-image-component-for-wicket/#comments Wed, 11 Nov 2009 15:35:40 +0000 kinabalu http://wicketbyexample.com/?p=141

The comment system that was added to mysticpaste.com several months ago was pretty bare, boring. It consisted of capturing name, email, and the comment of which we show name and comment only. Since we’re avid blog posters and readers, the thought of implementing a custom Wicket component for a Gravatar immediately came to mind.

First things first, extend our new GravatarImage component from WebComponent. We don’t need the image to hold any nested components, etc:

?View Code JAVA
public class GravatarImage extends WebComponent {

We also override onComponentTag so we can populate the “src” attribute for our image with the Gravatar generated URL:

?View Code JAVA
    protected void onComponentTag(ComponentTag tag) {
        super.onComponentTag(tag);
        checkComponentTag(tag, "img");
        tag.put("src", getDefaultModelObjectAsString());
    }

Next we provide our own Model implementation which performs the MD5 magic on our email address to give its special Gravatar URL pointing to our image.

?View Code JAVA
    private class GravatarModel extends AbstractReadOnlyModel<String> {
        private static final String GRAVATAR_URL = "http://www.gravatar.com/avatar/";
 
        String email;
        String gravatarKey;
        int hsize;
 
        public GravatarModel(IModel<String> model, int hsize) {
            email = model.getObject();
            gravatarKey = MD5Util.md5Hex(email);
            this.hsize = hsize;
        }
 
        public String getObject() {
            StringBuilder sb = new StringBuilder();
            sb.append(GRAVATAR_URL);
            sb.append(gravatarKey);
            sb.append("?s=");
            sb.append(hsize);
            return sb.toString();
        }
    }

And that’s it! Just follow the example given in the javadoc and voila! You should have Gravatar pictures for the entered email address. To take a look at the full implementation: Download GravatarImage.java.

Next steps

A couple of items can be added to this component to make it more “full-featured” to the Gravatar API. Gravatar supports a default Gravatar image which may be passed, along with a number of flags one of which is implemented “s” or size.

Hope you enjoyed this, and use this in your next project!

]]> http://wicketbyexample.com/a-gravatar-image-component-for-wicket/feed/ 1 Enums internationalization with Wicket http://wicketbyexample.com/enums-internationalization-with-wicket/ http://wicketbyexample.com/enums-internationalization-with-wicket/#comments Tue, 06 Oct 2009 15:30:07 +0000 ildella http://wicketbyexample.com/?p=130

(Editor’s note: Olivier Croisier contributed this column from YesWicket.)

Enums are a convenient way to represent finite collections of elements : seasons, week days… As a consequence, they frequently need to be input or displayed in web applications – and it better be in a I18N-aware way.
Let’s see how easily Wicket can handle this.

Enums internationalization

Throughout this article, we’ll use the Seasons Enum as an example :

?View Code JAVA
public enum Season {
    SPRING, SUMMER, AUTUMN, WINTER;
}

Wicket has a powerful hierarchical I18N system : given a logical I18N key (a string), the corresponding translation is first searched for at the current component level, then up its hierarchy – all the way up to the Application root if required.
To benefit from it, the developer only has to call the getString() method on any Wicket component :

?View Code JAVA
String translation = anyComponent.getString(key);

The first thing we need to do is therefore to devise a way to generate a unique I18N key for each Enum constant. The most obvious solution is to use their Fully Qualified Names as a key (eg. “com.yeswicket.wickettips.model.WINTER”) ; this should prevent fortuitous name clashes.

The following code snippet demonstrates how to get an Enum’s FQN :

?View Code JAVA
Season enumValue = Season.WINTER;
String messageKey = enumValue.getDeclaringClass().getCanonicalName() + "." + enumValue.name();

In order to avoid copy/pasting this code all around the application, and to be able to easily replace it with another algorithm should the need arise, we’ll use the Strategy pattern, where every algorithm is encapsulated in its own class.
This might seem easy to implement, but keep in mind that every class accessible from a Wicket component will be serialized along with it in the session store… and that’s something you will definetely want to avoid.

Static methods to the rescue !
The following class, inspired from java.util.Locale, has a static-only API for its consumers (thus solving the serialization concern) and still allows the underlying algorithm to be changed at will :

?View Code JAVA
public abstract class EnumMessageKeyProvider {
	private static EnumMessageKeyProvider provider = new DefaultEnumResourceKeyProvider();
 
	public static EnumMessageKeyProvider getDefault() {
		return EnumMessageKeyProvider.provider;
	}
 
	public static void setDefault(EnumMessageKeyProvider provider) {
		EnumMessageKeyProvider.provider = provider;
	}
 
	public abstract <T extends Enum<T>> String computeMessageKey(T enumValue);
 
	public static <T extends Enum<T>> String getMessageKey(T enumValue) {
		return EnumMessageKeyProvider.provider.computeMessageKey(enumValue);
	}
}
public class DefaultEnumResourceKeyProvider extends EnumMessageKeyProvider {
	@Override
	public <T extends Enum<T>> String computeMessageKey(T enumValue) {
		return enumValue.getDeclaringClass().getCanonicalName() + "." + enumValue.name();
	}
}

Getting an I18N key for an Enum is now as easy as :

?View Code JAVA
Season enumValue = Season.WINTER;
String key = EnumMessageKeyProvider.getMessageKey(enumValue);

To use another key generation algorithm, just write a new strategy…

?View Code JAVA
public class SimpleNameEnumResourceKeyProvider extends EnumMessageKeyProvider {
	@Override
	public <T extends Enum<T>> String computeMessageKey(T enumValue) {
		return enumValue.name();
	}
}

…and register it with the EnumMessageKeyProvider ; a good place for that is the Application’s init() method :

?View Code JAVA
public class WicketTipsApplication extends WebApplication {
	@Override
	protected void init() {
		EnumMessageKeyProvider.setDefault(new SimpleNameEnumResourceKeyProvider());
	}
	(...)
}

Displaying internationalized enums

Wicket’s Label is a very basic component that simply displays the text provided by its Model.
To display Enums, we can develop a new kind of Model that automatically performs internationalization and hands over the resulting text to the component it is attached to.

As an example, we’ll extend the very convenient PropertyModel.
Please note that our Model provides a String but operates on an Enum : EnumPropertyModel> extends PropertyModel. Also, in addition to the PropertyModel’s existing constructor parameters (the target object and the name of the property to retrieve), our class needs a Component to call the getString() method on.

?View Code JAVA
public class EnumPropertyModel<T extends Enum<T>> extends PropertyModel<String> {
 
	private Component component;
 
	public EnumPropertyModel(Object modelObject, String expression, Component resourceProvider) {
		super(modelObject, expression);
		this.component = resourceProvider;
	}
 
	@Override
	public String getObject() {
		final String expression = propertyExpression();
		final Object target = getTarget();
		if (target != null) {
			T enumValue = (T) PropertyResolver.getValue(expression, target);
			String key = EnumMessageKeyProvider.getMessageKey(enumValue);
			return component.getString(key);
		}
		return null;
	}
}

This custom Model can now be used with a Label (and many other components) to easily display any Enum :

?View Code JAVA
public class HomePage extends WebPage {
	private Season season = Season.SPRING;
	public HomePage() {
		add(new Label("label", new EnumPropertyModel<Season>(this, "season", this)));
	}
}

Selecting an enum with a DropDownChoice

Now that we can display an Enum, let’s see how to let the user choose one from a dropdown list.

The DropDownChoice component follows the MVC pattern :

  • The DropDownChoice itself is the Controller
  • The Model it takes as a parameter is, obviously, the Model
  • The View is rendered by a ChoiceRenderer that is responsible for the HTML

Usually, the DropDownChoice relies on the Model to define the set of selectable values. With Enums, those values are determined by the Enum’s type itself, so we can bypass the Model and override the DropDownChoice’s “getChoices()” method :

?View Code JAVA
public class EnumDropDownChoice<T extends Enum<T>> extends DropDownChoice<T> {
 
	public EnumDropDownChoice(String id, IModel<T> model) {
		super(id);
		setModel(model);
		setChoiceRenderer(new EnumChoiceRenderer<T>(this));
	}
 
	public EnumDropDownChoice(String id, IModel<T> model, EnumChoiceRenderer<T> choiceRenderer) {
		super(id);
		setModel(model);
		setChoiceRenderer(choiceRenderer);
	}
 
	@Override
	public List<? extends T> getChoices() {
		return Arrays.asList(getModelObject().getDeclaringClass().getEnumConstants());
	}
}

The related ChoiceRenderer will generate the

?View Code JAVA
public class EnumChoiceRenderer<T extends Enum<T>> implements IChoiceRenderer<T> {
 
	/** The Component used a the root of the I18N search process */
	private final Component resourceProvider;
 
	public EnumChoiceRenderer(final Component resourceProvider) {
		this.resourceProvider = resourceProvider;
	}
 
	@Override
	public Object getDisplayValue(final T value) {
		final String key = EnumMessageKeyProvider.getMessageKey(value);
		return resourceProvider.getString(key);
	}
 
	@Override
	public String getIdValue(final T object, final int index) {
		final Enum<?> enumValue = object;
		return enumValue.name();
	}
}

Finally, here is an example of how our components can be used to select and display an Enum in a standart Form :

?View Code JAVA
public class HomePage extends WebPage {
	private Season season = Season.SPRING;
	public HomePage() {
		Form<Void> form = new Form<Void>("form");
		form.add(new EnumDropDownChoice<Season>("season", new PropertyModel<Season>(this, "season")));
		add(form);
		add(new Label("label", new EnumPropertyModel<Season>(this, "season", this)));
	}
}

In action

The complete source code is available at the bottom of this article.
Feel free to play with it to see all those custom components in live action. The example form comes with two additional links, to switch between the French and English locales and see the internationalization magic happen.

Last note : a Gradle build script is provided to help you get started in seconds. Just run the following command in the application’s directory. Gradle will automatically compile the classes, copy the required resources, and start a Jetty server.

?View Code JAVA
gradle jettyRun

Then, open a browser at :

?View Code JAVA
http://localhost:8080/Wicket-tips/

Have fun !

]]> http://wicketbyexample.com/enums-internationalization-with-wicket/feed/ 2 Wicket TinyMCE: some advanced tips http://wicketbyexample.com/wicket-tinymce-some-advanced-tips/ http://wicketbyexample.com/wicket-tinymce-some-advanced-tips/#comments Wed, 16 Sep 2009 20:04:01 +0000 ildella http://wicketbyexample.com/?p=101

Wicket offers a valid integration with the powerful and open source TinyMCE, a Javascript HTML WYSIWYG editor. Wicket-contrib-tinymce is part of the wicketstuff-core and is well done and maintained. Then using TinyMCE within wicket is very easy and the instructions on the site would be enough to make things work and the example project on the subversion repository will do most of the rest.

Here I want to tell something I have learned using this nice toy.

Use with Maven 2

To use tinymce in a Maven 2 project, we need to add the wicketstuff maven2 repository:

?View Code XML
<repository>
	<id>wicket-stuff</id>
	<url>http://wicketstuff.org/maven/repository</url>
</repository>

and, of course, the dependency

?View Code XML
<dependency>
	<groupId>org.wicketstuff</groupId>
	<artifactId>tinymce</artifactId>
	<version>1.4-SNAPSHOT</version>
</dependency>

Creating a CheckBox that toggle TinyMceBehavior on and off.

In my scenario I need the user to enable Rich Text capabilities for a field in a form. Is nothing complicated but we need to take care about when to instantiate objects. In my solution, I use a checkbox to toggle the state. This is the code I have in the constructor of my panel.

?View Code JAVA
 
public class CustomPanel extends Panel {
   private TinyMceBehavior tinyMceBehavior;
   public CustomPanel(String id, IModel model) {
       ...
      TextArea field = new TextArea("text", model); 
      tinyMceBehavior = new TinyMceBehavior();
      PropertyModel richProperty = new PropertyModel(model, "rich");
      if (richProperty.getObject()) {
         field.add(tinyMceBehavior);
      }
 
      add(new AjaxCheckBox("switchRte", richProperty) {
 
         @Override
         protected void onUpdate(AjaxRequestTarget target) {
            if (getModelObject()) {
               field.add(tinyMceBehavior);
            } else {
               field.remove(tinyMceBehavior);
               tinyMceBehavior = new TinyMceBehavior();
            }
            target.addComponent(CustomPanel.this);
         }
      });
   }
}

The information is saved in a property called “rich” in my domain object so it is persisted and I can remember next time. That object is already wrapped in the variable model (a wicket IModel) that in this code is wrapped in a simple wicket PropertyModel. In this example I have used Wicket 1.4 support for generics.

Switching to Rich Text after the page is load

One of the problem I had was that my page loaded without any TinyMCEBehavior attached to any component. User can enable the behavior at runtime like in the example before. Well, it did not work because the javascript needs to be load at the time the page is loaded. The solution is that when you have some TinyMCE components in your page, is better that in the constructor of the page you load the Javascript this way:

?View Code JAVA
      add(new HeaderContributor(new IHeaderContributor() {
         public void renderHead(IHeaderResponse response) {
            response.renderJavascriptReference(TinyMCESettings.javaScriptReference());
         }
      }));

Subtle trick: submit via Ajax

Maybe anyone knew this before. I did not. When you submit a form containing a TinyMCE component and the form submits via ajax, say an AjaxSubmitLink or an AjaxButton in Wicket, you *must* use a trick as someone else already explained. With wicket-tinymce this becomes adding the TinyMceAjaxSubmitModifier to the submit component and that’s all.

Conclusion

wicket-contrib-tinymce is a well done contribution to the wicketstuff-core and an important library for web developer that uses Wicket. The only small point is that is actually using a one year old version of TinyMCE, dated august 2008. It does the *most* of the stuff and I never felt the need to upgrade. Maybe someone just need some feature or a bug fix present in more recent release. Hope that wicket-tinymce developer will have some time to play with newer TinyMCE.

This is my first contribution to WicketByExample. I hope you liked the article, I will like any feedback. Cheers.

]]> http://wicketbyexample.com/wicket-tinymce-some-advanced-tips/feed/ 3