Как сделать свой виджет для wordpress. Как сделать виджет в Android без программирования
Вы хотите создать свои собственные виджеты в WordPress? Виджеты позволяют перетаскивать элементы в любую боковую панель или область виджета, готовые для вашего сайта. В этой статье мы покажем вам, как легко создать пользовательский виджет WordPress.
Что такое виджет WordPress?
Виджеты WordPress содержат фрагменты кода, которые вы можете добавить к боковым панелям вашего веб-сайта или к областям, совместимым с виджетами. Подумайте об этом как о модулях, которые вы можете использовать для добавления разных элементов с помощью простого интерфейса «Перетаскивание».
По умолчанию WordPress поставляется со стандартным набором виджетов, который можно использовать с любой темой WordPress.
WordPress также позволяет разработчикам создавать свои собственные виджеты. Многие темы и плагины WordPress поставляются со своими собственными виджетами, которые вы можете добавить на боковые панели.
Например, вы можете добавить контактную форму, пользовательскую форму входа или фотогалерею на боковую панель без написания кода.
Тем не менее, давайте посмотрим, как легко создавать собственные пользовательские виджеты в WordPress.
Как создать собственный виджет на WordPress
Этот учебник для людей, которые имеют знания о веб-разработке.
Прежде чем начать, вы можете создать определенный плагин на сайте, где вы вставляете код виджета для этого учебника.
Вы также можете вставить код в файл «functions.php» вашей темы. Однако он будет доступен только в том случае, если эта конкретная тема активна.
В этом уроке мы создадим простой виджет, который будет просто приветствовать посетителей. Посмотрите на этот код, затем вставьте его в свой специальный плагин, чтобы увидеть его в действии.
// Регистрация и загрузить функцию виджета wpb_load_widget () {register_widget ("wpb_widget"); } Add_action ("widgets_init", "wpb_load_widget"); // Создание класса виджета wpb_widget расширяет WP_Widget {функция __construct () {родительский:: __ конструкт (// Base ID вашего виджета wpb_widget "// имя виджета появится в IU __ (" PCBs Widget "" wpb_widget_domain «) // описание Widget массив ("описание" => __ ("Простой виджет WordPress", "wpb_widget_domain"))); } // Создание виджета общественного переднего конца функция виджет ($ арга, $ экземпляра) {$ названия = apply_filters ("widget_title" $ экземпляра [ "название"]); // до и после виджета аргументы определяются по темам эхо $ арг [ «before_widget»]; если (! пусто ($ названия)) эхо $ арга [ "before_title"]. $ Title. $ Args [ "after_title"]; // Здесь вы запустите код и отображение выходного эхо __ («Простой виджет», «wpb_widget_domain»); Эхо $ арг [ "after_widget"]; } // виджет Backend форма публичной функции ($ экземпляра) {если (Исеть ($ экземпляра [ "название"])) {$ название = $ экземпляра [ "название"]; } Else {$ название = __ ("Новое название", "wpb_widget_domain"); ?} // Widget форма админ>
<метка для = " get_field_id ("название");>?"> После добавления кода вы должны перейти к " Внешний вид> Виджеты
». Вы увидите новый виджет " PCB Widget
В списке доступных виджетов. Вы должны перетащить этот виджет в боковую панель. Теперь, посетив свой блог, вы увидите виджет на боковой панели, где вы добавили виджет, о котором идет речь. Теперь давайте немного изучим этот код. Во-первых, мы записали " wpb_widget
И загрузили наш пользовательский виджет. Затем мы определили, что делает этот виджет и как его отображать на панели управления. Наконец, мы определили, как обрабатывать изменения, внесенные в виджет. Теперь есть несколько вещей, которые вы, возможно, захотите узнать. Например, какова цель wpb_text_domain
«? WordPress использует «gettext» для управления переводом и локализацией. Итак wpb_text_domain
«и __e
сообщает gettext, как получить строку перевода, если она существует. Если вы создаете собственный виджет для своей темы, вы можете заменить «wpb_text_domain» текстовым полем вашей темы. Это все для этого урока, я надеюсь, что оно позволит вам создавать собственные виджеты в своем блоге WordPress. Сегодня мы разберемся в том, как создать на Android устройство свой собственный виджет (Widget). Виджет - это всем знакомый элемент рабочего стола, с помощью которого можно получать доступ к некоторым функциям какого - нибудь приложения: просматривать новости в окне виджета, прогноз погоды, обновление новостей на разных сервисах, управлять разными функциями аппарата (блокировать экран, включать радио, Интернет и многое многое другое). На этот раз мы не будем создавать чего то грандиозного и очень полезного, типа там фонарика :), а сделаем простенький виджет, который будет реализован в виде кнопки, при нажатии на которую мы, с помощью стандартного браузера, попадаем на всеми любимый сайт Конечно, вы сможете настроить любой желаемый вами сайт.
Создаем новые проект, выбираем Blank Activity, минимальная версия Android 2.2+. При создании виджета, первое дело - создать объект AppWidgetProviderInfo
, в котором мы укажем xml файл, из которого будет заполняться вид самого виджета. Для этого, создадим в проекте папку res/xml
и в ней создаем новый xml файл по имени widget.xml
со следующим содержимым:
Теперь перейдем в файл activity_main.xml
и создадим интерфейс нашего виджета, он будет состоять из кнопки Button
:
Как видите, мы создали обычную кнопочку, вот она и будет нашим виджетом:
То есть, можете потом сделать вместо этой кнопочки все, что вам угодно.
Перейдем к работе с кодом в файле MainActivity.java
. Он должен наследоваться от класса AppWidgetProvider
, для которого существует его основной метод onUpdate ()
. В этом методе нам нужно обязательно определить два объекта: PendingIntent
и RemoteViews
. В конце их использования нужно вызвать метод updateAppWidget()
. Код файла MainActivity.java
:
Чтобы наш виджет успешно заработал, нужно немного магии в файле манифеста AnroidManifest.xml
. Он должен выглядеть вот так:
Как вы догадались, виджет определяется в теге <receiver
> .
Единственное, что осталось подправить - отредактировать файл strings.xml
, добавив туда используемые нами строчки:
Внимание! Android Studio может заругаться на вас при запуске программы, требую указать default activity. Выберите строчку "Не запускать activity" (Do not launch Activity):
Теперь устанавливаем приложение на эмулятор либо устройство, добавляем виджет на рабочий стол:
И жмем по нему:
Как видите, все отлично работает.
Итак, в этом уроке мы создали простенький Android Widget, состоящий из кнопки Button, при нажатии на наш виджет мы создаем простой http запрос и переход по заданной URL ссылке. Можете поупражняться с какими-нибудь другими элементами, а не кнопкой, и придумать им интересный функционал. Удачи!
май
21
,
2016
Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода - и у тебя уже развернулся блок с комментариями. Еще 2 строчки - и доступна аналитика от гугла или яндекса. Конечно, никакого волшебства при этом не происходит, те самые 3 строчки кода подтягивают с удаленного сервера весь нужный код, и по сути разворачивают небольшое веб-приложение на страницах Вашего сайта. Но как это устроено внутри и как это сделать самому? Разобраться с этим было достаточно интересно, и в итоге у меня получился небольшой виджет, который работает именно по такой простой схеме встраивания и при этом еще выполняют некоторые полезные вещи. Далее подробности. Для этой цели хорошо подходят iframe-ы.
Это фактически отдельные html-страницы, которые встраиваются в другие страницы, при этом не имея доступа к своему "родителю".
То есть в iframe можно встроить наше веб-приложение,
которое будет спокойно выполнять свою работу, не вмешиваясь в основной сайт.
А что именно будет делать Ваш виджет, строить систему комментариев на странице,
показывать прикольную игрушку или рисовать интерактивный рекламный баннер -
дело исключительно Вашего вкуса и фантазии. В этой статье на игрушку мы замахиваться не будем, а рассмотрим, как создать встраиваемый виджет для определения погоды.
Конечно, для этого есть много различных погодных сервисов, но нам неинтересно воспользоваться готовым решением.
Хочется создать простенький виджет своими руками, чтобы понять,
как это вообще работает и в дальнейшем применить знания уже для каких-то полезных вещей.
Заодно попутно освежим знания в нативном javascript и php. Мы создадим виджет, который рисует форму с прогнозом погоды на завтра.
В качестве примера возьмем только температуру, но как увидите дальше, легко можно будет добавить и другие данные.
В виджете будет располагаться информация о температуре на завтра,
раскрывающийся список с возможностью выбрать город.
Кнопка Обновить будет отправлять запрос на сервер, который в свою очередь обращается на сторонний сервис для определения погоды
и возвращает нам нужную инфу. Эти данные мы обрабатываем и возвращаем в браузер клиенту.
Где уже клиентская часть виджета перехватывает информацию и выводит ее пользователю. Здесь мы видим какую-то страницу, где рассказывается, что якобы мы умеем определять погоду.
И демонстрируем нашим посетителям формочку, дабы они могли убедиться, что погоду действительно можно узнать прямо здесь. Я не развлекался с версткой формы, цель статьи не в этом.
В реальном мире мы, конечно же, создали бы симпатичную формочку, которая привлекала бы внимание. Итак, вернемся. Люди узнают погоду, возможно, даже не задумываясь о том, что фактически пользуются другим сервисом.
Но все довольны и счастливы, Вы получаете посетителей на свой сайт, клиенты - нужную информацию. Здесь нужно небольшое уточнение: смысл виджетов в том, чтобы предоставлять уникальный, удобный, интересный функционал.
Мы не даем в нашем примере какую-то особенную информацию.
Погоду можно узнать где угодно.
Но в познавательных целях, так как мы сами пока ничего не умеем делать, возьмем данные по погоде с сервиса
Прогноз погоды в России и СНГ .
Они любезно предоставляют бесплатный api, коим мы и воспользуемся. Тоже ничего сложного. Про iframe я уже проговорился.
javascript-код будем писать на vanillaJS, без единой дополнительной библиотеки.
Даже без jQuery для манипуляции DOM.
Наша цель еще состоит и в том, чтобы полученный виджет был максимально легковесным,
и ни к чему тащить в браузер пользователя мешок дополнительных библиотек для облегчения своей работы.
Поэтому вспомним, как работать с DOM и отправлять ajax-запросы на нативном javascript, и наши клиенты скажут нам спасибо.
Серверная часть - пара десятков строк кода на php. Страницу, на которой будет располагаться наш будущий виджет.
Напишем там пару строчек текста о том, какие мы классные в плане умения прогнозировать погоду на завтра.
Это будет файл index.html - обычная html-страничка.
В секции head напишем так: Webdevkin. Демонстрация виджета Погода
В секции body вот так: Что здесь из интересного? В файле css/style.css будем хранить стили для страницы (не для виджета!).
И в нужном месте создаем iframe..html.
Мы убираем у него границу и возможность скроллинга и задаем руками размеры виджета.
Конечно, интереснее создать адаптивный, но до этого доберемся позже. Стили для страницы, без особых изысков: Body {
font-family: Arial;
font-size: 14px;
}
.wrapper {
width: 960px;
margin: 0 auto;
}
.weather-widget-container {
margin: 30px 0;
}
Виджет представляет из себя обычный html-документ.
В чем отличие? Первое - мы не будем заморачиваться с лишними мета-тегами, потому как поисковикам наш виджет не нужен.
И второе - и стили, и js-код мы напишем прямо в коде html-страницы. Нам это нужно, чтобы сделать загрузку виджета максимально быстрой,
а уменьшение числа запросов к веб-серверу в этом нам поможет.
Все, что нужно, мы загрузим одним файлом. В секции head у нас будет такой код: В секции body: Рассмотрим эти блоки подробнее. Температура на завтра °C Здесь обычная форма.
Сверху небольшая панель, где мы будем выводить температуру.
Дальше select с выбором города.
Значения value у городов взяты с сервиса meteoservice.ru, где именно, расскажу позже,
в разделе, где будем непосредственно получать данные о погоде.
И в конце кнопка Обновить.
Верстка у нас будет на классах, айдишники проставлены тем элементам, доступ к которым нужен из кода javascript.
Префикс wbd- (от webdevkin) используется для удобства, чтобы не путать разметки виджета и основной страницы. Стили для виджета максимально просты - Вы можете написать их под себя, как угодно.
Не забываем, что стили ставим прямо в html-файл виджета в раздел head - style. Напишем класс, в котором будут методы инициализации, привязки событий и получения данных с сервера.
Не забываем, что код будем писать на нативном js, так как не хотим обременять пользователей лишним грузом библиотек. Var WeatherWidget = (function() {
// Для выполнения ajax-запросов
var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest: XDomainRequest;
// Конструктор виджета
function Widget() {
this..php";
this.ui = {
updateBtn: null,
citySelect: null,
temperatureSpan: null
};
this.init();
}
// Обновление данных о погоде
Widget.prototype._updateData = function(e) {
// Отправка ajax-запроса на сервер
}
// Инициализация компонентов ui
Widget.prototype._initUI = function() {
this.ui.updateBtn = document.getElementById("wbd-widget-update");
this.ui.citySelect = document.getElementById("wbd-widget-city");
this.ui.temperatureSpan = document.getElementById("wbd-widget-temperature");
}
// Привязывание событий
Widget.prototype._bindHandlers = function() {
this.ui.updateBtn.addEventListener("click", Widget.prototype._updateData.bind(this));
}
// Инициализация виджета
Widget.prototype.init = function() {
this._initUI();
this._bindHandlers();
this._updateData();
}
// Возвращаем класс виджета
return Widget;
})();
new WeatherWidget();
Что здесь происходит?
Мы создаем модуль на основе замыкания WeatherWidget, внутри оного пишем класс Widget,
в прототип которого закидываем нужные методы и возвращаем его из замыкания.
Последней строкой мы создаем экземпляр виджета - new WeatherWidget(); Переменная XHR нужна для выполнения ajax-запросов.
В конструкторе инициализируем свойство url, по которому будем получать данные о погоде.
Также есть объект ui, в котором хранятся 3 поля - те самые элементы DOM, к которым нам нужен доступ из js-кода.
Инициализируются они позже, в методе _initUI().
Метод init() вызывает инициализацию ui, привязку событий и обновление данных с сервера
(мы же хотим, чтобы при отрисовке виджета пользователь сразу видел погоду без нажатия на Обновить).
В _bindHandlers привязывается метод _updateData к клику на кнопку Обновить.
Это единственная "интерактивная" часть нашего виджета. Обратите внимание на конструкцию Widget.prototype._updateData.bind(this).
Здесь явным образом привязываем контекст - нам нужно, чтобы в методе _updateData
this всегда указывал на экземпляр класса Widget.
Сейчас будет видно, зачем - рассмотрим код метода _updateData Обращаю внимание, что в параметры метода передаем свойство e (event).
Оно нужно, чтобы сделать preventDefault в самом начале, дабы не перезагрузить наш виджет
(иначе сработает submit формы).
После этого мы создаем нужные переменные, объект для ajax-запроса, выбранный город и DOM-элемент,
в который выводим значение температуры, полученной с сервера.
data будет отправляться в ajax-запросе, resp - это ответ от сервера.
Дальше мы открываем соединение и отправляем данные на сервер.
Дожидаемся ответа 200 от сервера и выводим полученную температуру в span.
Условимся, что от сервера приходит json-строка в формате {"code": "success", "temperature": "диапазон температур"}.
Традиционно обработку ошибок оставлю на Вашу совесть, все делают по-разному.
И наконец, нам осталось узнать, как получить данные о погоде с нашего сервера. Рекомендую пользоваться этим сервисом с осторожностью.
Когда статья уже почти была готова, неожиданно поменялся формат ответа по запросу о погоде.
Отрубился вывод прогноза по времени суток, который я изначально хотел продемонстрировать в виджете.
Пришлось частично переписывать код и уменьшать функциональность виджета, что меня не порадовало.
Не знаю, как часто происходят у них такие вещи, но пользоваться сервисом в реальном приложении не советую. Как брать данные, уже понятно, алгоритм прост: вытаскиваем из $_POST параметр city - выбранный город,
формируем строку вида http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml.
Это путь к файлу с погодой. Отправляем на него get-запрос curl-ом.
Полученный ответ парсим и вытаскиваем из него нужные параметры: минимальная и максимальная температуры.
Полученные числа отдаем в json-объекте обратно в браузер.
$cityId = (int)$_POST["city"];
$url = "http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml";
$temperature = "";
if ($curl = curl_init()) {
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($curl);
curl_close($curl);
$xml = simplexml_load_string($result);
$object = $xml->REPORT->TOWN->FORECAST->TEMPERATURE;
$temperature = $object["min"] . "-" . $object["max"];
}
echo json_encode(array("code" => "success",
"temperature" => $temperature));
Поясню про simplexml_load_string - эта функция создает xml-объект, который мы уже можем парсить.
А создается объект из строки xml, которую мы получаем от сервиса погоды.
И на этом все! Мы создали несложный виджет для получения информации о погоде.
Главная его особенность в том, что его очень легко встроить на любой сайт, достаточно всего лишь
вставить в html-код такие строки Полагаю, что есть масса вариантов применения таких виджетов, от сбора различной информации до рекламных баннеров.
А у Вас есть идеи, где это можно применить? Поделитесь в комментариях! AppWidget, или просто «виджет» - один из самых эффектных и удобных элементов пользовательского интерфейса в операционной системе Android, который можно добавить на рабочий стол для быстрого доступа к тем или иным функциям соответствующего приложения. В данной статье мы разберемся, как собственноручно создать свой виджет. Что виджет представляет из себя конструктивно? Виджет нужен для отображения той или иной информации, связанной с приложением, к которому он относится, или же для оперативного взаимодействия с данным приложением напрямую через рабочий стол. Самый простой пример – часы на рабочем столе. Естественно, виджеты без труда можно добавлять или удалять с рабочих столов. Качественно выполненные виджеты заметно оптимизируют взаимодействие с устройством. Более того, очень часто самые удобные виджеты занимают на рабочем столе минимум пространства, и при этом наиболее информативны. Практически любой пользователь будет стараться разместить на рабочих столах своего Android-гаджета максимальное количество информации, и важный момент заключается в том, что пространство ограничено. Начнем создание виджета мы с дизайна. Благо, компания Google предоставила весьма полезные UI Guidelines для разработчиков программного обеспечения, где подробно описан процесс создания дизайна и основные принципы эргономичности. Есть также и отдельная официальная инструкция для создания виджетов, с которой можно ознакомиться по ссылке: //developer.android.com/guide/practices/ui_guidelines/widget_design.html . Виджет, занимающий одну «клетку» на рабочем столе, имеет разрешение 80х100 точек, соответственно, для создания продолговатый виджет длиной в 4 клетки и высотой в одну, то нужно, соответственно, 320х100 пикселей. Такой размер мы и возьмем за основу создаваемого нами виджета. Теперь виджет нужно нарисовать. В принципе, виджет вполне может и не иметь никакой графической части, и отображать только текст или элементы управления, без фона и рамки, но, естественно, красивый и приятный глазу виджет просто обязан иметь качественный дизайн. Поэтому нарисуем фон. За основу возьмем фон из упомянутого выше UI Guideline. Открываем доступную нам заготовку в Photoshop или другом графическом редакторе и делаем всё, что заблагорассудится, после чего сохраняем полученное изображение в формате.png. Нужный нам формат PNG-24, с 8-битным цветом и прозрачным фоном. Вот и готова основа для нашего виджета. Теперь перейдем к созданию программной части. Виджет может не иметь программной части. Проще говоря, в меню добавления виджетов он будет, но в основном меню приложений – нет. Мы создадим виджет именно такого типа. Создаем новый проект, и называем его для удобства так, чтобы основной класс имел имя widget.java. Редактируем AndroidManifest
.
xml
. Объявляем наш виджет:
package=»com.example.widget»
android:versionCode=»1″
android:versionName=»1.0″>
android:resource=»@xml/widget_info» />
Теперь редактируем widget.java. Тут необходимо описать, как будет реагировать виджет на различные условия. Класс AppWidgetProvider имеет такие методы: onUpdate – метод вызывается при создании виджета, а также по истечении заданного времени. Время задается в конфигурационном файле данного виджета. Отметим, что используется чаще всего. onDeleted – метод выполняется при удалении виджета с рабочего стола. onEnabled – метод вызывается при первой активации виджета. Но если добавляется еще один точно такой же виджет, данный метод уже не выполняется. onDisabled – метод выполняется тогда, когда удаляется последняя копия виджета с рабочего стола. Соответственно, данный метод является обратным onEnabled. onReceive – метод вызывается одновременно со всеми остальными. Зачастую не используется вообще. Сильно углубляться в программную часть виджета мы не будем, а потому не будем переполнять наш пример какими-либо обработчиками, а просто реализуем весь функционал посредством Layouts. Необходимо следующим образом объявить класс AppWidgetProvider:
package com.example.widget;
import android.appwidget.AppWidgetProvider;
public class widget extends AppWidgetProvider{
}
Далее, описываем наш виджет – это нужно для того, чтобы мобильный аппарат понимал, с чем имеет дело. Для этого нужно создать папку xml
в папке res
. В ней создаем файл с именем widget
_
info
.
xml
. Открываем созданный файл и прописываем в него вот такой код:
android:minWidth=»294dp»
android:minHeight=»72dp»
android:updatePeriodMillis=»0″
android:initialLayout=»@layout/widget»>
Приведем краткое описание заданных параметров: minWidth – минимальная необходимая для работы виджета ширина. minHeight – минимальная необходимая для работы виджета высота. updatePeriodMillis – период, за который происходит обновления виджета, указывается в миллисекундах. Параметр весьма полезен, так как по истечении указанного временного промежутка срабатываем метод onUpdate объекта AppWidgetProvider. initialLayout – параметр указывает на ресурс с описанием интерфейса нашего виджета. Формула подсчета размеров виджета имеет такой вид: (количество клеток * 74) - 2. Приступим к описанию интерфейса создаваемого нами виджета. Здесь-то нам и пригодится созданный ранее фон. Импортируем рисунок фона в папку dwawable
(или во всех три папки drawable
для разных разрешений экрана). В папке layout
создаем файл с именем widget
.
xml
. Интерфейс описывается как для обычных Activity, но есть некоторые ограничения. Допустимы для использования такие элементы: Создадим LinearLayout, к которому применим созданную картинку-фон и добавим для примера AnalogClock. Сами часы в рамку не влезут, но как наглядный пример вполне сгодятся. Итак:
android:id=»@+id/Widget»
android:layout_height=»fill_parent»
android:orientation=»horizontal»
android:gravity=»center_vertical»
android:background=»@drawable/frame»>
android:layout_width=»fill_parent»
android:layout_height=»wrap_content»/>
Для того чтобы сделать виджет в Android
вовсе не обязательно уметь программировать. Есть несколько приложений-конструкторов, которые позволяют легко нарисовать виджет и дать ему нужный функционал. Приложение позволяет создавать минималистичные виджеты, состоящие из текста и чисел. Несмотря на название, у таких виджетов есть весьма широкие возможности. После установки добавьте на рабочий стол виджет Minimalistic Text требуемого размера. Откроется окно настройки виджета. В настройках можно выбрать фон, ориентирование, шрифт, действие по клику и т.д. Также в настройках есть предопределенные макеты для наполнения: Дополнительные возможности по наполнению виджета доступны при создании своего собственного макета виджета: Все величины можно выводить в тексте и в цифрах. Данное приложение позволяет делать виджеты не только из текста, но и с графическим содержанием. При запуске открывается окно создания виджета. Чтобы добавить на виджет объект нажмите кнопку +/- вверху. Чтобы всяким образом перемещать и редактировать его нажмите вверху на кнопку "Select Object" и выберите добавленный объект. На виджетах можно размещать такие объекты: Каждый элемент можно вращать, растягивать, сгибать и менять ему цвет. Разумеется, можно настроить действие по клику (Select Object->Hotspots). Поддерживается импорт и экспорт созданных виджетов.
Зачем нужны виджеты?
Что будем делать?
По технологиям
Пишем код. Создаем базовую страницу
Заготовка для виджета
Разметка для виджета
Стили для виджета
html, body, body * {
margin: 0;
padding: 0;
}
.wbd-widget, .wbd-widget * {
box-sizing: border-box;
font-family: Ubuntu;
}
.wbd-widget {
border: solid 1px #333;
padding: 20px;
color: black;
}
.wbd-widget__info {
color: steelblue;
font-size: 16px;
text-align: center;
}
.wbd-widget__form-label {
display: block;
line-height: 30px;
}
javascript-код виджета.
Получение данных с сервера, метод _updateData
// Обновление данных о погоде
Widget.prototype._updateData = function(e) {
e && e.preventDefault();
var xhr = new XHR(),
city = this.ui.citySelect.value,
temperatureSpan = this.ui.temperatureSpan,
data = "city=" + city,
resp;
xhr.open("POST", this.url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = function() {
if (this.readyState != 4) return;
if (this.status != 200) {
console.log("Request error");
return;
}
resp = JSON.parse(this.responseText);
temperatureSpan.innerHTML = resp.temperature;
}
}
Но делаем мы это такой строчкой
e && e.preventDefault();
Эта дополнительная проверка на наличие параметра e нужна, потому что когда мы вызываем this._updateData(),
параметр e будет равен undefined, и соответственно e.preventDefault() выкинет исключение.Как узнавать погоду?
Пишем php-код для получения информации о погоде
REPORT->TOWN->FORECAST->TEMPERATURE - это путь по узлам xml, чтобы добраться до нужных значений температуры.
Пройдите по ссылке выше (московская погода) и наглядно увидите эти пути.
Если что-то непонятно, спрашивайте в комментариях.Итого
Minimalistic Text
Ultimate custom widget (UCCW)