Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Java EE (J2EE) и Spring > ajax и waiting form

Автор: silokhin 3.2.2010, 22:43

Добрый вечер. Я использую в проекте JSF 2.0 и встроенную поддержку ajax (тег <f:ajax>).
Как сделать, чтоб в процессе обмена данными между серваком и клиентом выдавать модальную форму типа прогресс бара, например "Загрузка...", и потом она исчезала.

Автор: Samotnik 3.2.2010, 23:40

silokhin, если нужна заставка как таковая. То лучше всего сделать следующее :
Воспользоваться http://www.ajaxload.info/ - сгенерить себе анимацию. Затем все очень просто, как только отправляешь запрос на сервак, прорисовываешь этот прогресс бар с помощью css display:block  как только приходит ответ - ты делаешь этому элементу  display:none (естественно лучше поместить его в какой-нибудь div)
Лично я всегда так делаю, когда нужно создать видимость процесса.  Этот способ изящный и не требует много временных затрат, для вычисления реальных процентов приема/передачи запроса.
Хотя приходилось часто делать и такое   smile

Автор: silokhin 4.2.2010, 00:23

Хотелось бы уточнить момент

Цитата

как только отправляешь запрос на сервак, прорисовываешь этот прогресс бар с помощью css display:block как только приходит ответ - ты делаешь этому элементу display:none

т.к. с ajax еще мало знаком

Благодарен за ответ! smile

Автор: Samotnik 4.2.2010, 00:37

Цитата(silokhin @ 3.2.2010, 23:23

)

т.к. с ajax еще мало знаком

тут ajax не нужен.
Нужен простейший JavaScript
что-то вроде:

Код


document.getElementById('id_твоего_progress_bar').style.display = 'none';
затем
document.getElementById('id_твоего_progress_bar').style.display = 'block';

Если этот способ подходит (т.е. не нужно считать реальные проценты) то могу в деталях объяснить как что делать.

Автор: silokhin 4.2.2010, 00:50

Боюсь показаться глупым...
Есть кнопка

Код


<h:inputText id="txt" value="#{Bean.Property}">
    <f:ajax render="result"/>
</h:inputText>
<h:commandButton id="btn" value="Ok" action="#{SomeBean.SomeAction}">
    <f:ajax execute="txt" render="result"/>
</h:commandButton>
<h:outputText id="result"/>

Можете на основе этого кода сделать прогресс бар smile

Автор: dobrolub 4.2.2010, 05:01

Советую посмотреть на richfaces jsf components. Версия под JSF 2.0 по моему ещё в Бета, но компоненты которые тебе нужны уже есть.
Проект разрабатывается несколькими нашими ребятами в jBoss.

Modal Panel (Dialog)
http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.jsf?c=modalPanel&tab=usage#

Progress Bar
http://livedemo.exadel.com/richfaces-demo/richfaces/progressBar.jsf?c=progressBar&tab=usage

Автор: silokhin 4.2.2010, 08:42

Спасибо за ответ, но richfaces в своем проекте не использую.
Хочу живой пример от Samotnik.

Автор: Samotnik 4.2.2010, 15:55

silokhin, я почти ничего не понял из сего кода. Меня интересует.
Вот когда ты нажимаешь на кнопку что происходит ? Посылается запрос на сервер ? Каким образом ?

Вобще суть:
Ты нажимаешь на кнопку - посылается запрос на сервер, это наверняка происходит в какой-то функции. Так вот в эту функцию тебе нужно добавить JS или вызвать функцию JS.
покажи, что у тебя вызывается, когда на кнопку жмякаешь .

Автор: silokhin 4.2.2010, 16:22

Вот еще пример:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Ajax</title>
</h:head>
<h:body>
    <h:form id="form1" prependId="false">
        <h:outputScript name="ajax.js" library="javax.faces" target="head"/>
        <h:outputText id="out1" value="#{count.count}"/>
        <br/>
        <h:commandButton id="button1" value="Count"
                         onclick="javax.faces.Ajax.ajaxRequest(this, event, {execute: this.id, render: 'out1'}); return false;"/>
    </h:form>
</h:body>
</html>

Я не знаю как узнать когда прийдет ответ с сервака.
Как к этому примеру привязать hide - block какого-нибудь элемента.

Автор: silokhin 4.2.2010, 22:01

Нашел решение.
Пишем JavaScript:

Код


<script type="text/javascript" charset="UTF-8">
            var statusUpdate = function statusUpdate(data) {
                var img = window.document.getElementById('waiter');
                //Если статус запроса - begin, показываем скрытые элементы.
                if (data.status == "begin") {
                    img.style.display = 'block';
                //Как только результат запроса - удачный (success), снова скрываем элементы.
                } else if (data.status == "success") {
                    img.style.display = 'none';
                }
            }
            //Добавляем нашу переменную сюда.
            jsf.ajax.addOnEvent(statusUpdate);
        </script>

Затем в дескрипторе ajax добавляем нашу переменную statusUpdate:

Код


<h:commandButton id="btn" value="Перегляд" action="#{WorkedBean.button_select}" >
     <f:ajax execute="txt chbx ..." render="txt1" onevent="statusUpdate"/>
</h:commandButton>

И все работает!
P.S. Всем спасибо за помощь. Использовал JSF 2.0.