如何呈现< h:outputLink>的自定义属性? [英] How to render a custom attribute of <h:outputLink>?
问题描述
我正在尝试使用如下代码段来实现pinterest的pinit按钮:
I am trying to implement pinterest's pinit button using a snippet like the one below:
<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参数进行urlencode编码,因此我在h:outputLink中使用f:param以便对它们进行urlencode编码
- 生成的
a
标签需要具有非标准的count-layout="horizontal"
属性
- the whole markup is created from the combination of four different methods from two different beans as well as some static text
- the url parameters obviously need to be urlencoded, therefore I am using f:param inside h:outputLink so that they get urlencoded
- the generated
a
tag needs to have the non-standardcount-layout="horizontal"
attribute
现在我的问题是以下情况之一:
- 如何将count-layout属性注入h:outputLink或生成的锚标记中
- 否则,如果我做不到,那么完成所需的pinit按钮标记的另一种非侵入性(我不想更改bean方法)的方法是什么?
所需的标记可以在 http://pinterest.com/about/goodies/中找到在将其固定在网站上的按钮"部分中.
The required markup can be found at http://pinterest.com/about/goodies/ down in the "pin it button for websites" section.
推荐答案
要么使用普通的<a>
元素,同时使用 URLEncoder#encode()
.
Either use a normal <a>
element along with a custom EL function which delegates to 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)}&media=#{utils:encodeURL(media)}&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
)
(note that the class
attribute was invalid for <h:outputLink>
, you should be using styleClass
)
或为<h:outputLink>
创建自定义渲染器,以添加对count-layout
属性的支持.假设您使用的是Mojarra,最简单的方法就是扩展其OutputLinkRenderer
:
Or create a custom renderer for <h:outputLink>
which adds support for count-layout
attribute. Assuming that you're using Mojarra, simplest would be to extend its 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
中进行如下注册:
To get it to run, register it as follows in 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>的自定义属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!