polish l&f

This commit is contained in:
Keith Donald
2008-04-24 05:02:00 +00:00
parent 89c5d2e22e
commit c05695b5f3
4 changed files with 140 additions and 180 deletions

View File

@@ -16,22 +16,29 @@
<h2>Search Hotels</h2>
<h:form id="mainForm">
<fieldset>
<div class="searchGroup">
<div class="searchField">
<sf:clientTextValidator promptMessage="Search hotels by name, address, city, or zip.">
<h:inputText id="searchString" value="#{searchCriteria.searchString}" style="width: 165px; height: 15px;" />
</sf:clientTextValidator>
<div class="field">
<div class="label">
<h:outputLabel for="searchString">Search String:</h:outputLabel>
</div>
<div class="searchSize">
<div class="input">
<sf:clientTextValidator promptMessage="Search hotels by name, address, city, or zip.">
<h:inputText id="searchString" value="#{searchCriteria.searchString}" style="width: 165px; height: 15px;" />
</sf:clientTextValidator>
</div>
</div>
<div class="field">
<div class="label">
<h:outputLabel for="pageSize">Maximum results:</h:outputLabel>
</div>
<div class="input">
<h:selectOneMenu id="pageSize" value="#{searchCriteria.pageSize}">
<f:selectItems value="#{referenceData.pageSizeOptions}" />
</h:selectOneMenu>
</div>
<div class="searchButton">
<sf:commandButton id="findHotels" value="Find Hotels" processIds="*" action="search" />
</div>
</div>
</div>
<div class="buttonGroup">
<sf:commandButton id="findHotels" value="Find Hotels" action="search" />
</div>
</fieldset>
</h:form>
</div>

View File

@@ -10,47 +10,46 @@
<div class="section">
<h2>View Hotel</h2>
<div class="field">
<div class="label">Name:</div>
<div class="output">#{hotel.name}</div>
</div>
<div class="field">
<div class="label">Address:</div>
<div class="output">#{hotel.address}</div>
</div>
<div class="field">
<div class="label">City:</div>
<div class="output">#{hotel.city}</div>
</div>
<div class="field">
<div class="label">State:</div>
<div class="output">#{hotel.state}</div>
</div>
<div class="field">
<div class="label">Zip:</div>
<div class="output">#{hotel.zip}</div>
</div>
<div class="field">
<div class="label">Country:</div>
<div class="output">#{hotel.country}</div>
</div>
<div class="field">
<div class="label">Nightly rate:</div>
<div class="output">
<h:outputText value="#{hotel.price}">
<f:convertNumber type="currency" currencySymbol="$"/>
</h:outputText>
</div>
</div>
</div>
<div class="section">
<!-- Use of a plain form element instead of the h:form component is a temporary workaround as spring-security 2.0-M2 is not forwarding to the correct URL when using a post -->
<form id="hotel" method="get">
<input name="execution" type="hidden" value="${flowExecutionContext.key}"/>
<fieldset class="buttonGroup">
<sf:commandButton id="book" ajaxEnabled="false" action="book" value="Book Hotel"/>&#160;
<sf:commandButton id="cancel" ajaxEnabled="false" action="cancel" value="Back to Search"/>
<fieldset>
<div class="field">
<div class="label">Name:</div>
<div class="output">#{hotel.name}</div>
</div>
<div class="field">
<div class="label">Address:</div>
<div class="output">#{hotel.address}</div>
</div>
<div class="field">
<div class="label">City:</div>
<div class="output">#{hotel.city}</div>
</div>
<div class="field">
<div class="label">State:</div>
<div class="output">#{hotel.state}</div>
</div>
<div class="field">
<div class="label">Zip:</div>
<div class="output">#{hotel.zip}</div>
</div>
<div class="field">
<div class="label">Country:</div>
<div class="output">#{hotel.country}</div>
</div>
<div class="field">
<div class="label">Nightly rate:</div>
<div class="output">
<h:outputText value="#{hotel.price}">
<f:convertNumber type="currency" currencySymbol="$"/>
</h:outputText>
</div>
</div>
<div class="buttonGroup">
<sf:commandButton id="book" ajaxEnabled="false" action="book" value="Book Hotel"/>&#160;
<sf:commandButton id="cancel" ajaxEnabled="false" action="cancel" value="Back to Search"/>
</div>
</fieldset>
</form>
</div>

View File

@@ -39,11 +39,9 @@
<sf:commandLink id="viewHotelLink" value="View Hotel" action="select"/>
</h:column>
</h:dataTable>
<div class="next">
<sf:commandLink id="nextPageLink" value="More Results" action="next" rendered="#{not empty hotels and hotels.rowCount == searchCriteria.pageSize}"/>
</div>
<div class="previous">
<div class="buttonGroup">
<sf:commandLink id="previousPageLink" value="Previous results" action="previous" rendered="#{searchCriteria.page > 0}"/>
<sf:commandLink id="nextPageLink" value="More Results" action="next" rendered="#{not empty hotels and hotels.rowCount == searchCriteria.pageSize}"/>
</div>
</div>
</ui:fragment>

View File

@@ -11,11 +11,17 @@
text-decoration: none;
font-weight: bold;
}
body.spring {
background-color: #9cac7c;
}
form div,
form p {
padding: 0px;
margin: 0 0 .5em 0;
}
#header.spring {
margin: 0 0 1em 0;
padding: 0px 0px;
@@ -41,136 +47,13 @@
#welcome div.right {
float: right;
}
form div,
form p {
padding: 0px;
margin: 0 0 .5em 0;
}
#content.spring {
width: 740px;
background: #fff url(../images/bg.gif) 0 0 repeat;
margin-bottom: 0px;
}
#content .section {
width: 505px;
float: left;
margin-bottom: 5px;
}
#content.spring input[type="submit"], input[type="button"], button {
font-weight: bold;
color: #fff;
height: 20px;
background: #fff url(../images/btn.bg.gif) 0 0 repeat-x;
border-style: none;
vertical-align: middle;
}
#content.spring button
{
font-size: 1em;
font-family: arial,helvetica,verdana,sans-serif;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
#content.spring button
{
vertical-align: middle;
}
.errors {
font-weight: bold;
text-align: left;
color: #600;
}
.errors ul {
list-style: none;
}
#content .field {
float:left;
}
#content .field .label {
float: left;
padding-top: 5px;
padding-right: 5px;
font-weight: bold;
width: 150px;
text-align: right;
}
#content .field .output {
float: left;
width: 250px;
padding-top: 5px;
text-align: left;
}
#content .field .input {
float: left;
width: 250px;
text-align: left;
}
#content .searchGroup {
width: 35%;
}
#content .buttonGroup {
clear: both;
text-align: right;
}
#content .buttonGroup input[type="submit"], .buttonGroup input[type="button"] {
margin-right: 5px;
}
#content .previous {
float: right;
}
#content .next {
float: right;
}
#content .next a {
margin-left: 20px;
}
#content .summary {
width: 100%;
border: 1px solid #414f23;
border-collapse: collapse;
}
#content .summary thead th {
border-left: 1px solid #414f23;
background: #fff url(../images/th.bg.gif) 0 100% repeat-x;
border-bottom: 1px solid #414f23;
padding: 6px;
text-align: left;
font-size: small;
}
#content .summary tbody td {
border-left: 1px solid #9cac7c;
padding: 4px;
border-bottom: 1px solid #9cac7c;
font-size: 8pt;
}
#local.spring{
width: 215px;
}
@@ -184,4 +67,77 @@
#footer.spring img {
float: right;
padding-right: 20px;
}
}
.errors {
font-weight: bold;
text-align: left;
color: #600;
}
.errors ul {
list-style: none;
}
.section {
width: 505px;
float: left;
margin-bottom: 5px;
}
.field {
float:left;
}
.field .label {
float: left;
padding-top: 5px;
padding-right: 5px;
font-weight: bold;
width: 150px;
text-align: right;
}
.field .input {
float: left;
width: 250px;
text-align: left;
}
.field .output {
float: left;
width: 250px;
padding-top: 5px;
text-align: left;
}
.buttonGroup {
clear: both;
text-align: right;
}
.buttonGroup input[type="submit"], .buttonGroup input[type="button"], .buttonGroup a {
margin-right: 5px;
}
.summary {
width: 100%;
border: 1px solid #414f23;
border-collapse: collapse;
}
.summary thead th {
border-left: 1px solid #414f23;
background: #fff url(../images/th.bg.gif) 0 100% repeat-x;
border-bottom: 1px solid #414f23;
padding: 6px;
text-align: left;
font-size: small;
}
.summary tbody td {
border-left: 1px solid #9cac7c;
padding: 4px;
border-bottom: 1px solid #9cac7c;
font-size: 8pt;
}