I have tried applying styles provided on prime faces demos but was unable to get the results. The code i tried is as follows
<h:head>
<title>Facelet Title</title>
<style type="text/css">
button.ui-button {
margin-right: .5rem;
}
</style>
</h:head>
<h:body>
<div class="card">
<h5>Basic</h5>
<p:commandButton type="button" value="Submit" />
<h5>Icons</h5>
<p:commandButton type="button" icon="pi pi-check" />
<h5>Severities</h5>
<p:commandButton type="button" value="Primary" />
<p:commandButton type="button" value="Secondary" styleClass="ui-button-secondary" />
<h5>Raised Buttons</h5>
<p:commandButton type="button" value="Primary" styleClass="ui-button-raised" />
<h5>Rounded Buttons</h5>
<p:commandButton type="button" value="Primary" styleClass="rounded-button" />
<h5>Flat Buttons</h5>
<p:commandButton type="button" value="Primary" styleClass="ui-button-flat" />
<h5>Raised Text Buttons</h5>
<p:commandButton type="button" value="Primary" styleClass="ui-button-raised ui-button-flat" />
<h5>Outlined Buttons</h5>
<p:commandButton type="button" value="Primary" styleClass="ui-button-outlined" />
<h5>Rounded Icon Buttons</h5>
<p:commandButton type="button" icon="pi pi-bookmark" styleClass="rounded-button ui-button-secondary" />
<h5>Rounded Text Icon Buttons</h5>
<p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-flat" />
<h5>Rounded and Outlined Icon Buttons</h5>
<p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-outlined" />
</div>
But no result is shown as required.
Please guide me what stylesheet i will have to add.
Those button classes were introduced in PrimeFaces 10. If you are not on that version, or if you haven't upgraded your premium theme, they won't work.
So, upgrade if you don't want to add custom CSS, or add custom CSS for the classes you want to support in your project. For example, for a rounded-button you want to add this to your custom style sheet:
body .ui-button.rounded-button {
border-radius: 2rem;
}
See also:
How do I override default PrimeFaces CSS with custom styles?
Related
I use PanelMenu to build menu and the target is an iframe.
What I want to get, when I click menuItem in panelMenu, the result should display in iframe.
What I get, the result display in same windows, like "_self".
I tried use an other menu component, like slideMenu and tieredMenu, it display in target iframe, like what I want.
Is this a bug in panelMenu or may be I use in wrong way?
panelMenu code:
<h:form id="menuForm">
<p:panelMenu id="appSlideMenu" autoDisplay="false" toggleEvent="click" style="width:250px">
<p:submenu label="Homepage">
<p:menuitem value="Primefaces" url="http://www.primefaces.org" target="dcontainer" />
</p:submenu>
</p:panelMenu>
</h:form>
slideMenu code:
<h:form id="menuForm">
<p:slideMenu id="appSlideMenu" autoDisplay="false" toggleEvent="click" style="width:250px">
<p:submenu label="Homepage">
<p:menuitem value="Primefaces" url="http://www.primefaces.org" target="dcontainer" />
</p:submenu>
</p:slideMenu>
</h:form>
iframe code:
<h:body>
<div class="row-container">
<div class="first-row">
<div class="start-button">
<p:commandButton icon="fa fa-arrow-right" value="Start"
oncomplete="PF('nsidebar').show()" />
</div>
<div class="bottom">
<ui:include src="bottom.xhtml" />
</div>
</div>
<div class="second-row">
<iframe id="dcontainer" name="dcontainer"> </iframe>
</div>
</div>
<p:sidebar widgetVar="nsidebar" style="width:300px;">
<ui:include src="menu.xhtml" />
</p:sidebar>
</h:body>
Please help... Thank you...
Primeface 7.0 Community
Tomcat 9.0.6
Here is my view
<h:body>
<div id="header"></div>
<div id="upload">
<h:form id="frmMain" enctype="multipart/form-data">
<p:inputTextarea id="text" style="width: 99%" value="#{uploadfile.content}" placeholder="What are you thinking?"></p:inputTextarea>
<p:fileUpload auto="true" oncomplete="input()" id="fileIdPhoto" previewWidth="200" style="width: 100%" messageTemplate="{name}" fileUploadListener="#{uploadfile.upload}" mode="advanced" dragDropSupport="true"
multiple="true" update="messages" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:messages id="messages" autoUpdate="true" closable="true" />
<p:menubar autoDisplay="false">
<p:menuitem />
<f:facet name="options">
<p:commandButton value="Publish" update="fileIdPhoto" icon="ui-icon-extlink" actionListener="#{uploadfile.uploadPhoto}">
</p:commandButton>
</f:facet>
</p:menubar>
</h:form>
</div>
<div id="body">
<div id="post_container">
<ul>
<ui:repeat value="#{image.allpost}" var="value">
<h:form id="form">
<li>
<div id="post">
<p:commandButton rendered="false" id="dynaButton" process="#this,form" value="Show" type="button" icon="ui-icon-extlink"/> cant not trigger it so I set render false
<p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:submenu label="Ajax">
<p:menuitem value="Delete" icon="ui-icon-disk"/>
<p:menuitem value="Update" icon="ui-icon-arrowrefresh-1-w"/>
</p:submenu>
</p:menu>
<b>#{value.content}</b> <br/>
#{value.createtime} <br/>
<br />
<p:galleria value="#{image.getImgByID(value.id)}" rendered="#{not empty image.getImgByID(value.id)}" var="a" panelWidth="720" panelHeight="400" showCaption="true">
<h:graphicImage value="data:image/jpeg;base64,#{a.imgUrl}" style="width:100%;height:100% " alt="Image Description for #{a.imgName}" title="#{a.imgName}"/>
</p:galleria>
<p:rating value="#{value.rating}" stars="10" cancel="false"/>cant change those stars by clicking on it
</div>
<div id="post_ceperator"/>
</li>
</h:form>
</ui:repeat>
</ul>
</div>
</div>
</h:body>
What I am trying to do is change the value of p:rating tag and p:menu to trigger but its seem like my page is only submitting the first form. Also how can I submit a post and div that contains my post will automatically update?
In my opinion the problem is that your components inside of the ui:repeat have all the time the same id's for each iteration.
The way i used to define ids in loops like that was to add some sort of unique prefix or suffix to them based on some field of the data over which i am iterating:
<ui:repeat value="#{image.allpost}" var="value">
<h:form id="form_#{value.id}">
<li>
<div id="post_#{value.id}">
Now each of your components, including the form, which is highly likely to be the cause of your problem, will have its unique id for each of the loop repetition.
I have a weird problem with jsf components (h:inputFile & h:selectBooleanCheckbox).
Both components receive focus, even when my mouse is somewhere else on the page. Here is the code:
<h:form id="logoUpload" enctype="multipart/form-data">
<div>
<h:outputLabel rendered="true">
<h:inputFile id="companyLogo" label="file" value="#{fileHandlerBean.part}" >
<f:validator validatorId="FileUploadValidator" />
</h:inputFile>
</h:outputLabel>
</div>
<div class="clear" />
<h:outputLabel rendered="true">
<div>
<div style="width: 5%">
<h:selectBooleanCheckbox id="acceptToULogo" value="#{companyEditController.confirmToU}">
<p:ajax event="change" update="buttonLogo" />
</h:selectBooleanCheckbox>
</div>
<div style="width: 95%">
<h:outputText value="Some Text " />
</div>
<br />
<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload"
action="#{companyEditController.companyLogoUpload()}"
actionListener="#{fileHandlerBean.uploadCompanyLogo()}"
disabled="#{!companyEditController.confirmToU}"/>
</div>
</h:outputLabel>
</h:form>
If I move the mouse over the h:outputText the checkbox receives focus.
I had the same problem with the h:inputFile tag. I solved it by surrounding it with a h:outputLabel tag, but unfortunately it doesn´t workd with the selectBooleanCheckbox.
Did somebody have the same problem in the past and knows a solution?
This is because everything is wrapped in the h:outputLabel tag. This outputLable is rendered as a plain label html element.
You can see form the W3C specification that anything inside the label will toggle the control
The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control
To fix this, you need to replace the h:output label tag using a h:panelGroup layout="block" which renders a <div>:
<h:panelGroup layout="block" rendered="true">
<div>
<div style="width: 5%">
<h:selectBooleanCheckbox id="acceptToULogo" >
<p:ajax event="change" update="buttonLogo" />
</h:selectBooleanCheckbox>
</div>
<div style="width: 95%">
<h:outputText value="Some Text " />
</div>
<br />
<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload"/>
</div>
</h:panelGroup>
I have a page 'report1.xhtml'and 'report2.xhtml'both of which is using the same template 'template.xhtml'.
Here's 'template.xhtml':
<pe:layout fullPage="true" id="collapsibleLayoutPanel" stateCookie="false" widgetVar="templateLayoutWidget" style="100%;">
<pe:layoutPane id="topPanel" styleClassContent="topPanel unhideMenus" position="north" resizable="false"
closable="false" spacingClosed="0" spacingOpen="0">
<p:outputPanel id="dg">
<p:outputPanel id="dMHeader" styleClass="A_class Amarks_top">
#{tController.classificationMarking}
</p:outputPanel>
</p:outputPanel>
<div id="Ar" class="Aer" role="banner">
<div id="my_apps" style="display:none;">
<h:outputLink rendered="#{primaryMenuController.renderReturnToMyApps}"
value="#{primaryMenuController.myAppsUrl}">
<img id="my_apps_img" src="#{request.contextPath}/resources/img/my_apps.png" alt="My Apps"
title="My Apps"/>
</h:outputLink>
</div>
<b:navBar brandImg="#{request.contextPath}/resources/img/X_logo.png"
brandHref="#{request.contextPath}/view/landingPage.jsf">
<b:navbarLinks>
<div class="ui-grid-col-6">
<ui:include src="prnu.xhtml"/>
</div>
<div class="ui-grid-col-6">
<div id="A_logout">
<h:form id="helpLogoutForm">
<p:menubar styleClass="Aout_menu" autoDisplay="false">
<p:submenu
label="#{pController.name} (#{pController.accountType})"
icon="primnav-user-acct">
<p:menuitem id="myDashboardLink" value="My Dashboard"
action="landingPage" a:allowRead="true"
icon="primnav-dashboard"/>
<p:menuitem id="myMessagesLink" value="My Messages"
action="userMessageList" a:allowRead="true"
icon="primnav-inbox"/>
<p:menuitem id="myPrefLink" value="My Preferences"
oncomplete="PF('upDialog_widget').show();"
a:allowRead="true" icon="primnav-preferences"/>
<p:separator/>
<p:menuitem id="logoutLink" value="Logout"
action="#{primaryMenuController.logout}"
a:allowRead="true" onclick="X.logoutHandler();"
icon="primnav-logout" ajax="false"/>
</p:submenu>
<p:submenu icon="primnav-help">
<p:menuitem value="Help"
onclick="window.open('#{request.contextPath}/help/default.htm', 'Help', 'height=600,width=850,resizable=yes'); return false;"
icon="primnav-help_menu_child" a:allowReadHelp="true"/>
<p:menuitem value="About"
action="#{aController.updateMemoryValues()}"
oncomplete="PF('aboutDialog_widget').show();"
a:allowRead="true" icon="primnav-help_menu_child"
update=":aboutDialog"/>
</p:submenu>
</p:menubar>
</h:form>
</div>
</div>
</b:navbarLinks>
</b:navBar>
</div>
<ui:insert name="tertiaryNavMenu"/>
</pe:layoutPane>
<!-- Main content -->
<pe:layoutPane id="centerPanel" styleClassContent="centerPanel" position="center" spacingClosed="0"
spacingOpen="0">
<pe:layoutPane position="north" id="nestedTopPanel" size="45" resizable="false" closable="false"
styleClassContent="unhideMenus"
spacingClosed="0" spacingOpen="0" rendered="#{not hideTitleActionBar}">
<div id="A_content" class="AE_content" role="main">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row template-header">
<div class="ui-grid-col-3 template-title">
<div id="A_content_pagetitle" class="AE_content_pagetitle">
<h1 class="pagetitle_h1"><ui:insert name="contentHeader"></ui:insert></h1>
</div>
</div>
<div class="ui-grid-col-9 template-actions">
<div class="action_buttons">
<ui:insert name="actionMenu"></ui:insert>
</div>
</div>
</div>
</div>
</div>
</pe:layoutPane>
<pe:layoutPane position="center" id="nestedCenterPanel" spacingClosed="0" spacingOpen="0">
<div id="A_content_body" class="A_content_body" style="padding:0 12px;">
<p:growl id="siteMessages" globalOnly="true" showDetail="true" life="4000" autoUpdate="false"
widgetVar="siteMessages_widget"
sticky="#{not empty facesContext.maximumSeverity and facesContext.maximumSeverity.ordinal gt 1}"/>
<ui:insert name="content"></ui:insert>
</div>
</pe:layoutPane>
</pe:layoutPane>
<!-- Bottom markings -->
<pe:layoutPane id="bottomPanel" styleClassContent="bottomPanel" position="south" resizable="false"
closable="false" spacingClosed="0" spacingOpen="0">
<!-- TODO: Determine classification marks to display -->
<!-- BEGIN FOOTER -->
<p:outputPanel styleClass="A_classmarking AE_body_classmarks_bottom" id="documentMarkingFooter">
#{tController.classificationMarking}
</p:outputPanel>
<!-- END FOOTER -->
</pe:layoutPane>
</pe:layout>
When I load report1.xhtml and resize window to iPhone size(640x960) everything works as expected and the burger menu onclick is showing the previously hidden menu options. However after the onchange event that causes page forward to report2.xhtml, the burger menu onclick is no longer working.. It's still clickable but nothing happens after clicking it.. If I make the navigation redirect instead of page forward, everything works just fine, so my conclusion is this has something to do with page forward...
After debugging on the devtools console I've got this error showing up after page load(for page forward only):
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
The source js is http://localhost:8080/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=5.2.7
Then on resize I've got this error from source https://raw.githubusercontent.com/primefaces-extensions/core/master/src/sourcemap/3.2.0/layout.source.js:
Uncaught TypeError: Cannot read property 'state' of undefined
Again, note that those errors only occur when navigation is page forward and goes away when doing a redirect. I don't want to do a redirect because I want the URL to stay the same..
i am using JSF 2.1 primefaces 3.5
i have p:datatable on every row i have edit - delete commandLink, on delete h:commandLink i have used p:confirmDialog when i click delete h:commandLink confirmDialog popup, if i press yes commandButton action method is not invoking..
but if i put p:confirmDialog code out the form method is invoking can't understand what happening
<h:body>
<p>hello</p>
<ui:composition template="/template/mastertemplate.xhtml">
<ui:define name="content">
<f:view>
<div id="main">
<div class="full_w" style="height: auto; max-width: 1150px; overflow: hidden;">
<!-- <div class="full_w" style="height: auto; max-width: 1045px; overflow: hidden;"> -->
<div class="h_title"><p class="h_titleParagraph" style="margin: 0px;">Head of accounts</p></div>
<h:form styleClass="form" id="headOfAccountsForm">
<!-- <p:panel id="analysisTheBudgetPenel" header="Analysis The Budget"> -->
<div class="divPanel">
<div class="divContent">
<div>
<p:tabView id="headOfAccountsId_tabview">
<p:tab title="Main Head Of Accounts" id="mainHeadOfAccountsId_tab">
<p:dataTable id="allMainHeadOfAccountsId_table" value="#{budgetHeadOfAccountsAction.budgetMainHeadOfAccountsBean.budgetMainHeadOfAccountsListBean}" var="budgetMainHeadOfAccountsList" rowIndexVar="allMainHeadOfAccounts_rowIndex">
//some columns
<p:column headerText="Edit">
<h:commandLink id="deleteId_commandLink" value="delete" onclick="confirmation_widgetVar.show(); return false;" />
</p:column>
</p:dataTable>
<p:confirmDialog header="Confirmation" message="Do you want to delete this row?" widgetVar="confirmation_widgetVar">
<p:commandButton actionListener="#{budgetHeadOfAccountsAction.deleteMainHeadOfAccountsOnAjax}" value="Yes" oncomplete="confirmation_widgetVar.hide();">
<f:setPropertyActionListener target="#{budgetMainHeadOfAccountsBean.budgetMainHeadOfAccountIdBean}" value="#{budgetMainHeadOfAccountsList.budgetMainHeadOfAccountIdBean}" />
</p:commandButton>
<p:commandButton value="No" onclick="confirmation_widgetVar.hide()" type="button" />
</p:confirmDialog>
// all others closing tags..
Just try to use process attribute like
<p:commandButton style="position:absolute;right:-150px;" process="#this"
and let me know