Hi I followed this code but my logout button is not at the right side of menubar.
sample from PF
here is my xhtml page
<h:body>
<p:menubar autoDisplay="false">
<p:menuitem value="Home" url="/index.jsf" />
<p:submenu label="Maintenance" >
<p:menuitem value="Course" url="/views/course/list.jsf" />
<p:menuitem value="Student" url="/index.jsf" />
</p:submenu>
<f:facet name="options">
<p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
</f:facet>
</p:menubar>
</h:body>
You should use a style="float: right;" inside the button or include the property into your css stylesheet.
I am able to get the logout to the right by using the below code
<f:facet name="options">
<p:commandButton type="button" value="Logout" />
</f:facet>
Use: inputText style="margin-right:10px" in the facet... Surely will work.
It will work only in primefaces 3.5 change to primefaces 3.5 and it will work you can verify this at primefaces link primefaces blog
For more details go to primefaces showcase page primefaces showcase menubar sample page for sample code this code is from that sample page
<f:facet name="options">
<p:inputText style="margin-right:10px"/>
<p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
</f:facet>
if your using prime-faces 5, then it should work. Try to browse your application in a web browser instead of the IDE your using to code. Because It's not appear as we expected in the IDE but it's work fine in a web browser. You can also use styleClass inside the tag. insert styleClass="margin-riight:10px" inside the button tag
Related
I tried to use draggable component https://www.primefaces.org/showcase/ui/dnd/draggable.xhtml for inputTextArea component but it does not work for me. Do you know any workarounds for making input components draggable?
My code:
<p:outputPanel>
<p:inputTextarea id="test">
</p:inputTextarea>
</p:outputPanel>
<p:draggable for="test" containment="parent" />
I don't have any errors in console. But drag function does not work as it work for p:panel, for example.
try to wrap the component in a panel and assign "for" to that panel.
<p:outputPanel>
<p:panel id="test">
<p:inputTextarea />
</p:panel>
<p:draggable for="test" containment="parent"/>
</p:outputPanel>
I am working with javaEE, and for my project i used TreeTable and BlockUI to block this table, but i want to make a button appear even if it is blocked
<p:blockUI block=":form:treeTable" widgetVar="tbd" blocked="#{ManagedBean.condition}" />
<h:form id="form">
<p:treeTable id="treeTable" ... >
<f:facet name="header">
<p:commandButton value="SomeAction" actionListener="#{ManagedBean.someAction}" update=":form"/>
</f:facet>
in my example i want to make my commanbutton appear as available even if i use BlockUI
thantk you
This is not a functional problem but a design problem.
As is, the CommandButton is part of the TreeTable, so the CommandButton must be blocked if the TreeTable is blocked.
For sure Raziels answer will work, but a clean solution would be to move the button out of the TreeTable.
<h:form id="form">
<p:commandButton
value="SomeAction"
actionListener="#{ManagedBean.someAction}"
update=":form"
/>
<p:treeTable
id="treeTable"
...
/>
<p:blockUI
block=":form:treeTable"
widgetVar="tbd"
blocked="#{ManagedBean.condition}"
/>
</h:form>
I already Solved this problem by using z-index:99999 inside a style tag
so your code should be like :
<p:blockUI block=":form:treeTable" widgetVar="tbd" blocked="# {ManagedBean.condition}" />
<h:form id="form">
<p:treeTable id="treeTable" ... >
<f:facet name="header">
<p:commandButton value="SomeAction" style="z-index: 99999" actionListener="#{ManagedBean.someAction}" update=":form"/>
</f:facet>
The problem:
I have a MenuItem component that looks like this - <p:menuitem value="Documents" outcome="/portal/admin/documents.xhtml" /> - but it renders into markup that looks like this - <a href="documents.xhtml">
Details:
There are two XHTML pages at play here. The first is index.xhtml at /portal/index.xhtml and the second is admin-widget.xhtml at /portal/home/admin-widget.xhtml.
Relevant part of index.xhtml:
<ui:fragment rendered="...">
<div class="...">
<p:panel styleClass="...">
<f:facet name="header">
<h:outputText value="Administration" />
</f:facet>
<ui:include src="/portal/home/admin-widget.xhtml" />
</p:panel>
</div>
</ui:fragment>
Relevant part of admin-widget.xhtml:
<h:form style="...">
<ui:fragment rendered="...">
<p:menu style="...">
<p:submenu label="Administration Links">
<p:menuitem value="Documents" outcome="/portal/admin/documents.xhtml" />
</p:submenu>
</p:menu>
<h:link value="Documents" outcome="/portal/admin/documents.xhtml" />
</ui:fragment>
</h:form>
The <h:link> below the <p:menu> was just a test, in order to see if the problem was just with the <p:menuitem> or not. However, the <h:link> also renders incorrectly.
The most interesting thing is that when I view the index.xhtml page, the link is incorrect, but if I view the admin-widget.xhtml page directly, the link is correct. So it has to be something with how I am inserting the page, but I'm not sure what I am doing wrong.
I am using PrimeFaces 5.3 and JSF 2.0.
I'm trying to open a new window from dataTable using primefaces. I've tried differents options:
h:commandLink
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<h:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</h:commandLink>
</p:column>
</p:dataTable>
</h:form>
2.p:commandLInk
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<p:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'"
process="#this" ajax="false" target="_blank">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
It works, but not correctly. I mean, I get the new page open, but the original page becomes useless, all methods in this pages are not invoked when you clicked on them.
Has anyone experimented this before? Any idea to solve this?
I tried and I still couldn't get a 'commandLink' to open in a new window while at the same time using 'setPropertyActionListener'. I think you have to modify the underlying Primefaces javascript to open in a new window (I didn't try that).
You can try passing a parameter argument.
i have an issue with nested UI components which is probably a known bug in PrimeFaces and Mojara. However I have no idea how can i solve it.
We have a image gallery with uploader and I want to be able to delete images from the datagrid, so
XHTML:
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{pictureManagementBean.handleFileUpload}"
mode="advanced"
update="gallery messages"
auto="true"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
/>
<p:growl id="messages" showDetail="true"/>
<p:dataGrid var="item" value="#{pictureManagementBean.pictures}" id="gallery">
<p:panel header="#{item.pictureName}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="#{item.thumbnailDir}" />
<h:outputText value="#{item.createdate.toString()}" />
<p:commandLink value="Delete"
action="#{pictureManagementBean.removePicture(item.idpicture)}" ajax="false"/>
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
Basically what is not working at the momment - at all - is the commandLink Delete in the DataGrid. The rest is fine.
Is there any walkaround to this? I've tried: columns, ajax, no ajax... nothing works. All i can do is get the button outside the DataGrid. But that's not really what I want.
Any help apprecieated.
[small thing: surprisingly I have used commandLink in DataTable and Columns with no problem! ]
Primefaces 3.4RC1 from maven. (didnt work on 3.3.1 either)
ok so I've found one thing:
inside <p:dataGrid> if I use anything BUT p:columns its not working.
But then the view is terrible... should I just use CSS to fix it?
#Maple_shaft you are so right!
correct code:
<p:dataGrid var="item" value="#{pictureManagementBean.pictures}" id="gallery">
<p:column>
<p:panel header="#{item.pictureName}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="#{item.thumbnailDir}" />
<h:outputText value="#{item.createdate.toString()}" />
<p:commandLink value="Delete"
action="#{pictureManagementBean.removePicture(item.idpicture)}" ajax="false"/>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
So just simple column element. I've just places it wrong before. Thanks so much.
Of course backing bean is #ViewScoped!