I have below code to display an editor and toolbar, somehow toolbar is not displaying and I am just getting a big thin line (yellow highlighted in screenshot).
I used the toolbar code from here.
Could someone please help me point out the issue, I search and see that jquery could be issue but I am not loading any jquery or other library explicitly. Also, my editor is working fine but not toolbar.
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h1>Hello World PrimeFaces</h1>
<h:form>
<p:editor></p:editor>
<br></br>
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" title="Save" icon="ui-icon-disk" />
<p:commandButton type="button" title="Delete" icon="ui-icon-trash" />
<p:commandButton type="button" title="Print" icon="ui-icon-print" />
</f:facet>
</p:toolbar>
</h:form>
</h:body>
</html>
I cloned the PrimeFaces Test Project: https://github.com/primefaces/primefaces-test
Entered your exact code above into test.xhtml.
I then then ran the project with mvn clean jetty:run and navigated to http://localhost:8080/primefaces-test/test.xhtml
And here is my my screenshot.
Related
I see abnormal behavior of fileUpload component on IE9 (it wokrs well on Chrome & Mozilla). When p:fileUpload is put p:dialog, file chooser dialog is not opened unless user double clicked the button, this behaviour on IE<=9 only.
Very simple code sample:
FileUploader.xhtml
<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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head></h:head>
<h:body>
<p:commandButton onclick="PF('dlg').show()" value="open"></p:commandButton>
<h:form enctype="multipart/form-data">
<p:dialog widgetVar="dlg">
<p:growl id="messages" showDetail="true" />
<p:fileUpload value="#{UtilityView.file}" mode="simple" skinSimple="true" />
</p:dialog>
</h:form>
</h:body>
</html>
I tried to change CSS as suggested in some posts and tried to fire click event programmatically when user clicked once but all of that didn't help!
Your suggestions are welcomed.
Primefaces version: 5.3
Hi I have a template with header, menu and content, and I built my dynamic menu menubar, now I want to know how I can do to make the click of each option on my menu only update the contents of my layout and header and menu will remain as they are ... here is my template:
<div id="header" style="height: 70px;">
<ui:insert name="header" >
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<div id="menu" style="height: 50px;">
<ui:insert name="menu" >
<ui:include src="menu.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content" >
<ui:include src="content.xhtml" />
</ui:insert>
</div>
can someone help? Thank you!
I suggest you to use JSF Templating. By applying this approach, your pages are easy to extend and reuse.
This is my example which use p:layout, ui:composition and etc.
layout.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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Layout-menu</title>
</h:head>
<h:body>
<p:layout>
<p:layoutUnit position="west"
resizable="true"
size="250"
minSize="40"
maxSize="400">
<h:form>
<p:menu>
<p:submenu label="Navigations">
<p:menuitem value="input"
outcome="inputText"
icon="ui-icon-star"/>
<p:menuitem value="dropdown"
outcome="selectOneMenu"
icon="ui-icon-star"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="source" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
inputText.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="layout.xhtml">
<ui:define name="source">
<h:form>
inputText
</h:form>
</ui:define>
</ui:composition>
selectOneMenu.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="layout.xhtml">
<ui:define name="source">
<h:form>
selectOneMenu
</h:form>
</ui:define>
</ui:composition>
You can run test at the layout.xhtml page like this http://host:port/project/layout.xhtml
You can see more information about Templating from another site such as JSF 2 Templating With Facelets Example, Using Facelets Templates and etc.
You should use JSF Templating that show in #wittakarn example combination with DefaultMenuItem and setUrl to other page, and the other page use the same template, the header and menu will remain.
Below is my JSF 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:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Test page</title>
</h:head>
<h:body>
<p:dataTable var="order" value="#{orderBean.orderList}"
selection="#{orderBean.currentOrder}"
selectionMode="single">
<p:column>
#{order.customerId.name}
</p:column>
</p:dataTable>
</h:body>
</html>
I want to add a rowSelectListener to the datatable. However my Netbeans IDE does not recognize this as a valid attribute for p:dataTable. Furthermore, it also does not seem to compile. a method called in the listener is not called
rowSelectListener="#{orderBean.onRowSelect}"
I am working with JSF 2.2 (Mojarra 2.2.7) and Primefaces 5.0
It's because there is no rowSelectionListener for primefaces datatable.
You have to use Ajax like this:
<p:ajax event="rowSelect" listener="#{dtSelectionView.onRowSelect}" update=":form:msgs" />
<p:ajax event="rowUnselect" listener="#{dtSelectionView.onRowUnselect}" update=":form:msgs" />
More information available here
Today I discovered a new bug in P5. When I update the button which the overlay panel is referring to, it doesn't work anymore - The overlaypanel is not shown anymore.
As a workaround I do use PF('widgetVar').loadContents(); but this feels very uncomfortable.
In PF4 this did work without any workarounds.
Anyone got some solution?
My solution:
don't update single button that opens overlay, update both
also add dismissable="false" showCloseIcon="true"
in the case you are using overlay on a dialog: add appendTo="#(body)"
Example code:
<p:commandButton value="updateSection" update=":form:overlayPanelGroup" />
<h:panelGroup id="overlayPanelGroup">
<p:commandButton id="openOverlayBtn" process="#this" value="openOverlay"/>
<p:overlayPanel for="openOverlayBtn" showEffect="fade" hideEffect="fade" dismissable="false" showCloseIcon="true" appendTo="#(body)">
<h:outputText value="textSample"/>
</p:overlayPanel>
</h:panelGroup>
I don't know exactly what you are pointing at. What do you mean with updating the button?
For me the following code works fine with PrimeFaces 5.0:
<!DOCTYPE html>
<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"
xmlns:pm="http://primefaces.org/mobile">
<h:head>
</h:head>
<h:body>
<p:commandButton id="menuButton" value="Menu" icon="ui-icon-home"/>
<p:overlayPanel for="menuButton" widgetVar="menuPanel" at="left" showEffect="push">
<!-- overlayPanel content goes here -->
</p:overlayPanel>
</h:body>
</html>
Does this help you with your problem?
I am sorry, this might sound really basic but if anyone could explain how to set explicit values for every tabs in the same browser window using the JSF viewscoped bean.
Please guide me to some article or working samples.
Kindly help, thanks in advance
Update:
auth-page.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:qumola="http://java.sun.com/jsf/composite/qumola"
xmlns:p="http://primefaces.org/ui">
<style type="text/css"/>
<h:panelGrid id="newGrid">
<ui:param name="labelResourceName"
value="#{userMenuState.selectedLeftMenuItem.menuLabel}" />
<h:form id="someForm">
<h:panelGrid id="topBannerId">
<font>#{msg[labelResourceName]}</font> <font
class="titleTextBar"> </font>
<font class="titleTextBar">
#{activityEditorManagedBean.selectedActivityBean.title}</font>
</h:panelGrid>
</h:form>
</h:panelGrid>
</ui:composition>
The value "activityEditorManagedBean.selectedActivityBean.title" in the above code is a viewscoped bean variable value but it has the same value in every tab it is opened in.