Создайте свой собственный виджет: 6 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:54

Это руководство научит вас, как создать простой Yahoo! Виджет. К концу этого руководства вы немного изучите JavaScript и XML.

Шаг 1. Начало работы

Некоторые инструменты, которые вам понадобятся для создания виджета: - Компьютер с Mac OS X или Windows Xp / Vista - Программа для редактирования текста. (Блокнот идеально подходит.) - Программа для редактирования изображений. (Microsoft Paint подойдет.) - Терпение и время. - Виджеты Yahoo - Виджет конвертера виджетов После того, как у вас будут эти программы и виджеты, вы готовы перейти ко второму шагу.

Шаг 2: Создание структуры папки

Теперь вам нужно создать структуру папок для размещения всех файлов, составляющих виджет. Структура выглядит так: -Имя виджета | Содержание | Widget.kon Ресурсы Main.js | Все изображения, которые будет использовать виджет Вы можете загрузить этот виджет для автоматического создания структуры папок Структура - Рейнир Капер Задайте настройки виджета, щелкнув правой кнопкой мыши любую его часть и выбрав настройки. Измените настройки структуры на следующее: root: перейдите в папку с виджетами. (Находится в «Мои документы» в Windows). Теперь вы можете щелкнуть виджет, и появится диалоговое окно с запросом имени виджета.

Шаг 3: Создание всех необходимых файлов

Мы начнем с создания файла widget.xml, который сообщает механизму виджетов информацию о вашем виджете. Загрузите созданный для вас шаблон. Ссылка для скачивания ниже. Поместите файл в папку «Содержание», расположенную в папке с тем именем, которое вы выбрали ранее. Откройте файл в любом текстовом редакторе и замените YourNameHere своим именем. Сохраните и закройте. Затем мы создадим файл.kon, который является основным файлом, который сообщает виджету, что делать. Файл.kon - это просто файл XML с переименованным расширением. Загрузите этот базовый файл widget.kon и также поместите его в папку «Содержание». Снова откройте файл в текстовом редакторе. Первая строка означает, что это файл XML, созданный в кодировке UTF-8. Следующий тег, который нужно добавить, - это тег виджета; Затем вы объявляете свои настройки, такие как отладка;. Теперь вы готовы добавить элементы окна;. У виджетов есть несколько объектов, которые выполняют определенные действия и обладают определенными свойствами. Например, текстовый объект создает текст. Вот список некоторых свойств текстового объекта: -name (не требует пояснений) -window (устаревший) -data (текст для отображения) -color (не требует пояснений) -size -font -hOffset (также известный как x) -vOffset (aka y) -width -height Итак, приступим к кодированию. Добавьте следующий код в файл kon в тегах: myTextHello World! BlueArial18left252 На английском языке это устанавливает текстовый объект с именем myText, который отображает "Hello World!" шрифтом Arial, синим цветом и размером 12. Сохраните файл KON и перейдите к шагу 4.

Шаг 4: радуйтесь

Дважды щелкните файл kon, и ваш виджет загрузится. Поздравляю! Вы создали свой первый виджет. Но мы еще не закончили кодирование. Вы, наверное, думаете: «Вот и все?», Не так ли? Перейдите к шагу 5, чтобы добавить функцию к вашему виджету.

Шаг 5: Добавление функции

Теперь мы заставим виджет отображать текущее время. Для этого потребуется таймер, который обновляется каждую минуту, и еще один файл. Следующим файлом будет файл JavaScript, который будет находиться в папке «Contents». Откройте текстовый редактор и создайте файл с именем main.js. Чтобы добавить время, мы будем использовать «объект Date». Чтобы настроить объект даты, вы создаете функцию. Добавьте эту функцию в файл js: function updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "Время:" + theHour + ":" + theMinutes; print ('update');} Ваш виджет пока не покажет время, потому что он не знает, что делать с файлом js. Чтобы позаботиться об этом, мы добавляем этот обработчик событий в файл Kon в тегах, но не в тегах: include ('main.js'); Чтобы обновить время, нам нужно создать таймер, который файл Kon в тегах, но не в тегах: сохраните файлы и загрузите виджет. Он должен показывать время. Если это не сработает, скачайте kon и js снизу и замените их старыми.

Шаг 6. Подводя итоги

Используйте виджет-конвертер виджетов, чтобы преобразовать виджет в файл.widget. ПРИМЕЧАНИЕ. Перетащите в конвертер папку с названием вашего виджета, а не файл kon. Если вы хотите пойти еще дальше со своим виджетом, возьмите здесь некоторые ресурсы. Вот список вещей, которые вы можете попытаться выполнить с помощью своего виджета: -Добавьте настройки для управления шрифтом с помощью тега и вложенного тега шрифта- Добавьте несколько обработчиков событий, таких как onClick, с помощью тегов или. -Отображение изображения из локального файла с помощью объекта изображения. Надеюсь, вы нашли этот урок полезным, и вам понравятся бесконечные возможности виджетов, Hunter