Group think

The first risk in decision making is group think.

Group think has the following symptoms:

• Little or no consideration of alternate plans
• Risk is not assessed
• No review is taken of rejected plans
• Advice from outsiders is not sought
• Facts that support the plan are acknowledged, facts that do not support the plan are ignored
• Contingency plans are not created

Surprisingly, synergy and loyalty to each other and to the team leader are a team’s greatest qualities, however, they are the same factors that lead to group think.

Abilene Paradox symptom

The second risk in decision making is the Abilene Paradox symptom.

The Abilene Paradox symptom has the following symptoms:

• Members, as individuals, privately agree on the correct decision to make. This is not shared with the group.
• Members, as individuals, privately agree on how the problem or situation being addressed can be resolved. This is not shared with the group.
• Instead of communicating their views, members keep their views and reservations to themselves, agreeing with views they are opposed to. As the individuals have not presented their views and reservations, a collective decision is made that is actually contrary to the views of all members.
• Members feel frustration, even anger, at this and find someone, or some people, to blame.

The Abilene Paradox is real. How often have you agreed to a suboptimal solution? What if every other team member felt the same way about this solution?

Decision hijacking

The third risk in decision making is decision hijacking. This happens when for example a developer implements features that are not needed right now. The developer hijacks the decision to implement these features.

Example during daily stand-up:
Developer: The customer databases will be used by several applications, so I have implemented support for dealing with various technologies, including Oracle. It took a lot of time. Scrum master: Did we not agree on postponing this? Developer: We need this later and now it is done.”

Decision hijacking is a big problem because the decision making itself is removed from the team as a whole. This behavior has a big impact on trust within the team.

Solutions

Conflict in Agile software development projects can be beneficial to both process and product.

The literature proposes some solutions to the problems with decision making described above. These solutions are based on the existence or stimulation of intra-group conflict:

• Separate groups should be formed, under different leaders, to propose solutions to the same problem (groupthink)
• A devil’s advocate should be appointed (groupthink, Abilene paradox)

For the decision hijacking risk, make sure that developers are on the same page. Working together as a team means taking decisions together.

Sources:

1. McAvoy, John, en Tom Butler. “The role of project management in ineffective decision making within Agile software development projects.” European Journal of Information Systems 18.4 (2009): 372-383. Web.
2. Moe, Nils Brede, Torgeir Dingsøyr, en Tore Dybå. “A teamwork model for understanding an agile team: A case study of a Scrum project.” Information and Software Technology 52.5 (2010): 480-491. Web.

Read the original at 3 risks with Agile decision making or go to the homepage of STUQ.nl

Related posts:

• It’s not about the features!
• Interaction Design and Extreme Programming
• 6 reasons to create user interface mockups

I believe that any software developing company that wants to have a competitive advantage needs to stop focusing on just building features, but instead focus on the users.

Many companies seem to focus on the checklist of features that are dreamed up by marketing. Most of these checklists result from doing ‘competitive analysis’, just look at what the competitors, and do that too. Development teams have to copy all the software features of the competition, just to keep up. That is mediocrity at its best.

Developing software is not a unique trait. It’s not that hard as it used to be, the lab coats are long since gone. Coding can be outsourced to China or India at a fraction of the cost, as can many other aspects of software development.

Shipping a huge amount of features became relatively cheap. The time of industrialization has come for software development. Lines of code are becoming cheaper every minute. A lot of open source software (‘free software’) now has the same (or more) features as commercial available software.

So, it is not about building a huge amount of features.

It is about building clever software that works really well, in its context. Companies have to build revolutionary, groundbreaking, surprisingly good software to be noticed and successful. It has to be different and fresh, revolutionary perhaps.

How do you do that? Invest in interaction design. Do research to find out who your users really are. Talk to them. The real users.

Learn about them. Find out what they need. Find out what they like, what they don’t like.
Learn where your software becomes part of their lives.

Learn how to improve. Improve your software, and learn more. Make your users happy. Never lose them out of sight.

Read the original at It’s not about the features! or go to the homepage of STUQ.nl

Related posts:

• 3 risks with Agile decision making
• Interaction Design and Extreme Programming
• Create RESTful URLs with Wicket

Everyday a nice read about Scala. I’ve added it to my newsreader and if you like Scala, you should do too!

http://daily-scala.blogspot.com/

Read the original at Daily Scala or go to the homepage of STUQ.nl

Related posts:

• 6 Scala resources for Java programmers
• Scala basics: What is Scala?
• 4 steps to add Scala to your Maven Java projects

This is the summary of that afternoon. You should have been there…

Keep an eye on this page for when the next London Wicket event is scheduled.

Overview

Click on an item to jump down (same page) to the notes from that presentation.

• Cemal Bayramoglu: Introduction
• Jeremy Thomerson (USA): Custom JavaScript Integrations with Wicket + Auto Resolvers
• Lionel Armanet (FR): Announcing WiQuery 1.0: Introduction & Demo
• Matej Knopp (SK): BRIX CMS + Wicket 1.5 Developments Q&A
• Sven Meier (DE): Trees, Drag&Drop and more:
• Martijn Dashorst (NL): Writing Books vs Making Babies
• Wicket Q&A

(Unfortunately Alastair Maw couldn’t make it as he was sick. Hope you will soon be better!)

Cemal giving the introductory talk

Cemal Bayramoglu: Introduction

As usual, the London Wicket Meetup is kindly hosted by Cemal Bayramoglu of jWeekend. Thanks Cemal!

Jeremy Thomerson showing some code

Jeremy Thomerson (USA): Custom JavaScript Integrations with Wicket + Auto Resolvers

Jeremy Thomerson started his talk with an example of how to do client side validation in Wicket. He showed abstract validation behaviors that validated form input with jQuery.

The remarkable thing was that by adding just one behavior to a component, validation was added for both the server side and the client side. This makes it very easy to keep client and server side validation in sync.

The Javascript behavior is added by letting the behavior implement iHeaderContributor and adding the script in the onRenderHead method call.

Auto component resolution

The next part of Jeremy’s presentation was about the AutoComponentResolver. The AutoComponentResolver makes it possible to wire components directly in HTML, without adding the component explicitly in Java. His demo showed how to use an AutoComponentResolver.

Matej Knopp commented that it is not really recommended to use automatic component resolving, because it has a limited use. The main purpose of auto component resolvers is for simple components that do not have a long lifetime on the page. For example the <wicket:message> tag is handled by automatic component resolving and is replaced by a Label with a ResourceModel. More complicated use cases are not supported nor recommended.

Components added via auto-resolving are not serialized or stored in the session and lose all state.

Lionel Armanet showing us the WiQuery goodness he and his fellow Frenchmen created.

Lionel Armanet (FR): Announcing WiQuery 1.0: Introduction & Demo

The presentation of Lionel Armanet was an impressive demo of what WiQuery is capable of. WiQuery integrates jQuery with Wicket, with clever tricks that ease development. WickeXt was merged with jQuery4Wicket and changed its name to WiQuery. Last week was the 1.0 release, and the library is available under the MIT license.

The rationale behind WiQuery is that to build rich internet applications, you need rich behaviors and components. jQuery is simple, unobtrusive and powerful, there are tons of plugins and jQuery UI has fancy components. So, let’s get jQuery, integrate it with Wicket and have the best of both worlds!

WiQuery has standard components and behaviors like the resize behavior, drag and drop behavior, datepicker component, etcetera. By simply adding Java components, WiQuery generates the Javascript for you and imports the required libraries.

Setting up WiQuery

There are two ways to setup wiquery:

With a WiQueryCoreInstantiationListener:

addComponentInstantiationListener(new WiQueryInstantiationListener)

Or by extending the Abstract class WiQueryWebApplication.

Demo

After the theory, Lionel showed an impressive demo with a drag-and-drop Scrum taskboard. The task board had three columns (new, in progress, done), from which task items could be dragged and dropped around. Double clicking an item showes the details for that task.

The double click action is easily added with:

add(new WiQueryAjaxEventBehavior(MouseEvent.DBLCLICK){
   ....
});

With the IThemableApplication interface you can make your application themable, like the themes that jQuery UI has.

Matej Knopp talked about Brix and Wicket 1.5.

Matej Knopp (SK): BRIX CMS + Wicket 1.5 Developments Q&A

Matej Knopp showed what the content management system Brix is all about. Brix is based on Wicket and is a component based content management system based on JCR for storage.

Brix is meant for integration with Wicket web applications and looks very interesting. The basic building blocks in Brix are Tiles, Pages, and Templates.

In Brix, Tiles are like a factory for embedding Wicket components. So any Wicket component can be added to a Page which is nearly impossible in ‘regular’ CMS systems. More information about Brix can be found on the Brix website.

Wicket 1.5

Matej also talked about some new developments that can possibly be shipped in Wicket 1.5:

• New RequestCycle
• New RequestMapper
• New Ajax implementation

New RequestCycle and RequestMapper

One of the areas where improvements can be made is the RequestCycle. The RequestCycle in Wicket 1.4.x is big and complicated, and hard to step through while debugging. Matej worked on an improved RequestCycle.

Matej talked about the drawbacks of the Wicket 1.4 code for handling requests and mapping requests to URL’s:

• Complicated, huge code base
• Many abstractions, most of them on wrong level
• Complicated class hierarchy, hard to find proper extension point

He proposed a new RequestMapper that handles Request mapping in a different way.

RequestMapper Interface

The RequestMapper will get the following interface.

public interface RequestMapper {
int getCompatibilityScore(Request request);
RequestHandler mapRequest(Request request);
Url mapHandler(RequestHandler requestHandler);
}

With the RequestMapper interface you can implement your own Request Mapping behavior for various URL’s.
There can be a hierarchy of RequestMappers. When there is more than one RequestMapper, the compatibility score can be used to choose which RequestMapper will be used.

Calculating RequestMapper compatibility score

The compatibility score is calculated by counting how many URL segments match the mount point.
For example, having an application where two RequestMappers are defined with these URLs:

1. /mounted/page
2. /mounted/page/that/is/different

When there is a new Request on “/mounted/page/that/is/”, the second RequestMapper gets a higher compatibility score (4) than the RequestMapper matching only the first two parts of the URL (“/mounted/page/”).

New AJAX implementation

About a year ago, Matej created a new Ajax implementation for Wicket. The new Ajax implementation is way better than what is now in Wicket 1.4. It is faster, simpler to use and will be based on a standard library. There is only one problem, the new Ajax implementation Matej built uses YUI. It seems that the world prefers jQuery over YUI. Matej told that rewriting it to jQuery will be a lot of work.

The focus of the new Ajax implementation is removing browser inconsistency code. The custom-written Wicket Javascript will be swapped for more standard Javascript (like the YUI or jQuery libraries).

The API for working with Javascript will be different and much cleaner according to Matej. Also, the generated Javascript is nicer: code is not put directly in the onclick of a UI control, but separately. This looks like how WiQuery does stuff. This means that the Javascript handlers are much shorter, so the page loads faster.

There is an experimental branch in source control, so if you want to try it out or convert it to jQuery, you are welcome to check it out.

Problems with implementation Wicket 1.5

There are some challenges with the implementation of Wicket 1.5. Matej touched a few and gave some insight in what needs to be done. The big question is: how to build this without breaking anything? How can we undo the universe?

One point was the use of global state during the 1.4 Wicket RequestCycle. This makes it difficult to implement the new RequestCycle in core, because much code and unit tests rely on this global state.

Another challenge is keeping the WicketTester in a workable state. The new RequestCycle breaks WicketTester, which is problematic because many people are using WicketTester. Fixing WicketTester is not really easy, because it is a big class with much functionality. It can simulate a lot of actions, like file upload and form submission.

Sven Meier encouraged us to not refrain from writing custom Javascript.

Sven Meier (DE):

Sven Meier showed us his implementation of a TreeModel. He argued that Swing’s TreeModel is not suitable for implementing a tree in Wicket: “The treemodel is ugly, and there are many methods you don’t need in Wicket.”

His implementation allows hierarchical markup in the tree. This makes it easier to use and extend. It uses simple and known patterns. Partial update is not there yet.

Google Code hosts the Wicket Tree project.

Drag and drop

Sven also created Wicket drag and drop functionality, which is also hosted at Google Code.

This project enables you to drag and drop between any Wicket component. It supports common desktop metaphors with ‘MOVE’, ‘COPY’ and ‘LINK’ operations and is fully themable.

Sven’s closing remarks were: “Don’t fret from developing custom Javascript. It’s really easy with Wicket!”

Martijn Dashorst compared having a baby to writing a book.

Martijn Dashorst (NL):

Martijn’s presentation was titled “Writing Books vs Making Babies” and was a hilarious story with good slides. We have been informed of all the gory details of writing a book (finding the publisher, writing, editing, checking, etcetera) and learned something about having a baby as well!

Wicket Q&A

There were not many questions about Wicket, which is proof for the developer friendliness of Wicket

Were you there?

If you were at the London Wicket meetup (presenter or attendee) or plan to go there next time, please comment below!

If you send me links to the presentations, I will add them to the article.

Read the original at London Wicket Meetup: Wicket 1.5, WiQuery, Brix and more.. or go to the homepage of STUQ.nl

Related posts:

• Automatically test your Wicket panel HTML markup
• 8.47% is a Resource: statistics about Wicket
• User friendly form validation with Wicket

In this blog post I describe a way of automatically verifying that the HTML markup of Wicket panels match the Java code. Scroll down to download the demo project!

Unit test

I created a JUnit test that you can add to your project to automatically test as much Wicket Panels as possible. Automatic testing works by resolving all panels on the Java class path and feeding them to the WicketTester. When a panel has invalid markup, the WicketTester will give an error: early feedback!

How does it work?

The Wicket panels that can automatically be tested should have a ‘default’ Wicket constructor, like this:

public DemoPanel(String id)

Resolving all panels is done with Spring 2.5’s ClassPathScanningCandidateComponentProvider (don’t you love those names! How can they stay below 120 characters per line?)

The ClassPathScanningCandidateComponentProvider is a component provider that scans the classpath from a base package. It then applies exclude and include filters to the resulting classes to find candidates.

Testing panels

@Test
    public void testAllWicketPanels() throws Exception {
        WicketTester wicketTester = new WicketTester(new WicketApplication());
 
    	ClassPathScanningCandidateComponentProvider provider = new ClassPathScanningCandidateComponentProvider(true);
        provider.addIncludeFilter(new AssignableTypeFilter(Panel.class));
 
        Set components = provider.findCandidateComponents("nl/stuq/demo");
        for (BeanDefinition component : components) {
            Class clazz = Class.forName(component.getBeanClassName());
            if(hasDefaultConstructor(clazz)){
            	testWicketPanel(wicketTester, clazz);
            }
        }
    }
 
    private void testWicketPanel(WicketTester wicketTester, Class clazz) {
    	wicketTester.startPanel(clazz);
    	wicketTester.assertNoErrorMessage();
    	wicketTester.assertNoInfoMessage();
    }
 
    private boolean hasDefaultConstructor(Class clazz) {
        for(Constructor constructor : clazz.getConstructors()){
            if(constructor.getParameterTypes().length == 1 &&
               constructor.getParameterTypes()[0].getSimpleName().equals("String")){
                return true;
            }
        }
 
        return false;
    }

The test instantiates a new WicketTester. After that, the ClassPathScanningCandidateComponentProvider is created and configured to scan only for Panel classes in the nl.stuq.demo package and below.
After that, the found components are all checked. If they have a default constructor, the test is executed.

The boolean hasDefaultConstructor(clazz) method checks if the class has a constructor with only one String argument, the Wicket id.

Keep in mind

• This is only for lazy people (good developers are lazy in some ways).
• You need a dependency to Spring.
• Only Panels with a certain constructor are tested.
• Only instantiating the Panel is tested, so code coverage has no meaning for this test. Real testing is still needed.

Download demo project

The demo project is a Maven project based on the Wicket 1.4.3 quickstart that contains the test class and an example panel to be tested.
Download demo project.

Extract the zip file and run mvn test to run the tests. Then fire up your IDE and check how it’s done.

You can change or adapt the given JUnit test to also automatically test classes extending from Page or Component.

Join in with your opinions and code! I’m curious to see what clever way you have of testing code.

Read the original at Automatically test your Wicket panel HTML markup or go to the homepage of STUQ.nl

Related posts:

• Wicket: how to write a reusable modal window popup
• Create RESTful URLs with Wicket
• User friendly form validation with Wicket

The default FeedbackPanel shows all errors in one place. When you enter a wrong value in an input field below the fold, the input field is a mile away from the error above the form. This makes it unclear which error message corresponds to which field.

The image on the left shows that a lot of page scanning is needed even with moderate sized forms.

With more than a few fields, the user is confused as which error corresponds to which field. It is a big problem when your e-commerce site scares away many potential clients who can’t complete your web forms!

The default form

Before I describe how to create a more user friendly form, first the ‘default’ form. The following is an example of a standard Wicket form. This kind of form is the one you get without doing any ‘special’ magic things. Place your mouse cursor over the image to see the default error messages above the form.

This form will be the starting point for our improvements.

The improved form

This is what we are going to make:

As you can see, the error messages are directly next to the component that caused the error. This reduces the scanning of the page to link the error message to the right form component.

Step 1: Introducing the FeedbackLabel

The FeedbackLabel is a custom component I’ve written for this tutorial. With this custom label, you can show important feedback messages related to a FormComponent.

This has the advantage that you can place your Feedback messages in any place you want.

Add this to the Java part of the form:

// This shows feedback when the name input is not correct.
FeedbackLabel nameFeedbackLabel = new FeedbackLabel("name.feedback", name);
form.add(nameFeedbackLabel);
 
FeedbackLabel colorFeedbackLabel = new FeedbackLabel("color.feedback", color, customText);
form.add(colorFeedbackLabel);

Add another SPAN tag for every feedback label. You can place this near the relevant form component within the form.

Step 2: Removing the FeedbackPanel completely? No, filtering!

At first, it looks like you can remove the FeedbackPanel completely. But, then you will not be able to use the info() method to display text inside the FeedbackPanel! Therefore we need a way to filter the FeedbackMessages so error messages are not shown. I have written a FeedbackMessageFilter to accomplish that. It filters out the unwanted error messages.

// filteredErrorLevels will not be shown in the FeedbackPanel
int[] filteredErrorLevels = new int[]{FeedbackMessage.ERROR};
feedback.setFilter(new ErrorLevelsFeedbackMessageFilter(filteredErrorLevels));

I have included the ErrorLevelsFeedbackMessageFilter in the project files, so you can reuse this in your existing projects. Remember if you use the error() method, you cannot use this filter! Instead, create your own filter that filters based on components.

Step 3: Adding some style, the ComponentVisualErrorBehavior™

I always love extremely long class names, like the BookmarkablePageRequestTargetUrlCodingStrategy or the SharedResourceRequestTargetUrlCodingStrategy. It makes my day to introduce a class name consisting of four words, the ComponentVisualErrorBehavior™.

This behavior changes the CSS styles for components that are invalid according to the Wicket form validation. You see in the screenshot that the textfield has a red line around it. This is the result of the ComponentVisualErrorBehavior. You can easily change the styles that are applied.

To add the ComponentVisualErrorBehavior to your component, just add one line in your Java code:

name.add(new ComponentVisualErrorBehavior("onblur", nameFeedbackLabel));

“onblur” stands for the event that triggers this Behavior. The nameFeedbackLabel will also be updated when this is triggered, so that it will show the relevant error (or nothing if the input is valid).

Download

Download the complete example project and start experimenting! (run with mvn jetty:run and connect to http://localhost:8080/demo)

Let me know how and where you use it in the comments!

Read the original at User friendly form validation with Wicket or go to the homepage of STUQ.nl

Related posts:

• Wicket: how to write a reusable modal window popup
• Automatically test your Wicket panel HTML markup
• Create RESTful URLs with Wicket

This is a tutorial on using Wicket with REST-style URLs. Normally, Wicket generates URLs that are a bit ugly.
For example:

http://www.example.com/wui/?wicket:bookmarkablePage=%3Anl.stuq.demo.SomePage.

Ugly!

RESTful URLs change that: they are more meaningful for the user, hide some of your implementation details, and are just beautiful. Plus, you’re joining one of the latest hypes. Life couldn’t be better…

Looking around on the intertubes, there is not much useful information about using RESTful URLs in Wicket. Because I need this for a project I’m currently working on, I decided to turn this into a small tutorial.

What is REST?

Representational State Transfer (REST) is a software architectural style for distributed hypermedia systems like the world wide web. The best way to explain this, is an example. A REST application might define the following resources:

• http://example.com/users/
• http://example.com/users/{user} (one for each user)
• http://example.com/findUserForm
• http://example.com/locations/
• http://example.com/locations/{location} (one for each location)
• http://example.com/findLocationForm

This is a very, very short explanation of only a small part of what REST does. More information, as always, can be found on Wikipedia.

When you use custom URLs, you effectively hide some of your internal structure behind more meaningful URLs. This means you can refactor more easily without breaking external links or bookmarks to a specific part of your site. This is also important for search engine optimization.

Note: I’m not going to describe here when you should or should not use REST
with Wicket. That’s an architectural discussion, which depends greatly
on your project. I have discovered some limitations in the Wicket development model that prevent the full implementation of REST. Please read further for more information.

First steps

I suggest you download the code first and read along during the rest of this post.

We are going to create a customer overview page and a products overview page, reachable on “http://example.com/customers/” and “http://example.com/products/”.

The HomePage has two links, to the customer list and the product list. The product and customer lists have links to each individual product (http://example.com/products/${ID}) and customer (http://example.com/customers/${ID}).

For the Wicket UI, I created a HomePage, which links to the CustomerOverviewPage and ProductOverviewPage, which link to the Customer and Product detail pages. To serve up the data, we have some simple services, a ProductService and a CustomerService.

The code

Wicket has a nice built in method of declaring (mounting) custom URL schemes. Simply give a class which implements the IRequestTargetUrlCodingStrategy interface to a WebApplication.

public final void mount(IRequestTargetUrlCodingStrategy encoder)

Relatively new in Wicket is the MixedParamUrlCodingStrategy, which we will use in a minute.

This is an example of how to use the MixedParamUrlCodingStrategy in your WebApplication class:

        public WicketApplication()
        {
        MixedParamUrlCodingStrategy productURLS = new MixedParamUrlCodingStrategy(
                "products",
                ProductDetailPage.class,
                new String[]{"id"}
        );
        mount(productURLS);

This means:

• "products"

  This is the part of the URL after the Wicket’s application URL. In this case: “http://www.example.com/products“

• ProductDetailPage.class

  This defines for which class this URL is meant. In our project, the ProductDetailPage shows a product’s details.

•  new String[]{"id"}

  This is a list of all the parameters that you want to pass to this page. This shows up in the URL like this: “http://www.example.com/products/23” for a product with ID 23. You can easily pass more parameters to this page by adding items to this String array.

• mount(productURLS);

  This passes this MixedParamUrlCodingStrategy to the WebApplication.

The Product detail page

The ProductDetailPage receives these URL parameters in the following way:

public ProductDetailPage(PageParameters parameters) {
int id = parameters.getInt("id");

After that, you can get the Product with this ID (the rest of the code can be downloaded below):

setModel(new CompoundPropertyModel(productService.getProduct(id)));
 
add(new Label("id"));
add(new Label("name"));
 
add(new BookmarkablePageLink("backLink", getApplication().getHomePage()));

Limitations of Wicket

It is currently not possibly (without doing a workaround outside Wicket) to do HTTP PUT, DELETE and POSTs to arbitrary URLs. If you do know how to achieve this, you are very welcome to post it in the comments.

Further steps

In the above tutorial we configured the URL’s in the WebApplication init() method. This has the drawback that information about a single page is in muliple places. It is good from an architecture perspective to configure the URL’s from the Page itself. Look at the wicket-stuff annotation project for more information on how to do that. You can find an excellent tutorial there. The wicketstuff-annotation library is used to mount your pages declaratively via Java annotations.

Further reading

• Putting more variables in a URL, AJAX resistent: HybridUrlCodingStrategy
• Wicket mailing list: Can I get a ‘Nice URL’ when form validation fails?

Download

Download the complete example project and start experimenting! (run with mvn jetty:run and connect to http://localhost:8080/demo)

Let me know how and where you use it in the comments!

Read the original at Create RESTful URLs with Wicket or go to the homepage of STUQ.nl

Related posts:

• User friendly form validation with Wicket
• Wicket: how to write a reusable modal window popup
• Automatically test your Wicket panel HTML markup

In many projects, a subset of user interface elements are repeated over the site. Depending on your project, you can have different selection panels or popups that are used multiple times.

In the following tutorial I describe a method to write your own application specific reusable modal window popup.

Start!

For this example, we use the ModalWindow component from Wicket Extensions.If you don’t know what a ModalWindow looks like, you can see a demo. (hint: try to drag and drop it or resize it)

The example from Wicket extensions

The default example from the Wicket Extensions site contains no real reusable components, besides the ModalWindow itself. The Page inside the ModalWindow is tightly coupled to the ModalWindow. It closes its containing ModalWindow and sets a result parameter of the parent page. The components can only be reused in exactly the same way.

How can we make this more reusable?

We can make this more reusable by making the content of the ModalWindow not aware of the ModalWindow itself. The content does not know what will happen when the containing Form (or other data) is submitted. But how can we do that? The magic words are: abstract methods.

Before we start, you can download the code here, so you can get the complete picture.

The image on the right contains the structure of the page and the components we are creating. The page contains a modal window, which in turn contains a content panel.

The Content Panel

Lets start with the content panel inside the ModalWindow popup. This panel contains a selection link, a selection button and a cancel button, created in the constructor:

public SelectContentPanel(String id) {
  super(id);
 
  // Create the form, to use later for the buttons
  Form form = new Form("form");
  add(form);
 
  // Add some example 'selection' methods, to show as example
  // You can also use a full fledged form, I left that as an
  // exercise for the reader :-)
  add(new AjaxLink("selectionLink"){
    public void onClick(AjaxRequestTarget target) {
      onSelect(target, new String("Selection using the link."));
    }
  });
 
  form.add(new AjaxButton("selectionButton"){
    protected void onSubmit(AjaxRequestTarget target, Form form) {
      onSelect(target, new String("Selection using the button."));
    }
  });
 
  // Add a cancel / close button.
  form.add(new AjaxButton("close") {
    public void onSubmit(AjaxRequestTarget target, Form form) {
      onCancel(target);
    }
  });
[..]

HTML:

  <a>Select something</a> 
<form>
<input type="button" value="Select something else" />
<input type="button" value="Close" />
  </form>

You probably noticed the calls to onSelect() and onCancel(). These are the abstract methods we are declaring:

abstract void onCancel(AjaxRequestTarget target);
abstract void onSelect(AjaxRequestTarget target, String selection);

These methods are abstract, that way the code that is calling this panel must implement these methods. Because we are calling these methods, this effectively gives the result to the consuming code, without ever knowing what will happen with it.

To use abstract methods, the class itself must be abstract:
public abstract class SelectContentPanel extends Panel

The Modal Window

The Modal Window initializes itself with some values. You can just as easily set these values from the calling class, but for now we keep it local.

public SelectModalWindow(String id) {
    super(id);
 
    // Set sizes of this ModalWindow. You can also do this from the HomePage
    // but its not a bad idea to set some good default values.
    setInitialWidth(450);
    setInitialHeight(300);
 
    setTitle("Select something");
 
    // Set the content panel, implementing the abstract methods
    setContent(new SelectContentPanel(this.getContentId()){
        void onCancel(AjaxRequestTarget target) {
            SelectModalWindow.this.onCancel(target);
        }
 
        void onSelect(AjaxRequestTarget target, String selection) {
            SelectModalWindow.this.onSelect(target, selection);
        }
    });
}

HTML:

  <a>Select something</a> 
<form>
<input type="button" value="Select something else" />
<input type="button" value="Close" />
  </form>

The setContent() function call is interesting. Here we create a new SelectContentPanel and implement the methods onCancel() and onSelect(). It is possible to do some extra actions here, but here it is passed one-on-one to the abstract methods of the ModalWindow itself:

abstract void onCancel(AjaxRequestTarget target);
abstract void onSelect(AjaxRequestTarget target, String selection);

The Home Page

The Home Page itself can now instantiate the ModalWindow, override the methods and do something with the data. One big advantage is that you can see from the HomePage class directly what is going to happen after the user selects something or cancels the action:

final ModalWindow selectModalWindow = new SelectModalWindow("modalwindow"){
 
  void onSelect(AjaxRequestTarget target, String selection) {
    // Handle Select action
    resultLabel.setModelObject(selection);
    target.addComponent(resultLabel);
    close(target);
  }
 
  void onCancel(AjaxRequestTarget target) {
    // Handle Cancel action
    resultLabel.setModelObject("ModalWindow cancelled.");
    target.addComponent(resultLabel);
    close(target);
  }
 
};
 
add(selectModalWindow);

Further customization

This example is just passing a String around, you can change it to a more specific class. You can change the onSelect to something more appropriate for your use case. You can even put a Form inside the panel and return the resulting object of the form.

Download

Download the complete example project and start experimenting!
(run with mvn jetty:run and connect to http://localhost:8080/demo)

If you think this is useful, please let me know in the comments.

Read the original at Wicket: how to write a reusable modal window popup or go to the homepage of STUQ.nl

Related posts:

• Automatically test your Wicket panel HTML markup
• Create RESTful URLs with Wicket
• User friendly form validation with Wicket