[jboss-cvs] jboss-seam/examples/contactlist/view ...
Gavin King
gavin.king at jboss.com
Thu Oct 5 20:23:41 EDT 2006
User: gavin
Date: 06/10/05 20:23:41
Modified: examples/contactlist/view editContact.xhtml
search.xhtml viewContact.xhtml
Added: examples/contactlist/view screen.css
Removed: examples/contactlist/view comment.xhtml
Log:
improved UI by stealing from grails
Revision Changes Path
1.3 +88 -68 jboss-seam/examples/contactlist/view/editContact.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: editContact.xhtml
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/examples/contactlist/view/editContact.xhtml,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -b -r1.2 -r1.3
--- editContact.xhtml 28 Sep 2006 16:26:54 -0000 1.2
+++ editContact.xhtml 6 Oct 2006 00:23:41 -0000 1.3
@@ -8,67 +8,84 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Edit Contact</title>
+ <link href="screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
+ <div class="menuButton">
+ <s:link view="/search.xhtml" value="Search Contacts"/>
+ <s:link view="/editContact.xhtml" value="Create New Contact">
+ <f:param name="contactId"/> <!-- suppress propagation of contact id page parameter -->
+ </s:link>
+ <s:link view="/viewContact.xhtml" value="View Contact" rendered="#{contactActions.managed}"/>
+ <s:link view="/editContact.xhtml" value="Edit Contact" rendered="#{contactActions.managed}"/>
+ </div>
+
+ <div class="body">
+
+ <h1>Edit Contact</h1>
+
<h:form>
- <h:messages globalOnly="true"/>
+ <h:messages globalOnly="true" styleClass="message"/>
<!-- editable fields -->
<s:validateAll>
+ <div class="dialog">
<table>
- <tr>
- <td>First Name</td>
- <td><h:inputText id="firstName" value="#{contact.firstName}"/></td>
- <td><h:message for="firstName"/></td>
- </tr>
- <tr>
- <td>Last Name</td>
- <td><h:inputText id="lastName" value="#{contact.lastName}"/></td>
- <td><h:message for="lastName"/></td>
- </tr>
- <tr>
- <td>Cell Phone</td>
- <td><h:inputText id="cellPhone" value="#{contact.cellPhone}"/></td>
- <td><h:message for="cellPhone"/></td>
- </tr>
- <tr>
- <td>Home Phone</td>
- <td><h:inputText id="homePhone" value="#{contact.homePhone}"/></td>
- <td><h:message styleClass="error" for="homePhone"/></td>
- </tr>
- <tr>
- <td>Address</td>
- <td><h:inputText id="address" value="#{contact.address}"/></td>
- <td><h:message styleClass="error" for="address"/></td>
- </tr>
- <tr>
- <td>City</td>
- <td><h:inputText id="city" value="#{contact.city}"/></td>
- <td><h:message for="city"/></td>
- </tr>
- <tr>
- <td>State</td>
- <td><h:inputText id="state" value="#{contact.state}"/></td>
- <td><h:message for="state"/></td>
- </tr>
- <tr>
- <td>Zip</td>
- <td><h:inputText id="zip" value="#{contact.zip}"/></td>
- <td><h:message for="zip"/></td>
- </tr>
- <tr>
- <td>Country</td>
- <td><h:inputText id="country" value="#{contact.country}"/></td>
- <td><h:message for="country"/></td>
+ <tr class="prop">
+ <td class="name">First Name:</td>
+ <td class="value"><h:inputText id="firstName" value="#{contact.firstName}"/></td>
+ <td class="errors"><h:message for="firstName"/></td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Last Name:</td>
+ <td class="value"><h:inputText id="lastName" value="#{contact.lastName}"/></td>
+ <td class="errors"><h:message for="lastName"/></td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Cell Phone:</td>
+ <td class="value"><h:inputText id="cellPhone" value="#{contact.cellPhone}"/></td>
+ <td class="errors"><h:message for="cellPhone"/></td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Home Phone:</td>
+ <td class="value"><h:inputText id="homePhone" value="#{contact.homePhone}"/></td>
+ <td class="errors"><h:message styleClass="error" for="homePhone"/></td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Address:</td>
+ <td class="value"><h:inputText id="address" value="#{contact.address}"/></td>
+ <td class="errors"><h:message styleClass="error" for="address"/></td>
+ </tr>
+ <tr class="prop">
+ <td class="name">City:</td>
+ <td class="value"><h:inputText id="city" value="#{contact.city}"/></td>
+ <td class="errors"><h:message for="city"/></td>
+ </tr>
+ <tr class="prop">
+ <td class="name">State:</td>
+ <td class="value"><h:inputText id="state" value="#{contact.state}"/></td>
+ <td class="errors"><h:message for="state"/></td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Zip:</td>
+ <td class="value"><h:inputText id="zip" value="#{contact.zip}"/></td>
+ <td class="errors"><h:message for="zip"/></td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Country:</td>
+ <td class="value"><h:inputText id="country" value="#{contact.country}"/></td>
+ <td class="errors"><h:message for="country"/></td>
</tr>
</table>
+ </div>
</s:validateAll>
<!-- actions -->
+ <div class="actionButton">
<h:commandLink action="#{contactActions.update}" value="Update Contact" rendered="#{contactActions.managed}">
<f:param name="contactId" value="#{contact.id}"/>
</h:commandLink>
@@ -80,8 +97,11 @@
  
<s:link view="/viewContact.xhtml" value="Cancel" rendered="#{contactActions.managed}"/>
<s:link view="/search.xhtml" value="Cancel" rendered="#{!contactActions.managed}"/>
+ </div>
</h:form>
+ </div>
+
</body>
</html>
1.2 +73 -58 jboss-seam/examples/contactlist/view/search.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: search.xhtml
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/examples/contactlist/view/search.xhtml,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -b -r1.1 -r1.2
--- search.xhtml 28 Sep 2006 00:18:33 -0000 1.1
+++ search.xhtml 6 Oct 2006 00:23:41 -0000 1.2
@@ -8,17 +8,35 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contact List</title>
+ <link href="screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
- <h:messages/>
+ <div class="menuButton">
+ <s:link view="/search.xhtml" value="Search Contacts"/>
+ <s:link view="/editContact.xhtml" value="Create New Contact"/>
+ </div>
+
+ <div class="body">
+
+ <h1>ContactList</h1>
+
+ <h:messages styleClass="message"/>
<!-- search box -->
+ <div class="dialog">
<h:form>
- First Name: <h:inputText value="#{exampleContact.firstName}"/>
- Last Name : <h:inputText value="#{exampleContact.lastName}"/>
+ <span class="prop">
+ <span class="name">First Name:</span>
+ <span class="value"><h:inputText value="#{exampleContact.firstName}"/></span>
+ </span>
+ <span class="prop">
+ <span class="name">Last Name :</span>
+ <span class="value"><h:inputText value="#{exampleContact.lastName}"/></span>
+ </span>
<h:commandButton value="Search" action="/search.xhtml"/>
</h:form>
+ </div>
<!-- search results -->
<table>
@@ -51,24 +69,21 @@
</table>
<!-- pagination control -->
- <div>
- <s:link view="/search.xhtml" rendered="#{contacts.previousExists}" value="<<">
+ <div class="actionButton">
+ <s:link view="/search.xhtml" rendered="#{contacts.previousExists}" value="<< First Page">
<f:param name="firstResult" value="0"/>
</s:link>
- <h:outputText rendered="#{!contacts.previousExists}" value="<<"/>
-  
- <s:link view="/search.xhtml" rendered="#{contacts.previousExists}" value="<">
+ <h:outputText rendered="#{contacts.previousExists}" value="  "/>
+ <s:link view="/search.xhtml" rendered="#{contacts.previousExists}" value="< Previous Page">
<f:param name="firstResult" value="#{contacts.previousFirstResult}"/>
</s:link>
- <h:outputText rendered="#{!contacts.previousExists}" value="<"/>
-  
- <s:link view="/search.xhtml" rendered="#{contacts.nextExists}" value=">">
+ <h:outputText rendered="#{contacts.previousExists}" value="  "/>
+ <s:link view="/search.xhtml" rendered="#{contacts.nextExists}" value="Next Page >">
<f:param name="firstResult" value="#{contacts.nextFirstResult}"/>
</s:link>
- <h:outputText rendered="#{!contacts.nextExists}" value=">"/>
</div>
- <s:link view="/editContact.xhtml" value="Create New Contact"/>
+ </div>
</body>
</html>
1.3 +111 -67 jboss-seam/examples/contactlist/view/viewContact.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: viewContact.xhtml
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/examples/contactlist/view/viewContact.xhtml,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -b -r1.2 -r1.3
--- viewContact.xhtml 5 Oct 2006 20:42:14 -0000 1.2
+++ viewContact.xhtml 6 Oct 2006 00:23:41 -0000 1.3
@@ -8,55 +8,86 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>View Contact</title>
+ <link href="screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
- <h:messages/>
+ <div class="menuButton">
+ <s:link view="/search.xhtml" value="Search Contacts"/>
+ <s:link view="/editContact.xhtml" value="Create New Contact">
+ <f:param name="contactId"/> <!-- suppress propagation of contact id page parameter -->
+ </s:link>
+ <s:link view="/viewContact.xhtml" value="View Contact"/>
+ <s:link view="/editContact.xhtml" value="Edit Contact"/>
+ </div>
+
+ <div class="body">
+
+ <h1>View Contact</h1>
+
+ <h:messages styleClass="message" globalOnly="true"/>
<!-- fields -->
+ <div class="dialog">
<table>
- <tr>
- <td>First Name</td>
- <td>#{contact.firstName}</td>
- </tr>
- <tr>
- <td>Last Name</td>
- <td>#{contact.lastName}</td>
- </tr>
- <tr>
- <td>Cell Phone</td>
- <td>#{contact.cellPhone}</td>
- </tr>
- <tr>
- <td>Home Phone</td>
- <td>#{contact.homePhone}</td>
- </tr>
- <tr>
- <td>Address</td>
- <td>#{contact.address}</td>
- </tr>
- <tr>
- <td>City</td>
- <td>#{contact.city}</td>
- </tr>
- <tr>
- <td>State</td>
- <td>#{contact.state}</td>
- </tr>
- <tr>
- <td>Zip</td>
- <td>#{contact.zip}</td>
- </tr>
- <tr>
- <td>Country</td>
- <td>#{contact.country}</td>
+ <tr class="prop">
+ <td class="name">First Name:</td>
+ <td class="value">#{contact.firstName}</td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Last Name:</td>
+ <td class="value">#{contact.lastName}</td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Cell Phone:</td>
+ <td class="value">#{contact.cellPhone}</td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Home Phone:</td>
+ <td class="value">#{contact.homePhone}</td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Address:</td>
+ <td class="value">#{contact.address}</td>
+ </tr>
+ <tr class="prop">
+ <td class="name">City:</td>
+ <td class="value">#{contact.city}</td>
+ </tr>
+ <tr class="prop">
+ <td class="name">State:</td>
+ <td class="value">#{contact.state}</td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Zip:</td>
+ <td class="value">#{contact.zip}</td>
+ </tr>
+ <tr class="prop">
+ <td class="name">Country:</td>
+ <td class="value">#{contact.country}</td>
</tr>
</table>
+ </div>
+
+ <!-- actions -->
+ <div class="actionButton">
+ <s:link view="/editContact.xhtml" value="Edit Contact"/>
+   
+ <s:link action="#{contactActions.remove}" value="Delete Contact" rendered="#{contactActions.managed}">
+ <f:param name="contactId" value="#{contact.id}"/>
+ </s:link>
+ </div>
<!-- associations -->
+ <h3>
+ <h:outputText value="Comments" rendered="#{not empty contact.comments}"/>
+ <h:outputText value="No Comments" rendered="#{empty contact.comments}"/>
+ </h3>
- <h:dataTable value="#{contact.comments}" var="c" rendered="#{not empty contact.comments}">
+ <h:dataTable value="#{contact.comments}" var="c" rendered="#{not empty contact.comments}"
+ rowClasses="first,second" columnClasses="narrow,wide">
<h:column>
+ <f:facet name="header">Posted</f:facet>
<h:outputText value="#{c.created}">
<f:convertDateTime type="both"/>
</h:outputText>
@@ -67,20 +98,33 @@
</h:column>
</h:dataTable>
- <!-- links and actions -->
- <s:link view="/comment.xhtml" value="Create Comment"/>
-   
- <s:link view="/editContact.xhtml" value="Edit Contact"/>
-   
- <s:link action="#{contactActions.remove}" value="Delete Contact" rendered="#{contactActions.managed}">
+ <h:form>
+
+ <!-- editable fields -->
+ <div class="dialog">
+ <s:validateAll>
+
+ <table>
+ <tr class="prop">
+ <td class="name">New Comment:</td>
+ <td class="value"><h:inputTextarea id="text" value="#{comment.text}" rows="15" cols="100"/></td>
+ <td class="errors"><h:message for="text"/></td>
+ </tr>
+ </table>
+
+ </s:validateAll>
+ </div>
+
+ <!-- actions -->
+ <div class="actionButton">
+ <h:commandLink action="#{commentActions.persist}" value="Create Comment">
<f:param name="contactId" value="#{contact.id}"/>
- </s:link>
-   
- <s:link view="/editContact.xhtml" value="Create New Contact">
- <f:param name="contactId"/> <!-- suppress propagation of contact id page parameter -->
- </s:link>
-   
- <s:link view="/search.xhtml" value="Search Contacts"/>
+ </h:commandLink>
+ </div>
+
+ </h:form>
+
+ </div>
</body>
</html>
1.1 date: 2006/10/06 00:23:41; author: gavin; state: Exp;jboss-seam/examples/contactlist/view/screen.css
Index: screen.css
===================================================================
a:active,a:link,a:visited,a:hover {
color:#0D5798;
}
.menuButton {
background-color:#8CAFCD;
border: 1px solid white;
border-style: none solid none none ;
margin-left:0px;
padding-bottom: 5px;
}
.menuButton a:active,.menuButton a:link,.menuButton a:visited {
font-family:Arial,sans-serif;
color: white;
font-weight:bold;
text-decoration:none;
padding:20px;
}
.menuButton a:hover {
font-family:Arial,sans-serif;
background-color: white;
color:#8CAFCD;
font-weight:bold;
text-decoration:none;
padding:20px;
}
.actionButton a:active,.actionButton a:link,.actionButton a:visited,.actionButton a:hover {
font-family:Arial,sans-serif;
font-size:0.9em;
font-weight:bold;
color: #578BB8;
border: 1px solid #578BB8;
text-decoration:none;
padding:3px;
}
.actionButton a:hover {
font-family:Arial,sans-serif;
font-size:0.9em;
font-weight:bold;
color: white;
background-color: #578BB8;
border: 4px solid #578BB8;
text-decoration:none;
padding:1px;
}
h1 {
font-family:Arial,sans-serif;
color:#578BB8;
font-size:1.6em;
}
body {
margin:0px;
font-family:Arial,sans-serif;
color: #616161;
}
textarea {
width: 300px;
height: 100px;
}
table {
width: 100%;
}
.body {
padding: 25px;
}
.nav {
width:100%;
margin-top: 30px;
background-color:#D6D6D6;
height: 30px;
border: 2px solid #578BB8;
border-style: solid none none none ;
}
th {
background-color:#578BB8;
color:white;
width:30px;
font-family:Arial,sans-serif;
padding:5px;
}
td {
background-color:#F0F0F0;
text-align:center;
}
.narrow {
width:20%;
}
.wide {
width:80%;
}
.first td {
background-color:#F0F0F0;
}
.second td {
background-color:white;
}
.dialog
{
padding: 15px;
background-color:#F0F0F0;
margin:20px;
}
.dialog label{
width: 120px;
font-weight: bold;
}
.dialog .textfield {
width: 180px;
margin-bottom: 5px;
}
.prop {
padding: 5px;
}
.buttons {
margin-top: 15px;
}
.actionButtons {
width:100px;
}
div .errors {
border: 2px solid red;
padding: 5px;
margin-top:10px;
margin-bottom:10px;
}
td .errors {
border: 1px solid red;
}
.message {
border: 1px solid #FFCC00;
padding: 5px;
margin-top:10px;
margin-bottom:10px;
}
.prop .name {
font-weight:bold;
text-align:left;
width:20%;
}
.prop .value {
text-align:left;
width:80%;
}
More information about the jboss-cvs-commits
mailing list