Problem creating custom Components in JSF

Question

Problem creating custom Components in JSF

Asked 9 years, 12 months ago

Viewed 568 times

1

I’m having problems creating custom components in JSF, it’s actually the first time.

I found some guides on the internet but it hasn’t worked.

Here’s what I did.

I created the custom.taglib.xml inside the briefcase WEB-INF and its content is this.

<?xml version="1.0" encoding="UTF-8"?>

<facelet-taglib>
    <namespace>http://paradigma.ecred2/facelets</namespace>
    <tag>
        <tag-name>btnHelp</tag-name>
        <source>tags\btn-help.xhtml</source>    
    </tag>
</facelet-taglib>

Inside the folder resources, created the file btn-help.xhtml with the following content.

<?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:cc="http://xmlns.jcp.org/jsf/composite"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <cc:interface>
        <cc:attribute name="hint" />
    </cc:interface>

    <cc:implementation>
        <p>#{cc.attrs.hint}</p>
    </cc:implementation>

</html>

And finally inside the page where I want to use this component, it follows the header.

<ui:composition template="/template/common/pagelayout.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:ez="http://xmlns.jcp.org/jsf/composite"
    xmlns:sec="http://www.springframework.org/security/facelets/tags"
    xmlns:ecred="http://paradigma.ecred2/facelets/tags">

And the call of the component

<ecred:btnHelp hint="Teste"/>

The problem is that the component is not being rendered, and I don’t know what might be going on. The idea is to make components that are simpler for example.

Make a help button that already loads a certain image and the developer just pass the text.

<p:graphicImage url="#{resource['images:help-icon.png']}" title="#{cc.attrs.hint}"/>

Thank you

1 answer

Browser other questions tagged jsf jsf-2.2

You are not signed in. Login or sign up in order to post.

by utluiz • **72,075** points · Answer 1 · 2014-11-26T14:50:25+00:00

Custom components

I made an implementation some time ago and managed to do it as follows:

I put my components in the directory src/main/webapp/resources/component-base/. Note that the project follows the Maven directory structure, so adapt to its structure if necessary.
I imported the components from that directory through the declaration xmlns:mycomp="http://java.sun.com/jsf/composite/component-base"

Ready! Now just use the tags, their names being equal to the names of their respective files .xhtml.

The URL http://java.sun.com/jsf/composite/ is special and tells JSF to look for the files in that directory.

Custom functions

In this same project I also created some utilitarian functions.

First I created the file src/main/webapp/WEB-INF/commons.taglib.xml with the content more or less like this:

<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib 
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd"
    version="2.0">
    <namespace>http://empresa.com.br/functions</namespace>

    <function>
        <function-name>acesso</function-name>
        <function-class>br.com.empresa.commons.Functions</function-class>
        <function-signature>boolean acesso(java.lang.String)</function-signature>
    </function>
    <function>
        <function-name>acessoItem</function-name>
        <function-class>br.com.empresa.commons.Functions</function-class>
        <function-signature>boolean acessoItem(java.lang.String, java.lang.String, java.lang.String)</function-signature>
    </function>
</facelet-taglib>

I implemented the function class with the static methods, as the following example:

package br.com.empresa.commons;

/**
 * Funções de taglib JSF para verificar a permissão individual de componentes das telas.
 */
public final class Functions {

    public static boolean acesso(String nome) {
        ...
    }

    public static boolean acessoItem(String prefixoSistema, String nome, String item) {
        ...
    }

}

Then I imported the functions with the declaration `xmlns:fn="http://empresa.com.br/functions" and used them in EL expressions like this:

<p:commandButton
                 id="botaoEditar"
                 styleClass="botao-editar"
                 icon="icon-edit" 
                 ajax="false"
                 immediate="true"
                 disabled="#{not fn:acessoItem('privilegio-alterar')}">