Как отобразить пользовательский атрибут ‹h:outputLink›?

Я пытаюсь реализовать кнопку pinit pinterest, используя фрагмент, подобный приведенному ниже:

<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, поэтому я использую f: param внутри h: outputLink, чтобы они были urlencoded
  • сгенерированный тег a должен иметь нестандартный атрибут count-layout="horizontal"

Теперь мой вопрос может быть одним из следующих:

  • Как я могу внедрить атрибут count-layout в h: outputLink или сгенерированный тег привязки
  • В противном случае, если я не могу, что было бы другим неинвазивным (я не хочу менять методы bean) способом выполнить требуемую разметку кнопки pinit?

Необходимую разметку можно найти по адресу http://pinterest.com/about/goodies/ внизу страницы. раздел «кнопка закрепления для веб-сайтов».


person Serkan Durusoy    schedule 22.05.2012    source источник


Ответы (1)


Либо используйте обычный элемент <a> вместе с пользовательской функцией EL, которая делегирует в 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>
person BalusC    schedule 22.05.2012
comment
пользовательский рендерер выглядит намного чище и оставляет место для будущих требований. большое спасибо. - person Serkan Durusoy; 22.05.2012
comment
Пожалуйста. Обратите внимание, что таким образом вы зависите от реализации JSF. Если вы когда-нибудь переключитесь на MyFaces, вам придется изменить это. Вместо этого вы также можете создать независимый рендерер, но это потребует большого количества несухого шаблонного кода. - person BalusC; 22.05.2012