PrimeFaces Rich Text editor convert into normal inputTextArea - primefaces

I want to ask that sometimes what happen that if I use PrimeFaces Rich Text Editor then instead of showing Rich Text Editor, it shows normal inputTextArea. I want to know what can be the reasons that Rich Text Editor is not shown. Why it shows normal text Area instead of Rich Text Area? My Javascript is also enabled. Please tell me the reasons.
Thanks
Edit:
Here is my code
<?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:p="http://primefaces.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="title">Add City Images</ui:define>
<ui:define name="content">
<h:form id="cityDetailForm" prependId="false" >
<p:growl id="messages" showDetail="true" life="2000"> </p:growl>
<p:panel id="panel1"
style="border-color: #000000;width: 954px;position: absolute;left: 150px;height: 450px;-moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(../PIE/PIE.htc)">
<strong Class="MainHeader">
<p:spacer width="10"/> City Detail
</strong>
<h:panelGrid columns="5"
border=""
width="20%"
style="position: absolute; top: 50px;"
columnClasses="asteriskColumns, nameColumns" >
<h:outputText value="*" />
<h:outputText value="Map: " />
<p:fileUpload id="cityMap"
description="Image"
update="city messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="city"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false">
<f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />
</p:graphicImage>
<h:commandLink value="remove"
title="Remove Picture"
style="color: #0d5b7f;text-decoration: underline"
onclick="if (! confirm('Are you sure, you want to remove picture?') ) { return false;}; return true; ">
<f:ajax event="click"
render="city"
listener="#{cityDetail.removeImage}"/>
</h:commandLink>
.....
</h:panelGrid>
<h:panelGrid columns="1"
border=""
width="60%"
style="position: absolute; top: 40px;left: 350px;height: 410px ">
<p:editor value="#{cityDetail.CKeditorValue}" widgetVar="editor" width="600"/>
</h:panelGrid>
<h:commandButton id="preview"
value="Preview"
action="#{cityDetail.preview}"
style="position: absolute; top: 470px; left: 400px"
styleClass="ButtonStyle" />
<h:commandButton id="save"
value="Save"
actionListener="#{cityDetail.sendImagesToDatabase}"
action="#{cityDetail.save}"
style="position: absolute; top: 470px; left: 475px;"
styleClass="ButtonStyle">
</h:commandButton>
<h:commandButton id="cancel"
value="Cancel"
action="#{cityDetail.cancel}"
style="position: absolute; top: 470px; left: 550px;"
styleClass="ButtonStyle" />
<link type="text/css" rel="stylesheet" href="css/jquery.modaldialog1.css"/>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.modaldialog.js"></script>
<h:commandButton id="YesAfterSaveBtn" onclick="$(dialogmask).hide();$(dialog).hide()" action="#{cityDetail.goBack}" style="background-color: #e6eff6;border: #e6eff6"></h:commandButton>
<h:outputText value="#{cityDetail.errorScript}" escape="false"/>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</h:body>
You can see that i am using Prime Faces editor, but it is showing me inputTextArea. Although i didn't try the solution but this is what i asked for.
thanks

Try the following
set <f:view contentType="text/html"/>
as mentioned in the following thread of primefaces forum p:editor like h:inputTextArea

Related

Disable/Enable inputText with selectBooleanCheckbox in Primefaces

Hey trying to disable/enable inputText based on a change event when a selectBooleanCheckbox is selected/unselected. Currently though, regardless of what whether or not the checkbox is selected, the inputText will always be disabled. Do I need to instead attach a listener to the checkbox? It seems in this case the inputText is never getting re-rendered.
HTML:
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}" ajax="true" event="change" update="hour"/>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>
Tested on PrimFaces 6.0,6.1 and 6.2
<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<title>PrimeFaces Test</title>
</h:head>
<h:body>
<h:form>
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}">
<p:ajax update="hour"></p:ajax>
</p:selectBooleanCheckbox>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>
</h:form>
</h:body>
</html>

activate pt:data-tooltip on commandbutton

i'm using jsf 2.2 primefaces 6.0 and i'm trying to add "pt:data-tooltip" on my commandButton but it seems that this attribute is unknown.I need help to make it acceptable.
Here the xhtml code of all the xhtml page:
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<ui:composition template="/facelets/template.xhtml">
<ui:define name="content">
<ul class="breadcrumb">
<li><i class="ace-icon fa fa-home home-icon"></i> Acceuil</li>
<li class="active">espace Administrateur</li>
</ul>
<!-- /.breadcrumb -->
</ui:define>
<ui:define name="pageContent">
<h:form id="form">
<p:panel header="ajouter Acte Médical">
<p:messages />
<p:panelGrid id="pan" columns="3">
<p:outputLabel value="Type acte medical *:" />
<p:inputText value="#{acteBean.acteMedical.typeActe}" id="input1"
placeholder="Type de l'acte médical" required="true"
requiredMessage="indiquez une valeur">
<f:validator validatorId="av" />
<p:ajax event="blur" update="button" process="#form"/>
</p:inputText>
<p:message id="m1" for="input1" />
<p:outputLabel value="Plafond *:" />
<p:inputNumber id="i1" value="#{acteBean.acteMedical.plafond}"
symbol=" DT" symbolPosition="s" placeholder="Plafond total"
decimalSeparator="," thousandSeparator="."
disabled="#{not empty acteBean.acteMedical.pourcentage}">
<f:ajax event="keyup" render="i2" />
</p:inputNumber>
<p:message id="m2" for="i1" />
<p:outputLabel value="Pourcentage des frais de remboursement *:" />
<p:inputNumber id="i2" value="#{acteBean.acteMedical.pourcentage}"
placeholder="% des frais de remboursements" symbolPosition="s"
symbol="%" disabled="#{not empty acteBean.acteMedical.plafond}">
<f:ajax event="keyup" render="i1" />
</p:inputNumber>
<p:message id="m3" for="i2" />
<p:commandButton value="Sauvegarder" id="button" disabled="#{not facesContext.postback or facesContext.validationFailed}"
style="background:#6FDC6F;color: #FFFFFF"
styleClass="customStyleButton" action="#{acteBean.doAddActe()}"
update="#form:pan">
<p:confirm header="Confirmation" message="Êtes-vous sûr?"
icon="ui-icon-alert" />
</p:commandButton>
<p:commandButton value="Actualiser" action="#{acteBean.reset()}"
style="background:#FF0000; color: #FFFFFF"
styleClass="customStyleButton" update="#form:pan" />
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Non" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
You forgot to add the 'pt' namespace declaration
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
And you are not using the jsf 2.2 namespace declarations for the jsf components either but the older ones

Change content part using dynamic menu in JSF Primefaces

I am using a JSF template that is split into 4 parts - Header, Menubar, Content and Footer. Header contains application name, version, user name, last login, etc. details retrieved from the DB. Menu section contains a dynamic menu populated from the DB w.r.t. the user role and access. Based on the menu item, I need only the content part to be refreshed without reloading/refreshing the header, menu bar and footer. So if the menu contains a URL to SomePage.xhtml, when the menu item is clicked, SomePage.xhtml should get loaded in the content. I have checked a lot of links and solutions on the net but was not able to get this to work. Can someone please me here?
All the backing bean references in below code are to retrieve data from the DB.
BaseTemplate.xhtml
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<h:outputStylesheet name="css/override.css" />
<h:outputStylesheet name="css/style.css" />
</h:head>
<h:body>
<f:loadBundle basename="messages" var="msg" />
<f:event type="preRenderView" listener="#{homePageBean.init}" />
<h:panelGroup id="header" layout="block">
<ui:insert name="header">
<ui:include src="/pages/header.xhtml" />
</ui:insert>
</h:panelGroup>
<h:panelGroup id="menu" layout="block">
<ui:insert name="menu">
<ui:include src="/pages/menu.xhtml" />
</ui:insert>
</h:panelGroup>
<h:panelGroup id="content">
<ui:insert name="content" />
</h:panelGroup>
<h:panelGroup id="footer" layout="block">
<ui:insert name="footer">
<ui:include src="/pages/footer.xhtml" />
</ui:insert>
</h:panelGroup>
</h:body>
</html>
header.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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<h:form id="frmHeader">
<table class="hdrMainTbl">
<tr>
<td width="10%">
<h:graphicImage value="images/logo.png" width="180 px"
height="40 px" />
</td>
<td width="65%">
<table class="hdrAppNmTbl">
<tr>
<td align="center">
<h:outputText styleClass="appNameText"
value="#{homePageBean.appName}" /> <br/>
<h:outputText styleClass="appVersionText"
value="#{msg['appVersion']} #{homePageBean.appVersion}" />
</td>
</tr>
</table>
</td>
<td width="20%">
<table class="hdrUserDtlsTbl">
<tr>
<td align="right"><h:outputText styleClass="baseFontStyle"
value="#{msg['welcome']}" /></td>
<td><h:outputText styleClass="baseFontStyle"
value="#{homePageBean.userName}" /></td>
</tr>
<tr>
<td align="right"><h:outputText styleClass="baseFontStyle"
value="#{msg['lastLogin']}" /></td>
<td><h:outputText styleClass="baseFontStyle"
value="#{homePageBean.lastLogin}" /></td>
</tr>
</table>
</td>
<td width="5%">
<h:commandLink action="#{homePageBean.logoutUser}">
<h:graphicImage id="logoutImg" value="images/logout.png" width="40 px"
height="40 px" title="Logout" alt="Logout" />
</h:commandLink>
</td>
</tr>
</table>
</h:form>
</ui:composition>
</body>
</html>
menu.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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<h:form>
<p:menubar model="#{homePageBean.menubar}" />
</h:form>
</ui:composition>
</body>
</html>
footer.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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<table class="footerTbl">
<tr>
<td align="center">
<h:outputText value="#{msg['copyright']}" />
<h:outputLink target="_blank" value="http://www.google.com/">
<h:outputText value="#{msg['website']}" />
</h:outputLink>
</td>
</tr>
</table>
</ui:composition>
</body>
</html>
SomePage.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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition template="BaseTemplate.xhtml">
<ui:define name="content">
<h:form>
This is in Content section populated when one of the menu item is clicked.
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
There is two tricks here :
1) Check your menu model bean scope:
If your menu is related to user, then I guess it should be #SessionScoped
You can also create the menu each time on-the-fly (within getMenuModel() instead of bean constructor). Less efficient but working at least.
2) If you want the menu to be refreshed, you must set an id attribute to your menubar component
<p:menubar id="menuBar1" model="#{menuBean.model}" />
then use the update feature of Primefaces, for example when the user clicks a specific menu item (Java side : see in your menubar Bean).
item.setUpdate("menuBar1");

How to automatically display Lightbox when loading the page

What I want is to display a lightbox right after the page is loaded. I mean, when the user receives the page, the lightbox automatically shows and stays on untill it is closed. How can I do this?
<?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">
<ui:composition template="/WEB-INF/include/template.xhtml">
<ui:define name="title">
<h:outputText value="#{jorBundle.AppName}"></h:outputText>
</ui:define>
<ui:define name="body">
<p:lightBox width="20%" height="80%" >
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
<p:panel header="#{jorBundle.Welcome}">
<p><h:outputText value="#{jorBundle.WelcomeMessage}"></h:outputText></p>
</p:panel>
<p:panel header="Gráfico Divisões UPB" menuTitle="menu" collapsed="true" >
<p><h:outputText value="Gráfico"></h:outputText></p>
</p:panel>
</ui:define>
</ui:composition>
</html>
Thanks in advance.
You could use the primefaces javascript, which requires an ID on the lightbox.
Component:
<p:lightBox width="20%" height="80%" id='myLightBox'>
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
Javascript:
<script>
document.addEventListener("DOMContentLoaded", function() {
PF('myLightBox').show();
});
</script>
A simple solution is to set the visible attribute to true:
<p:lightBox width="20%" height="80%" visible="true">
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>

Primefaces menubar right align submenu

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>