Search code examples
jsfjsf-2attributesfaceletscomposite-component

Composite component does not print #{cc.attrs.xxx} in style attribute

I am observing this component snippet : 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:cc="http://java.sun.com/jsf/composite"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core">
  <cc:interface>
    <cc:attribute name="width" default="300"/>
    <cc:attribute name="height" default="400"/>
  </cc:interface>
  <cc:implementation>
    <h:outputStylesheet library="css" name="styles.css"/>
    <h:form prependId="false">
      <div id="links" style="width: #{cc.attrs.width}px; height: #{cc.attrs.height}px">              
        </ul>
      </div>          
    </h:form>
  </cc:implementation>
</html>

p.s.the code is modified

...which shows how to set css values dynamically; I tried the way with css as :

style="width: #{cc.attrs.width}px; height: #{cc.attrs.height}px"

EDIT

I tried to use the component (in same project) as a simple tag placing it to "WEB-INF/mytestcomponent" :

<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
   <namespace>http://testcomponent.com/jsf/facelets</namespace>
   <tag>
    <tag-name>testComponent</tag-name>
      <source>testComponent.xhtml</source>      
   </tag>
</facelet-taglib>

p.s.according to this example

Then I call the component as : 

<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:composite="http://java.sun.com/jsf/composite"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:test="http://testcomponent.com/jsf/facelets"
      >

<body>
...
<test:testComponent></test:testComponent>
...
</body>
</html>

but seems like it doesn't work :( The generated code gives empty values as 

"width: ; height:"

So my question is what causes the issue and how to fix that?

Thanks

Solution

  • This is not how a composite component should be declared. Just take a look at SO composite-component tag info

    This is what is says (I have simplified it for your case) :

    First create a directory resources in the public webcontent (there where the WEB-INF directory and all regular Facelets files also are).

    WebContent
 |-- WEB-INF
 |    `-- lib
 |-- resources   <---
 `-- test.xhtml

    In the resources directory, create a directory exclusively for composite components. The directory name ends up as the extra path in the composite component namespace URI. You're free to choose the name. We'll take mycomponents as an example.

    WebContent
 |-- WEB-INF
 |    `-- lib
 |-- resources
 |    `-- mycomponents   <---
 `-- test.xhtml

    This way the composite components in this directory are available in all templates by the following namespace:

    <html xmlns:my="http://xmlns.jcp.org/jsf/composite/mycomponents">

    The prefix my is free to your choice. The http://xmlns.jcp.org/jsf/composite/ part is mandatory. The mycomponents part should be just the same as the directory name.

    Now you need to create a new XHTML file and paste your snippet code inside it. The filename becomes the composite component tag name. You're free to choose the name. Let's call it mytestcomponent.xhtml.

    WebContent
 |-- WEB-INF
 |    `-- lib
 |-- resources
 |    `-- mycomponents
 |         `-- mytestcomponent.xhtml   <---
 `-- test.xhtml

    This way the composite component is available in all templates as follows:

    <my:mytestcomponent />

    Calling it without width and height attributes will make it use the default values. You can still set these values while calling your CC like this

    <my:mytestcomponent width="500" height="140"/>

    Notes

    • The composite component XML declaration tags are available under the namespace http://xmlns.jcp.org/jsf/composite. Before JSF 2.2, the namespace http://java.sun.com/jsf/composite should be used instead.

    Unrelated

    • There is an error in your snippet code, It think you should remove an extra </ul> there
    • <h:form> tag should not be embedded into your cc implementation code. You should rather see a cc as a form custom element