Изучаем Java EE 7 - [147]
Вдохновленный моделью компонентов Swing и другими фреймворками графических интерфейсов пользователя, JSF позволяет разработчикам думать в терминах компонентов, событий, компонентов-подложек и их взаимодействий, а не в терминах запросов, ответов и языка разметки. Его цель — сделать веб-разработку быстрее и проще, предоставив поддержку компонентов пользовательского интерфейса (таких как текстовые поля, списки, панели вкладок и сеток с данными) с точки зрения подхода быстрой разработки приложений (RAD).
В этой главе описаны веб-страницы, созданные с помощью HTML, CSS и JavaScript. Далее мы сфокусируемся на создании веб-интерфейсов с использованием компонентов JSF, а также научимся создавать собственные компоненты.
Концепция веб-страниц
Когда мы создаем веб-приложение, мы заинтересованы в отображении динамического содержимого, которое можно прочитать в браузере: список элементов каталога (например, компакт-диски и книги), информацию о клиенте под заданным именем, корзину товаров, содержащую предметы, которые клиент хочет купить, и т. д. С другой стороны, статический контент, такой как адрес издательства и часто задаваемые вопросы с информацией о том, как купить товары, изменяется редко или не изменяется никогда. Статическими также могут быть изображения, видео на странице.
Конечная цель создания веб-страницы — отображение в браузере. Страница должна использовать языки, которые браузер сможет понять, например HTML, XHTML, CSS и JavaScript.
HTML
Hypertext Markup Language (HTML) — основной язык для веб-страниц. Он основан на стандартном обобщенном языке разметки (SGML), который является метаязыком, определяющим языки разметки. HTML использует разметку, или теги, для того, чтобы структурировать текст на абзацы, списки, ссылки, кнопки, текстовые поля и т. д.
HTML-страница — это текстовый документ, используемый браузерами для представления текста и графики. Такие документы представляют собой текстовые файлы, которые часто имеют расширение. html или. htm. Веб-страница состоит из содержимого, тегов, позволяющих изменить некоторые свойства содержимого, и внешних объектов, таких как изображения и видео, а также из JavaScript- или CSS-файлов. Листинг 10.1 показывает, как с помощью HTML отобразить форму для создания новой книги.
>Создать новую книгу
>
>
>··>····ISBN: >····>··
>··>····Название: >····>··
>··>····Цена: >····>··
>··>····Описание: >····>··
>··>····Количество страниц: >····>··
>··>····Иллюстрации: >····>··
>
>
>
>APress — Изучаем Java EE 7
Как правило, корректная страница HTML начинается с тега , который представляет собой контейнер для документа. За ним следуют теги
и . В рамках тега содержится видимое содержимое, например код HTML, где отображаются таблицы, метки, поля ввода и кнопка. Как вы можете видеть в листинге 10.1, разметка в файле newBook.html не соответствует этим правилам, но браузеры все равно отобразят эту некорректную страницу. В результате страница будет выглядеть так, как показано на рис. 10.1.
Рис. 10.1. Графическое представление страницы newBook.html
Страница, показанная на рис. 10.1, является вполне приемлемым результатом, несмотря на то что код листинга 10.1 не очень хорошо отформатирован в терминах XML.
• Страница не имеет тегов ,
или .• Теги и
не закрыты.
• Значения атрибутов находятся не в кавычках (border=0 вместо border="0").
• В тегах используются прописные и строчные буквы (например, в листинге можно встретить
Большинство браузеров позволяют допускать такие ошибки и отобразят эту форму. Тем не менее, если вы захотите обработать этот элемент с помощью, например, XML-парсера, у вас ничего не выйдет. Чтобы понять, почему так получится, рассмотрим веб-страницу, которая отформатирована в строгом соответствии с XML-структурой с использованием расширяемого языка разметки гипертекста (eXtensible HyperText Markup Language, XHTML).
На момент написания этой книги спецификация HTML5 еще не была завершена. HTML5 добавит много новых функций, таких как элементы
XHTML
XHTML был создан вскоре после появления HTML 4.01. Он происходит из HTML, но при этом переформулирован в строгом соответствии с XML. Это означает, что документ XHTML по сути является документом XML, который следует определенной схеме и имеет графическое представление в браузерах. XHTML-файл (с расширением. xhtml) может либо быть использован как XML, либо сразу отобразиться в браузере.
