Главная » Статьи » Visual Studio 2012 » Создание с помощью JavaScript |
Этот учебник покажет вам, как создать простое приложение Магазина Windows — Hello, world — на языке JavaScript. Это первое из четырех руководств, которые научат вас всему необходимому для построения приложений Магазина Windows. Шаг 1. Создание нового проекта в Visual Studio.Создадим новое приложение с именем
Хотя шаблон Blank App предоставляет минимальные возможности, он содержит несколько файлов.
Для просмотра и изменения файлов дважды щелкните файл в обозревателе решений. Эти файлы являются необходимыми для всех приложений Магазина Windows на языке JavaScript. Они должны содержаться в любом проекте, который вы создаете в Visual Studio. Шаг 2. Запуск приложенияНа этот момент мы создали очень простое приложение. Если вы хотите
увидеть, как оно выглядит, нажмите клавишу F5, чтобы построить,
развернуть и запустить его. Сначала появится экран-заставка по
умолчанию. Экран-заставка определяется изображением (splashscreen.png) и
цветом фона (указанным в манифесте нашего приложения). Мы не будем
рассматривать это здесь, но настройка экрана-заставки выполняется
просто. Экран-заставка исчезает, и появляется наше приложение. Оно содержит черный экран с текстом "Content goes here" (Место для содержимого). Кнопка или команда для закрытия приложения отсутствует. Чтобы закрыть приложение, проведите пальцем от верхнего до нижнего края экрана или нажмите клавиши ALT+F4. Перейдите на начальный экран. Обратите внимание, что при развертывании приложения его плитка добавляется в группу последних элементов на начальном экране. Чтобы снова запустить приложение, коснитесь плитки приложения на начальном экране или щелкните ее либо нажмите клавишу F5 в Visual Studio, чтобы запустить приложение в отладчике. Пока это приложение —только— поздравляет с успешным построением вашего первого приложения Магазина Windows. Чтобы остановить отладку приложения и вернуться в Microsoft Visual Studio, нажмите клавиши ALT+TAB. Чтобы закрыть приложение, в Visual Studio щелкните Debug (Отладка) > Stop debugging (Остановить отладку). Невозможно выполнять редактирование в Visual Studio, находясь в режиме отладки. Шаг 3. Изменение начальной страницыОдним из файлов, которые Visual Studio создает для нас, является файл default.html, представляющий начальную страницу приложения. При запуске приложение отображает содержимое этой начальной страницы. Начальная страница также содержит ссылки на файлы кода приложения и таблицы стилей. Начальная страница приложения, созданная Visual Studio: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HelloWorld</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- HelloWorld references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> </body> </html> Добавим новое содержимое в файл default.html. Так же, как и при добавлении в любой другой HTML-файл, вы добавляете ваше содержимое в элемент body. Для создания приложения вы можете использовать элементы HTML5 (с некоторыми исключениями). Это означает, что можно использовать такие элементы HTML5, как h1, p, button, div и img. Изменение начальной страницы
Шаг 4. Создание обработчика событияПри создании нашего первого проекта в Visual Studio был создан файл /js/default.js. В этот же файл мы запишем код, обеспечивающий взаимодействие с приложением для файла default.html. Откройте файл default.js. Прежде чем приступить к добавлению собственного кода, рассмотрим первую и последнюю строки в файле: (function () { "use strict"; // Omitted code })(); Вас может удивить их назначение. Эти строки кода являются оболочкой остального кода в файле default.js, которая превращает его в самостоятельно выполняющуюся анонимную функцию. Теперь, когда вы знаете, что он делает, вы, возможно, спросите, зачем мы заключили наш код в самостоятельно выполняющуюся анонимную функцию. Заключение кода в анонимную функцию помогает избежать конфликтов совпадения имен или ситуаций непреднамеренного изменения значений. Это также исключает лишние идентификаторы из глобального пространства имен, что повышает быстродействие. Это кажется несколько странным, но такая практика полезна при программировании. Следующая строка кода включает строгий режим для кода JavaScript. Строгий режим обеспечивает дополнительную проверку ошибок кода. Например, строгий режим запрещает использовать неявно объявленные переменные или назначать значение свойству, доступному только для чтения. Рассмотрим оставшийся код в файле default.js. Он обрабатывает события activated и checkpoint в приложении. Подробнее эти события мы рассмотрим позже. Пока нам достаточно знать, что событие activated возникает при запуске приложения. Определим обработчик события для объекта button. Наш новый обработчик события получает имя пользователя из элемента управления Использование событий, которые работают для ввода с помощью касания, мыши или пераПри работе с Windows 8 нет необходимости беспокоиться о различиях между касаниями, действиями мыши или другими способами ввода с помощью указателя. Вы можете использовать такие известные вам события, как click, и они будут работать для всех способов ввода. Совет Ваше приложение может также использовать новые события MSPointer* и MSGesture*, которые используются для ввода с помощью касания, мыши или пера и могут предоставлять дополнительную информацию об устройстве, которое вызвало событие. Продолжим работу и создадим обработчик события. Создание обработчика события
Мы добавили наш обработчик события в default.js. Теперь требуется зарегистрировать его. Шаг 5. Регистрация обработчика события при запуске приложенияТеперь необходимо только зарегистрировать обработчик событий для кнопки. Рекомендуемым способом регистрации обработчика события является вызов addEventListener из нашего кода. Хорошим моментом для регистрации обработчика события является активация нашего приложения. К счастью, Visual Studio создает для нас в файле default.js некоторый код, который обрабатывает активацию приложения: обработчик события app.onactivated. Рассмотрим этот код. WinJS.Binding.optimizeBindingReferences = true; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } args.setPromise(WinJS.UI.processAll()); } }; Код внутри обработчика события onactivated
проверяет, какой тип активации имеет место. Имеется много типов
активации. Например, приложение активируется, когда пользователь
запускает его или когда пользователь хочет открыть файл, связанный с
приложением. Нас интересует активация launch. Приложение запускается, когда оно не выполняется, после чего его активирует пользователь. app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { Если имеет место активация запуском, код проверяет, как приложение завершилось при последнем выполнении. if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } Затем код вызывает WinJS.UI.processAll. args.setPromise(WinJS.UI.processAll()); } }; Код вызывает WinJS.UI.processAll вне зависимости от того, завершалось ли приложение до этого или оно запускается впервые. WinJS.UI.processAll вкладывается в вызов метода setPromise, обеспечивающего работу экрана-заставки до готовности страницы приложения. Совет Функция WinJS.UI.processAll проверяет ваш файл default.html на наличие элементов управления из библиотеки Windows для JavaScript и инициализирует эти элементы. Пока вы не добавили ни один из таких элементов управления, однако рекомендуется оставить этот код на тот случай, если вам потребуется их добавить позднее. Удобное место для регистрации элементов управления, не входящих в библиотеку Windows для JavaScript, находится сразу после вызова WinJS.UI.processAll. Регистрация вашего обработчика события
Ниже показан полный код для обновленного файла default.js. // For an introduction to the Blank template, see the following documentation: // http://go.microsoft.com/fwlink/p/?linkid=232509 (function () { "use strict"; WinJS.Binding.optimizeBindingReferences = true; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } args.setPromise(WinJS.UI.processAll()); // Retrieve the button and register our event handler. var helloButton = document.getElementById("helloButton"); helloButton.addEventListener("click", buttonClickHandler, false); } }; app.oncheckpoint = function (args) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. You might use the // WinJS.Application.sessionState object, which is automatically // saved and restored across suspension. If you need to complete an // asynchronous operation before your application is suspended, call // args.setPromise(). }; function buttonClickHandler(eventInfo) { var userName = document.getElementById("nameInput").value; var greetingString = "Hello, " + userName + "!"; document.getElementById("greetingOutput").innerText = greetingString; } app.start(); })(); Запустите приложение. Когда вы вводите ваше имя в текстовое поле и щелкаете кнопку, приложение отображает личное приветствие.
Источник: http://msdn.microsoft.com/ru-ru/library/windows/apps/hh986964.aspx | |
Просмотров: 4794
| Теги: |
Всего комментариев: 0 | |