Is it possible to have no "<p:...>" in HTMLX page for Custom PrimeFaces Component

UI Components for JSF
Post Reply
Daric
Posts: 4
Joined: 08 Jun 2018, 10:39

08 Jun 2018, 11:28

Hello,

First post, so sorry if I don't do things perfectly.

I encapsulated (extended) PrimeFaces uicomponents in a Class :
--> htmlGridPanel, to which I add 2 children, InputText + Tooltip. Here is the code :

Code: Select all

package com.custom.jsf;

import java.io.IOException;

import javax.el.ExpressionFactory;
import javax.el.MethodExpression;
import javax.faces.component.FacesComponent;
import javax.faces.component.html.HtmlOutputText;
import javax.faces.component.html.HtmlPanelGrid;
import javax.faces.context.FacesContext;

import org.primefaces.behavior.ajax.AjaxBehavior;
import org.primefaces.behavior.ajax.AjaxBehaviorListenerImpl;
import org.primefaces.component.inputtext.InputText;
import org.primefaces.component.tooltip.Tooltip;


@FacesComponent(value = "com.custom.jsf.CustomPanel")
public class CustomPanel extends HtmlPanelGrid
{
	private org.primefaces.component.inputtext.InputText aCustomInput;
	private Tooltip aCutsomToolTip;
	private AjaxBehavior aAjaxBehavior;
	private HtmlOutputText aOutputLabel;

	@Override
    public void decode(FacesContext context) {
    	super.decode(context);
        //Map<String, String> requestMap = context.getExternalContext().getRequestParameterMap();
        //String clientId = getClientId(context);
    }

	@Override
    public void encodeBegin(FacesContext context) throws IOException {
		addChildComponentsToPanelGrid();
    	super.encodeBegin(context);  	
    }

	private void addChildComponentsToPanelGrid() {
		// Building the InputText (PrimeFaces)
		aCustomInput = new InputText();
		aCustomInput.setId(super.getId() + "_inputText");
		aCustomInput.setRendered(true);
		// Adding InputText to parent htmlPanelGrid
		this.getChildren().add(aCustomInput);
		
		//Building the htmlOutputText
		aOutputLabel = new HtmlOutputText();
		aOutputLabel.setId(super.getId() + "_outputLabel");
		aOutputLabel.setRendered(true);
		this.getChildren().add(aOutputLabel);

		//Adding AJAX capability to InputText element, updating the htmlOutputText
		FacesContext fc = FacesContext.getCurrentInstance();
		ExpressionFactory ef = fc.getApplication().getExpressionFactory();
		MethodExpression me = ef.createMethodExpression(fc.getELContext(), "#{inputBean.keyUpShow}", String.class, new Class<?>[]{});
		aAjaxBehavior = (AjaxBehavior) fc.getApplication().createBehavior(AjaxBehavior.BEHAVIOR_ID);
		aAjaxBehavior.addAjaxBehaviorListener(new AjaxBehaviorListenerImpl(me, me));
		aAjaxBehavior.setUpdate(aOutputLabel.getId());
		aCustomInput.addClientBehavior("keyup", aAjaxBehavior);

		// Building the ToolTip (PrimeFaces)
		aCutsomToolTip = new Tooltip();
		aCutsomToolTip.setId(super.getId() + "_tooltip");
		aCutsomToolTip.setFor(super.getId() + "_inputText");
		// Setting specific values to ToolTip
		aCutsomToolTip.setShowEvent("focus");
		aCutsomToolTip.setHideEvent("blur");
		aCutsomToolTip.setValue("Ceci est un test");
		aCutsomToolTip.setRendered(true);
		// Adding ToolTip to parent htmlPanelGrid
		this.getChildren().add(aCutsomToolTip);
	}
	
}
Of course I did all the namespace business to have my customized element (the htmlGridPanel as CustomPanel) available.

My HTMLX index page working only if I include some PrimeFaces element (here a "unlinked, invisible ToolTip).

Code: Select all

<?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
	lang="en"
	xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:custom="http://custom.com/example"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    >
	<h:head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<title>Tests</title>
		<link type="text/css" rel="stylesheet" href="./themes/primeFaces_Component.css"></link>

	</h:head>
<h:body>

    <h2>JSF Custom Input FacesComponent Example</h2>
    <h:form>
        <h:outputText value="KeyUp: " />
        <p:inputText id="firstname" value="#{inputBean.keyUpShow}">
            <p:ajax event="keyup" update="out1" />
        </p:inputText>
        <h:outputText id="out1" value="#{inputBean.keyUpShow}" />

       <custom:custom-panel id="taataa" title="Salut l'ami"/>
	   <p:tooltip id="toolTipFocus" for="" showEvent="focus" hideEvent="blur" />
    </h:form>

</h:body>
</html>
With this "<p:tooltip id="toolTipFocus" for="" showEvent="focus" hideEvent="blur" />", all necessary JS code etc from PrimeFaces are included, and my page works as expected :

... if I delete this line... My CustomInput & CutomToolTip don't work (tolltip is not showing on "focus" of the input).

Any help would be greatly appreciated ;-) !!

--------- Stupid additional question : I would love to be able to just not even include the PrimeFaces namespace (xmlns:p="http://primefaces.org/ui"), but I suppose this is out of question !

Very best regards,

Daric
PrimeFaces : 6.2
JSF : 2.2.17
Server : Tomcat 9.0.8
Java : 1.0.8_171
Eclipse : Photon Release Candidate 1 (4.8.0RC1)

kukeltje
Expert Member
Posts: 8990
Joined: 17 Jun 2010, 13:34
Location: Netherlands

09 Jun 2018, 20:39

Add

Code: Select all

@ResourceDependencies({
       @ResourceDependency(library = "primefaces", name = "components.css"),
       @ResourceDependency(library = "primefaces", name = "components.js"),
       @ResourceDependency(library = "primefaces", name = "jquery/jquery.js"),
       @ResourceDependency(library = "primefaces", name = "core.js"
})
Right above your @FacesComponent. It declares that your component requires these css and js files and JSF will include the references.
Ronald van Kuijk
______________________________
PrimeFaces 6.1, PrimeFaces plus 0.0.2 | JbossWildfly 10.1| Mojarra 2.2.13
Fedora 61, Firefox 'most recent'
Read the forum posting rules
Beginners: https://jsf.zeef.com/bauke.scholtz

Daric
Posts: 4
Joined: 08 Jun 2018, 10:39

09 Jun 2018, 20:43

Thanks so much... You just did magic !!!!

Of course, just for the fellow who would like to get inspired, imports have to be done :

Code: Select all

import javax.faces.application.ResourceDependency;
import javax.faces.application.ResourceDependencies;
VERY IMPORTANT : The order of the included dependencies have a matter... To make it work (tooltips where not showing), I had to use this precise order :

Code: Select all

@ResourceDependencies({
      @ResourceDependency(library = "primefaces", name = "components.css"),
      @ResourceDependency(library = "primefaces", name = "jquery/jquery.js"),
      @ResourceDependency(library = "primefaces", name = "jquery/jquery-plugins.js"),
      @ResourceDependency(library = "primefaces", name = "core.js"),
      @ResourceDependency(library = "primefaces", name = "components.js")
})
Community is so lucky to have people such as you !!!

Thanks again,

Daric
PrimeFaces : 6.2
JSF : 2.2.17
Server : Tomcat 9.0.8
Java : 1.0.8_171
Eclipse : Photon Release Candidate 1 (4.8.0RC1)

kukeltje
Expert Member
Posts: 8990
Joined: 17 Jun 2010, 13:34
Location: Netherlands

13 Jun 2018, 16:13

You are welcome. Next person to have an identical or related question can now be helped by you ;-)
Ronald van Kuijk
______________________________
PrimeFaces 6.1, PrimeFaces plus 0.0.2 | JbossWildfly 10.1| Mojarra 2.2.13
Fedora 61, Firefox 'most recent'
Read the forum posting rules
Beginners: https://jsf.zeef.com/bauke.scholtz

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Baidu [Spider], Bing [Bot], SatrapA and 7 guests