Вопрос по primefaces, graphicimage, jsf, uirepeat – Как пользоваться <p:graphicImage> с DefaultStreamedContent в пользовательском интерфейсе: повторить?

9

Я пытался отобразить панель, на которой пользователь может видеть список категорий товаров (отображается в виде изображений), а при нажатии они могут просматривать товары в этой категории (будут отображаться изображения).

Для отображения категории товара я использовал пользовательский интерфейс: повторить без поддержки бобов Ниже мой xhtml код

<ui:repeat id="repeat" value="#{getData.images}" var="img" varStatus="loop">
<h:panelGroup>
<p:graphicImage id="img1" value="#{img}" alt="image not available" >
</p:graphicImage>
</h:panelGroup>
</ui:repeat>

И части управляемого бобового кода

private ByteArrayOutputStream baos = new ByteArrayOutputStream();
private List<StreamedContent> imageList = new ArrayList<StreamedContent>();

public List<StreamedContent> getImages(){
  for (int i = 0; i < sdh.getNumOfImages(); i++) {
    imageID = imageIDArray.get(i);
    ImageService imgSer = new ImageService();
    imgList.add(imageID);
    imgSer.setData(imageID);
    baos = imgSer.getImage();
    try {
      imageList.add(new DefaultStreamedContent(new 
            ByteArrayInputStream(baos.toByteArray())));
    } catch (Exception ex) {
        ex.printStackTrace();
    }
  }
  imageNum = 0;
  return imageList;
}

public StreamedContent getData() {
    baos = imageList.get(imageNum);
    //imageList.add(baos);
    imageNum++;
    return new DefaultStreamedContent(new ByteArrayInputStream(baos.toByteArray()));
}

Теперь моя проблема, если я не раскомментирую «imageList.add (baos)». в «getData» изображения не отображаются. Теперь я действительно хочу знать, как «ui: repeat» работает, так как "imageList" содержит изображения, и я могу сохранить то же самое, если требуется в любом из методов. Если я укажу фиксированное число (например, «imageList.get (0)») в «getData»; Метод, то же изображение будет показано несколько раз. Где, как будто я положил «imageNum» без «imageList.add (baos)»; он выдает ошибку «Ошибка при потоковой передаче динамического ресурса»

Я устал от предложения Bjorn Pollex и внес необходимые изменения, но теперь изображения не появляются

Вы не ссылаетесь на переменную цикла (img в вашем случае) внутри вашего<ui:repeat>, ВашgetImages должен вернутьList<StreamedContent>, и ваш<p:graphicImage> должен иметьvalue="#{img}". Björn Pollex

Ваш Ответ

2   ответа
17

Не возможно использовать<p:graphicImage> сюда. Вы должны скорее перебрать коллекцию уникальных идентификаторов изображений, а не коллекциюStreamedContent, Эти уникальные идентификаторы изображений должны быть переданы как<f:param> в<p:graphicImage> который в свою очередь сгенерирует правильные URL для браузера.

<ui:repeat value="#{data.imageIds}" var="imageId">
    <p:graphicImage value="#{imageStreamer.image}">
        <f:param name="id" value="#{imageId}" />
    </p:graphicImage>
</ui:repeat>

Ваш#{data} Управляемый боб должен просто иметь:

private List<Long> imageIds; // +getter

#{imageStreamer} должен быть отдельным управляемым компонентом, который выглядит в основном так:

@ManagedBean
@ApplicationScoped
public class ImageStreamer {

    @EJB
    private ImageService service;

    public StreamedContent getImage() throws IOException {
        FacesContext context = FacesContext.getCurrentInstance();

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
            return new DefaultStreamedContent();
        }
        else {
            // So, browser is requesting the image. Get ID value from actual request param.
            String id = context.getExternalContext().getRequestParameterMap().get("id");
            Image image = service.find(Long.valueOf(id));
            return new DefaultStreamedContent(new ByteArrayInputStream(image.getBytes()));
        }
    }

}
@BalusC как вернуть ошибку 404, если изображение не найдено?
Добро пожаловать. Ну, я просто предположил, что вы используете EJB для бизнес-услуг / услуг передачи данных. Это обеспечивает простой и безопасный способ прозрачной обработки транзакций БД. Если вы им не пользуетесь, просто сделайте все, что вы обычно делаете, чтобы получить услугу.
спасибо, BalusC, это сработало, но мне пришлось комментировать @EJB, если я не получаю com.sun.faces.mgbean.ManagedBeanCreationException: произошла ошибка при выполнении внедрения ресурса в управляемый компонент imageStreamer & quot; У меня есть еще один вопрос & gt; Когда я обновляю страницу, изображения исчезают, почему это так. Еще раз спасибо user1433804
Еще один вопрос, если мне нужно получить событие клика на изображении, то как мне это сделать. Я не могу поставить Ajax внутри интерфейса: повтор. user1433804
0

Вы использовали неправильный интерфейс: повтор тега. У вас есть атрибут var, но вы не можете использовать его в атрибуте значения тега p: graphicImage. См. Пример использования,

       <ui:repeat value="#{yourBean.images}" var="img">
           <p:graphicImage value="/images/#{img}" />
        </ui:repeat>

Похожие вопросы