Пространственные штриховые штрихи для обработки бэкэнд

Я был бы признателен, если бы кто-нибудь мог дать мне несколько советов о баре прогресса и обработке ajax-back-end.

Чтобы уточнить, что мне нужно, выполните следующие действия:

У меня есть командная кнопка для выполнения некоторой обработки в фоновом режиме. Я хотел бы показать индикатор выполнения, который достигнет 100%, когда резервная копия bean завершает обработку задних инструкций. Я просмотрел много потоков, но не повезло. Большинство из них не указали конкретный пример, как это сделать. Ниже приведен фрагмент моего кода:

</h:panelGrid>
<p:commandButton id="btn" value="DoSomeAction"
styleClass="ui-priority-primary" update="panel"
onclick="PF('pbAjax').start();PF('startButton1').disable();"
widgetVar="startButton1"
actionListener="#{actionBean.DoSomeAction}" />

<p:progressBar widgetVar="pbAjax" ajax="true"
value="#{progressBean.progress}" labelTemplate="{value}%"
styleClass="animated">
<p:ajax event="complete" listener="#{progressBean.onComplete}"
update="growl" oncomplete="startButton2.enable()" />
</p:progressBar>
</p:panel>

Это код для Progress Brean:

@ManagedBean(name="progressBean")
public class ProgressBean implements Serializable {  

  private Integer progress;  

  public Integer getProgress() {  
    if(progress == null)  
      progress = 0;  
    else {  
      progress = progress + (int)(Math.random() * 35);      
      if(progress > 100)  
      progress = 100;  
    }  

    return progress;  
  }  

  public void setProgress(Integer progress) {  
    this.progress = progress;  
  }  

  public void onComplete() {  
    FacesContext.getCurrentInstance().addMessage(null, new  FacesMessage(FacesMessage.SEVERITY_INFO, "Progress Completed", "Progress Completed"));  
  }  

  public void cancel() {  
    progress = null;  
  }  
}

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

Ответы

Ответ 1

Это будет проще, если я просто проведу вас через образец кода, так как у вас есть два beans, и я не знаю взаимодействия между ними. Вы можете использовать его, чтобы применить его к себе.

<p:commandButton>

<p:commandButton value="Start" type="button" onclick="pbAjax.start();startButton1.disable();" widgetVar="startButton1" />

Ничего впечатляющего здесь. У вас есть commandButton с widgetVar="startButton1". Когда вы нажимаете на него, onclick входит и отключает commandButton. Он также сигнализирует <p:progressBar>, чтобы начать через pbAjax.start() (<p:progressBar> имеет widgetVar = "pbAjax.start()").

<p:progressBar>

<p:progressBar widgetVar="pbAjax" value="#{progressBean.progress}" ajax="true" labelTemplate="{value}%">
    <p:ajax event="complete" listener="#{progressBean.onComplete}"
            update="growl" oncomplete="startButton1.enable()"/>
</p:progressBar>

<p:progressBar> будет просто продолжать вызов #{progressBean.progress} для обновления прогресса. Когда прогресс достигнет значения 100% <p:ajax>, нажмите и #{progressBean.onComplete}. <p:commandButton> получить повторно включен и <p:growl> обновляется. Обратите внимание, как я не использую PF(...). Честно говоря, я не уверен, что это имеет значение, я не тестировал.

Примечание

В вашем <p:progressBar> у вас есть oncomplete="startButton2.enable(). Он должен быть startButton1.enable(), так как ваше значение widgetVar для вашего <p:commandButton> равно startButton1.

Также обратите внимание, что я не использовал styleClass="animated". С этим вы просто получите бледно-голубую полосу. Если вы хотите его использовать, вам нужно предпринять дополнительные шаги. Глядя на ваш код, кажется, вы берете его прямо из витрины PrimeFaces, поэтому я также буду использовать их активы.

Использование styleClass="animated"

Сначала вы создадите папку resources в папке webapp (Web Pages для Netbeans). Затем создайте папку с именем css и добавьте таблицу стилей под названием style.css. Структура каталогов будет выглядеть следующим образом: resources/css/style.css. В style.css вам нужно будет определить это правило. (Не беспокойтесь, если это сбивает с толку, у меня будет весь код ниже).

.animated .ui-progressbar-value { 
    background-image: url("#{resource['images/pbar-ani.gif']}");
}

Затем вы создадите папку images под resources и поместите изображение pbar-ani.gif в этой папке (resources/images/pbar-ani.gif). Изображение ниже.

Progress Bar

Убедитесь, что у вас <h:outputStylesheet name='css/style.css' /> в <h:head> и добавьте styleClass="animated" в <p:progressBar>.

Важно!

Если вы используете PrimeFaces 3.5, как я, изображение просто не будет отображаться (в том числе, когда вы не используете styleClass). Если вы внимательно посмотрите на Firebug, вы увидите следующую ошибку:

Uncaught TypeError: Object #<Object> has no method 'easeInOutCirc'

Один обходной путь, который я нашел для этого, - просто использовать фиктивный <p:dialog>.

Что это.

Более подробную информацию о progressBar можно найти в руководстве разработчика.

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

В любом случае здесь пример кода, как и было обещано. Я использую тот же ProgressBean из витрины (такой же, как ваш). Имейте в виду, что вам придется придумать логику взаимодействия вашего объекта с ProgressBean, чтобы обновить индикатор выполнения.

Резюме

<h:head>
    <h:outputStylesheet name='css/style.css' />
</h:head>
<h:body>
    <h:form >
        <p:growl id="growl" />
        <h3>Advanced Ajax ProgressBar</h3>
        <p:commandButton value="Start" type="button" onclick="pbAjax.start();
                startButton1.disable();" widgetVar="startButton1" />
        <br /><br />
        <p:progressBar widgetVar="pbAjax" value="#{progressBean.progress}" ajax="true" labelTemplate="{value}%" styleClass="animated">
            <p:ajax event="complete" listener="#{progressBean.onComplete}"
                    update="growl" oncomplete="startButton1.enable()"/>
        </p:progressBar>
        <p:dialog></p:dialog><!-- For PrimeFaces 3.5 -->
    </h:form>
</h:body>

и помните свои каталоги

resources/css/style.css

resources/images/pbar-ani.gif