Templating in JSF2.1: How does <h:commandButton> call his action? - jsf

In according to this post, I want to redesign my template, because I have the same issue.
My <h:commandButton>'s are not called.
EDIT: I implement a way to make a template from this tutorial: KLICK
Here's my new main template-client called app.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="./layout/layout.xhtml">
<ui:define name="header">
<ui:include src="./misc/header.xhtml"/>
</ui:define>
<ui:define name="rightColumn">
Ads here
</ui:define>
<ui:define name="leftColumn">
<ui:include src="./misc/sideBar.xhtml"/>
</ui:define>
<ui:define name="content">
<h:panelGroup id="contentPanel">
<ui:include src="#{appController.content}.xhtml" />
</h:panelGroup>
</ui:define>
<ui:define name="footer">
<ui:include src="./misc/footer.xhtml"/>
</ui:define>
</ui:composition>
</body>
</html>
The master-layout page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./css/default.css" rel="stylesheet" type="text/css" />
<link href="./css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
<style type="text/css" media="all">
body
{
background-color: #2b3a3c;
color: #2d2e2e;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.2em;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
#outerWrapper
{
background-color: #fff;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 100%;
}
#outerWrapper #header
{
background-color: #8ab573;
border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 1.5em;
font-weight: bold;
line-height: 1.7em;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn
{
background-color: #eef6ed;
border-left: solid 1px #8ab573; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 180px;
height: 200px;
}
#outerWrapper #contentWrapper #leftColumn
{
background-color: #eef6ed;
border-right: solid 1px #8ab573; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 180px;
height: 200px;
}
#outerWrapper #contentWrapper #content
{
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper .clearFloat
{
clear: both;
display: block;
}
#outerWrapper #footer
{
background-color: #8ab573;
border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 1.5em;
font-weight: bold;
line-height: 1.7em;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<ui:insert name="header"/>
</div>
<div id="contentWrapper">
<div id="rightColumn">
<ui:insert name="rightColumn"/>
</div>
<div id="leftColumn">
<ui:insert name="leftColumn"/>
</div>
<div id="content">
<ui:insert name="content"/>
</div>
<br />
</div>
<div id="footer">
<ui:insert name="footer"/>
</div>
</div>
</body>
</html>
And this is one of the Pages, which gets included. EDIT: I set in the managed bean this page as default. The menu at the left side doesn't do anything at the moment. Because it isn't needed at the moment. The only thing i want is that this action gets called if i click on this button: <h:commandButton id="btn_plan" value="Planen" action="#{hldyPlanningController.addHoliday()}" style="width: 170px; height: 30px"/>
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
</f:facet>
</h:head>
<h:body>
<h:form id="frm_hldy_plan">
<p:panelGrid style="width: 100%;" >
<f:facet name="header">
<p:row>
<p:column colspan="2" style="height:50px;">
Urlaubsplanung
</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width: 420px; vertical-align: top;" colspan="1">
<p:panel style="font-size: 12px; width: 420px; position: relative; border: 1px solid gray">
<f:facet name="header">
Urlaubsantrag Formular
</f:facet>
<p:panelGrid id="pnl_userinfo" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Persönliche Informationen</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:120px">
<h:outputText value="Name:"/>
</p:column>
<p:column>
<h:outputText value="#{loginController.sessionData.user_name}" />
</p:column>
</p:row>
<p:row>
<p:column style="width:120px">
<h:outputText value="Team:" />
</p:column>
<p:column>
<h:outputText value="#{loginController.sessionData.teams_name}" />
</p:column>
</p:row>
</p:panelGrid>
<br/>
<p:panelGrid id="pnl_time" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Zeitraum</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="cld_startdate" value="Startdatum:" />
</p:column>
<p:column>
<p:calendar value="#{hldyPlanningController.startdate}" id="cld_startdate" showOn="button" pattern="dd.MM.yyyy" required="true" requiredMessage="Startdatum ist ein Pflichtfeld!" showWeek="true"/>
</p:column>
</p:row>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="cld_enddate" value="Enddatum:" />
</p:column>
<p:column>
<p:calendar value="#{hldyPlanningController.enddate}" id="cld_enddate" showOn="button" pattern="dd.MM.yyyy" required="true" requiredMessage="Enddatum ist ein Pflichfeld!" showWeek="true"/>
</p:column>
</p:row>
</p:panelGrid>
<br/>
<p:panelGrid id="pnl_misc" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Weiteres</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="opt_hType" value="Typ:"/>
</p:column>
<p:column>
<p:selectOneButton value="#{hldyPlanningController.type}" id="opt_hType" required="true" requiredMessage="Typ ist ein Pflichtfeld!">
<f:selectItem itemLabel="Urlaub" itemValue="U" />
<f:selectItem itemLabel="Absetzen" itemValue="A" />
</p:selectOneButton>
</p:column>
</p:row>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="txta_note" value="Bemerkung:"/>
</p:column>
<p:column>
<p:inputTextarea maxlength="45" rows="2" cols="30" value="#{hldyPlanningController.note}" id="txta_note"/>
</p:column>
</p:row>
</p:panelGrid>
<br/>
<p:panelGrid id="pnl_actions" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Aktion</p:column>
</p:row>
</f:facet>
<p:row>
<p:column>
<h:commandButton id="btn_plan" value="Planen" action="#{hldyPlanningController.addHoliday()}" style="width: 170px; height: 30px"/>
</p:column>
<p:column>
<h:commandButton id="btn_submit" value="Abschicken" style="width: 170px; height: 30px"/>
</p:column>
</p:row>
</p:panelGrid>
</p:panel>
</p:column>
<p:column colspan="1" style="vertical-align: top;">
<p:panel style="font-size: 12px; border: 1px solid gray;">
<f:facet name="header">
Mitarbeiter, die in diesem Zeitraum auch Urlaub geplant haben
</f:facet>
<p:schedule value="#{calendarController.eventModel}" widgetVar="myschedule"></p:schedule>
</p:panel>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</h:body>
</html>
All Beans are #MangedBean and #SessionScoped. I'm using JSF2.1 with Primefaces 3.4.1 on Tomcat 7.x;
I'm new to the JSF Framework and can't figure out what i'm doing wrong in this case. Please help me.
Thanks a lot.


I propose 2 methods to solve your issue:
1- Put the commandButton outside the panel grid, just before the form tag as follows:
<h:commandButton action="#{ficheDescControl.edit()}" value="Valider" />
</h:form>
2- use the UI:composite instead of include. I used it and I'm able to trigger CommanButton properly. You can take a look of a question of mine where the command button works:
How to pass a bean from jsf to another using templating?

Related

How can I set border to panelGroup through selectedBooleanCheckBox

I have selectBooleanCheckbox and h:panelGroup in xhtml page. I want set the border to panelGroup when box value is checked
Here the code:
<p:fieldset legend="Параметры печати" style="margin:0px; margin-top: 0px; padding-bottom: 0px; border: 1px solid" >
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:selectBooleanCheckbox value="#{priceListUI.borderCheck}" />
<h:outputText value="Border" />
</p:fieldset>
and <h:panelGroup>, i need set border to external block:
<h:panelGroup styleClass="ui-g-5 box"
style="padding: 15px; border: solid 1px; font-size: 16px;height: 202px;min-width:340px; position: relative">
<h:panelGroup style="height:44px; line-height: 1.4em">
<p>#{product.product.name}</p>
</h:panelGroup>
<h:panelGroup styleClass="ui-g" id="svg" style="width: 100%; display: block;">
<svg class="barcode bc-#{product.productId}"
style="position: absolute;right: 20px; top: 80px;"
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">
</svg>
</h:panelGroup>
<h:panelGroup style="height: 20px; display: inline; position: absolute; bottom: 15px;">
Цена: #{util.fDouble(product.product.type eq 2? product.sellingPrice * 1000.0: product.sellingPrice)} тг
</h:panelGroup>
<script>
draw('#{product.product.code}', #{product.productId});
function draw(code, productId) {
var arr = {
displayValue: true,
fontSize: 16,
height: 24
};
if (code.length === 8 || code.length === 13) {
arr["format"] = "EAN" + code.length;
}
var className = ".bc-" + productId.toString();
JsBarcode(className, code, arr);
}
</script>
</h:panelGroup>
In Bean class there are getters and setters for checkbox
Can anyone help?

You can use the styleClass attribute on you panelgrid, and set the class according to the checkbox boolean value.
Example:
<h:head>
<style type="text/css">
.myBorderClass {
border: #000000 solid 10px;
}
</style>
</h:head>
<f:view>
<h:form>
<p:selectBooleanCheckbox value="#{myBean.check}">
<p:ajax update="grid"/>
</p:selectBooleanCheckbox>
<h:panelGrid id="grid" styleClass="#{myBean.check ? 'myBorderClass':''}">
<h:outputLabel>
test label
</h:outputLabel>
</h:panelGrid>
</h:form>
</f:view>

primefaces datatable filter selectCheckboxMenu with bootsfaces

I am using the primefaces datatable with bootsfaces, and there is a CSS conflict that I would like to work around.
Implementing the filter example from the primefaces showcase:
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
gives me this result:
datatable filter example good
However, adding a bootsfaces component to the page, eg (the only change is to add an empty <b:inputtext> element):
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<b:inputText></b:inputText>
<p:dataTable var="car" value="#{dtFilterView.cars}" widgetVar="carsTable"
emptyMessage="No cars found with given criteria" filteredValue="#{dtFilterView.filteredCars}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.id}" headerText="Id" footerText="contains" filterMatchMode="contains">
<h:outputText value="#{car.id}" />
</p:column>
<p:column filterBy="#{car.year}" headerText="Year" footerText="lte" filterMatchMode="lte">
<f:facet name="filter">
<p:spinner onchange="PF('carsTable').filter()" styleClass="year-spinner">
<f:converter converterId="javax.faces.Integer" />
</p:spinner>
</f:facet>
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="#{car.brand}" headerText="Brand" footerText="exact" filterMatchMode="exact" filterStyle="width: 100px">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('carsTable').filter()" >
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.brands}" />
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{car.brand}" />
</p:column>
<p:column filterBy="#{car.color}" headerText="Color" footerText="in" filterMatchMode="in" filterStyle="margin-bottom 0px">
<f:facet name="filter">
<p:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" panelStyle="width:125px" scrollHeight="150">
<f:selectItems value="#{dtFilterView.colors}" />
</p:selectCheckboxMenu>
</f:facet>
<h:outputText value="#{car.color}" />
</p:column>
<p:column filterBy="#{car.sold}" headerText="Status" footerText="equals" filterMatchMode="equals">
<f:facet name="filter">
<p:selectOneButton onchange="PF('carsTable').filter()">
<f:converter converterId="javax.faces.Boolean" />
<f:selectItem itemLabel="All" itemValue="" />
<f:selectItem itemLabel="Sold" itemValue="true" />
<f:selectItem itemLabel="Sale" itemValue="false" />
</p:selectOneButton>
</f:facet>
<h:outputText value="#{car.sold ? 'Sold': 'Sale'}" />
</p:column>
<p:column filterBy="#{car.price}" headerText="Price" footerText="custom (min)" filterFunction="#{dtFilterView.filterByPrice}">
<h:outputText value="#{car.price}">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:outputText>
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
gives this result:
primefaces datatable filter style error
The dropdown box for the filters has its margin changed, causing the down arrow to not be in the correct position. The text is also reduced to 0.85.
Is there a way that I can combine bootsfaces with primefaces datatable and maintain the primefaces drop-down menu formatting?

Thanks Stephan - great work on bootsfaces btw, it's a lot of fun to program with.
Your changes didn't quite match the primefaces example on my system, but they were an improvement, and gave me a good insight into how to make my own changes.
Using these style overrides worked better on my system:
<style>
.ui-widget {
font-size: 16px !important;
}
.ui-selectcheckboxmenu-label {
margin-bottom: 0px;
}
.ui-selectcheckboxmenu-trigger {
width: auto !important;
}
.ui-selectonemenu-trigger {
width: auto !important;
}
.ui-selectcheckboxmenu-label {
font-weight: normal !important;
}
label{
font-weight: normal !important;
}
body {
line-height: 18px !important;
}
</style>

It's not perfect yet, but adding these few lines of CSS code make the BootsFaces version look almost perfectly like the original, PrimeFaces-only version:
<h:head>
<title>Facelet Title</title>
<style>
.ui-widget {
font-size: 17.6px !important;
}
* {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
*:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
body {
margin: 8px !important;
}
</style>
</h:head>
However, most of these settings might affect the BootsFaces components. Setting the font size to 0.85 is almost certainly a bug in BootsFaces, which we're going to solve, but the other settings look like different approaches to resetting the CSS default settings of the browser. In other words: fixing the look and feel of complex PrimeFaces component might ruin the look and feel of BootsFaces components.

PrimeFaces ajax not updating form components

I have been trying to update form components by using primefaces ajax . but update property do not update .
Let me elaborate:
I have two selectonemenu in my form and I want to take the selected values from the menus and on submit button click I want the dataTable to be updated and populated with the respective data ..
<p:outputLabel id="state" value="State Name"></p:outputLabel>
<p:selectOneMenu id="statemenu" style="width:300px;"
value="#{MenuBean.state}">
<f:selectItem itemLabel="Select One"></f:selectItem>
<f:selectItems value="#{MenuBean.stateList}"></f:selectItems>
</p:selectOneMenu>
<br></br>
<p:outputLabel value="District"></p:outputLabel>
<p:selectOneMenu id="dist" style="width:300px;"
value="#{MenuBean.district}">
<f:selectItem itemLabel="Select One"></f:selectItem>
<f:selectItems value="#{MenuBean.districtList}"></f:selectItems>
</p:selectOneMenu>
<p:commandButton id="btnSubmit" value="Submit" type="submit"
partialSubmit="true" process="statemenu,dist,#this"
actionListener="#{MenuBean.setVisiblity}"
action="#{MenuBean.getValues}"
title="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; font-size: 14px; font-weight: normal'>
</p:commandButton>
Here is the Backing Bean
public void getValues() {
System.out.println("getting the values");
DataTable.getDataTable(state, district);
System.out.println(DataTable.Filter);
System.out.println(DataTable.isLoaded);
System.out.println(state);
System.out.println(district);
}
public void setVisiblity(ActionEvent event) {
DataTable.Filter = false;
DataTable.isLoaded = true;
System.out.println(event.getSource().toString());
System.out.println("Enters the actionListener");
}
Here is the datatable i want to render and filter panel i want to hide on click
<p:dataTable id="disptable" var="table" lazy="true"
rowKey="#{table.sheet_no}" selectionMode="single"
selection="#{DataTable.selectedSheet}" scrollable="true"
scrollHeight="115" rendered="#{DataTable.loaded}"
style="widht:auto ; margin-left:420px;margin-right:30px ;box-shadow: 10px 10px 25px #888888;"
widgetVar="tabl" emptyMessage="No Records to display.">
<p:column headerText="Sheet Number" style="width:25%">
<h:outputLabel value="#{table.sheet_no}"></h:outputLabel>
</p:column>
<p:column headerText="State" style="width:25%">
<h:outputLabel value="#{table.state_cd}"></h:outputLabel>
</p:column>
<p:column headerText="District" style="width:25%">
<h:outputLabel value="#{table.district_cd}"></h:outputLabel>
</p:column>
<f:facet name="footer">
<p:commandButton id="selectButton" title="Show Complete Details"
icon="./images/show.png" update=":form:disp"
oncomplete="PF('Dialog').show()" process="#this,disptable"
style="height:25px;" ajax="true" iconPos="center" />
<p:commandButton style="height:25px;" id="addCart"
title="Add to Cart" icon="./images/cart.png" global="false" />
<p:commandButton style="height:25px;" id="location"
update=":form:tabs:MapDetails" process="#this,disptable"
title="Show Co-ordinates" icon="./images/cart.png" global="false" />
</f:facet>
</p:dataTable>
<h:panelGrid id="filter" columns="1" cellpadding="10" cellspacing="2"
rendered="#{DataTable.filter}"
style="position:absolute;bottom:15px;right:80px;border: 1px solid #1f497d;box-shadow: 10px 10px 25px #888888;
height:auto;width:600px;Text-align:center;">
<p:outputLabel value="Filter your search to get result."></p:outputLabel>
</h:panelGrid>
</h:panelGrid>
Here is the whole page
<?xml version="1.0" encoding="ISO-8859-1" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="./css/extra-styles.css" rel="stylesheet" type="text/css" />
<link href="./css/menustyles.css" rel="stylesheet" type="text/css" />
<title>SOI MAP TRANSACTION REGISTRY :: MAP</title>
</h:head>
<body>
<h:form id="form">
<f:event type="preRenderView" listener="#{DataTable.init}" />
<div id="header">
<div style="height: 151px;">
<img id="logo"
style="position: relative; left: 60px; height: 146px; width: 100px"
src="images\img.gif" />
<h:panelGrid id="panel1" columns="1"
style="position: absolute; bottom: auto; left: 175px; right: auto; top: 30px ">
<h:outputText id="output1" value="Survey of India"
style='line-height: normal; font-variant: normal; color: #400040; text-transform: none; font-style: normal; font-size: xx-large; font-family: "Times New Roman", Serif; font-weight: normal'></h:outputText>
<h:outputText styleClass="shadow" value="Map Transaction Registry"
style='font-style: italic; font-size: xx-large; font-family: Georgia, "Times New Roman", Serif; font-weight: normal'
id="shadow"></h:outputText>
</h:panelGrid>
<div id="div1"
style="height: 5px; widht: auto; background-color: #CDCDCD; position: relative; top: 12px; bottom: auto; left: auto; right: auto"></div>
<hr id="hr"
style="height: 5px; widht: auto; position: relative; top: 3px; bottom: auto; left: auto; right: auto" />
</div>
<div id="div2"
style="background: #616063; height: 44px; width: auto; position: relative"></div>
<div id='cssmenu'>
<ul>
<li><a href='index.xhtml'><span>Home</span></a></li>
<li><a href='#'><span>About Us</span></a></li>
<li><a href='#'><span>Our Products</span></a></li>
<li><span>Search Image</span></li>
<li><a href='#'><span>Contact</span></a></li>
<li class='last'><a href='signup.xhtml'><span>New
User</span></a></li>
</ul>
</div>
</div>
<p:fieldset rendered="#{!login_bean.validationComplete}">
<img
style="position: absolute; left: 10px; top: 45px; height: 45px; width: 45x"
src="images\login.gif" />
<p:growl id="growl" showDetail="false" sticky="false" life="3000"
autoUpdate="TURE" />
<h:panelGrid columns="4" class="formTable"
style="position: relative; left: 35px; top: 6px ;">
<p:outputLabel value="Login/Email" style='font-size: 16px;' />
<p:inputText value="#{login_bean.username}" id="username"
required="true" requiredMessage="Please Enter the username"
style="height:15px; width:auto;" />
</h:panelGrid>
<h:panelGrid columns="4" class="formTable"
style="position: relative; left: 35px; top:6px">
<p:outputLabel value="Password" style='font-size: 16px;' />
<br />
<p:password style="height:15px;position: relative; left: 8px"
id="password" value="#{login_bean.password}" required="true"
requiredMessage="Please Enter the Password">
</p:password>
</h:panelGrid>
<h:panelGrid columns="3" class="formTable"
style="position: relative; left: 80px; top: 6px">
<br />
</h:panelGrid>
<h:commandButton id="btnLogin" value="Login"
action="#{login_bean.check}" type="submit" update="true"
style="position: relative; left:245px; top:-20px ; height:25px;widht:38;text-align: center; font-size: 14px;" />
<p:commandLink id="link"
style="position: relative; left:70px; top:-20px ;font-size:13px;"
value="Forgot Password ?"></p:commandLink>
</p:fieldset>
<p:fieldset rendered="#{login_bean.validationComplete}">
<img
style="position: absolute; left: 10px; top: 30px; height: 65px; width: 55px"
src="images\icon.png" />
<h:panelGrid columns="1" class="formTable"
style="position: relative; left: 35px; top: 6px ;">
<p:outputLabel
value="Welcome #{login_bean.username} to Map Tansaction Registry"
style='font-size: 16px; color: red; text-align: center; font-style: bold; font-family: "Times New Roman", Serif; font-weight: bold' />
</h:panelGrid>
<h:panelGrid columns="4" class="formTable"
style="position: relative; left: 55px; top: 6px ;" cellpadding="3"
cellspacing="3">
<h:graphicImage url="images\cart.png"></h:graphicImage>
<h:commandLink value="Cart"
style='font-size: 15px; color:green; text-align: center; font-style: normal; font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal'></h:commandLink>
<h:graphicImage url="images\edit.png"></h:graphicImage>
<h:commandLink value="Edit Details"
style='font-size: 15px; color:green; text-align: center; font-style: normal; font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal'></h:commandLink>
<h:graphicImage url="images\pass.png"></h:graphicImage>
<h:commandLink value="Change Password"
style='font-size: 15px; color:green; text-align: center; font-style: normal; font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal'></h:commandLink>
<h:graphicImage url="images\logout.png"></h:graphicImage>
<h:commandLink value="Logout" action="#{login_bean.logout}"
style='font-size: 15px; color:green; text-align: center; font-style: normal; font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal'></h:commandLink>
</h:panelGrid>
</p:fieldset>
<!-- Search Tab View -->
<p:tabView activeIndex="2">
<p:tab title="Map Sheet">
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Map Sheet No :" />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<br />
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Scale/GSD " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:selectOneMenu tabindex="1" style="height:25px;widht:auto;">
<f:selectItem itemLabel="-- ALL --" itemValue="all"></f:selectItem>
<f:selectItem itemLabel="5000" itemValue="5000"></f:selectItem>
<f:selectItem itemLabel="6000" itemValue="6000"></f:selectItem>
<f:selectItem itemLabel="8000" itemValue="8000"></f:selectItem>
<f:selectItem itemLabel="10000" itemValue="10000"></f:selectItem>
<f:selectItem itemLabel="12500" itemValue="12500"></f:selectItem>
<f:selectItem itemLabel="15000" itemValue="15000"></f:selectItem>
<f:selectItem itemLabel="25000" itemValue="25000"></f:selectItem>
<f:selectItem itemLabel="30000" itemValue="30000"></f:selectItem>
<f:selectItem itemLabel="40000" itemValue="40000"></f:selectItem>
<f:selectItem itemLabel="50000" itemValue="50000"></f:selectItem>
</p:selectOneMenu>
</h:panelGrid>
<br />
<br />
<h:panelGrid style="position:relative; left:165px" columns="2"
cellpadding="2" cellspacing="2">
<p:commandButton value="Reset"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
<p:commandButton id="submit" value="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
</h:panelGrid>
<!-- <h:panelGrid>
<p:graphicImage url="images/tips.png"></p:graphicImage>
<p:outputLabel value="Tips :"></p:outputLabel>
</h:panelGrid> -->
</p:tab>
<p:tab title="Lat/Long">
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Lat BL : " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Lng BL : " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Lat TR : " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Lng TR : " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<br />
<p:commandLink value="Grab bounding from the Map"></p:commandLink>
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Scale/GSD"></p:outputLabel>
<p:selectOneMenu tabindex="1">
<f:selectItem itemLabel="-- ALL --" itemValue="all"></f:selectItem>
<f:selectItem itemLabel="5000" itemValue="5000"></f:selectItem>
<f:selectItem itemLabel="6000" itemValue="6000"></f:selectItem>
<f:selectItem itemLabel="8000" itemValue="8000"></f:selectItem>
<f:selectItem itemLabel="10000" itemValue="10000"></f:selectItem>
<f:selectItem itemLabel="12500" itemValue="12500"></f:selectItem>
<f:selectItem itemLabel="15000" itemValue="15000"></f:selectItem>
<f:selectItem itemLabel="25000" itemValue="25000"></f:selectItem>
<f:selectItem itemLabel="30000" itemValue="30000"></f:selectItem>
<f:selectItem itemLabel="40000" itemValue="40000"></f:selectItem>
<f:selectItem itemLabel="50000" itemValue="50000"></f:selectItem>
</p:selectOneMenu>
</h:panelGrid>
<br />
<h:panelGrid style="position:relative; left:165px" columns="2"
cellpadding="2" cellspacing="2">
<p:commandButton value="Reset"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
<p:commandButton value="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
</h:panelGrid>
</p:tab>
<p:tab title="Name">
<h:panelGrid columns="1">
<p:outputLabel id="state" value="State Name"></p:outputLabel>
<p:selectOneMenu id="statemenu" style="width:300px;"
value="#{DropDown.selectedState}">
<f:selectItem itemLabel="Select One"></f:selectItem>
<f:selectItems value="#{DropDown.stateList}"></f:selectItems>
</p:selectOneMenu>
<br></br>
<p:outputLabel value="District"></p:outputLabel>
<p:selectOneMenu id="dist" style="width:300px;"
value="#{DropDown.selectedDistrict}">
<f:selectItem itemLabel="Select One"></f:selectItem>
<f:selectItems value="#{DropDown.districtList}"></f:selectItems>
</p:selectOneMenu>
</h:panelGrid>
<br />
<h:panelGrid columns="2">
<p:outputLabel value="Scale/GSD"></p:outputLabel>
<p:selectOneMenu tabindex="1">
<f:selectItem itemLabel=" --ALL-- " itemValue="all"></f:selectItem>
<f:selectItem itemLabel="5000" itemValue="5000"></f:selectItem>
<f:selectItem itemLabel="6000" itemValue="6000"></f:selectItem>
<f:selectItem itemLabel="8000" itemValue="8000"></f:selectItem>
<f:selectItem itemLabel="10000" itemValue="10000"></f:selectItem>
<f:selectItem itemLabel="12500" itemValue="12500"></f:selectItem>
<f:selectItem itemLabel="15000" itemValue="15000"></f:selectItem>
<f:selectItem itemLabel="25000" itemValue="25000"></f:selectItem>
<f:selectItem itemLabel="30000" itemValue="30000"></f:selectItem>
<f:selectItem itemLabel="40000" itemValue="40000"></f:selectItem>
<f:selectItem itemLabel="50000" itemValue="50000"></f:selectItem>
</p:selectOneMenu>
</h:panelGrid>
<br />
<h:panelGrid style="position:relative; left:165px" columns="2"
cellpadding="2" cellspacing="2">
<p:commandButton value="Reset"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 14px; font-weight: normal'></p:commandButton>
<p:commandButton id="btnSubmit" value="Submit" type="submit"
partialSubmit="true" process="statemenu,dist,#this"
actionListener="#{DropDown.setVisiblity}"
action="#{DropDown.getValues}" title="Submit"
update="#all"
ajax="true"
style='font-family: font-family : Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; font-size: 14px; font-weight: normal'>
</p:commandButton>
</h:panelGrid>
</p:tab>
<p:tab title="Spec">
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Specification Number :" />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:inputText style="height:20px;width:300px;"></p:inputText>
</h:panelGrid>
<br />
<h:panelGrid columns="2" cellpadding="2" cellspacing="2">
<p:outputLabel value="Scale/GSD " />
<p:outputLabel value="*" style='color:red;' />
</h:panelGrid>
<h:panelGrid>
<p:selectOneMenu tabindex="1" style="height:25px;widht:auto;">
<f:selectItem itemLabel="-- ALL --" itemValue="all"></f:selectItem>
<f:selectItem itemLabel="5000" itemValue="5000"></f:selectItem>
<f:selectItem itemLabel="6000" itemValue="6000"></f:selectItem>
<f:selectItem itemLabel="8000" itemValue="8000"></f:selectItem>
<f:selectItem itemLabel="10000" itemValue="10000"></f:selectItem>
<f:selectItem itemLabel="12500" itemValue="12500"></f:selectItem>
<f:selectItem itemLabel="15000" itemValue="15000"></f:selectItem>
<f:selectItem itemLabel="25000" itemValue="25000"></f:selectItem>
<f:selectItem itemLabel="30000" itemValue="30000"></f:selectItem>
<f:selectItem itemLabel="40000" itemValue="40000"></f:selectItem>
<f:selectItem itemLabel="50000" itemValue="50000"></f:selectItem>
</p:selectOneMenu>
</h:panelGrid>
<br />
<br />
<h:panelGrid style="position:relative; left:165px" columns="2"
cellpadding="2" cellspacing="2">
<p:commandButton value="Reset"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
<p:commandButton value="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face",
"Hoefler Text", Garamond, "Times New Roman", serif;;
font-size: 13px; font-weight: normal'></p:commandButton>
</h:panelGrid>
</p:tab>
</p:tabView>
<!--The tab to Display the Complete Meta data of the sheet selected -->
<p:tabView id="tabs" scrollable="true" orientation="top"
styleClass="tabs" style="position:absolute; top:240px;">
<p:tab title="Meta Data">
<h:panelGrid id="MapDetails">
<h:panelGrid columns="2" cellpadding="2" cellspacing="5"
style="position:relative;left:5px;top:50px">
<p:outputLabel value="Sheet No : " style="font:serif"></p:outputLabel>
<p:outputLabel value="#{DataTable.selectedSheet.sheet_no}"></p:outputLabel>
<p:outputLabel value="Surveyed year : "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
<p:outputLabel value="Publication Year : "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
<p:outputLabel value="Map Projection: "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
<p:outputLabel value="Map Datum : "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
<p:outputLabel value="Place : "></p:outputLabel>
<p:outputLabel value="--"></p:outputLabel>
</h:panelGrid>
<h:panelGrid>
<h:panelGrid style="position:relative;left:-110px;top:-170px">
<div
style="position: absolute; top: 95px; left: 20px; border-bottom-style: solid; border-bottom-width: thin; border-top-style: solid; border-top-color: #000000; height: 104px; width: 202px; bottom: auto; left: 414px; right: auto; border-bottom-color: #000000; border-top-width: thin"></div>
<div
style="border-left-color: #000000; border-right-color: #000000; border-left-style: dashed; border-right-width: medium; border-right-style: dashed; border-left-width: medium; height: 180px; width: 134px; position: absolute; bottom: auto; left: 450px; right: auto; top: 65px"></div>
</h:panelGrid>
<p:outputLabel title="North East Corner Longitude"
value="#{DataTable.selectedSheet.NE_Corner_Long}"
style="position: absolute; bottom: auto; right: 135px; top:75px"></p:outputLabel>
<p:outputLabel title="North West Corner Longitude"
value="#{DataTable.selectedSheet.NW_Corner_Long}"
style="position: absolute; bottom: auto; right: 275px; top: 75px"></p:outputLabel>
<p:outputLabel title="North East Corner Latitude"
value="#{DataTable.selectedSheet.NE_Corner_Lat}"
style="position: absolute; bottom: auto; right: 82px; top: 123px"></p:outputLabel>
<p:outputLabel title="South East Corner Latitude"
value="#{DataTable.selectedSheet.SE_Corner_Lat}"
style="position: absolute; bottom: auto; right: 82px; top: 228px"></p:outputLabel>
<p:outputLabel title="North West Corner Latitude"
value="#{DataTable.selectedSheet.NW_Corner_Lat}"
style="position: absolute; bottom: auto; right: 330px; top: 123px"></p:outputLabel>
<p:outputLabel title="South West Corner Latitude"
value="#{DataTable.selectedSheet.SW_Corner_Lat}"
style="position: absolute; bottom: auto; right: 330px; top: 228px"></p:outputLabel>
<p:outputLabel title="South East Corner Longitude"
value="#{DataTable.selectedSheet.SE_Corner_Long}"
style="position: absolute; bottom: auto; right: 135px; top: 290px"></p:outputLabel>
<p:outputLabel title="Sorth West Corner Longitude"
value="#{DataTable.selectedSheet.SW_Corner_Long}"
style="position: absolute; bottom: auto; right: 275px; top: 290px"></p:outputLabel>
<h:panelGrid columns="2" cellpadding="3" cellspacing="5"
style="postion:absolute;margin-left:300px;margin-top:85px">
<p:outputLabel value="State : "></p:outputLabel>
<p:outputLabel value="#{DataTable.selectedSheet.state_cd}"></p:outputLabel>
<p:outputLabel value="District : "></p:outputLabel>
<p:outputLabel value="#{DataTable.selectedSheet.district_cd}"></p:outputLabel>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</p:tab>
</p:tabView>
<h:panelGrid id="render" style="margin-top:200px;">
<!-- The Datatable -->
<p:dataTable id="disptable" value="#{DataTable.dataTable}"
var="table" lazy="true" rowKey="#{table.sheet_no}"
selectionMode="single" selection="#{DataTable.selectedSheet}"
scrollable="true" scrollHeight="115" rendered="#{DataTable.loaded}"
style="widht:auto ; margin-left:420px;margin-right:30px ;box-shadow: 10px 10px 25px #888888;"
widgetVar="tabl" emptyMessage="No Records to display.">
<p:column headerText="Sheet Number" style="width:25%">
<h:outputLabel value="#{table.sheet_no}"></h:outputLabel>
</p:column>
<p:column headerText="State" style="width:25%">
<h:outputLabel value="#{table.state_cd}"></h:outputLabel>
</p:column>
<p:column headerText="District" style="width:25%">
<h:outputLabel value="#{table.district_cd}"></h:outputLabel>
</p:column>
<f:facet name="footer">
<p:commandButton id="selectButton" title="Show Complete Details"
icon="./images/show.png" update=":form:disp"
oncomplete="PF('Dialog').show()" process="#this,disptable"
style="height:25px;" ajax="true" iconPos="center" />
<p:commandButton style="height:25px;" id="addCart"
title="Add to Cart" icon="./images/cart.png" global="false" />
<p:commandButton style="height:25px;" id="location"
update=":form:tabs:MapDetails" process="#this,disptable"
title="Show Co-ordinates" icon="./images/cart.png" global="false" />
</f:facet>
</p:dataTable>
<!--The Dialog to display the selected sheet detials -->
<p:dialog header="Detail" widgetVar="Dialog" resizable="false"
id="carDlg" modal="true">
<h:panelGrid id="disp" columns="2" cellpadding="4" cellspacing="4"
style="margin:0 auto;">
<f:facet name="header">
</f:facet>
<h:outputText id="sheet" value="Sheet No:" />
<h:outputText value="#{DataTable.selectedSheet.sheet_no}"
style="font-weight:bold" />
<h:outputText id="state" value="State:" />
<h:outputText value="#{DataTable.selectedSheet.state_cd}"
style="font-weight:bold" />
<h:outputText id="district" value="District:" />
<h:outputText value="#{DataTable.selectedSheet.district_cd}"
style="font-weight:bold" />
</h:panelGrid>
</p:dialog>
<!-- Panel Grid which display the Filter text -->
<h:panelGrid id="filter" columns="1" cellpadding="10" cellspacing="2"
rendered="#{DataTable.filter}"
style="position:absolute;bottom:15px;right:80px;border: 1px solid #1f497d;box-shadow: 10px 10px 25px #888888;
height:auto;width:600px;Text-align:center;">
<p:outputLabel value="Filter your search to get result."></p:outputLabel>
</h:panelGrid>
</h:panelGrid>
<!-- Ajax Status for ajax request -->
<p:ajaxStatus onstart="PF('statusDialog').show();"
onsuccess="PF('statusDialog').hide();" />
<!-- Dialog for ajax Status -->
<p:dialog modal="true" widgetVar="statusDialog" draggable="false"
closable="false" maximizable="false" resizable="false"
header="Searching">
<p:graphicImage value="/images/loading.gif" />
</p:dialog>
</h:form>
</body>
</html>

you are missing update="distTable" in commandButton
<p:commandButton id="btnSubmit" value="Submit"
partialSubmit="true" process="statemenu,dist,#this"
actionListener="#{MenuBean.setVisiblity}"
action="#{MenuBean.getValues}"
title="Submit"
style='font-family: font-family : Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; font-size: 14px; font-weight: normal'
update="distTable">
</p:commandButton>
that page is a terrible mess. even eclipse refuse to format its content...
multiple suggestions:
put your css, js, images inside /resources/js, /resources/css folders
use <h:outputStylesheet name="css/menustyles.css" /> instead of <link href="./css/menustyles.css" rel="stylesheet" type="text/css" />
use <h:body> instead of <body>
do not use <f:event type="preRenderView" listener="#{DataTable.init}" /> if DataTable is a #ManagedBean, use #PostConstruct instead
prefer conventional names: #{dataTableBean.init} is better than #{DataTable.init}
use <h:graphicImage name="images/img.gif" /> instead of <img src="images\img.gif" />
use / instead of \ in paths
put <p:growl> as direct child of <h:body> or <h:form>
USE CSS CLASSES!!
it's nearly impossible to debug a page coded that way.
i'm sorry, but i give up.

Extended Datatable onrowmouseover does not work properly

I am trying to highlight the rows of a table when mouse is over. Here is the code:
<div style="position: relative; top: 120px; left: 300px">
<h:panelGrid columns="2">
<h:form>
<rich:extendedDataTable onrowmouseover ="this.style.backgroundColor='yellow'"
onrowmouseout="this.style.backgroundColor='white'" value="#{moneyTransferManager.allAccounts}" var="accounts"
selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2"
style="height:170px; width:484px;">
<a4j:ajax execute="#form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}"
render=":res"/>
<f:facet name="header">
<h:outputText value="Hesaplarım"/>
</f:facet>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Hesap Numarası"/>
</f:facet>
<h:outputText value="#{accounts.accountNumber}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Para Birimi"/>
</f:facet>
<h:outputText value="#{accounts.accountCurrency}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="IBAN"/>
</f:facet>
<h:outputText value="#{accounts.iban}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Bakiye"/>
</f:facet>
<h:outputText value="#{accounts.balance}"/>
</rich:column>
</rich:extendedDataTable>
</h:form>
<a4j:outputPanel id="res">
<rich:panel header="Seçilen Hesap:" rendered="#{not empty extTableSelectionBean.selectionItems}">
<rich:list type="unordered" value="#{extTableSelectionBean.selectionItems}" var="sel">
<h:outputText value="#{sel.accountCurrency} - #{sel.iban} - #{sel.balance}"/>
</rich:list>
</rich:panel>
</a4j:outputPanel>
<rich:panel styleClass="top">
<div style="position: relative; left: -3px; top: 23px">
<h:outputText style=" font-size: 12px; font-weight: bold; " value="Yapmak istediğiniz işlem .."></h:outputText>
</div>
<h:form>
<div style="position: relative; left: 160px; top: -3px">
<rich:select value="#{transactionManager.selection}" defaultLabel="Bir işlem seçin...">
<f:selectItem itemValue="0" itemLabel="Hesap Hareketlerini Listele" />
</rich:select>
</div>
<div style="position: relative; left: 380px; top: -22px">
<h:commandButton action="#{transactionManager.accountActivity()}" value="Devam" style="color: #000000; font-weight: bold; width: 70px; height: 21px; background-color: grey; -moz-border-radius: 0px; -webkit-border-radius: 15px;"></h:commandButton>
</div>
</h:form>
</rich:panel>
</h:panelGrid>
</div>
The problem is, only columns 1-2 together or 3-4 together are highlighted like this:
Can anyone tell me the problem? Thanks

This is being caused by the frozenColumns attribute. Remove it if you want all the rows to be selected.

How to right align h:panelGrid?

Im design a navigation bar for a webpage in jsf.
I want some links to be on the right of the bar and some on the left. It doesnt seem to work.
Any ideas?
<h:panelGrid columnus="2">
<h:panelGroup styleClass="alignmentLeft">
<h:panelGrid columns = "2" columnsClasses = "alignmentLeft">
<h:outputLink>... </h:outputLink>
<h:outputText/>
<h:outputLink>... </h:outputLink>
<h:outputText/>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup styleClass="alignmentRight">
<h:panelGrid columns = "2" columnsClasses = "alignmentRight">
<h:outputLink>... </h:outputLink>
<h:outputText/>
<h:outputLink>... </h:outputLink>
<h:outputText/>
</h:panelGrid>
</h:panelGroup>
</h:panelGrid>
.alignmentRight {
text-align : right;
}

Try this out, there was a typing mistake in your coding as well, its the first h:panelGrid 's column you have typed "columnus"
Inside <h:head> the style sheet must be declared.
<h:head>
<h:outputStylesheet name="styles.css"
library="css" />
</h:head>
then in <h:body>
<h:body>
<h:panelGrid columns="2" width="600">
<h:panelGroup>
<h:panelGrid columns="2" columnClasses="alignmentLeft" width="200">
<h:outputLink>...1 </h:outputLink>
<h:outputLink>...2 </h:outputLink>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup>
<h:panelGrid columns="2" columnClasses="alignmentRight" width="200">
<h:outputLink>...3 </h:outputLink>
<h:outputLink>...4 </h:outputLink>
</h:panelGrid>
</h:panelGroup>
</h:panelGrid>
</h:body>
In style sheet (styles.css) the styles are,
.alignmentLeft {
text-align : left;
border: 1px solid black;
background-color: orange;
}
.alignmentRight {
text-align : right;
border: 1px solid black;
background-color: lime;
}

Resources