Как наилучшим образом использовать ресурсы JSF2 из Javascript - PullRequest
Новая
       7

Как наилучшим образом использовать ресурсы JSF2 из Javascript

2 голосов
/ 18 августа 2011

Использование ресурсов в JSF2 - отличная вещь, потому что вы можете хранить ресурс в каком-то месте, а затем ссылаться на него, используя различные альтернативы в HTML или в JSF2.Я использую ресурсы, подобные этим, на страницах XHTML: 

<h:graphicImage value="#{resource['image:sort_up.png']}"/>

или использую ресурсы Java, когда создаю свой собственный taglib: 

ResourceHandler resHandler = context.getApplication().getResourceHandler();
Resource minus = resHandler.createResource(IMAGES_TOGGLE_MINUS_PNG,"image");
writer.startElement("img", toComponent);
writer.writeAttribute("src", minus.getRequestPath(), "src");

Затем выглядит переведенный путь в HTMLчто-то вроде этого: 

/nbfrontend/jsf2frontend/javax.faces.resource/sort_up.png.xhtml?ln=image

Вопрос: как мне ссылаться на эти изображения из JavaScript?

Один из способов - создать скрытый элемент, в котором я буду хранить путь, а затем использовать getElementByID, чтобы извлечь скрытый элемент и получить значение оттуда.Но это плохо масштабируется, когда в приложении используется много изображений.

Другим обходным решением было бы передать путь к изображениям функциям JavaScript, но это невозможно для функций JavaScript, которые не вызываются напрямую.

Есть ли другая альтернатива для использования такихРесурсы JSF2 в JavaScript?

1 Ответ

1 голос
/ 18 августа 2011

Вместо этого используйте его как фоновое изображение CSS, которым вы служите <h:outputStylesheet>. 

.toggle {
    background-image: url(#{resource['image:sort_up.png']});
}

.toggle.up {
    background-image: url(#{resource['image:sort_down.png']});
}

в сочетании с этим JS (со вкусом jQuery) 

$('.toggle').click(function() {
    $(this).toggleClass('up');
    // ...
});
...