Главная » Статьи » Visual Studio 2012 » Создание с помощью JavaScript

Часть 1(1). Создание приложения Hello, World!

Этот учебник покажет вам, как создать простое приложение Магазина Windows — Hello, world — на языке JavaScript. Это первое из четырех руководств, которые научат вас всему необходимому для построения приложений Магазина Windows.

Шаг 1. Создание нового проекта в Visual Studio.

Создадим новое приложение с именем HelloWorld. Инструкции

  1. Запустите Visual Studio Express 2012 для Windows 8.

    Откроется начальный экран Visual Studio Express 2012 для Windows 8.

    (В дальнейшем мы будем ссылаться на версию Visual Studio Express 2012 для Windows 8 просто как на "Visual Studio".)

  2. В меню File (Файл) выберите команду New Project (Новый проект).

    Откроется диалоговое окно New Project (Новый проект). Левая панель диалогового окна позволяет выбрать тип отображаемого шаблона.

  3. На левой панели разверните узел Installed (Установлено), разверните узел Templates (Шаблоны), затем JavaScript и выберите шаблон Windows Store (Магазин Windows). На центральной панели диалогового окна отображается список шаблонов проектов для JavaScript.

    Окно New Project (Новый проект)

    В этом руководстве мы используем шаблон Blank App. Этот шаблон не содержит данных и элементов управления пользовательского интерфейса, но предоставляет минимальные функциональные возможности для компиляции и запуска приложений Магазина Windows. Мы будем добавлять элементы управления и данные в процессе работы с этими руководствами.

  4. В центральной панели выберите шаблон Blank App.
  5. В текстовое поле Name (Имя) введите "HelloWorld".
  6. Снимите флажок Create directory for solution (Создать каталог для решения).
  7. Чтобы создать проект, нажмите кнопку ОК.

    Visual Studio создает проект и отображает его в обозревателе решений.

    Обозреватель решений для проекта HelloWorld

Хотя шаблон Blank App предоставляет минимальные возможности, он содержит несколько файлов.

  • Файл манифеста (package.appxmanifest), в котором описывается ваше приложение (имя, описание, заголовок, начальная страница, экран-заставка и т. п.) и перечисляются файлы, содержащиеся в приложении.
  • Набор больших и маленьких изображений эмблем (logo.png и smalllogo.png) для отображения на начальном экране.
  • Изображение (storelogo.png) для представления вашего приложения в Магазине Windows.
  • Экран-заставка (splashscreen.png), который будет отображаться при запуске вашего приложения.
  • Файлы CSS и кода для библиотеки Windows для JavaScript (в папке References).
  • Начальная страница (default.html) и соответствующий файл JavaScript (default.js), который выполняется при запуске приложения.

Для просмотра и изменения файлов дважды щелкните файл в обозревателе решений.

Эти файлы являются необходимыми для всех приложений Магазина Windows на языке JavaScript. Они должны содержаться в любом проекте, который вы создаете в Visual Studio.

Шаг 2. Запуск приложения

На этот момент мы создали очень простое приложение. Если вы хотите увидеть, как оно выглядит, нажмите клавишу F5, чтобы построить, развернуть и запустить его. Сначала появится экран-заставка по умолчанию. Экран-заставка определяется изображением (splashscreen.png) и цветом фона (указанным в манифесте нашего приложения). Мы не будем рассматривать это здесь, но настройка экрана-заставки выполняется просто.

Экран-заставка исчезает, и появляется наше приложение. Оно содержит черный экран с текстом "Content goes here" (Место для содержимого).

Наше приложение HelloWorld

Кнопка или команда для закрытия приложения отсутствует. Чтобы закрыть приложение, проведите пальцем от верхнего до нижнего края экрана или нажмите клавиши 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.

Hh986964.wedge(ru-ru,WIN.10).gifИзменение начальной страницы

  1. Замените существующее содержимое в элементе body на заголовок первого уровня "Hello, world!", какой-нибудь текст, запрашивающий имя пользователя, элемент input, который принимает имя пользователя, элемент button и элемент div . Назначьте идентификаторы для объектов input, button и div .

    <body>
     <h1>Hello, world!</h1>
     <p>What's your name?</p>
     <input id="nameInput" type="text" />
     <button id="helloButton">Say "Hello"</button>
     <div id="greetingOutput"></div>
    </body>
    
    
  2. Запустите приложение.

    Наше приложение HelloWorld с новым содержимым

    Вы можете вводить текст в элементе input, но если в данный момент щелкнуть button, ничего не случится. Некоторые объекты, такие как button, могут отправлять сообщения, когда возникают определенные события. Такие сообщения о событиях дают вам возможность выполнять некоторые действия в ответ на событие. Поместите код, выполняемый в ответ на событие, в метод обработчика события.

    В следующих шагах мы создадим для button обработчик события, который отображает измененное приветствие. Мы добавим код обработчика события в файл default.js.

Шаг 4. Создание обработчика события

При создании нашего первого проекта в Visual Studio был создан файл /js/default.js. В этот же файл мы запишем код, обеспечивающий взаимодействие с приложением для файла default.html.

Откройте файл default.js.

Прежде чем приступить к добавлению собственного кода, рассмотрим первую и последнюю строки в файле:

(function () {
 "use strict";

 // Omitted code 

 })(); 

Вас может удивить их назначение. Эти строки кода являются оболочкой остального кода в файле default.js, которая превращает его в самостоятельно выполняющуюся анонимную функцию.

Теперь, когда вы знаете, что он делает, вы, возможно, спросите, зачем мы заключили наш код в самостоятельно выполняющуюся анонимную функцию. Заключение кода в анонимную функцию помогает избежать конфликтов совпадения имен или ситуаций непреднамеренного изменения значений. Это также исключает лишние идентификаторы из глобального пространства имен, что повышает быстродействие. Это кажется несколько странным, но такая практика полезна при программировании.

Следующая строка кода включает строгий режим для кода JavaScript. Строгий режим обеспечивает дополнительную проверку ошибок кода. Например, строгий режим запрещает использовать неявно объявленные переменные или назначать значение свойству, доступному только для чтения.

Рассмотрим оставшийся код в файле default.js. Он обрабатывает события activated и checkpoint в приложении. Подробнее эти события мы рассмотрим позже. Пока нам достаточно знать, что событие activated возникает при запуске приложения.

Определим обработчик события для объекта button. Наш новый обработчик события получает имя пользователя из элемента управления nameInput input и использует его для вывода приветствия в элементе greetingOutput div , который был создан вами в последнем разделе.

Использование событий, которые работают для ввода с помощью касания, мыши или пера

При работе с Windows 8 нет необходимости беспокоиться о различиях между касаниями, действиями мыши или другими способами ввода с помощью указателя. Вы можете использовать такие известные вам события, как click, и они будут работать для всех способов ввода.

Совет   Ваше приложение может также использовать новые события MSPointer* и MSGesture*, которые используются для ввода с помощью касания, мыши или пера и могут предоставлять дополнительную информацию об устройстве, которое вызвало событие.

Продолжим работу и создадим обработчик события.

Hh986964.wedge(ru-ru,WIN.10).gifСоздание обработчика события

  1. В файле default.js после обработчика события app.oncheckpoint и перед вызовом app.start создайте функцию обработчика события click с именем buttonClickHandler, которая принимает единственный параметр eventInfo.
     function buttonClickHandler(eventInfo) {
     
     }
    
    
  2. Внутри нашего обработчика события получите имя пользователя из элемента управления nameInput input и используйте его, чтобы создать приветствие. Используйте greetingOutput div , чтобы отобразить результат.
     function buttonClickHandler(eventInfo) {
     var userName = document.getElementById("nameInput").value;
     var greetingString = "Hello, " + userName + "!";
     document.getElementById("greetingOutput").innerText = greetingString; 
     }
    
    

Мы добавили наш обработчик события в 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.

Hh986964.wedge(ru-ru,WIN.10).gifРегистрация вашего обработчика события

  • В обработчике события onactivated в файле default.js извлеките helloButton и используйте addEventListener, чтобы зарегистрировать обработчик события click. Добавьте этот код после вызова WinJS.UI.processAll.

     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);
    
     }
     };
    
    

Ниже показан полный код для обновленного файла 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();
})();

Запустите приложение. Когда вы вводите ваше имя в текстовое поле и щелкаете кнопку, приложение отображает личное приветствие.

Личное приветствие из нашего приложения HelloWorld




Источник: http://msdn.microsoft.com/ru-ru/library/windows/apps/hh986964.aspx
Категория: Создание с помощью JavaScript | Добавил: expert1 (19.04.2013)
Просмотров: 4794 | Теги: Web, metro-приложения, Windows | Рейтинг: 0.0/0
Всего комментариев: 0