Головна > Excel > Створення віджету для робочого столу. Пишемо гаджет Windows Sidebar з нуля Створювати віджети


Створення віджету для робочого столу. Пишемо гаджет Windows Sidebar з нуля Створювати віджети




Сьогодні ми розберемося в тому, як створити на Android пристрій свій віджет (Widget). Віджет - це всім знайомий елемент робочого столу, за допомогою якого можна отримувати доступ до деяких функцій якоїсь програми: переглядати новини у вікні віджету, прогноз погоди, оновлення новин на різних сервісах, керувати різними функціями апарата (блокувати екран, включати радіо, Інтернет і багато багато іншого). На цей раз ми не будемо створювати чогось грандіозного і дуже корисного, типу там ліхтарика :), а зробимо простенький віджет, який буде реалізований у вигляді кнопки, при натисканні на яку ми, за допомогою стандартного браузера, потрапляємо на улюблений сайт. ви зможете налаштувати будь-який бажаний сайт.

Створюємо нові проекти, вибираємо Blank Activity, мінімальна версія Android 2.2+. При створенні віджету, перша справа – створити об'єкт AppWidgetProviderInfo, в якому ми вкажемо xml файл, з якого буде заповнюватися вид самого віджету. Для цього створимо в проекті папку res/xmlі в ній створюємо новий xml файл на ім'я widget.xmlз наступним вмістом:

< appwidget- provider xmlns: android= android: minWidth= "146dp" android: updatePeriodMillis= "0" android: minHeight= "146dp" android: initialLayout= "@layout/activity_main" > < / appwidget- provider>

Тепер перейдемо у файл activity_main.xmlі створимо інтерфейс нашого віджету, він складатиметься з кнопки Button:

< LinearLayout xmlns: android= "http://schemas.android.com/apk/res/android" xmlns: tools= "http://schemas.android.com/tools" android: layout_width= "match_parent" android: layout_height= "match_parent" android: gravity= "top" tools: context= ".MainActivity" >< Button android: id= "@+id/button" android: layout_width= "wrap_content" android: layout_height= "wrap_content" android: layout_marginLeft= "5dp" android: text= "@string/app_name" / > < / LinearLayout >

Як бачите, ми створили звичайну кнопку, ось вона і буде нашим віджетом:

Тобто можете потім зробити замість цієї кнопочки все, що вам завгодно.

Перейдемо до роботи з кодом у файлі MainActivity.java. Він повинен успадковуватися від класу AppWidgetProviderдля якого існує його основний метод onUpdate (). У цьому методі нам потрібно обов'язково визначити два об'єкти: PendingIntentі RemoteViews. Наприкінці їх використання слід викликати метод updateAppWidget(). Код файлу MainActivity.java:

import android.net.Uri; import android.app.PendingIntent; import android.appwidget.AppWidgetManager; import android.appwidget.AppWidgetProvider; import android.content.Context; import android.content.Intent; import android.widget.RemoteViews; import android.widget.Toast; import com.example.widget.R; public class MainActivity extends AppWidgetProvider( @Override public void onUpdate (Context context , AppWidgetManager appWidgetManager , int appWidgetIds ) ( for (int i= 0 ; i< appWidgetIds. length; i++ ){ int currentWidgetId = appWidgetIds[i]; //Робимо простий http запит на вказане посилання і виконуємо по ній перехід: String url = "http://сайт"; Intent intent = new Intent (Intent . ACTION_VIEW); intent. addFlags(Intent . FLAG_ACTIVITY_NEW_TASK); intent. setData(Uri. parse(url)); //Визначаємо два обов'язкові об'єкти класу PendingIntent та RemoteViews: PendingIntent pending = PendingIntent. getActivity(context, 0 ,intent, 0 ); RemoteViews views = new RemoteViews (context. getPackageName(), R . layout. activity_main); //Налаштовуємо обробку кліка для додавання віджету:переглядів. setOnClickPendingIntent(R . id. button, pending); appWidgetManager. updateAppWidget(currentWidgetId,views); Toast. makeText(context, "Віджет додано", Toast . LENGTH_SHORT). show(); ) ) )

Щоб наш віджет успішно запрацював, потрібно трохи магії у файлі маніфесту AnroidManifest.xml. Він має виглядати так:

< manifest xmlns: android= "http://schemas.android.com/apk/res/android" package ="com.example.widget" android: versionCode="1" android: versionName= "1.0" >< uses- permission android: name= "android.permission.INTERNET" / > < application android: allowBackup= "true" android: icon= "@drawable/ic_launcher" android: label= "@string/app_name" android: theme= "@style/AppTheme" > < receiver android: name= "home.study.MainActivity" > < intent- filter> < action android: name= "android.appwidget.action.APPWIDGET_UPDATE" / > < / intent- filter> < meta- data android: name= "android.appwidget.provider" android: resource= "@xml/widget" / > < / receiver> < / application> < / manifest>

Як ви здогадалися, віджет визначається у тезі<receiver> .

Єдине, що залишилося підправити – відредагувати файл strings.xml, додавши туди використовуються рядки:

< ? xml version= "1.0" encoding= "utf-8" ? > < resources> < string name= "app_name" >LEARN. ANDROID < string name= "action_settings" >Settings < string name= "hello_world" >Hello world!< / string> < / resources>

Увага! Android Studio може залаятись на вас при запуску програми, вимагаю вказати default activity. Виберіть рядок "Не запускати activity" (Do not launch Activity):

Тепер встановлюємо додаток на емулятор або пристрій, додаємо віджет на робочий стіл:

І тиснемо по ньому:


Як бачите, все добре працює.

Отже, у цьому уроці ми створили простенький Android Widget, що складається з кнопки Button, при натисканні на наш віджет ми створюємо простий http-запит і перехід по заданому URL посиланням. Можете повправлятися з іншими елементами, а не кнопкою, і придумати їм цікавий функціонал. Успіхів!

Для того щоб зробити віджет в Androidзовсім не обов'язково вміти програмувати. Є кілька додатків-конструкторів, які дозволяють легко намалювати віджет та надати йому потрібний функціонал.

Minimalistic Text

Програма дозволяє створювати мінімалістичні віджети, що складаються з тексту та чисел. Незважаючи на назву, такі віджети мають досить широкі можливості.

Після встановлення додайте на робочий стіл мінімальний віджет потрібного розміру. Відкриється вікно налаштування віджету.

У налаштуваннях можна вибрати фон, орієнтування, шрифт, дію по кліку тощо. Також у налаштуваннях є зумовлені макети для наповнення:

  • Час.
  • Дата.
  • Рівень заряду.
  • Температура.

Додаткові можливості по наповненню віджету доступні при створенні власного макета віджета:

  • Текст.
  • Вільне/зайняте місце на карті SD.
  • Час роботи системи.
  • Кількість переданих даних по мобільній мережі не тільки.
  • Назва мережі Wi-Fi, IP-адреса в мережі Wi-Fi.
  • Кількість зайнятої оперативної пам'яті.

Усі величини можна виводити у тексті та цифрах.

Ultimate custom widget (UCCW)

Ця програма дозволяє робити віджети не тільки з тексту, але і з графічним змістом.

Під час запуску відкривається вікно створення віджету. Щоб додати на віджет об'єкт, натисніть кнопку +/- вгорі. Щоб будь-яким чином переміщати та редагувати його, натисніть вгорі на кнопку "Select Object" і виберіть доданий об'єкт.

На віджетах можна розміщувати такі об'єкти:

  • Час, дату та день тижня.
  • Аналоговий годинник.
  • Користувальницький текст.
  • Рівень заряду в цифрах або графічне відображення.
  • Всю інформацію про погоду – температуру, вологість, швидкість вітру тощо.
  • Геометричні фігури.
  • Зображення.
  • Кількість непрочитаних листів Gmail, sms та пропущених дзвінків.
  • Час, коли задзвонить будильник.

Кожен елемент можна обертати, розтягувати, згинати та змінювати йому колір. Зрозуміло, можна налаштувати дію на кліку (Select Object->Hotspots). Підтримується імпорт та експорт створених віджетів.

Операційна система Android має безліч функцій і можливостей. Однією з них є віджети - віконця, які дозволяють використовувати частину функціоналу програми без його запуску.

В основному віджети йдуть у комплекті із додатком. Однак є програми, які не мають цієї опції. Отже, треба брати справу в свої руки!

  • За допомогою Play Market завантажуємо безкоштовну програму “KWGT Kustom Widget Maker”, яку можна придбати безкоштовно, проте частина функцій буде доступна тільки після покупки доповнення.

Програма виступає як платформа для запуску сторонніх віджетів від різних розробників. Крім цього, ви можете змінити зовнішній вигляд віджетів, задати їм додатковий функціонал.


Спершу можна подумати, що KWGT Kustom Widget Maker складний додаток, який нагадує програми для розробки софту. І так і ні: інтерфейс схожий, але складного тут нічого немає.


Щоб почати редагувати віджети:

  • заходимо на робочий стіл та викликаємо меню редагування робочих столів шляхом утримання кнопки меню або довгим тапом по екрану;
  • знаходимо рамку віджетів KWGT і виставляємо необхідний розмір, наприклад - 4х2. Після цього на робочому столі утворюється віконце;
  • Клацаємо по віконце, тим самим відкриваючи меню вибору віджетів;
  • Вибираємо макет, що сподобався, і натискаємо на нього (Додаткові макети можна завантажувати з Play Маркет. Для цього в рядку пошуку додатків вказуємо “KWGT віджети”);
  • Після вибору макета, що сподобався, додаток перейде до його редагування. Доступні такі параметри:
  1. Елементи, що відповідають за налаштування геометричних параметрів віджету;
  2. Фон, що відповідає за фонову картинку на віджеті;
  3. Торкання, що задає дії, які будуть виконуватися при активації віджету;
  4. Шар, який відповідає за масштаб віджету;

У результаті ми матимемо унікальний віджет, з необхідним функціоналом.

Нещодавно мені знадобилося створити гаджет для Windows Sidebar. Навичок у цьому в мене не було, тому, трохи погугливши і почитавши документацію, приступаємо.

Відразу покажу те, що вийшло в результаті


Гаджет отримуватиме інформацію з сайту у вигляді xml, парсить і, власне, відображатиме. Також гаджет перевірятиме наявність нових версій, і у разі їх присутності відмовлятися працювати:)
Спочатку, заради отримання досвіду, хотів написати гаджет повністю на VBScript (оскільки з ним ще не мав справи), але зрештою довелося робити вставки на JavaScript.
Перейдемо безпосередньо до коду. Весь код тут я не розглядатиму, покажу лише основні моменти. Посилання на готовий гаджет – наприкінці статті.
Головний файл гаджета – його маніфест – Gadget.xml. Він має називатися саме так і розташовуватись в корені нашого архіву (гаджет є ні що інше, як ZIP з розширенням.gadget).

Weather from Info.Denms.Ru 1.0.1232 Full Weather Widget (Info.Denms.Ru)

Розглянемо його докладніше.
Елемент повинен містити apiVersion, що дорівнює 1.0.0 (на даний момент), а також атрибут src, у якому вказано головний файл нашого гаджета;
Дозвіл для гаджета. Встановлюємо рівним full;
Мінімальна версія Widows Sidebar. На даний момент – 1.0;
Параметри - Ім'я гаджета, - версія, - інформація про автора, - Посилання на сторінку з гаджетом, - іконка гаджета і відображатимуться на панелі встановлених гаджетів.

Файл main.html - звичайний html файл, наводити його повністю не буду, зупинюся лише на деяких моментах.
За допомогою елемента g:background задається тло гаджета. Зробимо його прозорим.

Гаджет може бути у двох станах – 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"; ").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; innerHTML = document.getElementById("small_needupdate").innerHTML; )

Можна також описати функцію збереження налаштувань. У моєму гаджеті їх немає, але для прикладу покажу як це робиться

Function SettingsClosed(event) ( if (event.closeAction == event.Action.commit) ( //alert System.Gadget.Settings.readString("test"); ) )

ReadString – читає раніше збережений рядок, writeString відповідно записує.
Методи System.Gadget.beginTransition(); та System.Gadget.endTransition(); необхідні для "плавного" зміни розміру гаджета. У Windows Seven вони ігноруються , але я залишив їх для зворотної сумісності.

Як уже говорилося вище, сервер надає нам інформацію про погоду у форматі 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) "спроба повторного оновлення через хвилину не досягнуто, продовжуємо рахувати секунди 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 = win0. спроба повторного оновлення через хвилину 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" xml load(filepath) "головна нода – у нашому випадку Set currNode = xmlDoc.documentElement "Дні тижня – Set dayNode = currNode.firstChild While Not dayNode Is Nothing Set currNode = dayNode.firstChild While Not currNode Is Nothing if currNode.parentNode.getAttribute("id") = "today" then ". document.getElementById(prefix+"maintemp").innerHTML = currNode.childNodes(0).text+Chr(176) "відображаємо інші елементи Else "не сьогоднішній день, відображаємо дрібніше "... end If Set currNode = currNode.nextSibling Wend Set dayNode = dayNode.nextSibling Wend End Sub

Перевірка на нові версії проводиться таким самим способом.
Не забуваймо створити файл налаштувань - settings.html, про існування якого ми оголосили вище.

Налаштування

Ось, власне, і все. Радий, якщо моя (перша:)) стаття виявилася комусь корисною.

Використані джерела.

Створювати віджет 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"; ), $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 з title and name to remove HTML $instance["title"] = strip_tags($new_instance["title"]); 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%;" />

// Checkbox

id="get_field_id("show_info"); ?>" name="get_field_name("show_info"); ?>" />

Висновок

Ну от і все. Ви тільки-но зробили самостійно симпатичний і простий віджет, який показує ім'я автора блогу. Понад те, він дає можливість користувачеві вибирати, показувати інформацію аудиторії чи ні. Збережіть код у PHP файлта завантажте до папки своєї теми. Викличте його у вашому functions.php. Після цього, перейдіть в консолі в Зовнішній вигляд → Віджетиі ви побачите ваш віджет.

Весь цей код включений до прикріпленого до статті файлу, так що скопіювати і вставити можна ще простіше. Насолоджуйтесь!