如何创建具有动态属性的复合组件? [英] How to create a composite component with dynamic attributes?
问题描述
我有这个复合组件:
<cc:interface>
<cc:attribute name="image_1" />
<cc:attribute name="image_2" />
<cc:attribute name="image_3" />
</cc:interface>
<cc:implementation>
<div id="slider-container">
<div id="slider-small">
<h:graphicImage library="images" name="#{cc.attrs.image_1}" />
<h:graphicImage library="images" name="#{cc.attrs.image_2}" />
<h:graphicImage library="images" name="#{cc.attrs.image_3}" />
</div>
</div>
</cc:implementation>
我以这种方式使用它:
<cs:small_slider
image_1="about/1.jpg"
image_2="about/2.jpg"
image_3="about/3.jpg"
/>
,但仅限于三个属性.如果必须使用相同的复合组件发送三个以上的邮件,该怎么办:
but is limited to three attributes. What should I do if I have to send more than three, using the same composite component, like this:
<cs:small_slider
image_1="about/1.jpg"
image_2="about/2.jpg"
image_3="about/3.jpg"
image_4="about/4.jpg"
image_5="about/5.jpg"
/>
我想这样做以重用该组件,并且我不想创建另一个组件.
I want to do this to reuse the component and I don't want to create another.
更新: 按照@BalusC方法呈现以下HTML:
UPDATE: Follow @BalusC approach renders the follow HTML:
<!-- small slider -->
<div id="slider-container">
<div id="slider-small">
<img src="/brainset/javax.faces.resource/1.jpg.xhtml?ln=images" />
<img src="RES_NOT_FOUND" />
<img src="RES_NOT_FOUND" />
</div>
<div id="frame-slider-small"></div>
</div><!-- end #slide-container -->
它没有找到其他图像,只有第一个.我确定这些图像:"about/2.jpg"和"about/3.jpg"存在.
It not found the others images, only the first. I'm sure those images: 'about/2.jpg' and 'about/3.jpg' exist.
推荐答案
That's not possible and it also violates the DRY principle.
您最好的选择是 从Bean作为List<String>
传递,以便您可以使用<ui:repeat>
遍历它:
Your best bet is to either pass it as a List<String>
from the bean instead so that you can iterate over it using <ui:repeat>
:
<cs:small_slider images="#{bean.images}" />
使用
<cc:interface>
<cc:attribute name="images" type="java.util.List" required="true" />
</cc:interface>
<cc:implementation>
<div id="slider-container">
<div id="slider-small">
<ui:repeat value="#{cc.attrs.images}" var="image">
<h:graphicImage library="images" name="#{image}" />
</ui:repeat>
</div>
</div>
</cc:implementation>
Or 而是将其定义为硬编码的逗号分隔的字符串,并使用JSTL
Or define it as a hardcoded comma-separated string instead and use JSTL fn:split()
to split them into a String[]
which you in turn feed to <ui:repeat>
:
<cs:small_slider images="about/1.jpg,about/2.jpg,about/3.jpg" />
使用
<cc:interface>
<cc:attribute name="images" type="java.lang.String" required="true" />
</cc:interface>
<cc:implementation>
<div id="slider-container">
<div id="slider-small">
<ui:repeat value="#{fn:split(cc.attrs.images, ',')}" var="image">
<h:graphicImage library="images" name="#{image}" />
</ui:repeat>
</div>
</div>
</cc:implementation>
无关与具体问题无关,请尝试与Java/JSF命名约定保持一致.我将您的small_slider.xhtml
重命名为renameSlider.xhtml
,以便您可以将其用作<cs:smallSlider>
,这与所有普通的JSF组件都很好.
Unrelated to the concrete problem, try to be consistent with Java/JSF naming conventions. I'd rename your small_slider.xhtml
to renameSlider.xhtml
so that you can use it as <cs:smallSlider>
, which is nicely in line with all normal JSF components.
这篇关于如何创建具有动态属性的复合组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!