Question

我正在尝试使用如下所示的片段来实现pinterest的pinit按钮：

<h:outputLink value="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="horizontal">
   <f:param name="url" value="#{beanOne.someMethod}/sometext{prettyContext.requestURL.toURL()}"/>
   <f:param name="media" value="#{beanOne.someOtherMethod}/sometext/somemoretext/#{beanTwo.someMethodTwo}-some-text.jpg"/>
   <f:param name="description" value="#{beanTwo.someOtherMethodTwo}"/>
   <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</h:outputLink>

以下是问题：

整个标记是由两种不同bean的四种不同方法以及一些静态文本的组合创建的
url参数显然需要urlencoded，因此我在h：outputLink中使用f：param以便它们获得urlencoded
生成的a代码需要具有非标准count-layout="horizontal"属性

现在我的问题之一是：

如何将count-layout属性注入h：outputLink或生成的锚标记
否则，如果我不能，那么另外一个非侵入性（我不想改变bean方法）的方法来完成所需的pinit按钮标记？

可以在“{3}}向下找到所需的标记”“网站的按钮”部分。

Answer 1

使用普通<a>元素和custom EL function代理URLEncoder#encode()。

<c:set var="url" value="#{beanOne.someMethod}/sometext#{prettyContext.requestURL.toURL()}"/>
<c:set var="media" value="#{beanOne.someOtherMethod}/sometext/somemoretext/#{beanTwo.someMethodTwo}-some-text.jpg"/>
<c:set var="description" value="#{beanTwo.someOtherMethodTwo}"/>

<a href="http://pinterest.com/pin/create/button/?url=#{utils:encodeURL(url)}&amp;media=#{utils:encodeURL(media)}&amp;description=#{utils:encodeURL(description)}" class="pin-it-button" count-layout="horizontal">
   <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

（请注意class属性对<h:outputLink>无效，您应该使用styleClass）

或为<h:outputLink>创建自定义渲染器，添加对count-layout属性的支持。假设您正在使用Mojarra，最简单的方法是扩展其OutputLinkRenderer：

public class ExtendedLinkRenderer extends OutputLinkRenderer {

    @Override
    protected void writeCommonLinkAttributes(ResponseWriter writer, UIComponent component) throws IOException {
        super.writeCommonLinkAttributes(writer, component);
        writer.writeAttribute("count-layout", component.getAttributes().get("count-layout"), null);
    }

}

要使其运行，请在faces-config.xml：

中按如下方式注册

<render-kit>
    <renderer>
        <component-family>javax.faces.Output</component-family>
        <renderer-type>javax.faces.Link</renderer-type>
        <renderer-class>com.example.ExtendedLinkRenderer</renderer-class>
    </renderer>
</render-kit>

如何呈现<h：outputlink>的自定义属性？</h：outputlink>

1 个答案: