Мониторинг обменных курсов валют
18c0693f

Создание интерфейса


Вопрос о том, каким должен быть интерфейс этой страницы, решался еще на этапе проектирования. На рис. 11.2 показано, как выглядит эта страница, отображаемая в Internet Explorer. Поговорим сейчас о реализации этого интерфейса.

Но вначале пару слов о том, какие возможности предоставляет среда FrontPage 2000 для работы с документом. Основное окно среды, в котором отображается документ, имеет три вкладки - Normal, HTML, Preview - каждая из которых показывает тот или иной облик документа. Создавать документ, в особенности его интерфейс, удобнее всего, пожалуй, на вкладке Normal, где все вставляемые объекты отображаются в обычном виде. Вкладка HTML показывает другой облик этого же документа - его HTML-код. Наконец, вкладка Preview позволяет показать документ в том виде, каким он будет отображаться в Internet Explorer, следовательно, с исполнением программного кода. По этой причине попытка просмотреть ASP-страницы на этой вкладке приводит к возникновению ошибки, поскольку код, предназначенный для сервера, выполниться во FrontPage не может.

В среде FrontPage 2000 есть три варианта, где можно выполнить работу по созданию интерфейса документа:


Вернемся к нашему документу. На рис. 11.2 можно видеть, что проектируемая страница имеет 9 интерфейсных объектов - 5 командных кнопок, список с названиями книг, список с оценками и два текстовых окна для ввода отзывов и вопросов. Однако это не все интерфейсные объекты, которые в действительности расположены на странице, поскольку некоторые из реально существующих объектов невидимы в Internet Explorer. С другой стороны, список с названиями книг создается сервером программно и потому он виден в Internet Explorer, но не создается и не отображается при работе с документом в среде FrontPage.

Какие же еще интерфейсные объекты следует разместить на нашей странице, помимо 9 вышеупомянутых? Прежде всего, это объект, задающий форму, в которую и вставляются все остальные интерфейсные элементы. Кроме того, мне понадобилось, чтобы у формы были еще два текстовых поля, хранящих название выбранной пользователем книги и фамилию автора. Почему эти поля необходимы, скажу чуть позже, сейчас же отмечу, что, поскольку значения этих полей заполняются не пользователем, работающим с документом, а программным путем, то поля имеют статус "hidden", что делает их невидимыми.

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

При задании свойств моей формы я дал ей имя "frmMain", указал, что получателем данных будет ASP-страница узла "qomToBase.asp", задал метод "Post", как метод пересылки данных. Вот как выглядит тег, задающий форму:

<form method="POST" action="qomToBase.asp" name="frmMain" id="frmMain">



Затем я вставил в форму 10 уже упоминавшихся интерфейсных объектов - 2 скрытых и 8 видимых. На деталях процесса останавливаться не буду, а описание соответствующих тегов все-таки приведу:

<input type="hidden" name="Author" id="Author" size="20" > <input type="hidden" name="Title" size="20" id="Title"> <TEXTAREA rows=4 cols=30 id=Question name=Question> </TEXTAREA> <TEXTAREA rows=4 cols=30 id=Opinion name=Opinion> </TEXTAREA> <select size="1" name="Mark" id="Mark"> <option selected value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" value="Послать вопрос и/или отзыв и/или оценку" name="btnSendQOM" id="btnSendQOM"> <input type="reset" value="Очистить поле вопроса, отзыва" name="B2"> <INPUT type="button" value="Посмотреть мои вопросы и ответы на них" id=btnLookmyQ name=btnLookmyQ> <INPUT type="button" value="Посмотреть все вопросы и ответы на них" id=btnLookAllQ name=btnLookAllQ> <INPUT type="button" value="Посмотреть отзывы и оценки" id=btnLookOM name=btnLookOM>

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


увеличить изображение
Рис. 11.4.  Вкладка Normal. Установка свойств объекта frmMain

На рис. 11.5 показана работа с тем же документом, но в среде редактора VBScript. Обратите внимание на панель инструментов - Toolbox, содержащую интерфейсные элементы. В окне Source показан HTML-код данной страницы.


увеличить изображение
Рис. 11.5.  Создание интерфейса в среде редактора VBScript

Приведу теперь несколько важных комментариев, поясняющих некоторые особенности создаваемого мной интерфейса:







Самый выгодный курс обмена валюты