Создание виджета для андроид с нуля. Как создать свой собственный виджет в WordPress? Получение данных с сервера, метод _updateData
Все мы так или иначе пользуемся видежтами, ведь они удел системы Android, даже владельцы iPhone тайком поглядывают на них. Какие виджеты вы используете? Часы, погода – все «дела», правда? Наверняка у вас установлены Beautiful Widgets, Premium Widgets или подобные приложения. Эти программы конечно хороши, но вот разгуляться творческим способностям они не дают. А хотели ли бы вы сами создать виджет для своего смартфона? Тогда давайте смотреть, как это можно сделать с помощью приложения Editor widgets.
Берем красивый фон, большой циферблат часов, день недели, ну, а как же без погоды? И ее добавим на наш идеальный виджет, да еще и на 3 дня сразу. Итак, все это и многое другое можно сделать с помощью андроид приложения Editor widgets. Начинаем создавать.
[
По-умолчанию у нас имеется восемь макетов виджетов, выбираем один и начинаем творить. Тут уж нас никто не ограничивает в возможностях. Выбираем фон. Это может быть, как картинка, так и цветовая заливка, можно регулировать прозрачность слоя. Выбираем рамку. Их достаточно много и все они очень красивы, разумеется на вкус и цвет... Затем переходим к наполнению нашего виджета. Для этого нам доступны различные элементы: часы, день недели, дата, заряд батареи в нескольких проекциях, уведомления о пропущенных звонках и сообщениях, погодные элементы. Как вы понимаете - выбор очень широк. Берем то что нам нужно и располагаем так, как это нужно именно нам. Еще мы можем менять цвет того или иного объекта и стиль шрифт. В общем, наводим полную красоту, а у каждого она своя – ведь все мы неповторимы!
В приложении Editor widgets созданы идеальные условия. Поэтому результат работы зависит только от полета нашей фантазии.
Виджеты могут иметь различные размеры, они поддерживают масштабирование.
Кстати, в настройках мы можем выбрать формат времени и даты. А еще установить какое-либо «действие» по нажатию на виджет. Это может бы как дополнительная информация о состоянии телефона, так и запуск заранее выбранного приложения, к примеру, диктофона. Либо набор телефонного номера, что еще необычней, но возможно кому-то и пригодится.
В общем, если вы хотите создать виджет для своего android устройства, то Editor widgets будет вам верным помощником.
Создавать виджет WordPress – это примерно, как создавать плагин, но гораздо проще и понятнее. Все, что вам нужно, это один файл со всем PHP кодом, который писать гораздо проще, чем плагин, у которого несколько файлов. Есть три основные функции виджета: это widget , update и form .
- function widget()
- function update()
- function form()
| Скачать исходники |
Базовая структура
Базовая схема нашего виджета – очень простая, есть полезные функции, которые вам нужно знать. Костяком структуры нашего виджета будет что-то вроде этого:
Add_action("widgets_init", "register_my_widget"); // function to load my widget function register_my_widget() {} // function to register my widget class My_Widget extends WP_Widget () {} // The example widget class function My_Widget() {} // Widget Settings function widget() {} // display the widget function update() {} // update the widget function form() {} // and of course the form for the widget options
Шаг 1. widget_init
Перед тем, как мы все это сделаем, нам нужно загрузить наш виджет с помощью функции widget_init . Это зацепка к action , о которой вы можете найти больше информации в WordPress codex .
Add_action("widgets_init", "register_my_widget");
Следующее, что мы сделаем, это зарегистрируем наш виджет в WordPress, чтобы он был доступен в разделе виджетов.
Function register_my_widget() { register_widget("My_Widget"); }
Шаг 2. Класс
Мы заключим наш виджет в класс . Имя класса имеет значение! Что мы должны иметь в виду, так это что имя класса и имя функции должны быть одинаковыми .
Class My_Widget extends WP_Widget {}
Теперь мы передадим классу некоторые параметры настроек. Например, мы можем передать ширину и высоту . Мы также можем дать небольшое описание нашему виджету, если хотим. Это будет полезно, если вы связываете виджет с вашей коммерческой темой.
Function My_Widget() { function My_Widget() { $widget_ops = array("classname" => "example", "description" => __("A widget that displays the authors name ", "example")); $control_ops = array("width" => 300, "height" => 350, "id_base" => "example-widget"); $this->WP_Widget("example-widget", __("Example Widget", "example"), $widget_ops, $control_ops); }
Теперь, когда мы закончили с основными требованиями к нашему виджету, мы обратим наше внимание на три функции , о которых мы говорили ранее, и которые являются важными функциями или основными блоками для построения нашего виджета!
Шаг 3. function widget()
Первая функция относится к отображению нашего виджета. Мы передадим несколько аргументов в нашу функцию. Мы будем передавать аргументы из темы, это могут быть заголовок или какие-то другие параметры. Теперь мы передаем переменную instance , которая связана с классом нашей функции.
Function widget($args, $instance)
После этого мы извлекаем параметры из аргументов, потому что нам нужно, чтобы параметры были доступны локально. Если вы не знаете, что такое локальная переменная, не переживайте об этом сейчас и просто добавьте этот шаг.
Extract($args);
Дальше мы установим заголовок и другие параметры для нашего виджета, которые могут быть изменены пользователем в меню видежета. Мы также добавляем специальные переменные типа $before_widget, $after_widget . Эти параметры обрабатываются темой.
$title = apply_filters("widget_title", $instance["title"]); $name = $instance["name"]; $show_info = isset($instance["show_info"]) ? $instance["show_info"] : false; echo $before_widget; // Display the widget title if ($title) echo $before_title . $title . $after_title; //Display the name if ($name) printf("
" . __("Hey their Sailor! My name is %1$s.", "example") . "
", $name); if ($show_info) printf($name); echo $after_widget;Шаг 4. function update()
Function update($new_instance, $old_instance) { $instance = $old_instance; //Strip tags from title and name to remove HTML $instance["title"] = strip_tags($new_instance["title"]); $instance["name"] = strip_tags($new_instance["name"]); $instance["show_info"] = $new_instance["show_info"]; return $instance; }
Одна вещь, на которую нужно обратить внимание: здесь мы используем strip_tags , чтобы удалить из текста весь XHTML , который может нарушить работу нашего виджета.
Шаг 5. function form()
На следующем шаге мы создадим форму , которая послужит блоком ввода . Она примет определяемые пользователем настройки и значения. Функция form может включать чекбоксы, поля для ввода текста и т.д.
Перед тем, как мы создадим эти поля для ввода, нам нужно определиться, что показывать, когда пользователь не выбирает ничего из виджета. Чтобы сделать это, мы передадим значения по умолчанию для параметров, например, заголовок, описание и т.д.
//Set up some default widget settings. $defaults = array("title" => __("Example", "example"), "name" => __("Bilal Shaheen", "example"), "show_info" => true); $instance = wp_parse_args((array) $instance, $defaults); ?>
Теперь мы создадим текстовое поле ввода . Мы заключим эти значения в тег абзаца.
// Widget Title: Text Input
" name="get_field_name("title"); ?>" value="" style="width:100%;" />
//Text Input" name="get_field_name("name"); ?>" value="" style="width:100%;" />
// Checkboxid="get_field_id("show_info"); ?>" name="get_field_name("show_info"); ?>" />
Заключение
Ну вот и все. Вы только что сделали самостоятельно симпатичный и простой виджет, который показывает имя автора блога. Более того, он дает возможность пользователю выбирать, показывать информацию аудитории или нет. Сохраните код в PHP файл и загрузите в папку своей темы. Вызовите его в вашем functions.php . После этого, перейдите в консоли в Внешний вид → Виджеты и вы увидите ваш виджет.
Весь этот код включен в прикрепленный к статье файл, так что скопировать и вставить можно еще проще. Наслаждайтесь!
Вы хотите создать свои собственные виджеты в 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
вовсе не обязательно уметь программировать. Есть несколько приложений-конструкторов, которые позволяют легко нарисовать виджет и дать ему нужный функционал. Приложение позволяет создавать минималистичные виджеты, состоящие из текста и чисел. Несмотря на название, у таких виджетов есть весьма широкие возможности. После установки добавьте на рабочий стол виджет Minimalistic Text требуемого размера. Откроется окно настройки виджета. В настройках можно выбрать фон, ориентирование, шрифт, действие по клику и т.д. Также в настройках есть предопределенные макеты для наполнения: Дополнительные возможности по наполнению виджета доступны при создании своего собственного макета виджета: Все величины можно выводить в тексте и в цифрах. Данное приложение позволяет делать виджеты не только из текста, но и с графическим содержанием. При запуске открывается окно создания виджета. Чтобы добавить на виджет объект нажмите кнопку +/- вверху. Чтобы всяким образом перемещать и редактировать его нажмите вверху на кнопку "Select Object" и выберите добавленный объект. На виджетах можно размещать такие объекты: Каждый элемент можно вращать, растягивать, сгибать и менять ему цвет. Разумеется, можно настроить действие по клику (Select Object->Hotspots). Поддерживается импорт и экспорт созданных виджетов. Недавно мне понадобилось создать гаджет для Windows Sidebar. Навыков в этом у меня не было, поэтому, немного погуглив и почитав документацию , приступаем. Сразу покажу то, что получилось в итоге Weather from Info.Denms.Ru
1.0.1232
Full
Weather Widget (Info.Denms.Ru)
Рассмотрим его более подробно. Файл main.html – обычный html файл, приводить его полностью не буду, остановлюсь лишь на некоторых моментах. Гаджет может находиться в двух состояниях – docked (слева на скрине выше), и undocked (справа). Будем хранить текущее состояние гаджета в переменной JavaScript docked. Функция-обертка isDocked потребуется нам в дальнейшем, чтобы из VBScript узнать текущее состояние гаджета (как я не старался, но реализовать это на чистом VBScript не смог). Еще одно замечание – скрипты корректно работают именно в этом порядке, т.е. сначала описываем скрипты VBScript, потом JavaScript. Остальные элементы в main.html представлены элементами DIV с абсолютным позицированием. Впоследствии из скриптов мы будем обращаться к ним по их id. С помощью JavaScript зададим состояния docked и undocked для гаджета, а так же укажем файл настроек (main.js) System.Gadget.onDock = resize;
System.Gadget.onUndock = resize;
System.Gadget.settingsUI = "settings.html";
System.Gadget.onSettingsClosed = SettingsClosed;
docked=0; //начальное состояние гаджета
resize(); //инициализация
Как видно из листинга выше, при смене состояний гаджета будет вызываться функция resize(). Function resize() {
bd = document.body.style;
System.Gadget.beginTransition();
if (System.Gadget.docked) {
// small state
bd.width=148; //устанавливаем размеры гаджета
bd.height=201;
docked = 1;
bd.background="url(images/gadget.png) no-repeat"; //устанавливаем фон
//далее следует перенос значений из состояния undocked в docked и обнуление элементов для состояния undocked
document.getElementById("small_needupdate").innerHTML = document.getElementById("big_needupdate").innerHTML;
document.getElementById("big_needupdate").innerHTML = "";
//...
} else {
// big state
bd.width=230;
bd.height=160;
bd.background="url(images/gadgeth.png) no-repeat";
docked=0;
//перенос значений из состояния docked в undocked и обнуление элементов для состояния docked
document.getElementById("big_needupdate").innerHTML = document.getElementById("small_needupdate").innerHTML;
document.getElementById("small_needupdate").innerHTML = "";
//...
}
System.Gadget.endTransition(System.Gadget.TransitionType.morph,1);
}
Также можно описать функцию сохранения настроек. В моем гаджете их нет, но для примера покажу как это делается Function SettingsClosed(event) {
if (event.closeAction == event.Action.commit) {
//alert System.Gadget.Settings.readString("test");
}
}
ReadString – читает ранее сохраненную строку, writeString, соответственно, записывает. Как уже говорилось выше, сервер предоставляет нам информацию о погоде в формате xml. 1.7
41
пасмурно
снег
87
Ю-З
5
-3
-1
-1
26
1
-9
41
0
…
Скачивать и парсить xml будем на VBScript. Sub DownloadXML2
Set objXML = CreateObject("Microsoft.XmlHttp")
objXML.Open "GET", "http://info.kovonet.ru/weather.xml", True
objXML.OnReadyStateChange = GetRef("objXML_onreadystatechange")
objXML.setRequestHeader "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"
objXML.Send
iTimeoutID = window.SetTimeout("mySleep", 1000)
End Sub
Функция mySleep будет проверять наше соединение на таймаут. Sub mySleep
if bRespReceived = "false" then "ответ еще не получен
iTimeout = iTimeout + 1
if (iTimeout > 30) then "таймаут
timerFirstRun = window.SetTimeout("Update", 60000) "попытка повторного обновления через минуту
else "таймаут еще не достигнут, продолжаем считать секунды
iTimeoutID = window.SetTimeout("mySleep", 1000)
end if
end if
End Sub
В случае успешного скачивания objXML.readyState будет равен четырем, а статус (objXML.status) вернет значение 200. Function objXML_onreadystatechange()
If (objXML.readyState = 4) Then
"msgbox objXML.statusText
If (objXML.status = 200) Then
bRespReceived=true
SaveFile(objXML.responseText)
else
timerFirstRun = window.SetTimeout("Update", 60000) "попытка повторного обновления через минуту
End If
End If
End Function
В этом случае сохраняем файл во временную папку Windows Function SaveFile(what)
Set fso = CreateObject("Scripting.FileSystemObject")
tempFolder = fso.GetSpecialFolder(2)
filepath = tempFolder+"\weather.xml"
Dim fso1, tf
Set fso1 = CreateObject("Scripting.FileSystemObject")
Set tf = fso1.CreateTextFile(filepath, True, True) "rewrite, unicode
tf.Write(what)
tf.Close
ParseXML
End Function
И начинаем парсить файл. Sub ParseXML
Set fso = CreateObject("Scripting.FileSystemObject")
tempFolder = fso.GetSpecialFolder(2)
filepath = tempFolder+"\weather.xml"
Set xmlDoc = CreateObject("Msxml2.DOMDocument")
xmlDoc.async="false"
xmlDoc.load(filepath)
"главная нода – в нашем случае Проверка на новые версии производится точно таким же способом. Настройки
Вот, собственно, и все. Буду рад, если моя (первая:)) статья оказалась кому-то полезной. Использованные источники.Minimalistic Text
Ultimate custom widget (UCCW)
Гаджет будет получать информацию с сайта в виде xml, парсить и, собственно, отображать. Также гаджет будет проверять наличие новых версий, и в случае их присутствия, отказываться работать:)
Изначально, ради получения опыта, хотел написать гаджет полностью на VBScript (так как с ним еще не имел дела), но в конечном итоге пришлось делать вставки на JavaScript.
Перейдем непосредственно к коду. Весь код здесь я рассматривать не буду, покажу лишь основные моменты. Ссылка на готовый гаджет – в конце статьи.
Главный файл гаджета – его манифест – файл Gadget.xml. Он должен называться именно так и располагаться в корне нашего архива (гаджет есть ни что иное, как архив ZIP с расширением.gadget).
Элемент
Параметры
С помощью элемента g:background задается фон гаджета. Сделаем его прозрачным.
Методы System.Gadget.beginTransition(); и System.Gadget.endTransition(); нужны для “плавного» изменения размера гаджета. В Windows Seven они игнорируются , но я все же оставил их для обратной совместимости.
Не забываем создать файл настроек - settings.html, о существовании которого мы объявили выше.
