tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Apache Wiki <wikidi...@apache.org>
Subject [Tapestry Wiki] Update of "Tapestry5Layoutcomponent" by AndyBlower
Date Fri, 16 May 2008 13:17:50 GMT
Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Tapestry Wiki" for change notification.

The following page has been changed by AndyBlower:
http://wiki.apache.org/tapestry/Tapestry5Layoutcomponent

New page:
Making a component Layout with Tapestry 5 is really simple.

An example is given at: http://tapestry.apache.org/tapestry5/tapestry-core/guide/templates.html
in the official tapestry 5 documentation but I propose a more
sophisticated component with content fallback, able for instance to
override its left column content if needed.

We'll finish with something that will look like a bit like the Tiles Template system (Struts),
but much much simpler than Tiles.

In the package components, create a Layout component and template

Layout.java :
{{{
import org.apache.tapestry.annotations.Parameter;
import org.apache.tapestry.ioc.annotations.Inject;
import org.apache.tapestry.services.Request;

/**
* @author Michael Courcy
*
* This component aims to provide layout service for a page
*
*/
public class Layout {

	@Parameter
	private String title = "My Tapestry powered site";
	
	@Inject
	private Request request;
	
	public String getTitle() {
	 return title;
	}
	
	public void setTitle(String title) {
	 this.title = title;
	}
	
	public Request getRequest() {
	 return request;
	}
	
	public void setRequest(Request request) {
	 this.request = request;
	}
}
}}}

Layout.tml
{{{
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>${title}</title>
<link href="${request.contextPath}/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>

 <table id="main">
	<tr>
	 <td id="header" colspan="2">
	  The header
	 </td>
	</tr>
	<tr>
	 <td id="left">
	  Here come the left content
	 </td>
	 <td id="content">
	  <t:body/>
	 </td>
	</tr>
	<tr>
	 <td id="footer" colspan="2">
	  Tapestry powered Site
	 </td>
	</tr>
 </table>

</body>
</html>

}}}

Then add this css file in the root context of your webapp.

layout.css
{{{
table#main {
width: 700px;
margin-left:auto;
margin-right:auto;
}

td#header {
height: 120x;
border: 1px solid blue;
padding: 10px;
margin: 10px;
}

td#footer {
height: 120x;
border: 1px solid blue;
padding: 10px;
margin: 10px;
}

td#left{
width: 200px;
border: 1px solid red;
padding: 10px;
margin: 10px;
}

td#content{
border: 1px solid red;
padding: 10px;
margin: 10px;
}
}}}

Let's
try it! In the package page, create a page TestLayout.java which does
ot do anything as its only purpose is to test the component.
{{{
public class TestLayout {

}
}}}

and in the root context of your webapp, create the template TestLayout.tml :
{{{
<t:layout title="literal:My first use of layout component" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
My content
</t:layout>
}}}

You should get this:

http://bp1.blogger.com/_YQ2Klpj9mz8/R5UZNeBpEdI/AAAAAAAAABA/ndHtLqSvYHI/s1600-h/layout_first_step.png

Note that the title of the page is passed as a parameter.

But could we regard this solution as fulfilling our requirements?

Not really, because the content of the left column is now static and we're
about 100% sure that for some pages we'll have to override it.

Let's change the component using Delegate, Block, Parameter and a component of our own : Left.

Left.java (in the components package)
{{{

/**
* @author Michael Courcy
*
* This component is just a content holder to fill the left column of the layout component
*
*/
public class Left {

}
}}}

Really simple, isn't it? That's barely a container.

Now let's change Layout.tml.
{{{
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>${title}</title>
<link href="${request.contextPath}/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>

 <table id="main">
	<tr>
	 <td id="header" colspan="2">
	  The header
	 </td>
	</tr>
	<tr>
	 <td id="left">
	  <t:delegate to="leftContent" />
	  <t:block>
	   <div t:id="leftRegularContent">
	    Here come the left regular content
	   </div>
	  </t:block>
	 </td>
	 <td id="content">
	  <t:body/>
	 </td>
	</tr>
	<tr>
	 <td id="footer" colspan="2">
	  Tapestry powered Site
	 </td>
	</tr>
 </table>

</body>
</html>
}}}

What you have to focus on is the change done in the left column, the content
of the component leftRegularContent will be a "content fallback".

You have to change Layout.java as well
{{{
package org.apache.tutorial.tapestrySpringHibernate.components;

import org.apache.tapestry.Block;
import org.apache.tapestry.annotations.Component;
import org.apache.tapestry.annotations.Parameter;
import org.apache.tapestry.ioc.annotations.Inject;
import org.apache.tapestry.services.Request;

/**
* @author Michael Courcy
*
* This component aims to create a layout around the main content
* You can optionnaly defines left content that overrides the regular left
* content if needed through the <t:parameter name="left">some overiding left content</t:parameter>
*
*/
public class Layout {

	@Parameter
	private String title = "My Tapestry powered site";
	
	@Parameter
	private Block left;
	
	@Component
	private Left leftRegularContent;
	
	@Inject
	private Request request;
	
	/**
	 * This method check if the left parameter has been set by the user
	 * if not the regular content is shown otherwise the content of this parameter
	 *
	 * @return the component we want to display
	 */
	public Object getLeftContent(){
	 return left==null ?  leftRegularContent : left;
	}
	
	public String getTitle() {
	 return title;
	}
	
	public void setTitle(String title) {
	 this.title = title;
	}
	
	public Request getRequest() {
	 return request;
	}
	
	public void setRequest(Request request) {
	 this.request = request;
	}
}

}}}

Et voila !! Without defining a left parameter :
{{{
<t:layout title="literal:My first use of layout component" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
My content
</t:layout>
}}}
you get this:

http://bp0.blogger.com/_YQ2Klpj9mz8/R5UaOOBpEeI/AAAAAAAAABI/Fk13y6kXlY4/s1600-h/layout_second_step_nol_overriding_left.png


With a left parameter defined :
{{{
<t:layout title="literal:My first use of layout component" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
My content
<t:parameter name="left">
   Other left content
   </t:parameter>
</t:layout>
}}}
You get this:

http://bp3.blogger.com/_YQ2Klpj9mz8/R5Ua6-BpEfI/AAAAAAAAABQ/xO4ILTm1yrM/s1600-h/layout_second_step_overriding_left.png

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Mime
View raw message