Журнал MSDN Magazine > Главная > Все выпуски > 2007 > August >  Мини-приложения: Создайте собственное мини-прил...
Мини-приложения
Создайте собственное мини-приложение для боковой панели Windows Vista
Донаван Уэст (Donavon West)

В статье рассматривается:
  • Структура мини-приложения Sidebar
  • Программирование и отладка на JavaScript
  • Всплывающие окна и параметры
  • Локализация
Продукты и технологии:
Windows Vista, JavaScript
Загрузить исходный код для этой статьи: SidebarGadget2007_08.exe (181 KB)
Просмотреть код в интерактивном режиме
Возможно, вы недавно слышали много разговоров о мини-приложениях — это облегченные приложения, с которыми вы встречались, например сидя за рабочим столом Windows Vista™. В настоящее время корпорация Майкрософт поддерживает три разных типа мини-приложений. Мини-приложения для боковой панели, работающие на рабочем столе Windows Vista. Мини-приложения для Интернета выглядят аналогично, но работают на страницах Live.com и Windows Live Spaces. Приложения SideShow работают на таких устройствах, как дополнительные дисплеи портативных компьютеров, пульты дистанционного управления и клавиатуры компьютеров.
в январском выпуске MSDN Magazine.)

Что из себя представляет мини-приложение для боковой панели?
Мини-приложение для боковой панели может стать мощным и удобным небольшим инструментом. Поэтому вы, возможно, удивитесь, узнав, как легко их создавать. Фактически, если вы знаете HTML, CSS и JavaScript (а я подозреваю, что многие из вас все это знают), вы на правильном пути.
В самой простой форме мини-приложение состоит всего лишь из HTML-файла и файла определений в формате XML. Безусловно, в большинство мини-приложений входят другие файлы, например файлы изображений (PNG и JPG), таблицы стилей (CSS) и сценарии (исходные файлы на JavaScript и VBScript). Все содержимое хранится в файле ZIP, переименованном с использованием расширения .gadget. При желании можно взять в сети мини-приложение gadget online, переименовать его с использованием расширения ZIP и без труда ознакомиться с его содержимым. Рекомендую это в качестве хорошего приема — присмотреться к другим мини-приложениям, чтобы понять, что в них входит.

Файл определений в формате XML
Файл определений в формате XML, или манифест, является объединяющей основой мини-приложения. Я не уверен, что этот файл правильно называть манифестом, поскольку в нем нет связей со всеми другими файлами мини-приложения; он содержит только связи с главным HTML-файлом (в котором есть связи с другими файлами), несколько файлов значков и веб-узел автора мини-приложения.
На рис. 1 показана типичная структура файла определений в формате XML. Видно, что это стандартный XML-файл с базовым элементом мини-приложения. Приведем список элементов, о которых следует позаботиться в первую очередь:
  • name: Название мини-приложения.
  • version: Номер версии мини-приложения.
  • author: Имя разработчика или имя компании.
  • info url: Адрес веб-узла.
  • info text: Удобное имя для веб-узла.
  • logo src: Имя файла изображения с логотипом компании.
  • copyright: Уведомление об авторских правах.
  • description: Описание мини-приложения.
  • icon src: Имя файла изображения значка для данного мини-приложения.
  • base src: Имя главного файла HTML мини-приложения.
Большая часть элементов в файле определений служит для отображения мини-приложения в галерее. Один по-настоящему функциональный элемент — атрибут src базового элемента, указывающий на HTML-файл, выполняющий быстрый запуск мини-приложения. Я принял за правило называть этот файл gadget.html, но подходит любое допустимое имя файла.

Главный файл HTML
Реализация мини-приложения состоит всего лишь из HTML-страницы, максимальная ширина которой составляет 130 пикселов. Хотя это не совсем очевидно, главный HTML-файл (на который есть ссылка в XML-файле определения), загружается, фактически, в окно Internet Explorer® 7. У этого окна, разумеется, нет окружения желтого цвета, и его местоположением управляет боковая панель, но все, находящееся внутри, является, в своей основе, веб-приложением. Имеется доступ к DOM и большинству интерфейсов API, как это было бы на стандартной веб-странице. Это означает, что можно использовать методики AJAX, создавать динамические элементы HTML, ловушки событий и т.п. В процессе создания примера мини-приложения будут проделаны все эти и многие другие операции.
Из объектной модели мини-приложения Sidebar можно использовать также интерфейсы API. Интерфейсы API предоставляют мини-приложению возможность взаимодействовать с системой. Например, можно считывать силу сигнала платы беспроводной сети, воспроизводить звуковой файл или определять загрузку ЦП.
Посмотрев на HTML-код для мини-приложения, можно отметить, что он ничем не отличается от HTML-кода, который пишется для обычной веб-страницы. Далее следует HTML-код, который я использую для запуска практически всех своих проектов мини-приложений для боковой панели:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
   <title></title>
   <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
   <link href=”style.css” rel=”stylesheet” type=”text/css” />
   <script src=”local.js” type=”text/javascript”></script>
   <script src=”gadget.js” type=”text/javascript”></script>
</head>
<body>
   <div id=”gadget” class=”gadget”></div>
</body>
</html>
В представленном здесь примере весь HTML для мини-приложения создается динамически в файле gadget.js, написанном на JavaScript. Большую часть разметки можно было бы включить в главный HTML-файл, но зачем?
Обратите внимание, что я использую таблицы стилей CSS. Именно они отвечают за внешний вид моего мини-приложения. Как и для любой веб-страницы, таблицы стилей являются существенной частью проектирования привлекательных визуально мини-приложений. Поэтому при создании мини-приложения, имеющего профессионально разработанный внешний вид, крайне важно хорошо разбираться в CSS.
Следует отметить, что хотя разработка главного файла HTML для мини-приложения полностью аналогична созданию страницы, развертываемой в сети, у реализации мини-приложения есть серьезное преимущество. Нет необходимости заботиться о вопросах, связанных с различиями обозревателей. Поскольку мини-приложение всегда работает под управлением Internet Explorer, можно рассчитывать на поддержку для функций Internet Explorer, например поддержку PNG для букв, и не возникает необходимости писать код, учитывающий несовместимость обозревателей.
Начиная разработку мини-приложений для боковой панели, я решил, что эта деятельность поднимает общий тонус. Со временем я стал к этому относиться как к само собой разумеющемуся, и, когда недавно мне пришлось проектировать веб-страницу, я был крайне раздражен необходимостью снова иметь дело с проблемами различий в обозревателях.

JavaScript
Если вы планируете сделать что-нибудь интересное в своем мини-приложении, вам стоит освежить свои познания в JavaScript. Писать код можно на любом языке сценариев, поддерживаемом Internet Explorer 7, но большинство примеров мини-приложений в «Интернетах» написаны на JavaScript.
Если вы хотя бы какое-то время работали с JavaScript, возможно, вы слышали выражение «eval — это зло». Если нет — вперед, поищите его в сети. Я подожду.
Теперь, когда вы понимаете, что никогда не следует использовать eval, я хочу улучшить это правило, добавив, что никогда не следует ни помещать текст JavaScript в атрибут в пределах HTML, ни передавать строку в setInterval или setTimeout. А когда я говорю, что никогда не следует помещать текст JavaScript в атрибут в пределах HTML, это относится к атрибуту onload тела, так как внутренне он интерпретируется так, как если бы это был оператор eval.
Уверен, что вы скажете: «Никакого onload тела? Как же мой код будет выполняться?» Могу предположить, что у вас сформировалась привычка присоединения функции к событию onload объекта окна. Следующий фрагмент кода покажет, как выполнять присоединение к событиям onload и onunload:
function pageLoad() {
    window.detachEvent(“onload”, pageLoad);
    window.attachEvent(“onunload”, pageUnload);
    //page initalization here
}

function pageUnload() {
    window.detachEvent(“onload”, pageUnload);
    //gadget is closing, clean up
}

window.attachEvent(“onload”, pageLoad);
При использовании этого метода функция pageLoad вызывается непосредственно после загрузки страницы (после выполнения DOM). Обратите внимание, что первое, что я делаю в pageLoad, это отъединение события. В JavaScript рекомендуется всегда очищать память после работы, что не допускать утечек памяти.
Затем выполняется настройка события onunload, которое будет вызываться при уничтожении мини-приложения — либо при закрытии мини-приложения пользователем, либо при закрытии боковой панели. И опять это делается для освобождения всех ссылок, которые могут привести к утечкам памяти. Кроме того, это последняя возможность сохранить все параметры, если в этом есть необходимость. О параметрах речь пойдет в статье немного позднее.
Возможно, к этому моменту вы обратили внимание на то, что у меня есть некоторое пристрастие к написанию правильного и ясного кода JavaScript, поэтому извините меня еще раз за обращение к данной теме. Я настойчиво рекомендую «причесать» («lint») код перед тем, как выполнять развертывание. Это не только улучшит ваш код, но может даже устранить некоторые ошибки до того, как они проявятся.
Имя «Lint» изначально было дано средству, которое помечает проблемные участки в исходном коде на C. Теперь это общий термин, применяемый ко многим исходным языкам. Одним из лучших «причесанных» приложений для JavaScript является бесплатное интерактивное средство под названием JSLint (имеется на веб-узле по адресу www.jslint.com).
Выпуск MSDN Magazine за май 2007 г. содержит прекрасный материал по JavaScript под названием «Создание современных веб-приложений с помощью объектно-ориентированных приемов», написанный Рэем Джаядината (Ray Djajadinata). Если вы еще этого не сделали, обязательно ознакомьтесь с ним. Эта статья долго будет помогать вам в написании хороших мини-приложений.

Закрепленные и плавающие
Если мини-приложение помещено в боковую панель, оно считается находящимся в закрепленном состоянии. При перетаскивании на рабочий стол оно становится плавающим или незакрепленным. Как уже упоминалось, максимальная ширина для закрепленного мини-приложения составляет 130 пикселов. Незакрепленное мини-приложение не имеет ограничений на ширину, что позволяет создавать расширенное представление. Можно воспользоваться преимуществом этого дополнительного пространства для улучшения рабочей среды. (Майкрософт рекомендует в незакрепленных мини-приложениях ограничиваться областью, не превышающей квадрата со стороной 400 пикселов.)
На рис. 2 приведено мое мини-приложение MSDN Magazine Ticker (выводящее прокручивающиеся заголовки статей последнего выпуска) и мини-приложение для календаря погоды (входящее в поставку Windows Vista) как в закрепленных, так и в плавающих состояниях. Мини-приложение календаря погоды является прекрасным примером мини-приложения, обеспечивающего улучшенную рабочую среду в плавающем состоянии, — от предоставления просто текущей температуры оно переходит к подробному прогнозу на три дня. Мини-приложение MSDN Magazine Ticker не отображает никакой дополнительной информации; оно просто раскрывается для отображения той же информации в расширенном формате.
Рис. 2 Закрепленные и плавающие мини-приложения (Щелкните изображение, чтобы увеличить его)
Отметим, что существует не указанный в документации минимум для высоты мини-приложения, составляющий 57 пикселов (как для закрепленного, так и для плавающего состояния). Причина существования минимального значения состоит в том, что высота панели инструментов, когда мини-приложение находится в плавающем состоянии, равна 57 пикселам (см. рис. 3).
Рис. 3  
Текущее состояние мини-приложения можно запросить с помощью System.Gadget.docked. Для закрепленного состояния возвращается значение «истина», а для незакрепленного — «ложь». Предусмотрены также два события, System.Gadget.onDock и System.Gadget.onUndock, за которыми можно следить, чтобы определить, когда изменяется состояние закрепления.
Чтобы изменить высоту, ширину или фон изображения в мини-приложении, нельзя просто изменить класс document.body из события onDocked или onUndocked (это идет вразрез с тем, на что я исходно рассчитывал). Вместо этого необходимо специальным образом указать свойства объекта стиля элемента тела. Для изменения фона изображения служит интерфейс API с именем System.Gadget.background, позволяющий указать имя файла фонового изображения. Приведем пример:
// called when the docked state changes
function dockStateChanged() {
    if (System.Gadget.docked) {
        System.Gadget.background = “images/background.png”;
        document.body.style.width = “130px”;
    } else {
        System.Gadget.background = “images/background-undocked.png”;
        document.body.style.width = “230px”;
    }
}

Всплывающие окна
Всплывающее окно расширяет пользовательский интерфейс за пределы границ мини-приложения. Это окно можно использовать по своему усмотрению. (На максимальный размер всплывающих окон не накладывается никаких ограничений.) Хорошим примером мини-приложения, использующего всплывающее окно, является мини-приложение Stocks, входящее в поставку Windows Vista. Щелчок акции приводит к появлению окна сбоку от мини-приложения, в котором отображается график операций с этой акцией (см. рис. 4). В мини-приложении Live Search также используется плавающее окно, в котором отображаются результаты поиска для введенного запроса. На рис. 5 показано всплывающее окно из нашего мини-приложения MSDN Magazine Ticker. Обратите внимание, что когда щелкается заголовок, интерфейс пользователя расширяется за пределы закрепленного мини-приложения, чтобы отобразить заголовок статьи, описание и имя автора.
Рис. 4 Мини-приложение Stocks со всплывающим окном (Щелкните изображение, чтобы увеличить его)
Рис. 5 Мини-приложение Ticker со всплывающим окном (Щелкните изображение, чтобы увеличить его)
Отметим, что всплывающее окно мини-приложения Sidebar является системным модальным —отображается только одно всплывающее окно. Если пользователь щелкнет мини-приложение A, вызывая всплывающее окно, а затем щелкнет мини-приложение B, вызывая другое всплывающее окно, всплывающее окно мини-приложения A закрывается. Более того, когда фокус покидает мини-приложение, его всплывающее окно закрывается.
Интерфейсы API всплывающего содержимого предоставляются объектом System.Gadget.Flyout. Всплывающее окно существует в окне (со своей собственной DOM), полностью изолированном от главного окна HTML. По существу, необходимо обеспечить отдельный HTML-файл всплывающего окна наряду со всеми другими необходимыми поддерживающими файлами. Файл всплывающего окна указывается посредством присвоения System.Gadget.Flyout.file имени HTML-файла всплывающего окна.
Предусмотрен интерфейс API, облегчающий взаимодействие между основным и всплывающим окнами. System.Gadget.Flyout.document возвращает объект Document всплывающего окна. Его можно использовать из главного окна мини-приложения, чтобы динамически создавать HTML во всплывающем окне.
Предусмотрены также события, которые могут захватываться как кодом главного окна, так и кодом всплывающего. К таким событиям относится onShow, вызываемое сразу после создания всплывающего документа, и onHide, вызываемое сразу перед уничтожением всплывающего документа.
Разработчик может программным способом отображать или скрывать всплывающее окно, указывая для System.Gadget.Flyout.show соответственно значение «истина» или «ложь». Считывание этого значения позволяет выяснить текущее состояние всплывающего окна.
Следует помнить, что невозможно управлять местоположением всплывающего окна. В мини-приложении Sidebar местоположение определяется на основе реального пространства экрана и положения самого приложения. Например, всплывающее окно может отображаться слева или справа от мини-приложения. Или даже ниже приложения.

Диалоговое окно параметров
Диалоговое окно параметров позволяет предоставить пользователю список предпочтений мини-приложения. Пользовательская среда может быть практически какой угодно. Диалоговое окно может выглядеть как обычная веб-страница с переключателями, флажками и текстовыми полями.
Пользователь получает доступ к диалоговому окну параметров, щелкнув значок гаечного ключа на панели инструментов мини-приложения (см. рис. 3), отображаемый при наведении указателя на мини-приложение. Когда пользователь открывает диалоговое окно параметров мини-приложения, боковая панель делает моментальный снимок мини-приложения и отображает изображение в виде небольшого значка (см. рис. 6).
Рис. 6 Диалоговое окно параметров 
Хотелось бы обратить внимание на некоторую неоднозначность, возникающую, когда речь заходит о названии этого диалогового окна. Когда мини-приложение щелкается правой кнопкой мыши, пользовательский интерфейс мини-приложения предоставляет меню, ссылающееся на это окно как на «Варианты» (Options). Однако интерфейс API ссылается на него как на «параметры» (settings).
Я был несколько удивлен, обнаружив, что пользовательские параметры хранятся в INI-файле приблизительно 1990 г., а не в более современном XML-файле. К счастью, существуют интерфейсы API мини-приложения, позволяющие читать и записывать параметры, поэтому то, где и как эти параметры хранятся, не должно заботить вас и ваше приложение.
Когда доходит до создания собственного пользовательского интерфейса для параметров, необходимо сделать несколько важных предупреждений. Ширина пользовательской области диалогового окна ограничена 300 пикселами. Ограничений на высоту нет, но в руководстве Майкрософт по рабочей среде пользователя для мини-приложений в Windows Vista рекомендуется ограничиваться шириной в 278 пикселов и высотой не более 400 пикселов. Если необходимо большее пространство, возможно, следует создать диалоговое окно со вкладками. В этой статье не будет обсуждаться способ реализации пользовательского интерфейса со вкладками, но существует множество материалов в Интернете, позволяющих выяснить, как это делается.
Необходимо передать мини-приложению инструкцию об активировании значка параметров. Это выполняется посредством указания для System.Gadget.settingsUI имени HTML-файла, как правило, в области сценария, отвечающей за инициализацию мини-приложения. Кроме этого, необходимо настроить функцию обратного вызова для тех случаев, когда диалоговое окно параметров закрывается (чтобы мини-приложение могло считать новые предпочтения пользователя). Это выполняется посредством указания для System.Gadget.onSettingsClosed имени обработчика, как показано ниже:
System.Gadget.settingsUI = “settings.html”;
System.Gadget.onSettingsClosed = settingsClosed; 

function settingsClosed(p_event) {
    //OK clicked?
    if (p_event.closeAction == p_event.Action.commit) {
        //yes, read settings here
    }
}
Как видно из примера, когда вызывается обработчик, ему передается объект события — а именно, объект события System.Gadget.Settings.ClosingEvent. Если в свойстве closeAction объекта содержится значение commit, это означает, что пользователь выбрал «OK» и, вероятно, потребуется считать новые параметры. В противном случае изменения в диалоговом окне были отменены, и считывание предпочтений можно обойти.

Операции чтения и записи параметров
Параметры записываются с помощью функции System.Gadget.Settings.write или System.Gadget.Settings.writeString. Обеим передается пара ключ/значение.
И наоборот, параметры считываются с помощью функции System.Gadget.Settings.read или System.Gadget.Settings.readString. Обе эти функции принимают ключ и возвращают значение. Если ключ не существует (например если он никогда не был записан), обе функции возвращают неопределенное значение.
В языке JavaScript нет строгой типизации, и если используется запись и чтение, боковая панель выполняет попытку преобразования типа. Если необходимо точно знать, что записывается и считывается, следует подумать об использовании writeString и readString, поскольку они работают со строками. В зависимости от типа обрабатываемых данных потребуется определить, какие методы работают лучше.

Локализация
Мини-приложения для боковой панели поддерживают локализацию методом «локализованных папок». Каждый раз, когда мини-приложение для боковой панели выполняет попытку загрузить ресурс (манифест мини-приложения, таблицу стилей, файл изображения, файл JavaScript), оно выполняет поиск файла в папках в следующем порядке:
  • Полностью соответствующие языковому стандарту (en-us, es-us, ja-jp)
  • Часть языкового стандарта, относящаяся к языку (en, es, ja)
  • Корневая папка мини-приложения
Например, если работает американская версия Windows Vista, а в предпочтениях указан испанский язык, мини-приложение сначала просматривает папку es-us. Если там файл не обнаружен, Sidebar продолжает поиск в папке es. И, наконец, если файл все еще не найден, Sidebar продолжает поиск в корневой папке мини-приложения.
Очевидна важность языка, но какое значение имеет местоположение? В действительности для некоторых мини-приложений местоположение имеет большое значение. Рассмотрим мини-приложение календаря погоды. Слово «sunny » (солнечно) можно отображать пользователям как в Соединенных Штатах, так и в Соединенном Королевстве, но от местоположения зависит отображение температуры в градусах по Фаренгейту (США) или по Цельсию (Великобритания).
Многие разработчики, скорее всего, будут поддерживать мини-приложения только на английском языке, но если важен языковый стандарт, я рекомендую поместить все зависящие от языка строки и зависящие от местоположения переменные в отдельный файл JavaScript с именем local.js и поместить этот файл в корневую папку мини-приложения. Затем следует создать папку для каждого языкового стандарта, который предполагается поддерживать, и скопировать переведенные версии файла local.js в соответствующие папки. Приведем пример файла local.js из корневой папки, представляющий стандарт en-us:
var L_Hello = “Hello”;
var L_Degrees = 0;
Этот же файл в папке \es-es мог бы выглядеть следующим образом:
var L_Hello = “Hola”;
var L_Degrees = 1;
При необходимости отобразить «Привет» вы скорее используете переменную L_Hello, а не строку с фиксированным значением. А при запросе информации для календаря погоды используете переменную L_Degrees для запроса требуемого формата. Такой подход обеспечивает вывод приветствия на требуемом языке и формат температуры, соответствующий предпочтениям пользователя. В главном модуле JavaScript при необходимости использования строки или определения варианта вывода градусов выполняются действия, аналогичные приведенным ниже:
element.innerHTML = L_Hello;
if (L_Degrees === 0) {
    //load the Fahrenheit feed
} else {
    //load the Celsius feed
}
Как видно, программный код реагирует по-разному в зависимости от того, какой файл local.js загружен мини-приложением Sidebar. Толково?
Отметим, что если в корневом каталоге находится английский local.js, мини-приложение по-прежнему будет работать для неподдерживаемых языковых стандартов, хотя и с резервным языком (в данном случае английским). Крайне важно поддерживать язык по умолчанию в корневой папке мини-приложения. Если не обеспечен язык по умолчанию, а кто-нибудь использует язык, не поддерживаемый мини-приложением (имеется в виду язык, для которого не была создана подпапка), мини-приложение отображает пустые строки.

Что произошло с предупреждением и подтверждением?
Мы все посещали веб-узлы и встречались с предупреждением «Неверный ввод, повторите попытку» и диалоговым окном подтверждения «Удаление записи. Продолжить?». Разработчики зачастую любят выдавать информационные сообщения такого рода.
В боковой панели, однако, эти функции JavaScript отключены. Использование всплывающих диалоговых окон противоречит рекомендациям Windows Vista UX относительно мини-приложений для боковой панели. Если вы по-прежнему вынуждены использовать всплывающие окна, эти функции можно имитировать.
Для этого вставьте сначала простой однострочный тег в элемент заголовка HTML:
<script src=”alert.vbs” type=”text/vbscript”></script>
Затем создайте файл, содержащий код, приведенный на рис. 7, и назовите его alert.vbs. После этого можно по своему усмотрению использовать предупреждения и подтверждения.
‘simulate JavaScript alert() function
sub alert(prompt)
    MsgBox prompt, 48 , “Sidebar Gadget”
end sub

‘simulate JavaScript confirm() function
function confirm(prompt)
    dim res
    res = MsgBox (prompt, 33, “Sidebar Gadget”)
    if res=1 then
        confirm = true
    else
        confirm = false
    end if
end function


Отладка
Отладка JavaScript всегда была замысловатой. Многие разработчики спасались тем, что размещали в коде предупреждения для отображения значений определенных переменных. Однако это не слишком элегантное решение. В более приемлемом методе используется Visual Studio® (или даже бесплатный вариант Visual Web Developer™ 2005 Express Edition).
Достаточно разместить в коде операторы отладчика — везде, где требуется проверить значение переменной, а затем запустить мини-приложение. Когда JavaScript выполняет оператор отладчика, отображается всплывающее окно с запросом о необходимости отладки приложения (см. рис. 8). При выборе «Да» предоставляется возможность просматривать всю рабочую среду мини-приложения, включая DOM, и просматривать значения любых созданных переменных. Мини-приложение, по существу, застывает в текущем состоянии.
Рис. 8. Требуется отладить мини-приложение? (Щелкните изображение, чтобы увеличить его)
На рис. 9 показан фрагмент отладочного кода, в котором переменная refreshRate равна 24. Такая форма отладки предоставляет большие возможности. Однажды поработав с ней, вы никогда не вернетесь к нашпиговыванию кода операторами предупреждений. Отметим, что отладочные средства JavaScript значительно улучшены в следующей версии Visual Studio, носящей кодовое название «Orcas». Подробнее об этих новых функциях можно прочитать в статье Отладочные средства JScript в Visual Web Developer Orcas, а загрузить первую бета-версию «Orcas» можно по адресу msdn2.microsoft.com/aa700831.
Рис. 9 Отладка мини-приложения в Visual Studio (Щелкните изображение, чтобы увеличить его)

Пакетирование мини-приложения
Простейший способ создания пакета состоит в использовании проводника Windows. Выберите файлы, составляющие мини-приложение, щелкните их правой кнопкой мыши и выберите «Отправить | Сжатая ZIP-папка».
Можно также пакетировать мини-приложение в виде CAB-файла, который является встроенным форматом сжатых архивов Майкрософт. Достаточно создать CAB-файл и переименовать его с использованием расширения .gadget. (Кстати, если вы попытаетесь переименовать файл ..gadget с помощью расширения ZIP и проводник Windows выдаст ошибку при попытке открытия этого ZIP-файла, попытайтесь вместо этого переименовать файл с использованием расширения CAB.)
Существует несколько разных методов, которые можно использовать для создания мини-приложения программным способом. В своих проектах я создаю следующий пакетный файл с именем make.bat:
@echo off

rem ** remove/create a test gadget folder
rd “%LOCALAPPDATA%\Microsoft\Windows Sidebar\
    Gadgets\MSDNSample.gadget\” /s /q
md “%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\MSDNSample.gadget\”

rem ** copy all of the files into test area
xcopy . “%LOCALAPPDATA%\Microsoft\Windows Sidebar\
    Gadgets\MSDNSample.gadget\” /y /s /q /EXCLUDE:exclude.txt

cd “%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\MSDNSample\”
cabarc -r -p n “%HOMEPATH%\Documents\MSDNSample.gadget” *
Здесь для создания файла CAB используется служебная программа Cabarc.exe. (Cabarc.exe является бесплатным инструментом Майкрософт, устанавливаемым вместе с Visual Studio. Эта программа доступна также отдельно как часть комплекта Cabinet SDK, который можно загрузить с веб-узла по адресу support.microsoft.com/kb/310618.)
В Visual Studio 2005 я запускаю make.bat, который установлен в качестве внешнего инструмента. Пакетный файл создает папку в папке пользовательских мини-приложений (в которой создаются мини-приложения при установке) и копирует все файлы мини-приложения в новую папку. Мой пакетный файл создает также файл ..gadget, готовый для распространения, и помещает его в папку «Документы». При использовании этого метода не требуется дважды щелкать файл .gadget для установки мини-приложения на том компьютере, где оно разрабатывалось. Мне нравится эта методика, поскольку она позволяет держать в папке проектов Visual Studio другие исходные файлы (например файлы Photoshop PSD), которые не предназначены для упаковки вместе с мини-приложением. При таком подходе следует убедиться в том, что имена файлов, которые требуется исключить, помещены в файл exclude.txt.

MSDN Magazine Ticker
Теперь, после того как рассмотрены все основные компоненты мини-приложения, я бы хотел представить пример мини-приложения, собирающего все части воедино. Мини-приложение MSDN Magazine Ticker доступно для загрузки, поэтому его можно установить или просто исследовать его содержимое.
Мне хотелось, чтобы в примере мини-приложения использовались все основные функции мини-приложения для боковой панели (всплывающее окно, закрепленные состояния в сравнении с плавающими, параметры, локализация и т.д.). Но при этом пример мини-приложения должен быть простым. И еще он должен быть полезным.
Я остановился на идее создания средства чтения канала RSS, отображающего заголовки новостей. Поскольку этот пример предназначен для статьи MSDN Magazine, казалось очевидным, что следует выбрать канал RSS для всех статей текущего выпуска журнала (имеется на веб-узле по адресу msdn.microsoft.com/msdnmag/rss/rss.aspx). Вообразите, насколько динамичным и информативным можно было бы сделать это мини-приложение, если бы требовалось использовать канал заголовков новостей или спортивных сообщений, или даже несколько каналов, объединенных в один источник данных.
В составе боковой панели Windows Vista уже поставляется мини-приложение бегущих заголовков канала. Уникальность моего примера заключается в способе представления информации. Заголовки отображаются по типу бегущей строки новостей, подобно тому, что вы видите на экранах телевизоров на каналах новостей.
Кроме этого, мой пример мини-приложения намного компактнее, чем приложение бегущей строки, поставляемое в составе Windows Vista — его высота всего 57 пикселов (по сравнению со 175 пикселами для мини-приложения по умолчанию). Это очень существенно для небольших экранов (или перегруженной боковой панели), где крайне ценно доступное пространство.
В мини-приложении выполняются все рекомендации, приведенные в данной статье: используется всплывающее окно для отображения подробных сведений при щелчке заголовка; в окне «Параметры» предоставляется выбор из трех различных интервалов времени перезагрузки канала; изменяется размер при переходе в плавающее состояние; имеется поддержка нескольких языков посредством использования папок локализации.
Я только набросал очертания мини-приложений для боковой панели, чтобы продемонстрировать, насколько просто начать над ними работу. В действительности можно сделать гораздо больше. Дополнительные сведения содержатся на боковой панели «Дополнительные материалы».

Донаван Уэст (Donavon West) является независимым консультантом, техническим директором LiveGadgets.net и MVP Майкрософт по разработке сервиса Windows Live. Родом из Чикаго, в настоящее время он живет в районе Балтимор-Вашингтон, округ Колумбия. Он является активным членом сообщества разработчиков мини-приложений как для боковой панели Windows Vista, так и для Интернета. С ним можно связаться на его веб-узле по адресу www.livegadgets.net.

Page view tracker