如何在JSF 2.0中的复合容器中嵌入多个复合(小部件)?

时间:2013-07-30 15:34:29

标签: jsf-2 facelets composite-component

在JSF 2.0中,我想将多个小部件放入一个小部件容器(这是一个带有标题文本的div)。

我将widget容器创建为复合:

<?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">

<composite:interface name="tileContainer" displayName="Tile container respectively category."
    shortDescription="This tile container may be used to gather multiple different tiles. Caution. Let CSS take care of the layout, the composite the logic.">
    <composite:attribute name="title" default="" required="false"
        type="java.lang.String" />
</composite:interface>

<composite:implementation>
    <div class="tileContainer">
        <div class="title">#{cc.attrs.title}</div>
    </div>
</composite:implementation>
</html>

以下是需要在tileContainer中嵌入的小部件:

<?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 name="pictureTextTile" shortDescription="Provides a top-aligned imaged followed by text.">
    <composite:attribute name="title" default="" required="false"
        type="java.lang.String" />      
    <composite:attribute name="isVerticalStacked" default="true" type="java.lang.Boolean"/>
    <composite:attribute name="picture" required="false"/>
    <composite:attribute name="teaser" required="false" type="java.lang.String"/>
    <composite:attribute name="article" required="true" type="java.lang.String"/>
</composite:interface>

<!-- IMPLEMENTATION: REUSABLE FOR CREATE AND UPDATE ACTIONS-->
<composite:implementation>
    <div class="tile">
        <div class="image">#{cc.attrs.image}</div>
        <div class="title">#{cc.attrs.title}</div>
        <div class="teaser">#{cc.attrs.teaser}</div>
        <div class="article">#{cc.attrs.article}</div>
    </div>
</composite:implementation>
</html>

我试着像这样调用它:

<!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:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:mywidgets="http://java.sun.com/jsf/composite/widgets">

<ui:composition template="/templates/overview.xhtml">

    <ui:define name="title">Overview</ui:define>

    <ui:define name="body">

        <mywidgets:tileContainer title="Profession">
            <mywidgets:pictureTextTile title="Websockets" article="Lorem Ipsum"></mywidgets:pictureTextTile>        
        </mywidgets:tileContainer>              

        <mywidgets:tileContainer title="Sports"/>
    </ui:define>
</ui:composition>
</html>

我如何能够将不同类型的其他小部件(复合材料)插入tileContainer div下面的title

提前感谢任何经验丰富的知识共享。

1 个答案:

答案 0 :(得分:2)

您可以使用<cc:insertChildren>指定应插入复合组件子项的位置。

<div class="title">#{cc.attrs.title}</div>
<cc:insertChildren />