Глава 3. РАБОТА С ДАННЫМИ НА Web-СТРАНИЦАХ

Обмен данными между окнами (модальный диалог)

Существует множество задач, которые требуют создания сценариев, поддерживающие передачу данных из одного окна в другое. Такие ситуации возникают при сборе данных от пользователя, проверки пароля, проведения контроля данных и т.п. Интерактивные HTML-страницы позволяют организовать ввод данных, которые затем анализируются и пользователю предлагается переход к следующей Web-странице. Суть разработки таких приложений заключается в создании главной HTML-страницы, с которой осуществляется переход к диалоговому окну для ввода данных. Для диалогового окна создается отдельная Web-страница, на которой размещаются текстовые окна для ввода данных. Обязательное исполнение действий с диалоговым окном поддерживается методом ShowModalDialog, который поддерживает передачу параметров из вспомогательного окна в главное окно. Предположим, необходимо создать сценарий обработки данных, которые содержат сведения о пользователе, причем, пока эти сведения не будут подготовлены, переход к следующей Web-странице будет недоступен. Пример созданного приложения для главного окна показан на рис. 12.

Рис. 12. Web-страница для регистрации пользователя

Пользователь нажимает на кнопку в приложении, для того чтобы зарегистрироваться в системе, получает подтверждение на стандартном диалоговом окне системы рис. 13, созданного на основе оператора MsgBox.

Рис. 13. Диалоговое окно, созданное на основе оператора MsgBox

Дальнейшие действия пользователя связаны с заполнением текстовых окон на Web-странице, которая вызвана с помощью метода ShowModalDialog. Особенностью модальных окон заключается в том, что пока пользователь не нажмет на кнопку с наименованием «Закрыть окно и сохранить данные», дальнейшие действия с главным окном Web-страницы будут заблокированы. На рис. 14 показан внешний вид Web-страницы модального окна с заполненными данными от пользователя.

Рис. 14. Окно модального диалога с заполненными полями

При разработке сценария сбора данных от пользователя системы было предусмотрено использование стилей для описания элементов, находящихся на Web-странице. В частности, использованы возможности CSS для управления видимостью некоторых элементов на Web-странице. Например, если пользователь введет в диалоговое окно данные о себе, тогда при возврате на главную Web-страницу, станут видимыми дополнительно два элемента – текстовое окно со сведениями от пользователя и командная кнопка для возможности открытия следующей Web-страницы. Если пользователь не заполнит текстовые окна в модальном окне, то получит соответствующее сообщение в дополнительном текстовом окне на главной Web-странице. На рис. 15 показано, как видоизменилось главное окно, причем никакой перезагрузки этого окна не осуществлялось. Здесь можно сказать, что включение сценариев в Web-страницу во многом экономит ресурсы при работе пользователя в сети.

Рис. 15. Новое состояние главного окна диалога при возврате данных с модального окна

Просмотреть работу пользователя с приложением для ведения модального диалога можно, открыв ПРИМЕР7. Полный текст программных кодов для главной Web-страницы представлен в листинге 8.

Листинг 8.

<HTML>

<HEAD>

<TITLE>Вызов диалогового окна</TITLE>

</HEAD>

Sub CC1

Dim y

msgbox"Внимание ! Появится окно для ведения диалога"

y=window.showModalDialog("Dop_files/Mod-Dialog.htm") ' Так организован вызов диалогового окна

z=Len(y) ' Объект T1 в диалоговом окне, из которого берем данные, когда пустой,

if z=4 then ' то имеет четыре пробельных символов, поэтому его длина равна 4

otv="Уважаемый пользователь! Вы не вводили данные о себе"

else

otv="Спасибо за указанные сведения - " & y

CD.style.visibility=visible

end if

tt1.size=70

tt1.style.visibility=visible ' Делаем видимым текстовое окно tt1

tt1.value=otv

End Sub

Sub B1

Dim y

y="PR1-Функция при загрузке.htm"

Set y=window.open(y,""," top=170, left=120, width=400, height=150")

End Sub

</SCRIPT>

<BODY>

Пример вызова окна для осуществления модального диалога<BR>

<BUTTON Name=CD onClick="B1()"

Style="font-size:18pt; color:Navy; background:#EEE8AA;visibility:hidden">

Можно открыть новую Web-страницу

</BUTTON><BR>

</P>

<A HREF="Dop_files/Code3.htm">Посмотреть программные коды для окна с диалогом</A>

</BODY>

</HTML>

Программные коды включают сценарий обработки событий на VBScript и теги HTML, с помощью которых сформирована главная страница. Процедура Sub CC1 выполняет последовательно сценарий работы с диалоговым окном, которое открывается методом Open по адресу: ("../Доп_файлы/Mod-Dialog.htm"). Окно модального диалога, которое показано на рис. 14 имеет собственный сценарий обработки события, его программные коды представлены в листинге 9.

Листинг 9.

<HTML>

<HEAD>

<TITLE>Диалоговое окно</TITLE>

Sub document_onload

document.T1.value="T1"

End Sub

Sub B2

T1.value=T3.value & " " & T1.value & " " & T2.value

window.returnValue=document.all.T1.value

window.close()

End Sub

</SCRIPT>

</HEAD>

<H5>На этой странице организован ввод анкетных данных пользователя,

которые будут переданы для анализа на предыдущую страницу в виде

собранного текста.</H5>

Пожалуйста, введите: имя, отчество, фамилию<BR><BR>

<INPUT TYPE="TEXT" NAME="T2" SIZE=18 >_Отчество<BR>

<INPUT TYPE="TEXT" NAME="T3" SIZE=18 >_Фамилия

<P>

<H5 STYLE="color:red">Закрыть окно и сохранить данные</H5>

</BUTTON>

</P>

</BODY>

</HTML>

При загрузке в браузер страницы создается объект T1, которому присваивается значение текстового окна с именем T1. Процедура Sub B2 отвечает за сбор всех данных из текстовых окон T1, T2, T3 и передачу общего значения объекту, созданного в главном окне, что достигается использованием метода window.returnValue=document.all.T1.value (return – возврат). После того, как окно модального диалога закрывается методом window.close(), содержимое объекта T1, будет возвращено в родительское окно и присвоено переменной y. Следует обратить внимание на то, что процедура в главном окне, встречая запись:

y=window.showModalDialog("Dop_files/Mod-Dialog.htm"), порождает подчиненное диалоговое окно, при этом приостанавливает действие процедуры до тех пор, пока не будет закрыто диалоговое окно. В этом и заключается секрет работы модального диалога, поэтому продолжение действия процедуры зависит от полученного результата, что нашло свое отражение при вводе условных операторов в процедуре Sub CC1 главного окна, для анализа результатов.

При разработке сценариев обработки событий для главного родительского окна и подчиненного – модального окна, использован парный тег <BUTTON>для создания командной кнопки. Его особенностью является то, что внутрь тега можно помещать дополнительные теги HTML, а так же задавать свойства с помощью стилей. Так, для кнопки, которая должна появиться на экране в главном окне с наименованием «Можно открыть новую Web-страницу», применен стиль: Style="font-size:18pt; color:Navy; background:#EEE8AA;visibility:hidden", который скрывает с экрана эту кнопку, и использован тег <IMG SRC="../Images/Ris7.gif">, указывающий путь к файлу с рисунком, который будет расположен на кнопке. Появится кнопка на экране пользователя после того, как будет проведен анализ содержимого, возвращенного из окна модального диалога.

Процедура Sub B1 запускается событием OnClick при нажатии пользователем на появившейся кнопке, все программные коды взяты из примера 5.