I've discovered I can play a commandbutton in the options facet (right side of menubar), however I can't seem to add a submenu in the same way. I want an actual menu dropdown aligned to the right, not a button.
Any ideas?
<html lang="en" 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 title="Primefaces Test">
<style>
.ui-layout-north {
z-index: 20 !important;
overflow: visible !important;
}
.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}
</style>
</h:head>
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<f:facet name="options">
<p:commandButton value="logout" />
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</f:facet>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</html>
-- Shane
I solve it using something like this:
style="position: absolute; right: 6px;"
Just try it.
I ended up just forgetting the whole "options" facet and used css float instead, I hope this helps someone:
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<p:submenu label="Videos2" style="float:right">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
--Shane
If you are using bootstrap the you can just use the built in flexbox classes
NOTE: This is a primeng (angular) example and will align ALL items right.
<p-menubar [model]="items" styleClass="d-flex justify-content-end"></p-menubar>
Related
I'm using Primefaces 6.0, jsf 2.2 and tomcat 9. I have a dialog box within a ui:composition which does not show up but it happens to show up when i place it in the template file.
Below is the code for the template:
<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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<title>Title</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
App Name
</p:layoutUnit>
<p:layoutUnit position="west" size="250" collapsible="true">
<p:menu toggleable="true">
<p:submenu label="Setups">
<p:menuitem value="Department" url="/dept" icon="ui-icon-disk" />
<p:menuitem value="Company Clients" url="/companies" icon="ui-icon-contact" />
<p:menuitem value="Products" url="/products" icon="ui-icon-heart" />
<p:menuitem value="Doctors" url="/doctors" icon="ui-icon-person" />
<p:menuitem value="Suppliers" url="/suppliers" icon="ui-icon-close" />
<p:menuitem value="Settings" url="/settings" />
</p:submenu>
<p:submenu label="Kenko">
<p:menuitem value="Patient Data" url="/patientdata" icon="ui-icon-disk" />
<p:menuitem value="Point Of Sale" url="/pos" icon="ui-icon-arrowrefresh-1-w" />
<p:menuitem value="Company Medicals" url="/companymedicals" />
<p:menuitem value="Reports" url="/reports" icon="ui-icon-home" />
<p:menuitem value="Consultation" url="/consultation" icon="ui-icon-close" />
<p:menuitem value="Settings" url="/settings" />
</p:submenu>
<p:submenu label="User Management">
<p:menuitem value="List Of Users" url="/users" icon="ui-icon-star" />
<p:menuitem value="Add Users" url="/users" icon="ui-icon-star" />
<p:menuitem value="Modify Permissions" url="/users" icon="ui-icon-star" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">WELCOME</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
and below is also the code for the facelet:
<ui:composition template="/WEB-INF/views/template/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<p:commandButton value="Add New User" icon="ui-icon-extlink" onclick="PF('addUserModal').show();" />
<p:dataTable var="user" value="#{usersList}">
<p:column headerText="Full Name">
#{user.get("fullName")}
</p:column>
<p:column headerText="User Name">
#{user.get("username")}
</p:column>
<p:column headerText="E-Mail">
#{user.get("email")}
</p:column>
<p:column headerText="Privileges">
#{user.get("privilege")}
</p:column>
<p:column headerText="Department">
#{user.get("department")}
</p:column>
<p:column headerText="Phone Number">
#{user.get("phoneNumber")}
</p:column>
</p:dataTable>
</ui:define>
<p:dialog header="Add New User" id="addUserModal" widgetVar="addUserModal" height="300">
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
</p:dialog>
I keep getting the error: TypeError: PF(...) is undefined and I've done a lot search but none seems to help me with my problem.
I really need someone to help me with this.
I wanted to use OneMenu inside a carousel to set a properties in managedBean, but its not working.
i test the OneMenu without Carousel and it work good , so i think that the problem is inside the carousel .
Any ideas as to what is going on here? plz help .
this is my xhtm page:
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="/template/template.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:define name="pageContent">
<h:form id="form1">
<br />
<br />
<br />
<p:carousel value="#{homeBean.doInstances()}" headerText="Bootstrap VM " var="vm" itemStyle="text-align:center" responsive="true">
<p:panelGrid columns="2" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<f:facet name="header"><p:graphicImage name="images/instance.jpg" /></f:facet>
<p:panelGrid columns="2" style="margin: 0 auto;">
<h:outputText value="name" />
<h:outputText value="#{vm.name}" />
<h:outputLabel value="ip" />
<h:outputLabel value="#{vm.url}" />
<p:outputLabel value="Configuration" />
<p:selectOneMenu id="recepie3" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.selectItems}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapSelectedVm(vm.url)}" />
</p:panelGrid>
</p:panelGrid>
<f:facet name="footer" style="margin: 0 auto;">
<p:panelGrid columns="3" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<h:outputLabel>Bootstrap All VMs :</h:outputLabel>
<p:selectOneMenu id="recepie2" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.recipies}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapAllVMs()}" />
</p:panelGrid>
</f:facet>
</p:carousel>
</h:form>
</ui:define>
</ui:composition>
Tag library initialized incorrectly, please correct it and its work.
i m working on a project. project main page has a layout with 2 layoutunits and each layoutunit have forms. when i run project page is loading correctly but one of layoutunit collapsible property does not work. when i click on it layoutunit is closing then opening again.
i m using primefaces 5.3 and i m not a elit user.
<p:layout fullPage="true" widgetVar="layoutWdgt">
<p:layoutUnit style=" font-size: 14px!important" position="west" collapsible="true" header="#{kullanici.adsoyadkullanici}" >
<h:form id="anamenu">
<p:panelMenu style="width: 250px; height: 600px!important">
<p:submenu label="Genel" icon="fa fa-cog">
<p:menuitem value="Ana Gösterge Tablosu 1" actionListener="#{turnPage.changePage(101)}" update="mainform:panel1" />
<p:menuitem value="Ana Gösterge Tablosu 2" actionListener="#{turnPage.changePage(102)}" update="mainform:panel1" />
</p:submenu>
<p:submenu label="Demografik Göstergeler" icon="fa fa-area-chart">
<p:menuitem value="Nüfus Piramidi" actionListener="#{turnPage.changePage(201)}" update="mainform:panel1" />
<p:menuitem value="Genel Demografik Göstergeler" actionListener="#{turnPage.changePage(202)}" update="mainform:panel1"/>
<p:menuitem value="Kırsal ve Kentsel Nüfus" actionListener="#{turnPage.changePage(203)}" update="mainform:panel1"/>
<p:menuitem value="0-14 Yaş Nüfus Oranları" actionListener="#{turnPage.changePage(204)}" update="mainform:panel1"/>
<p:menuitem value="65 Yaş Üstü Nüfus Oranları" actionListener="#{turnPage.changePage(205)}" update="mainform:panel1" />
<p:menuitem value="Toplam Yaş Bağımlılık Oranları" actionListener="#{turnPage.changePage(206)}" update="mainform:panel1" />
</p:submenu>
</p:panelMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layoutcenter" style="font-size: 14px" position="center" collapsible="true" >
<h:form id="mainform">
<p:outputPanel id="panel1">
<ui:include src="#{turnPage.pathpage}" />
</p:outputPanel>
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
I'm facing an issue with the Primefaces Chat demo from the Primefaces showcase. The outputPanel component does not display a scroll bar like in the showcase demo. Here is my code and screenshot below:
<h:head>
<script type="text/javascript">
function handleMessage(data) {
var chatContent = $(PrimeFaces.escapeClientId('form:public'));
chatContent.append(data + '<br />');
//keep scroll
chatContent.scrollTop(200); <----------- have tried "chatContent.height()"
}
</script>
</h:head>
<h:body>
<p:growl id="growl" showDetail="true" />
<h:form id="form">
<p:fieldset id="container" legend="UserChat" toggleable="true">
<h:panelGroup rendered="#{chatView.loggedIn}">
<h:panelGrid columns="2" columnClasses="publicColumn,usersColumn" style="width:100%">
<p:outputPanel id="public" layout="block" styleClass="ui-corner-all ui-widget-content chatlogs" />
<p:dataList id="users" var="user" value="#{chatView.users}" styleClass="usersList">
<f:facet name="header">
Users
</f:facet>
<p:commandButton title="Chat" icon="ui-icon-comment" oncomplete="pChat.show()" update=":form:privateChatContainer">
<f:setPropertyActionListener value="#{user}" target="#{chatView.privateUser}" />
</p:commandButton>
#{user}
</p:dataList>
</h:panelGrid>
<p:separator />
<p:inputText value="#{chatView.globalMessage}" styleClass="messageInput" />
<p:spacer width="5" />
<p:commandButton value="Send" actionListener="#{chatView.sendGlobal}" oncomplete="$('.messageInput').val('').focus()"/>
<p:spacer width="5" />
<p:commandButton value="Disconnect" actionListener="#{chatView.disconnect}" global="false" update="container" />
</h:panelGroup>
<h:panelGroup rendered="#{not chatView.loggedIn}" >
Username: <p:inputText value="#{chatView.username}" />
<p:spacer width="5" />
<p:commandButton value="Login" actionListener="#{chatView.login}" update="container"
icon="ui-icon-person" />
</h:panelGroup>
</p:fieldset>
<p:dialog widgetVar="pChat" header="Private Chat" modal="true" showEffect="fade" hideEffect="fade">
<h:panelGrid id="privateChatContainer" columns="2" columnClasses="vtop,vtop">
<p:outputLabel for="pChatInput" value="To: #{chatView.privateUser}" />
<p:inputTextarea id="pChatInput" value="#{chatView.privateMessage}" rows="5" cols="30" />
<p:spacer />
<p:commandButton value="Send" actionListener="#{chatView.sendPrivate}" oncomplete="pChat.hide()" />
</h:panelGrid>
</p:dialog>
</h:form>
<p:socket onMessage="handleMessage" channel="/chat" autoConnect="true" widgetVar="subscriber"/>
</h:body>
Any clues about what i'm doing wrong?
Thanks and best regards!
The issue may be you didn't specify chatlogs css class, you should add it as below:
<style type="text/css">
.chatlogs {
height: 210px !important;
max-height: 210px !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
}
</style>
And if you would like to scroll to bottom, you can try:
chatContent.scrollTop(chatContent[0].scrollHeight);
How to add AjaxBehavior to primefaces MenuItem.
I tried to add AjaxBehavior listenet for a menu item. But I get an exception that MenuItem does not support any Ajax Behavior.
How to add Ajax Behavior to menu item?
<h:form>
<p:growl id="messages" />
<h3>Default Menubar</h3>
<p:menubar>
<p:submenu label="File" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Project" url="#" />
<p:menuitem value="Other" url="#" />
</p:submenu>
<p:menuitem value="Open" url="#" />
<p:separator />
<p:menuitem value="Quit" url="#" />
<p:ajax event="change" listener="#{workflowController.changeMenu}" execute="#this" ></p:ajax>
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" url="#"
icon="ui-icon-arrowreturnthick-1-w" />
<p:menuitem value="Redo" url="#"
icon="ui-icon-arrowreturnthick-1-e" />
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="Contents" url="#" />
<p:submenu label="Search" icon="ui-icon-search">
<p:submenu label="Text">
<p:menuitem value="Workspace" url="#" />
</p:submenu>
<p:menuitem value="File" url="#" />
</p:submenu>
</p:submenu>
</p:menubar>
</h:form>
java code:
public void changeMenu(AjaxBehaviorEvent event) {
try {
Object selectOneMenuObject = (event.getSource());
MenuItem mi=(MenuItem) selectOneMenuObject;
String category = ((String) mi.getValue());
} catch (Exception e) {
log.info("class : EditPayeeProfileController,Method : changePayeeType "
+ e);
e.printStackTrace();
}
}
Error:
[org.apache.catalina.core.ContainerBase.[jboss.web].[default-host].[/icareweb].[Faces Servlet]] (http-localhost-127.0.0.1-8080-1) Servlet.service() for servlet Faces Servlet threw exception: javax.faces.view.facelets.TagException: /test1.xhtml at line 37 and column 51 Unable to attach to non-ClientBehaviorHolder parent
Use action
<p:menubar>
<p:menuitem label="Some action" action="#{bean.someAction}"/>
</p:menubar>
or actionListener attributes instead
<p:menubar>
<p:submenu label="My sub">
<p:menuitem value="Another action" actionListener="#{bean.otherActionListener}" />
</p:submenu>
</p:menubar>