Этот виджет прекрасно может разместиться в боковой панели i цы, сообщая посетителям о том, какая сейчас погода. Внешний I виджета можно оформить как при помощи собственных изобра так и взяв картинки, поставляемые вместе с SDK Оформление виджета в файлах примера тесно связано с позицио ванием в CSS - практически все его составные части позициош абсолютно, из-за чего структура документа HTML не имеет значения. Вам надо лишь записать корректный код (X)HTML:
70 Dallas; TX (75226) Wind:
Данный код XHTML получен в результате XSL-преобразования. По мере обсуж¬дения фрагментов таблицы стилей мы будем приводить выражения XPath, позволяющие извлекать информацию из сводки погоды.
Здесь важно отметить, что для вмещающего элемента (weather-Container) позиция по умолчанию не задана, т. к. если ее задать, то внутренние элементы с абсолютным позиционированием будут пози¬ционироваться относительно документа, а не относительно вмещаю¬щего элемента weatherContainer:
if- KweatherContainer {
position: relative;
background: url('. ./img/background.gif'); width: 220px; height: 149px;
В случае относительного позиционирования элемент выводится в общем потоке страницы, если только вы явно не определите координаты верх¬него левого угла. В качестве фоновой подложки данного элемента выступает созданное вручную графическое изображение в формате GIF, имеющее те же размеры, что и сам элемент : 220x149 пикселов.
В состав SDK Weather.com включает собственные файлы с изображе¬ниями, которые позволяют наглядно отображать текущее состояние погоды. Эти файлы имеют формат PNG, а их имена соответствуют шаблону хх. png, где хх - это номер, который включается в состав ин¬формации о погоде, поставляемой веб-службой, и размещается в эле¬менте weather/cc/icon исходного XML-файла (аббревиатура сс происхо¬дит от английского current conditions - текущие условия). Чтобы до¬биться внешнего вида, показанного на рис. 8.2, для этого элемента не¬обходимо задать режим абсолютного позиционирования. Это даст вам возможность поместить его в любом месте объемлющего элемента и уб¬рать из общего потока документа.
' ffweatherlcon {
position: absolute; top: -25px;, left: -25px;
Этот фрагмент кода помещает изображение на 25 пикселов выше и ле¬вее верхнего левого угла объемлющего элемента. Изображения, поставляемые Weather.com, имеют формат PNG, поэтому для их рентного отображения в Internet Explorer потребуется прило которые усилия, т. к. этот броузер игнорирует информацию о ности изображения.
С целью корректного отображения полупрозрачных изображений мате PNG Microsoft предоставляет фильтр DirectX, называемый ImageLoader. Однако применение этого фильтра вызывает неп_: ное CSS-позиционирование в IE. От этой неприятности можно виться, скачав компонент PNG Behavior с сайта WebFX (http:// eae.net/dhtml/pngbehavlor/pngbehavior.html). Этот замечатель струмент прекрасно подходит для нашей ситуации. Чтобы в ваться им, достаточно добавить в таблицы CSS такое правило:
Sweatherlcon img { width: 128рх; height: 128рх;
behavior: url("css/pngbehavior.htc");
В броузере Internet Explorer это правило будет вызывать ко-PNG Behavior для всех элементов в виджете, но сам ко будет накладывать фильтр AlphalmaheLoader только на файлы PNG. Все остальные теги , в которых имена файлов им ширения . gif, . jpg или какие-либо другие, останутся нетро Свойство behavior определено только в Internet Explorer, по¬тальные броузеры будут попросту игнорировать его.
Имея дело с AlphalmageLoader, необходимо указывать значения width и height.
Следующий элемент виджета - температура, которая выводится менте с идентификатором weatherTemp и находится в элем: the r/cc/temp исходного файла XML. Эта информация оформляется
#weatherTemp {
position: absolute; .color: white; font: bold 48px Tahoroa; ' right: 12px; top: 5px;
Выбрав режим абсолютного позиционирования, можно р данный элемент в любом месте объемлющего элемента. В н чае значение температуры выводится в правом верхнем углу белого цвета и высотой 48 пикселов.
Ниже температуры выводится информация о местности, для получена сводка о погоде. В исходном документе XML эта ция расположена в элементе weather/loc/dnam. Текст с этими с ми выводится шрифтом белого цвета небольшого размера:
eatherLocation { font: 12рх Tahoma; color:-white; position:' absolute; right: 12px; top- 60px,
Этот элемент также имеет абсолютное позиционирование. Правый край влемента находится в 12 пикселах от правого края элемента weatherCon-taimer, а верхний край - в 60 пикселах от верхнего края weatherContainer.
Скорость ветра - это еще один важный параметр, заслуживающий ото¬бражения. В исходном документе XML информация о скорости ветра находится в элементе weather/cc/wind:
ftsfweatherWind { -.
position: absolute; !§?•. "font: bold 12px Tahoma,
color: white; -ЗрС - left: 85px; ,
top: 85px;
OweatherWind div {
font-weight: normal;
Если вы помните структуру HTML, рассмотренную выше в этом разде¬ле, элемент weatherWind содержит еще один элемент (даже если не помните, он все равно его содержит). Этот вложенный элемент со¬держит фактическую информацию о скорости ветра, тогда как роди¬тельский элемент служит лишь меткой и задает координаты вывода. В отличие от предыдущих элементов, weatherWind позиционируется по левому краю (свойство left), а не по правому, в 85 пикселах ниже верхнего края. Текст метки выводится жирным шрифтом, а само зна¬чение скорости - обычным.
И последний параметр, который будет отображаться виджетом, - это время последнего обновления. Эта информация также присутствует в исходном документе XML в элементе weather/loc/tm. Как и в случае с информацией о скорости ветра, структура HTML для вывода времени последнего обновления определяется родительским (weatherTime) и до¬черним () элементами. Внешний элемент определяет позицию вывода и одновременно служит меткой, а внутренний содержит значе¬ние времени:
#weatherTime { .•^ position: absolute, <" » font: bold 12px Tahoma, color: white,
left: 85рх; bottom: 5рх;
ftweatherTime SPAN { font-weight: normal:
В основе такой структуры лежат те же предпосылки, что и в с информацией о скорости ветра, с той лишь разницей, что сод мое элемента отображается в той же строке, что и метка.
Поскольку оформление внешнего вида этого виджета зависит i лицы стилей XSL, оно целиком и полностью находится в ваших j Вы можете полностью изменить структуру выходного докумев разметку и стиль вывода данных. В этом разделе мы привели: ния XPath для каждого из рассмотренных параметров погоды, демонстрируемый здесь перечень параметров далеко не полон, описаны не все параметры, но информацию о них можно найти в 1 er.com DTD по адресу www.weather.com/'documentation/xml/weati