2012-05-22 2 views
2

Я пытаюсь реализовать кнопку pinit Pinterest, используя фрагмент кода, как показано ниже:Как визуализировать пользовательский атрибут <h: outputLink>?

<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> 

Вот являются Гоча:

  • вся разметка создается из комбинации четырех различных методов из двух разные бобы, а также некоторый статический текст
  • параметры url, очевидно, должны быть urlencoded, поэтому я использую f: param внутри h: outputLink, чтобы получить urlencoded
  • сгенерировать d a тег должен иметь нестандартное count-layout="horizontal" атрибуту

Теперь мой вопрос как один из:

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

Необходимую разметку можно найти по адресу http://pinterest.com/about/goodies/ в разделе «pin it button for websites».

ответ

5

Либо используйте обычный элемент <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> 
+0

обычай визуализатор выглядит намного чище и позволяет пространство для будущих потребностей. Большое спасибо. –

+0

Добро пожаловать. Обратите внимание, что вы зависите от JSF. Если вы когда-нибудь переключитесь на MyFaces, вам придется изменить это. Вместо этого вы можете создать независимый рендерер, но для этого потребуется много не-DRY-шаблонов. – BalusC

Смежные вопросы