标签: composite-component

我最近开始使用带有Facelets的JSF 2.0,并且对于了解<ui:include>Facelets 1.x提供的现有和其他模板技术的新复合组件感到困惑.

这些方法有什么区别？从功能上看,它们似乎提供了相同的:<ui:param>vs <cc:attribute>,<ui:insert>+ <ui:define>vs标记文件,重用现有模板.除了复合组件的语法和清晰的接口规范之外还有什么吗？性能会有所不同？

我在panelGrids中有很多outputLabel和inputText对

<h:panelGrid columns="2">
  <h:outputLabel value="label1" for="inputId1"/>
  <h:inputText id="inputId1/>

  <h:outputLabel value="label2" for="inputId2"/>
  <h:inputText id="inputId2/>

  ...
</h:panelGrid>

我希望所有这些都有一些行为:比如每个inputText的相同验证或相同大小.所以我创建了一个复合组件,它只包含一个outputLabel和一个inputText

<my:editField value="field1"/>
<my:editField value="field2"/>

但是现在当我将它们放在gridPanel中时,根据标签文本的长度,它们不会对齐.我理解为什么,但我不知道如何解决.

我有一个JSF 2复合组件,它采用了一些Ajax行为.我想添加一个listener方法到<f:ajax>标签我复合组件内部,但listener方法应为提供<composite:attribute>的<composite:interface>.

<f:ajax>我的复合组件中的标签当前是硬编码到这样的监听器:

<f:ajax
    event="valueChange"
    execute="@this"
    listener="#{controller.genericAjaxEventLogger}"
    render="#{cc.attrs.ajaxRenderTargets}" />

bean上的listener方法有这个签名:

public void genericAjaxEventLogger(AjaxBehaviorEvent event) 
        throws AbortProcessingException {
    // implementation code...
}

我希望复合组件是这样的,所以页面可以提供自己的事件方法,但我无法弄清楚接口的正确语法.

<f:ajax
    event="valueChange"
    execute="@this"
    listener="#{cc.attrs.ajaxEventListener}"
    render="#{cc.attrs.ajaxRenderTargets}" />

我怎样才能做到这一点？

更新解决方案:

我采用了BalusC建议的方法,效果很好.相关的片段是:

复合组件中的接口声明

<composite:interface>
    <composite:attribute
        name="myattributeUpdatedEventListener"
        method-signature="void listener()"
        required="true" />
    ...
</composite:interface>

我的复合组件中使用的Ajax标记

<f:ajax
    event="valueChange"
    execute="@this"
    listener="#{cc.attrs.myattributeUpdatedEventListener}"
    render="#{cc.attrs.ajaxRenderTargets}" />

我在页面中使用复合组件的位置

<h:form>
    <compcomp:myCompositeComponent
        myattributeUpdatedEventListener="#{myBackingBean.updatedEventListenerXYZ}" />
</h:form>

和我的支持bean上的方法

public void updatedEventListenerXYZ() {
    // do something here...
}

我正在寻找为自定义JSF 2复合组件库生成文档.复合组件未在任何faces-config.xml文件中引用,而是复合组件的.xhtml文件存储在META-INF/resources中,并使用新的composite:interface标签来定义接口.

对于JSP标记库,可以使用https://taglibrarydoc.dev.java.net/生成文档,我想知道我的JSF 2复合组件库是否有类似的东西.

我问了这个问题,虽然答案直接满足了我的需求,但我仍然觉得必须有一个更简单的解决方案来解决这个问题.

我想有一个复合组件接受一个项目列表(商定的项目类型,以便成员可以在复合组件中自由使用)

CC(复合组件)显示项目列表并允许项目的加法和减法.

我想以最简单有效的方式做到这一点.

为了说明问题,一个例子:

定义应该相当简单(当然,除非:-)):

<special:dynamicFieldList value="#{bean.fieldList} />

Field对象最抽象的形式是:

public class Field{
 String uuid;
 String value;
}

我猜就是这样.你会如何以简单的方式实现这一点？

谢谢!

我有第二页p:dataTable.左边主要用于选择

<p:dataTable id="leftTable" var="item" value="#{bean.items}"
             selection="#{bean.item}" selectionMode="single">
  <p:ajax event="rowSelect" update=":rightTable" listener="#{bean.select}"/>  
  <p:column>
    <h:outputText value="#{item.value}" />  
  </p:column>
</p:dataTable>

这很简单,工作正常.所述rightTable是一个更复杂的一个,这是一个简化的例子:

<p:dataTable id="rightTable" var="row" value="#{bean.rows}">
  <p:columns var="col" value="#{bean.cols}">  
    <h:outputText value="#{bean.map[row.id][col.id]}"/>
  </p:columns>
</p:dataTable>

嗯,这也很好.现在我实现了一个composite component替换leftTable.此组件还具有selection和select属性,和一般的作品,太.p:dataTable调用与from相同的方法,并设置正确的项目.

但是,这真是一件令人讨厌的事情:如果我使用自定义组件,那么第一个单元格(第0列,第0行)中的值总是如此null.这些值来自a Map<Long,Map<Long,String>>,我验证了在row.id,col.id调用方法后设置特定值.

我对这个问题完全无能为力,并期望回答这个问题真的很难,如果有人能帮我更详细地调试这个问题,我真的很感激.

Upate 1:根据要求我检查了#{row.id},#{col.id}:

95,626 | 95,528
96,527 | 96,528
97,527 | 97,528

在第一个单元格中,col.id是错误的.它应该527是实际的626(它是前一个请求的值).为什么会这样？我怎样才能得到正确的价值？ …

标题真的说明了一切.我已经尝试了失败的错误:

Illegal attempt to pass arguments to a composite component lookup expression (i.e. cc.attrs.[identifier]).

我的尝试看起来像这样:

<composite:interface>
  <composite:attribute name="removeFieldAction" method-signature="void action(java.lang.String)" />
</composite:interface>
<composite:implementation>
  <h:commandButton value="Remove" action="#{cc.attrs.removeFieldAction('SomeString')}"/>
</composite:implementation>

这样做的正确方法是什么？

鉴于此数据表(自然工作):

<rich:dataTable var="var" value="#{values}">
<rich:column>
  <f:facet name="header">
   HEADER
  </f:facet>
  <h:outputText value="#{var}" />
</rich:column>
</rich:dataTable>

如果我定义一个自定义组件(在语法和资源/组件下的正确位置也可以):

   <?xml version="1.0" encoding="UTF-8"?>
    <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:a4j="http://richfaces.org/a4j"
        xmlns:rich="http://richfaces.org/rich"
        xmlns:composite="http://java.sun.com/jsf/composite">

    <!-- INTERFACE -->
    <composite:interface>
        <composite:attribute name="val" />
    </composite:interface>

    <!-- IMPLEMENTATION -->
    <composite:implementation>
        <rich:column>
            <f:facet name="header">
       HEADER
       </f:facet>
       <h:outputText value="#{cc.attrs.val}" />
       </rich:column>
    </composite:implementation>
    </html>

为什么以下不起作用？

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/WEB-INF/templates/default.xhtml"
    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:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:my="http://java.sun.com/jsf/composite/components">
    <ui:define name="content">
        <rich:dataTable var="var" value="#{values}">
                 <my:mycolumn val="#{var}"/>
                </rich:dataTable>
    </ui:define>
</ui:composition>

你知道我怎么能让它工作(我想定义自己的列并保存代码)？非常感谢!再见

我有一个登录我的网站的问题,似乎在移动Chrome浏览器中显示(但适用于某些手机中提供的Web工具包浏览器).我正在努力尝试在平板电脑上进入"开发者模式",但我希望其他人遇到这个问题并且可以指出我正确的方向,同时我弄清楚如何实际调试它.

它是一个JSF2应用程序(Primefaces over Bootstrap2.2)作为UI.

我的表单看起来像这样(第二组'onblur'调用是故意看看是否有帮助 - 它没有):

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:composite="http://java.sun.com/jsf/composite" 
>
    <composite:interface>
        <composite:attribute name="user" />
        <composite:attribute name="pass" />
        <composite:attribute name="error" />
        <composite:attribute name="loggedIn" />
        <composite:attribute 
            name="loginAction" 
            method-signature="void actionListener(javax.faces.event.ActionEvent)"
        />
        <composite:attribute 
            name="logoutAction" 
            method-signature="void actionListener(javax.faces.event.ActionEvent)"
        />
    </composite:interface>

    <composite:implementation>
        <script type="text/javascript">
        function copyValue(sourceId, targetId){
            var source = '#{cc.attrs.id}:' + sourceId;
            var target = '#{cc.attrs.id}:' + targetId;

            var sourceEl = document.getElementById(source);
            var targetEl = document.getElementById(target); 

            targetEl.value = sourceEl.value; 
        };
        </script>
        <h:form class="navbar-form pull-right" id="login" prependId="false" rendered="#{not cc.attrs.error and !cc.attrs.loggedIn}">
            <h:panelGroup rendered="#{!cc.attrs.loggedIn}" …

我需要验证我的复合组件中是否已传递可选属性.我怎样才能做到这一点？

<composite:interface>
    <composite:attribute name="attr1" />
    <composite:attribute name="attr2" required="false" /> <!-- means OPTIONAL -->
</composite:interface>
<composite:implementation>
    <!-- How I can verify here whether attr2 is present or not whenever this component is used? -->
</composite:implementation>

将default属性设置为xxxfor <composite:attribute>不是我正在寻找的.