Id | First Name | Last Name | Region | Start Date |
---|---|---|---|---|
3 | 11444iii | km | West Coast | Jan 1, 2024 |
5 | asd | De scoop | East Coast | Jul 7, 2007 |
1 | Lost | eeeeasdas | West Coast | Jun 4, 2026 |
2 | Mary | dgzfgdf | East Coast | Jun 10, 2024 |
4 | yuno | 3clover | West Coast | Feb 12, 2008 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like
We use a "strict" DTD to make IE follow the alignment rules. -->
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
<h3>Styled Loop</h3>
As with Grid, with a bit of CSS you can make a Loop look however you want.
<div class="eg">
<table class="grid">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Region</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr t:type="loop" t:source="persons" t:value="person">
<td>${person.id}</td>
<td>${person.firstName}</td>
<td>${person.lastName}</td>
<td>${personRegion}</td>
<td><t:output value="person.startDate" format="dateFormat"/></td>
</tr>
</tbody>
</table>
</div>
References:
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Loop.html">Loop</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Output.html">Output</a>.<br/><br/>
<t:pagelink page="Index">Home</t:pagelink><br/><br/>
The source for IPersonFinderServiceLocal and @EJB is shown in the Session Beans and @EJB examples.<br/><br/>
<t:tabgroup>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/StyledLoop.tml"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/StyledLoop.properties"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/StyledLoop.java"/>
<t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/tables/styledloop.css"/>
<t:sourcecodetab src="/business/src/main/java/jumpstart/business/domain/person/Person.java"/>
<t:sourcecodetab src="/business/src/main/java/jumpstart/business/domain/person/Regions.java"/>
</t:tabgroup>
</body>
</html>
## These enum conversions could be moved to the central message properties file called app.properties
## The structure we've chosen (enum class name, dot, enum value) is the same as expected by the Select component.
Regions.EAST_COAST=East Coast
Regions.WEST_COAST=West Coast
package jumpstart.web.pages.examples.tables;
import java.text.DateFormat;
import java.text.Format;
import java.util.List;
import java.util.Locale;
import javax.ejb.EJB;
import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.Regions;
import jumpstart.business.domain.person.iface.IPersonFinderServiceLocal;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.Messages;
import org.apache.tapestry5.ioc.annotations.Inject;
@Import(stylesheet = "css/examples/tables/styledloop.css")
public class StyledLoop {
static private final int MAX_RESULTS = 30;
// Screen fields
@Property
private List<Person> persons;
@Property
private Person person;
// Generally useful bits and pieces
@EJB
private IPersonFinderServiceLocal personFinderService;
@Inject
private Messages messages;
@Inject
private Locale currentLocale;
// The code
void setupRender() {
// Get all persons - ask business service to find them (from the database)
persons = personFinderService.findPersons(MAX_RESULTS);
}
public String getPersonRegion() {
return messages.get(Regions.class.getSimpleName() + "." + person.getRegion().name());
}
public Format getDateFormat() {
return DateFormat.getDateInstance(DateFormat.MEDIUM, currentLocale);
}
}
.eg {
margin: 20px 0;
padding: 20px;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-border-radius: 4px;
-mox-border-radius: 4px;
}
.grid {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
font-size: 13px;
}
.grid tr {
border-top: 1px solid #f8f8f8;
}
.grid th {
padding: 3px 5px;
text-align: left;
width: 130px;
border: 1px solid #ddd;
font-weight: normal;
color: #444;
text-shadow: 0px -1px 0px #e4e4e4;
background-color: #eee;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb',
endColorstr='#e4e4e4'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb),
to(#e4e4e4)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fbfbfb, #e4e4e4);
/* for firefox 3.6+ */
}
.grid td {
padding: 3px 5px;
text-align: left;
}
package jumpstart.business.domain.person;
import java.io.Serializable;
import java.util.Date;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.EnumType;
import javax.persistence.Enumerated;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.PrePersist;
import javax.persistence.PreUpdate;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
import javax.persistence.Version;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
/**
* The Person entity.
*/
@Entity
@SuppressWarnings("serial")
public class Person implements Serializable {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column(nullable = false)
private Long id;
@Version
@Column(nullable = false)
private Integer version;
@Column(length = 10, nullable = false)
@NotNull
@Size(max = 10)
private String firstName;
@Column(length = 10, nullable = false)
@NotNull
@Size(max = 10)
private String lastName;
@Enumerated(EnumType.STRING)
@NotNull
private Regions region;
@Temporal(TemporalType.DATE)
@NotNull
private Date startDate;
public String toString() {
final String DIVIDER = ", ";
StringBuilder buf = new StringBuilder();
buf.append(this.getClass().getSimpleName() + ": ");
buf.append("[");
buf.append("id=" + id + DIVIDER);
buf.append("version=" + version + DIVIDER);
buf.append("firstName=" + firstName + DIVIDER);
buf.append("lastName=" + lastName + DIVIDER);
buf.append("region=" + region + DIVIDER);
buf.append("startDate=" + startDate);
buf.append("]");
return buf.toString();
}
// Default constructor is required by JPA.
public Person() {
}
public Person(String firstName, String lastName, Regions region, Date startDate) {
super();
this.firstName = firstName;
this.lastName = lastName;
this.region = region;
this.startDate = startDate;
}
// The need for an equals() method is discussed at http://www.hibernate.org/109.html
@Override
public boolean equals(Object obj) {
return (obj == this) || (obj instanceof Person) && id != null && id.equals(((Person) obj).getId());
}
// The need for a hashCode() method is discussed at http://www.hibernate.org/109.html
@Override
public int hashCode() {
return id == null ? super.hashCode() : id.hashCode();
}
@PrePersist
@PreUpdate
public void validate() throws ValidationException {
}
public Long getId() {
return id;
}
public Integer getVersion() {
return version;
}
public void setVersion(Integer version) {
this.version = version;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public Regions getRegion() {
return region;
}
public void setRegion(Regions region) {
this.region = region;
}
public Date getStartDate() {
return startDate;
}
public void setStartDate(Date startDate) {
this.startDate = startDate;
}
}
package jumpstart.business.domain.person;
public enum Regions {
EAST_COAST, WEST_COAST;
}