2

以下のようなスニペットを使用して、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>

落とし穴は次のとおりです。

  • マークアップ全体は、2つの異なるBeanからの4つの異なるメソッドと、いくつかの静的テキストの組み合わせから作成されます。
  • urlパラメータは明らかにurlencodedする必要があるため、h：outputLink内でf：paramを使用して、urlencodedを取得します。
  • 生成されたaタグは非標準count-layout="horizontal"属性を持つ必要があります

今私の質問は次のいずれかです：

  • count-layout属性をh：outputLinkまたは生成されたアンカータグに挿入するにはどうすればよいですか？
  • そうでなければ、必要なピニットボタンのマークアップを達成するための別の非侵襲的（Beanメソッドを変更したくない）方法は何でしょうか？

必要なマークアップは、http：//pinterest.com/about/goodies/の「ウェブサイトのピン留めボタン」セクションにあります。

4

1 に答える 1

5

通常の要素を、に委任するカスタムEL関数<a>と一緒に使用します。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>
于 2012-05-22T13:39:39.853 に答える