VPF::ajax и waiting form - Форум программистов

silokhin

Дата 3.2.2010, 22:43 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 25.7.2009

Репутация: нет
Всего: 1

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

Samotnik

Дата 3.2.2010, 23:40 (ссылка)

(нет голосов)

Загрузка ...

Super star !

Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: 5
Всего: 191

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

silokhin

Дата 4.2.2010, 00:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 25.7.2009

Репутация: нет
Всего: 1

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

Цитата

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

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

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

Samotnik

Дата 4.2.2010, 00:37 (ссылка)

(нет голосов)

Загрузка ...

Super star !

Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: 5
Всего: 191

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 25.7.2009

Репутация: нет
Всего: 1

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

Код


<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

Это сообщение отредактировал(а) silokhin - 4.2.2010, 00:51

dobrolub

Дата 4.2.2010, 05:01 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 385
Регистрация: 18.12.2009
Где: Vancouver, Canada

Репутация: 4
Всего: 16

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

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

Progress Bar
http://livedemo.exadel.com/richfaces-demo/...r&tab=usage

silokhin

Дата 4.2.2010, 08:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 25.7.2009

Репутация: нет
Всего: 1

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

Samotnik

Дата 4.2.2010, 15:55 (ссылка)

(нет голосов)

Загрузка ...

Super star !

Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: 5
Всего: 191

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

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

silokhin

Дата 4.2.2010, 16:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 25.7.2009

Репутация: нет
Всего: 1

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

Код


<!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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 25.7.2009

Репутация: нет
Всего: 1

Нашел решение.
Пишем 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.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Java EE (J2EE) и Spring \| Следующая тема »