Используйте html css javascript, чтобы создать собственную графическую учебную страницу RIA 1/2

Введите RIADemo в качестве имени проекта.

Выберите сервер для запуска и стандарт Java ee.

Выберите здесь tomcat5.0, j2ee1.4. В этой статье представлены примеры и она не зависит от сервера, поскольку сам html&css&javascript является статическим и после завершения будет представлять собой html-файл. Строго говоря, веб-программа должна запускаться на сервере, и Netbeans по-прежнему использует эту концепцию управления.
На этом этапе вы можете нажать «Готово», чтобы построить проект. Следующим шагом является выбор фреймворка. Здесь для простоты и чистоты фреймворк не выбран.
После создания проекта структура рабочей области проекта выглядит следующим образом:

Поскольку он статический, вам не нужно обращать внимание ни на что за пределами каталога веб-страницы.
Чтобы облегчить управление, необходимо создать два новых каталога в каталоге веб-страницы: inc и images. Это довольно просто и не будет здесь подробно описано.
Первый пример, ожидание запроса страницы, эффект следующий:

В этом примере необходимо выполнить операцию на текущей странице, заморозить страницу и отобразить окно ожидания перед выходом или возвратом результатов операции. Функция состоит в том, чтобы сообщить пользователю, что страница загружается. Этот пользовательский интерфейс может облегчить раздражение клиентов, вызванное длительным ожиданием, особенно при некоторых запросах больших объемов данных.
Краткий анализ показывает, что этот пример состоит из 2 основных пунктов.
1. Статические элементы
2. Когда появляется окно, а когда оно исчезает. Пользовательский интерфейс в этом эффекте представляет собой окно загрузки на затемненном фоне.
Что касается статических элементов, независимо от того, как они выглядят, их сущностью всегда являются HTML, CSS и JavaScript, за исключением, конечно, встроенных элементов управления, таких как Flash. Фактически, встроенные элементы управления больше не входят в сферу действия статических элементов, таких как HTML.
В этом примере поле с загрузкой на самом деле представляет собой просто элемент div, содержащий изображение с эффектом прокрутки и обычный текст. Однако элемент div украшается с помощью CSS, а затем в сочетании с характеристиками веб-страницы для управления используется JavaScript. отображение div и исчезнет.
Итак, как создать такой эффект, чтобы наглядно объяснить весь процесс производства, независимо от JavaScript, сначала создадим div?
В каталоге веб-страницы щелкните правой кнопкой мыши «Создать» -> «html».

Выберите html и назовите индекс файла.
После создания страницы единственный необходимый материал — это изображение loading.gif с эффектом прокрутки. Скопируйте изображение в папку изображений.
Затем создайте новый файл CSS, щелкните правой кнопкой мыши папку inc, выберите «Создать» -> «Другое» и выберите «Каскадные таблицы стилей» в других каталогах, как показано на рисунке:

Назовите стиль, нажмите «Готово» и создайте файл CSS. Вновь созданный CSS автоматически генерирует корень стиля. Переместите курсор в диапазон корневой таблицы стилей. Netbeans отобразит окно генератора стилей для CSS, а также «Там». — это окно предварительного просмотра эффекта, как показано ниже:

Окно генератора в правой части редактора предоставляет настройки GUI для многих атрибутов и автоматически генерирует соответствующий код. Ниже редактора находится предварительный просмотр стиля. Например, на панели шрифтов автор выбирает курсив для стиля и толщины. . Выделите жирный шрифт, затем выберите подчеркивание и выберите цвет #ff0099 (тип красного). При выборе цвета появится всплывающий селектор цвета. Выберите соответствующий цвет, и эффект предварительного просмотра будет следующим:

Редактор автоматически генерирует код, а в окне предварительного просмотра также отображается эффект после того, как приложение Netbeans делает это очень хорошо.
Следует отметить, что хотя код, генерируемый инструментом, прост, он, конечно, не так гибок и прост в управлении, как рукописный ввод.
Здесь определим стиль окна ожидания, который нам нужен.
.загрузка
{
border:2px Solid #a3bad9;/* Стиль границы примененного объекта стиля*/
color:#003366; /* Цвет содержимого примененного объекта стиля*/
padding:10px; /* Расстояние между содержимым объекта примененного стиля и границей стиля (сверху, снизу, слева, справа) */
Margin:0 /* Расстояние между объектом примененного стиля и окружающими его элементами (сверху, снизу, слева, справа) */
z-index:2000; /* Значение координаты z примененного объекта стиля на веб-странице*/
width:205px; /* Ширина объекта примененного стиля*/
text-align:center; /* Центрируем содержимое объекта примененного стиля*/
Position:absolute; /* Отображается положение объекта примененного стиля на странице */
шрифт-вес: жирный; /* Стиль шрифта в примененном объекте стиля*/
font-size: 13px; /* Размер шрифта в примененном объекте стиля*/
}
Если читателей интересует конкретное значение каждого атрибута, они могут поискать информацию для более глубокого понимания. Я не буду здесь вдаваться в подробности.
После создания CSS добавьте следующий код в только что созданный файл index.html, чтобы импортировать стиль CSS.

Присоединяйтесь в зоне

Сохраните файл, щелкните правой кнопкой мыши файл index.html и выберите «Выполнить файл».

Браузер откроется автоматически, и эффект отображения будет следующим:

Появится окно. Внимательные читатели могут обнаружить, что пользовательский интерфейс немного отличается от показанного в начале, если вы добавите следующий код к только что определенному стилю загрузки:
background:white url(../images/block-bg.gif) повтор-x /* Фон примененного объекта стиля и настроен на горизонтальное повторение*/;
Конечно, вам также необходимо добавить фоновое изображение block-bg.gif. После добавления фонового изображения эффект будет следующим:

На этом этапе пользовательский интерфейс завершен.
Далее напишите, как сделать веб-страницу темной и недоступной для кликов.
Самый простой способ затемнить веб-страницу — изменить цвет фона веб-страницы на темный цвет, но это, очевидно, бессмысленно, поскольку после изменения цвета на темный по элементам на странице все равно можно будет нажимать.
Так как же затемнить фон и сделать невозможным нажатие?
Еще раз анализируя принцип работы статических веб-страниц, затемнение должно быть достигнуто за счет регулировки цвета. Чтобы добиться некликабельности, этого можно добиться путем замены объекта, по которому щелкают, то есть на объекте, на который нужно щелкнуть, генерируется объект, и этот объект является прозрачным, тогда, когда пользователь щелкает мышью, он на самом деле является прозрачным объектом, блокирующим базовый объект, что создает у пользователя иллюзию того, что щелчок недействителен, как показано ниже:

Если объект B прозрачен и находится рядом с объектом A, если третья сторона пытается связаться с объектом A и встречает только объект B, то все контакты с объектом A будут недействительны.
На этом этапе анализа нам нужно создать элемент div с этим специальным эффектом. В конечном итоге это все еще создание и применение CSS.
Эффект темной прозрачности можно получить с помощью атрибута фильтра CSS и переопределить новый стиль bgdiv.
.bgdiv
{
фон:#ccc; /* цвет фона*/
непрозрачность:.3; /* прозрачность*/
фильтр: альфа(непрозрачность=30); /* фильтр прозрачный*/;
Position:absolute; /* Отображается положение объекта примененного стиля на странице */
z-index:1000; /* Значение координаты z примененного объекта стиля на веб-странице*/
width:500px; /* Ширина объекта примененного стиля*/
height:500px; /*Высота объекта примененного стиля*/
top: 0px /* Расстояние между объектом примененного стиля и верхней частью страницы*/;
left: 0px; /* Расстояние между объектом примененного стиля и левым краем страницы*/
}

В области тела добавьте:
, запустите файл, эффект следующий:

На данный момент дизайн пользовательского интерфейса завершен, но размер видимого нами div составляет 500*500, что не заполняет всю страницу, а поле ожидания не центрировано, и эффект виден уже с самого начала. очевидно, что это невозможно сделать напрямую. При фактическом использовании нам нужно, чтобы фон заполнял всю страницу, поле ожидания должно отображаться в центре, и мы должны иметь возможность контролировать, когда эффект появляется, а когда он исчезает.
Затем эти задачи необходимо выполнить с помощью JavaScript.
JavaScript может управлять почти всеми статическими элементами на странице, и вышеупомянутые эффекты официально достигаются за счет управления фоновым элементом div и окном ожидания.
В JavaScript самый простой способ получить элемент на странице — это присвоить значение атрибуту ID целевого объекта, а затем получить его с помощью метода getElementbyId JavaScript.
Здесь сначала присвойте значение атрибуту ID bgdiv, например:

Давайте сначала решим первую проблему: установим размер слоя для заполнения всей страницы с помощью JavaScript.
функция шоубг()
{
var bgdiv=document.getElementById("bgdiv"); // Получаем объект bgdiv
bgdiv.style.width=document.body.clientWidth //Устанавливаем ширину объекта bgdiv равной ширине видимой области веб-страницы
if (document.body.clientHeight>document.body.scrollHeight) //Устанавливаем высоту объекта bgdiv равной высоте видимой области веб-страницы
bgdiv.style.height=document.body.clientHeight;
еще
bgdiv.style.height=document.body.scrollHeight;
}
Здесь необходимо объяснить, что clientWidh и ScrollWidth представляют ширину визуальной области. Разница в том, что если на веб-странице есть полосы прокрутки, то scallWidth больше, чем clientWidth, поскольку scallWidth включает полосу прокрутки в ?? ??????? часть, а clientWidth нет, только видимая часть.
В приведенной выше функции clientWidth используется в качестве ширины, поскольку в соответствии с основными принципами веб-дизайна весьма недружелюбно создавать веб-страницу, содержащую горизонтальную полосу прокрутки, поскольку мышь может прокручивать только вверх и вниз, но не влево. справа, поэтому здесь непосредственное использование clientWidth означает, что горизонтальная полоса прокрутки не появится во всем проекте.
Приведенная ниже настройка высоты учитывает совместимость с вертикальными полосами прокрутки и без них.
Вышеупомянутая функция может гарантировать, что вызываемый bgdiv сможет заполнить весь экран.

В папке inc создайте новый файл JavaScript, скопируйте в него указанную выше функцию и добавьте на страницу следующий код, чтобы представить функцию

Чтобы облегчить отображение, добавьте onload="showbg();" в тег body. После загрузки страницы вы увидите, что измененный bgdiv заполнил всю страницу.
Принцип настройки положения окна ожидания аналогичен. Функция:
функция шоу-ожидание()
{
showbg(); // показываем bgdiv
var loading=document.getElementById("loaddiv");//Получаем объект загрузки
loading.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//Установить расстояние загрузки сверху
loading.style.left=document.body.clientWidth/2-110;//Задаем расстояние между загрузкой и левым краем
}
Вызовите showwait в событии загрузки, чтобы отобразить окно ожидания на темном прозрачном фоне.

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

Вышеупомянутый эффект отображается сразу после открытия страницы. Если вы хотите контролировать, будет ли она отображаться, вам необходимо использовать отображение атрибута CSS. Когда значение равно «block», оно будет отображаться, а если его нет, оно будет отображаться. не будет отображаться.

Мы добавили display: none к вышеуказанным атрибутам CSS, тогда эффект не будет отображаться при открытии страницы.

Затем добавьте bgdiv.style.display="block" в функцию showbg;

Добавьте loading.style.display="none" в функцию showwait;

Добавляем отображение в область тела страницы и запускаем страницу. Видна только ссылка отображения. После нажатия на ссылку отображения отобразится нужный нам эффект, как показано на рисунке:

Появившиеся эффекты не исчезнут. В моей ежедневной исследовательской работе автор также обнаружил феномен: при нажатии на ссылку на странице (то есть отправке запроса на сервер), когда сервер не завершил обработку и не вернул страницу клиенту, происходит Самой страницы изменений не будет, и так называемая медленная скорость сети тоже такая. Когда сервер завершает обработку, он возвращает html пользователю и страница начинает меняться. Затем, если событие showwait инициируется при нажатии на ссылку, эффект будет проявляться до тех пор, пока сервер не завершит обработку запроса, а страница не будет перенаправлена ​​и не исчезнет.

Например, если мы изменим отображаемый код на отображение, а затем запустим страницу, а затем нажмем «Отобразить», мы увидим, что появляется окно ожидания, а когда страница исчезает, появляется домашняя страница Sun.
Давайте оглянемся назад: на самом деле в этом примере нет ничего особенного, просто требования к HTML, CSS и javascript очень высоки. Только если вы знакомы с этими тремя статическими элементами, вы сможете его хорошо понять. И здесь тоже есть определенные требования к художникам. Следует отметить, что картинки прокрутки и фоновые картинки ожидания не сделаны автором. Они также являются картинками внешнего кадра. доб.
Стоит отметить, что редактор Netbeans 6.1 имеет обширную поддержку подсказок для JavaScript, не только поддержку ключевых слов, но также подсказку о совместимых браузерах и даже несколько простых примеров.

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

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

1. Создайте свой собственный пользовательский интерфейс, используя HTML и CSS.

2. Внимательно изучите режим поведения страницы и напишите javascript для управления пользовательским интерфейсом.

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