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
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'm new to primefaces, so I probably did a newbie mistake, but I simply can't google find my answer.
I'm trying to make a hidden panel show after I click on the checkbox, but it doesn't show.
My html looks as follows:
<br></br> Choose one <br></br><br></br>
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’visible’);" >
</p:selectBooleanCheckbox>
<h:outputText value=" click " />
</h:panelGrid>
<p:panel id="testid" header="TESTHDR" style="display:none" >
<h:panelGrid columns="2" cellpadding="10">
<p:selectBooleanCheckbox value="#{selectBooleanView.mTest}">
</p:selectBooleanCheckbox>
<h:outputText value=" test " />
</h:panelGrid>
</p:panel>
The problem is that my testid panel doesn't show after I click on the checkbox.
I'm probably doing the checkbox action listener wrong, but I honestly can't see the problem myself.
change display visible to display block like this because display visible does not exist in css.
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’block’);" >
I think thats it if youre code works fine.
Prime faces mangles IDs similar to ASP.NET. Both ensure that the ID is unique across the page so you get something like id="base_container_child_container_your_control_id"
You should find the way to "unmangle" it. Again in .NET you have control.ClientID which you can get from the server. Not sure about PF equivalent.
Anyhow, the solution would be to add name attribute and use
$('input[name=your-id]') // matches exactly 'your-id'
$('input[name^=your-id]') // matches those that begin with 'your-id' if you have group of them
OR use like selector
id*='value'
I have a loop that contains a list of properties
I would like to display this list on 2 columns, but I can not.
they are displayed by unordered, against if I use c: For Each place of ui: repeat
the problem is resolved
<p:panel id="panlecart2" header ="Caracteristique selon la categorie" toggleable="true" rendered="true" style="width=900px;">
<h:panelGrid id="panlecart" columns="2" cellpadding="5" rendered="true" style="width=900px;">
<ui:repeat var="var1" value="#{composantbean.categorie.proprietes.toArray()}">
<h:outputText value="#{var1.nomProp }(#{var1.unite} )" />
<h:inputText value="" />
</ui:repeat>
</h:panelGrid>
</p:panel>
Haw can I fixe the problem .helpe please :)
You could switch to using <h:dataTable> to iterate over the components:
<h:dataTable var="var1" value="#{composantbean.categorie.proprietes.toArray()}">
<h:column>
<h:outputText value="#{var1.nomProp }(#{var1.unite} )" />
</h:column>
<h:column>
<h:inputText value="" />
</h:column>
</h:dataTable>
Enclose it within a <p:panel> to make it work. Otherwise, make use of <c:forEach> as it's a good fit for your use case.
ui:repeat is rendered in a later phase than c:forEach. Here's an explanation.
c:forEach is the way to go here, since this is invoked in view build time.
ui:repeat is invoked during view render time, so p:panel would have no knowledge of the data being created by ui:repeat.
Okay. So I'm trying to implement a global filter using commandLinks. The idea is to have an alphabet of commandLinks, which a user can then use instead of typing a letter.
So far, I've got filtering working on the column (will add the filterStyle none once the commandLinks are working).
Using chromes debug tool (ctrl-shift+i), and clicking on the command link, i can see the datatable refresh the list. However, it doesn't filter anything.
I've been using primefaces showcase, and this stack overflow post to base my code on, which is below:
<p:dataTable id="availableSpecies" var="species" value="#{bbWizardBean.speciesPaletteList}"
emptyMessage="Add First Species" dynamic="true"
width="120"
widgetVar="speciesPaletteVar"
scrollHeight="250" scrollRows="20" scrollable="true"
styleClass="width-fix-spcPal-ie" style="width:150px; margin-left: auto; margin-right: auto;"
filteredValue="bbWizardBean.speciesPaletteListFilter">
<f:facet name="header">
<h:outputText value="Species Palette" />
<p:commandLink id="globalFilter" value="A" onclick="$('speciesColumn_filter').val('A'),speciesPaletteVar.filter()"/>
</f:facet>
<p:column filterBy="#{species.speciesName}"
headerText="Species" style="font-size:13px;" id="speciesColumn">
<h:outputText id="dragIcon" value="#{species.speciesNameSmall}" style="font-size:11px; background-color:silver; cursor:move;"/>
<h:outputText id="dragIconTooltip" value="..." title="Full Name: #{species.speciesName}" rendered="#{species.speciesNameLength > 10}"/>
<p:tooltip for="dragIconTooltip" />
<p:draggable for="dragIcon" revert="true" />
</p:column>
I've removed the rest of the table to make the codebase smaller. I think I'm screwing up the value I should set, but I'm not quite sure how. Any help would be appreciated! First post, so any suggestions to clean up the question is appreciate ;)
Okay, so for some reason (like i thought), the setting of the val for the filter wasn't working right. You need to add two \'s before the : for some reason. If anyone knows, that would be awesome, but the correct code is:
<p:commandLink id="globalFilter" value="A" onclick="$('#positiveRegulationForm\\:availableSpecies\\:speciesColumn_filter').val('A'),speciesPaletteVar.filter()"/>
Where
positiveRegulationForm is the top form
availableSpecies is the DataTable name
speciesColumn_filter is the filter for the column speciesColumn
Really curious as to why you need the two forward slashes
I'm embedding here a simplified version of a code that is not working for me.
What happens here is that there are 2 forms.
The first form contains an ajaxified <h:commandLink> (Using <f:ajax>)
The second form contains a form with values.
When the <h:commandLink> is pressed, the values in the second form are supposed to be submitted.
What happens in practice is that values are retrieved (the getter function is run) but are not submitted (the setter function never runs).
The <f:ajax> runs because I can see the listener method running and the second form does get rerendered after clicking the <h:commandLink> but, again, the setter functions are never run.
<body>
<h:form prependId="false">
<h:panelGroup >
<h:commandLink >
<f:ajax event="click"
execute=":form_with_values_to_update" render=":form_with_values_to_update"
listener="#{mrBean.clickListenerAction}" />
Do something
</h:commandLink>
</h:panelGroup>
</h:form>
<h:panelGroup>
<h:form id="form_with_values_to_update">
<fieldset>
<ui:repeat value="#{mrBean.aMemberOfBean.aListInAMemberOfBean}" var="listItem">
<h:panelGroup>
<h:outputText value="#{listItem.label}" />
<h:inputText id="contact_details_input"
value="#{listItem.value}" />
</h:panelGroup>
</ui:repeat>
</fieldset>
</h:form>
</h:panelGroup>
</body>
P.S - Using MyFaces JSF 2.1
The commandlink/button has to go in the same form as where the data of interest is in.
If that's not an option due to some design or business restrictions, then you need a second commandlink/button. First move the original commandlink/button back in the right form, give it an id and hide it using CSS display: none;.
Then put the second commandlink/button in the other form which does something like
<h:commandLink onclick="document.getElementById('form_with_values_to_update:linkid').click(); return false;">
Do something
</h:commandLink>