Здрастуйте, хабравчане-маководи!

Сьогодні ми з вами спробуємо розібратися в азах створення віджету для Dashboard у Mac OS X. Нам знадобиться програма Dashcode, призначена саме для цього.

Спочатку трохи теорії. Віджет у Dashboard - це спеціально сформування веб-сторінка, упакована в бандл разом з усіма ресурсами. Ну, і трохи службової інформації на додачу. Відповідно, використовувана мова програмування JavaScript. Якщо Ви вже знайомі з ним, а також з HTML/CSS (хоча це навряд чи знадобиться), то Ви вжездатні написати простенький віджет. Якщо ж ні, то не варто засмучуватися, ця мова дуже проста і інтуїтивно зрозуміла, розібратися з нею можна досить швидко. Далі я вважатиму, що з JS читач більш-менш знайомий. Сама ж стаття розрахована на новачків, так що прошу не лаяти за «надто простий виклад і детальне розжовування елементарних речей». Крім того, за дизайн теж прошу не штурхати - ну не дизайнер я, не дизайнер! Якщо хтось хоче допомогти з цією справою - welcome =)

Для зручності всі вихідники (а також готовий до використання віджет) викладені на гітхаб, посилання в кінці статті. Але не поспішайте просто завантажувати їх! Краще витратити трохи часу та розібратися, як створити це все самому.

Отже, почнемо. Як мета для експериментів я, зрозуміло, вибрав наш улюблений хабр. Ми будемо крок за кроком робити віджет, що відображає карму, рейтинг і позицію в рейтингу вибраного хабраюзера.


Такий віджет (ну, дуже схожий) вже був створений хабратоварищем neoromantic аж у 2007 році, але посилання на скачування не робітники, а крім того, та стаття не містила практичного керівництва щодо створення подібних віджетів.

Відновимо справу Відновимо ці недоліки.

Створимо порожній проект. Для цього запустимо Dashcode і клацнемо в потрібні місця. Процес тривіальний.

Що ми бачимо? Базовий віджет має основний і допоміжний стан (відповідно, front і back в лівій панелі). Перше відображається у звичайному режимі роботи, друге – для налаштування параметрів віджету. Перемикатися між ними можна, вибираючи відповідні пункти у списку компонент ліворуч. Ми можемо сміливо видалити все зайве, крім кнопок "info" та "Done", які служать для перемикання між основним та допоміжним станами. Далі, для простоти, називатимемо це лицьовою та тильною сторонами віджету.

Тепер на лицьову сторону нашого віджету (без жодного рядка коду!) кидаємо потрібні компоненти: кілька написів. Для цього відкриваємо бібліотеку комонент – кнопка Library справа вгорі – та перетягуємо на віджет компоненти типу «Text». Тепер відкриваємо Inspector (так само кнопка праворуч вгорі) і за його допомогою налаштовуємо розміри, кольори тощо для нашого віджету. З його ж допомогою поставимо осмислені імена нашим написам - для зручнішого доступу з коду.

На тильний бік кинемо напис та поле введення. Ну, і ще картинку – для краси. І в результаті отримуємо приблизно таке:

Що ж, непогано, наш GUI вже готовий! Можемо натискати Cmd+R і потикати на кнопки (i) та Done, милуючись ефектом перевороту віджету.

Але одного GUI нам мало, тому переходимо до логіки. Для цього ліворуч вгорі тиснемо на кнопку View і вибираємо у списку Source Code, що випадає. І можемо вже бачити наш автоматично згенерований JavaScript-код. І сміливо починаємо його правити!

Спочатку визначимося з «архітектурою» нашого віджету. Ми будемо по таймеру запитувати через API хабра дані про користувача, парсити їх і відображати карму та рейтинг на лицьовій стороні віджету. Для цього оголошуємо глобальну змінну updateTimer на початку файлу main.js, створюємо функції startTimer(msec) та stopTimer() , які працюватимуть з цим таймером. Також створимо функцію updateStats() , яка буде викликатися таймером.

Function startTimer(msec) ( updateTimer = setTimeout("updateStats()", msec); ) function stopTimer() ( clearTimeout(updateTimer); ) function updateStats() ( alert("It works!"); startTimer(upda )
У функцію show() вставимо виклик startTimer(5000) для запуску таймера при показі віджету, а в функцію hide() , відповідно, вставимо stopTimer() для економії ресурсів, коли віджет не показаний (Dashboard не активна). Тепер ми можемо запустити наш віджет та побачити у консолі (Cmd+Alt+1) висновок «It works!» кожні 5 секунд.

Але ж нас не цікавить така нісенітниця, ми хочемо по таймеру смикати карму і рейтинг! Так що в функції updateStatus() замість алерту ми викликатимемо функцію execStatsRequest() (API хабра радить не смикати дані про користувача частіше, ніж раз на хвилину, так що збільшимо заодно інтервал).

Тепер справа за HTTP-запитами до API хабрахабра. Створюємо нові функції - execStatsRequest() та processStatsRequest(), які будуть служити для запуску та обробки запитів. Ось як вони виглядають у мене:
function execStatsRequest() ( if (userName().length > 0) ( var Url = "http://habrahabr.ru/api/profile/" + userName() + "/"; alert("User: " + userName () + "\nURL: " + Url); xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = processStatsRequest; .send(); ) else ( resetStats(); ) ) function processStatsRequest() ( if (xmlHttp.readyState == 4 && xmlHttp.status == 200) ( alert("xml is " + xmlHttp.responseXML); if ( xmlHttp.responseXML == null) ( resetStats(); ) else ( alert(xmlHttp.responseText); var error = xmlHttp.responseXML.getElementsByTagName("error"); if (error != null) ( alert("Some error occur !"); resetStats(); setLogin("<" + userName() + " not found>"); return; ) var login = xmlHttp.responseXML.getElementsByTagName("login").firstChild.nodeValue; var karma = xmlHttp.responseXML.getElementsByTagName("karma").firstChild.node ("rating").firstChild.nodeValue; var position = xmlHttp.responseXML.getElementsByTagName("ratingPosition").firstChild.nodeValue; )
Тут ми формуємо URL-адресу запиту, створюємо об'єкт типу XMLHttpRequest, і з його допомогою запитуємо методом GET наші дані. Що примітно, доводиться насильно ставитивідповіді MIME-тип "text/xml", бо хабра-апі повертає чомусь «text/html». А у функції processStatsRequest() ми паримо отриману в XML відповідь. При цьому ми перевіряємо його на наявність помилки - і повідомляємо про це користувача.

Тут варто відволіктися від коду та налаштувати сам віджет – дозволити йому працювати з мережею. Для цього в лівій панелі прокручуємо список елементів вниз і бачимо пункт Widget Attributes. Тут просто ставимо галочку "Allow Network Access". Також можна налаштувати id віджету та його версію. Тепер повернемося до коду.

Функції setLogin() , setKarma() і що з ними відображають рядок, що передається в них, в потрібних полях лицьової сторони. Вони були створені для зручності і виглядають однотипно, на зразок того:

Function setLogin(login) ( document.getElementById("userName").innerText = login; )
Функція resetStats() встановлює дефолтні значення для всіх полів. А функції setUserName() і userName() служать обгорткою над полем введення імені хабраюзера на задній стороні віджету:

Function userName() ( return document.getElementById("nameEdit").value; ) function setUserName(name) ( document.getElementById("nameEdit").value = name; )
Що ж, віджет майже готовий. Чому майже? Так тому що нам треба ще зберігати в налаштуваннях введене ім'я користувача. Для цього пишемо функції loadPrefs() та savePrefs().

Var preferenceKey = "habraUserName"; function loadPrefs() ( var name = widget.preferenceForKey(widget.identifier + "-" + preferenceKey); alert(widget.identifier + "-" + preferenceKey); alert("name from preferences: " + name); if ( name != null) setUserName(name); ) function savePrefs() ( widget.setPreferenceForKey(userName(), widget.identifier + "-" + preferenceKey); )
Ці функції доцільно викликати відповідно до функцій show() і hide() . Налаштування буде унікальним для кожного віджету, що дозволяє накидати на Dashboard віджети з інформацією щодо кількох користувачів.

Ну, тепер точно віджет готовий до використання. Але немає межі досконалості! Локалізуємо тепер наш віджет, щоб мати російську та англійську версії. Ви також можете зробити (як домашнє завдання) локалізацію французькою та японською мовами.

Переходимо до нашого лицьового боку, викликаємо інспектор. Тепер по черзі виділяємо наші написи та в розділі Localization інспектора виставляємо у полі Value значення англійською мовою. Вони, ймовірно, збігатимуться з встановленими значеннями поля Key. Ці значення будуть внесені в дефолтну (англійську) локалізацію, яку можна побачити у файлі en.lproj/localizedStrings.js .

Тепер додамо російську локалізацію. Переходом у Widget Attributes та в розділі Localization додаємо (у лівому списку) російську мову. Вибираємо його і тепер у правому списку можемо вводити локалізовані рядки.


Ці значення, відповідно, будуть прописані в ru.lproj/localizedStrings.js.

Власне, ось і все можемо запускати наш віджет і милуватися своєю (або чужою) кармою! Щоб встановити віджет у Dashboard, потрібно вибрати Run & Share у лівій панелі та вибрати Save to Disk або Deploy to Dashboard – залежно від наших потреб.

Якщо хочеться скачати вже готовий віджет, милості прошу.

Багато власників комп'ютерів Mac вважають за краще уважно стежити - причому не лише зовнішнім, а й "внутрішнім". Для цього їм мало стандартного "Моніторингу системи": вони встановлюють по 3-4 сторонні програми та відстежують більшість параметрів за їх допомогою. Але що, якщо все це виявиться прямо в центрі повідомлень Mac, та ще й із крутою візуальною реалізацією?

І такий віджет є. Він з'явився в Mac минулого місяця і називається MONIT. Назва, що говорить, чи не так? Він черпає інформацію про безліч показників - кількості, завантаженості процесора або оперативної пам'яті, показує дані про мережеве підключення разом зі швидкістю завантаження і скачування, і багато іншого.

Після натискання на потрібний параметр ви побачите докладнішу інформацію про нього.

Програма дійсно зручна та корисна — захотіли дізнатися, наскільки завантажений процесор, відкрили центр повідомлень — і все видно! Але найголовніший її плюс – ціна. MONIT розповсюджується абсолютно безкоштовно, завантажити можна за посиланням нижче.

Назва: MONIT
Видавець/розробник: Tildeslash Norge Ltd
Ціна:Безкоштовно
Вбудовані покупки:Ні
Сумісність: OS X 10.11 та вище
Посилання:

На мою думку, більшість віджетів марні. Але все ж таки хороший віджет може бути дуже забавним і корисним. :)

Я постарався відібрати найкорисніші віджети для звичайного користувача Mac. Ці віджети допоможуть отримати максимальну віддачу від комп'ютера Mac. Звичайно, сюди включені не всі фаворити, тож, якщо ви вважаєте, що є віджет, який має бути доданий до цього списку, повідомте про це у коментарях!

Цей widget призначений для того, щоб отримати повну інформацію про те, що відбувається з вашим Mac зараз. З його допомогою ви можете перевірити використання вашого CPU та RAM, вільне місце на жорсткому диску, мережевий статус та швидкість мережі, внутрішню температуру, швидкість обертання вентилятора, рівень заряду акумулятора, поточні процеси та багато іншого. Також з гарним смаком розроблено інтерфейс віджету.

iTunes автоматично завантажує обкладинки для ваших пісень, тільки якщо у вас є обліковий запис iTunes. Цей віджет буде корисним тим, хто не має такого облікового запису. Він швидко отримує обкладинки пісень з великої бази даних Amazon для вибраної пісні в iTunes.

За допомогою цього віджету легко отримувати тексти улюблених пісень. Все, що вам потрібно зробити, це відтворити пісню в iTunes і запустити Dashboard. Тексти пісень автоматично відображатимуться у віджеті та копіюватимуться прямо в iTunes. Тексти є для переважної більшості популярних пісень.

Запам'ятати всі клавіатурні скорочення Mac OS X неможливо. :lol: Тому, коли вам потрібна гаряча клавіша для швидкого доступу, віджет xCuts те, що вам потрібно. Віджет зручний тим, що ви можете переглядати клавіатурні скорочення за категоріями та шукати їх у базі даних.

Time Machine є чудовою функцією, яка була введена в Mac OS X 10.5 Leopard, проте вона не дає користувачам докладної інформації про те, що відбувається насправді. Добре мати трохи більше інформації про роботу Time Machine. :) Цей віджет відображає системні журнали, які змінюються після кожного резервного копіювання, показує, чи йде процес резервного копіювання, чи він уже завершено.

Якщо ви завжди у пошуку нових віджетів, то це ідеальний для вас віджет. Він показує 20 останніх доданих віджетів на сайт Apple.

Для тих, кому потрібна б прольша безпека, використання паролів на основі простих слів є «технологічним гріхом»:). Вони можуть бути легко зламані, внаслідок чого, наприклад, ваш рахунок буде доступним для хакерів. iPassword допомагає зменшити цей ризик шляхом випадкової генерації літер та цифр, які можна використовувати, наприклад, як пароль для своїх облікових записів в інтернеті.

Деякі люди можуть і не знати, що магазини Apple регулярно проводять безкоштовні заходи, де вони навчають відвідувачів, як виконувати певні завдання на Mac: створення домашнього відео в iMovie або пісні GarageBand і т.д. Цей віджет містить список майбутніх подій в найближчому від вас Apple Store, щоб ви знали, коли відвідати магазин і побачити те, що вас цікавить.

Добірку святкових шпалер опубліковано сьогодні невипадково. По-перше, сьогодні напередодні католицького Різдва: російськомовних католиків (або тих, хто хоч би розуміє російською) напевно чимало. А по-друге, наступної п'ятниці практично всім буде не до шпалер. 🙂 Ну, і по-третє, потрібно налаштовуватися на новорічний настрій заздалегідь, щоб з першим дзвоном келихів з шампанським у голові були лише радісні думки та надії на краще.

Безкоштовний віджет Dashboard, що дозволяє створювати різноманітні списки справ. Завдяки інтеграції з iCal та Apple Mail збирає всю необхідну для користувача інформацію в одному місці. DoBeDo має приємний простий дизайн та може змінювати тему оформлення.

Не зовсім віджет, але ця програма тісно пов'язана із Dashboard. Справа в тому, що Dasher призначений всього для однієї простої функції, а саме, автоматично показувати Dashboard через певний період часу. Це дуже зручно, адже інформація з віджетів буває корисною, а самостійно відкрити Dashboard іноді просто забуваєш.

Стала найважливішим релізом у лінійці настільних операційних систем Apple. Платформа продовжує напрямок, який було задано із запуском торішньої OS X Mavericks, пропонуючи користувачам ще більш ясний дизайн та ще більше функцій, натхнених iOS.

Гідним продовжувачем традицій став оновлений Центр повідомлень OS X Yosemite, який розширили режимом «Вигляд сьогодні» для календаря, нагадувань, погоди, акцій та соціальних мереж. При цьому функції бічної панелі легко можуть бути розширені віджетами, які завантажуються з магазину програм Mac App Store. До цього моменту розробники запропонували десятки корисних віджетів для OS X. MacDigger пропонує найкращі рішення, що використовують корисну функцію нової операційної системи Apple.

Wunderlist

Deliveries

За допомогою Deliveries можна зручно відстежувати поштові відправлення. Все, що для цього потрібно – запустити програму та вказати номер трекінгу (довідковий номер відправлення). Зараз трекінг присвоюється посилці практично за будь-якого способу пересилання. Віджет уміє відслідковувати посилки всіх основних кур'єрських служб.

Airmail

Airmail – це інноваційний поштовий клієнт, який підтримує сервіси Gmail, Google Apps, iCloud, Yahoo!, AOL та IMAP. Програма тривалий час знаходилася на стадії бета-тестування і з недавнього часу доступна для завантаження в магазині Mac App Store. Під час створення дизайну Airmail розробники надихалися офіційним твіттер-клієнтом під Mac.

PCalc

PCalc – потужний калькулятор для Mac, який дозволяє додати віджет до Центру повідомлень. Поєднує в собі переваги звичайного (послідовні обчислення, швидке виконання функцій з клавіатури) та калькулятора, що вважає вирази. Програма має оригінальний зовнішній вигляд, інтерфейс, що повністю настроюється, і різні типи оформлення. Доступна версія для iOS.

iStat Mini

iStat Mini являє собою простий та зручний віджет для Центру повідомлень. Невелика міні-додаток дозволяє контролювати в реальному часі завантаження процесора, оперативної пам'яті, накопичувача та пропускну здатність мережі. Всі дані у зручному вигляді виводяться у бічну панель ОС у вигляді кругових діаграм.

Monity

Monity – це просунута версія iStat Mini. Дозволяє контролювати завантаження процесора, пам'яті, акумуляторну батарею, використання дискового накопичувача, час безперервної роботи комп'ютера та інших системних параметрів. Віджет відображає системну статистику в бічній панелі, що заощаджує місце на робочому столі і виглядає лаконічно та естетично приємно.

PhotoDesk

PhotoDesk для Instagram дає можливість переглядати, отримувати новини та повідомлення, зберігати зображення та відео, відзначати і навіть завантажувати фото та відео із соцмережі. Завантажити контент можна за допомогою перетягування. Можна зберігати гарні фотографії в альбомах або настроїти автоматичну синхронізацію зображень у вибрану папку. Віджет дозволяє переглядати стрічку фотографій з кількістю лайків та датою публікації.

Chronicle

За допомогою Chronicle зручно вести облік витрат. Програма має стати надійним помічником. Завдяки функції нагадування та віджету для Центру повідомлень користувач не забуде заплатити за рахунками і завжди знатиме, коли, скільки і за що заплатив. Є синхронізація з версією програми для iPhone та iPad.

Принтери