Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

They're just there to help with the cases where you don't need to share the panel contents between different pages but are just using them on a single page. In other words, they're a convinience convenience feature for people to embed repeating but non-reusable pieces of markup into the parent's markup file.

...

e.g. You have a target myPanel

Code Block
html
html
<span wicket:id="myPanel">Example input (will be removed)</span>

and in the same markup file you have some fragments, i.e.

Code Block
html
html
<wicket:fragment wicket:id="frag1">panel 1</wicket:fragment>
<wicket:fragment wicket:id="frag2">panel 2</wicket:fragment>

...

which will result in the markup from frag 1 being rendered, i.e. panel 1

...

Advanced Example

If the component that you are putting the fragment in is a subclass, the fragment's markup must be inside the <wicket:extend></wicket:extend> tag:

In the code below a table is rendered where even and uneven rows have a different color.:

Code Block
html
html

<html>
<head><title>Fragments Test</title></head>
<body>

<table border="1"> 
  <tr>
    <th>id</th>
    <th>Column</th>
  </tr>
  
  <span wicket:id="list">
  
   <span
Code Block

<wicket:extend>
    ...
    <span wicket:id="myPanel">Example input (will be removed)</span>
    ...
    <wicket:fragment wicket:id="frag1">panel 1</wicket:fragment>placeholderForFragmentedListItem">[content will go here]</span>
    
	<wicket:fragment wicket:id="frag2">panel 2</wicket:fragment>
</wicket:extend>

Fragments from other pages

It's possible to include fragments from other pages as well, even without using the <wicket:fragment>...</wicket:fragment> tags:

Code Block
titleTest.html

<html>
<head>
	<title>Title</title>
</head>
<body>
	<spanvariant_even">
	  <tr bgcolor="lightgrey">
		<td wicket:id="targetrownum">>1</td>
		This<td will be replaced>Variant 1</td>
	  </span>tr>
	</body>
</html>
Code Block
titleTest.java

public class Test extends WebPage {

	public Test() {
		add(new Snippets().createTable("target"));
	}
}
Code Block
titleSnippets.html

<html>
<head>
	<title>Snippets</title>
</head>
<body>
	<spanwicket:fragment>
	
	<wicket:fragment wicket:id="variant_uneven">
	  <tr bgcolor="white">
		<td wicket:id="fragment.source">
		<table>
			<tr>
				<td>Hello<rownum">2</td>
				<td>World<<td >Variant 2</td>
			  </tr>
		</table>wicket:fragment>
	
  </span>
</table>

</body>
</html>

and the corosponding Java code:

Snippets.java
title
Code Block
public class SnippetsFragmentsTest extends WebPage {

	private final WebMarkupContainer fragmentSource;

	public SnippetsFragmentsTest() {
		add(fragmentSource    Loop loop = new WebMarkupContainerLoop("fragment.source"));
		setMarkupStream(getAssociatedMarkupStream(true));
	}

	public Component createTable(String id) {
		return new Fragment(id, fragmentSource.getId(), this);
	}
}

will be rendered as (ignoring some irrelevant JavaScript code in the header):

list", 5) {
      protected void populateItem(LoopItem item) {

        String fragmentId;
        if (0 == item.getIteration() % 2) {
          fragmentId = "variant_even";
        } else {
          fragmentId = "variant_uneven";
        }

        Fragment frag = new Fragment(
				"placeholderForFragmentedListItem", fragmentId, this);
        frag.add(new Label("rownum", "" + item.getIteration()));
        item.add(frag);
      }
    };
    add(loop);
  }
}

Note

If the component that you are putting the fragment in is a subclass, the fragment's markup must be inside the <wicket:extend></wicket:extend> tag:

Code Block
html
html

<wicket:extend>
    ...
    <span wicket:id="myPanel">Example input (will be removed)</span>
    ...
    <wicket:fragment wicket:id="frag1">panel 1</wicket:fragment>
    <wicket:fragment wicket:id="frag2">panel 2</wicket:fragment>
</wicket:extend>
Code Block
titlerendered output

<html>
<head>
	<title>Title</title>
</head>
<body>
	<span>
		<table border="1">
			<tr>
				<td>Hello</td>
				<td>World</td>
			</tr>
		</table>
	</span>
</body>
</html>