Previously is used <table> tags in JSF forms. I notice that it is better to use panelGrid tag instead of it, since it is easier to use and simpler.
Previously, I used an extra <td> for <h:message > tag and give it's width to 300 to prevent form moving to left when messages appears.
Now, I'm using width attribute of <h:panelGrid> tag , but it is not my desire perform.
When any error message appears, the whole form moves left and then messages appear in front of each input texts .
I used width attribute of message tag, but it not worked good.
Should I have to back to use <table> instead of <h:panedGrid> ?
<?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">
<h:head>
<title>Facelet gg</title>
</h:head>
<h:body>
<center>
<h:form>
<h:panelGrid columns="3" width="400">
<h:outputLabel value="Username:"/>
<h:inputText id="username" value="#{loginBean.username}" required="true">
<f:validateLength maximum="30" minimum="3"/>
</h:inputText>
<h:message for="username" />
<h:commandButton value="submit" action="home"/>
</h:panelGrid>
</h:form>
</center>
</h:body>
</html>
It's normal behavior because the width attribute of the h:panelGrid is for the entire table and not for a particular column, you can check that in it's java docs.
However, you can specify a width for each column by defining CSS classes for columns using the attribute columnClasses:
Comma-delimited list of CSS style classes that will be applied to the
columns of this table. A space separated list of classes may also be
specified for any individual column. If the number of elements in this
list is less than the number of actual column children of the UIData,
no "class" attribute is output for each column greater than the number
of elements in the list. If the number of elements in the list is
greater than the number of actual column children of the UIData, the
elements at the posisiton in the list after the last column are
ignored.
So, in your example, assuming that you have a style.css file in your css library, you can add something like this to it:
.firstColumn {
width: 100px;
}
.secondColumn {
width: 100px;
}
.thirdColumn {
width: 300px;
}
After including your css file using:
<h:outputStylesheet library="css" name="styles.css"/>
you can use it in your h:panelGrid like following:
<h:panelGrid columns="3" columnClasses="firstColumn,secondColumn,thirdColumn ">
<h:outputLabel value="Username:"/>
<h:inputText id="username" value="#{loginBean.username}" required="true">
<f:validateLength maximum="30" minimum="3"/>
</h:inputText>
<h:message for="username" />
<h:commandButton value="submit" action="home"/>
</h:panelGrid>
Related
In developing a webpage, I'm adjusting a Primeface table with a search field at the top. The search field is supposed to work searching for the content of almost all columns in accordance to what the user types. The following is an image of the table now:
In order for the top field to work as intended, it seems there is a need to activate each desired column's search system (better understanding can be seen in Primeface's own show case page). Those fields, though, are visually undesired and so have been hidden in the .css file with the code
.filter_box{
width: 0px;
height: 0px;
opacity: 0 !important;
}
As a result, the search field isn't showing anymore, but the space where it lies continues leading to a design problem (see image above: the red square at the left points out the space where the hidden space field is and the arrow at the right points out the desired design).
As a newbie in web developing, my question is: how can I use the search system, not show it and not leave such design flaws behind? Is it possible to use my search field at the top fully without using Primeface's search system? (I tried simply erasing that part in the column's configuration, but it didn't work since the search field at the top stop showing the results)
As complement, here is my code now:
<ui:composition template="/logged_template.xhtml">
<ui:define name="content">
<h:form id="hidden_misc">
<h:inputHidden value="#{equipMiscBean.setList(usuariosBeanCrt.usuario.nivelAcesso, usuariosBeanCrt.usuario.empresas)}" />
</h:form>
<h:form id="misc">
<p:panel styleClass="tabela_view" visible="#{dash_menu.get_menu_access(usuariosBeanCrt.usuario,'4')}" >
<p:dataTable
id="equip_table"
value="#{equipMiscBean.list_equip}"
widgetVar="itensTable"
var="item"
emptyMessage="Itens não encontrados"
filteredValue="#{equipMiscBean.list_equip_filtered}" >
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Busca: " />
<p:inputText id="globalFilter"
onkeyup="PF('itensTable').filter()"
style="min-width: 200px"
placeholder="Entre com a palavra chave"/>
</p:outputPanel>
</f:facet>
<!--Column Equipamento-->
<p:column
headerText="Equipamento"
filterBy="#{item.nome}"
filterMatchMode="contains"
filterable="true" >
<f:facet name="filter">
<p:inputText
onchange="PF('itensTable').filter()"
disabled="true"
class="filter_box"
/>
</f:facet>
<h:outputText value="#{item.nome}"/>
</p:column>
...
<!--Column Details-->
<p:column
headerText="Detalhes"
style="width: 80px; text-align: center;" >
<h:outputFormat class="ui-button" value="#{item.linkTable}" escape="false" />
</p:column>
</p:dataTable>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
I managed to solve the problem. This was done by adding rendered="false" to the search field facet's specification.
<f:facet name="filter">
<p:inputText
onchange="PF('itensTable').filter()"
disabled="true"
rendered="false"
/>
</f:facet>
With that done, the .css change with filter_box is no longer required and the search system works correctly.
i have a <p:datable> with <p:column> , inside each column i have a <p:inputTex>..
i'm wondering if there is a way to make all these <p:inputTex> readOnly without doing that manually (readOnly="true" for each <p:inputTex>) because i have a lot of columns..
thanks in advance
The OnmiFaces massAttribute is designed specifically for this.
From their showcase (slightly adapted for this case):
<o:massAttribute name="readonly" value="#{formBean.shouldBeReadonly}" target="javax.faces.component.UIInput">
<h:outputLabel for="input1" />
<h:inputText id="input1" />
<h:outputLabel for="input2" />
<h:inputText id="input2" />
<h:outputLabel for="input3" />
<h:inputText id="input3" />
</o:massAttribute>
The target attribute is to make sure only input components are, well... targeted and not the outputs or other components. You can also use a static value of 'true' instead of referencing a getter in a bean.
Among most primefaces component on my screen, I happen to have used an h:inputHidden on my xhtml page as I needed a hidden field to store/update a bean field value.
<h:inputHidden id="calendarValueHidden" value="#{myCdiBean.calValue}"/>
Even though it is not visible, but I don't know why it is taking space on the screen which has disturbed other components of the page. Even display:none !important is not working on the input hidden component.
The problem symptoms indicate a common starter's mistake: declaring it as an immediate child of a <h:panelGrid>. Like so:
<h:panelGrid columns="1">
<h:inputText ... />
<h:inputText ... />
<h:inputHidden ... />
<h:inputText ... />
</h:panelGrid>
The <h:panelGrid> generates a HTML <table> and, as documented, it will put every direct child in its own table cell <td>. The generated HTML output looks like this:
<table>
<tbody>
<tr><td><input type="text" /></td></tr>
<tr><td><input type="text" /></td></tr>
<tr><td><input type="hidden" /></td></tr>
<tr><td><input type="text" /></td></tr>
</tbody>
</table>
A <td> has by default some margin and padding which totally explains your problem. You should have noticed it when inspecting the HTML output and CSS styles in browser's builtin developer toolset (press F12 or rightclick, Inspect Element).
You basically want to group the <h:inputHidden> along with the desired <h:inputText> inside the same table cell. You can use <h:panelGroup> for that.
<h:panelGrid columns="1">
<h:inputText ... />
<h:panelGroup>
<h:inputText ... />
<h:inputHidden ... />
</h:panelGroup>
<h:inputText ... />
</h:panelGrid>
This will end up in the generated HTML output as below, exactly as you intented:
<table>
<tbody>
<tr><td><input type="text" /></td></tr>
<tr><td><input type="text" /><input type="hidden" /></td></tr>
<tr><td><input type="text" /></td></tr>
</tbody>
</table>
Unrelated to the concrete problem, using tables for layout and positioning is bad. Use divs and CSS.
The problem is, I placed the hidden field inside the panel grid, just after the component, the value of which it holds. I took it out of the panel grid and placed it in the end just before the end of the form tag. Problem solved.
Looks like a panel grid does not take a hidden field for actually a literally non-present component. It is still counted by a panel grid because it is still in dom. For an element to be an uncountable element in panel grid, it has to be unrendered (rendered="false"). But then it also becomes totally inaccessible and its value wont be available as it is no more in dom.
Sorry JSF is not my main language
I have a JSF Composite Component named validatedInputTextQuestion. It's essentially a bold label, then a textbox on first line.. next line is a note about said inputText, and below that is where my validation message would show.
<cc:implementation>
<b>#{cc.attrs.questionLabel} : </b>
<h:inputText value="#{cc.attrs.bindingValue}" id="checkSpecs" required="#{cc.attrs.required}" size="15" label="#{cc.attrs.errorLabel}">
<f:validateLength minimum="#{cc.attrs.minLength}" maximum="#{cc.attrs.maxLength}" />
</h:inputText>
<br />
<b>#{cc.attrs.notes}</b>
<br />
<h:message for="checkSpecs" style="color:red" />
<br />
</cc:implementation>
not all instances of this template have a note. but when I test out this page there is a extra break above my error message. Which is to be expected as that is what my template does... What i'd like to know is if there is a dynamic way of having this note attribute take up space if there is data.. I know in Silverlight I could use a grid and set a row definition height of Auto... or use a boolean to visibilty converter, but i can't find the equivalent in JSF. Can someone help point me to a solution for this?
i have only litle overview with css so i ask, i have this form
<h:form>
<h:outputLabel1 value="some text1"/>
<h:outputText1 value="someOutputtext1 />
.
.
<h:outputLabelN value="some textN"/>
<h:outputTextN value="someOutputtextN/>
<h:form/>
result is some like this :
some text1 someOutputtext2
some textN someOutputtextN
how set offset margin via style="" attributte from beginning of "some text1" to beginning to "someOutputtext2" i want reach than each output text will have same starting position, Thanks for much any advice.
Use a h:panelGrid to create the form.
Like this:
<h:form>
<h:panelGrid id="panel" columns="2">
<h:outputLabel value="some text1"/>
<h:outputText value="someOutputtext1 />
<h:outputLabel value="some textN"/>
<h:outputText value="someOutputtextN/>
</h:panelGrid>
<h:form/>
I recomend you to add a new column of messages to handle validation errors, the tag <h:outputLabel1> doesn't exist, use <h:outputLabel >and ad a id attribute to mark a field with a unique name.
Sorry for my bad english