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

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

Шаг 6. Стиль вашей начальной страницы

Внешний вид и функциональность приложения можно легко изменить. Приложение Магазина Windows позволяет использовать каскадные таблицы стилей уровня 3 (CSS3) так же, как это делается для веб-сайта.

Файл default.html, созданный для нас в Visual Studio, содержит ссылку на таблицу стилей из библиотеки Windows для JavaScript:

 <!-- WinJS references -->
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />


Что позволяет сделать эта таблица стилей? Многое! Она предоставляет следующие преимущества.

  • Набор стилей, автоматически придающий нашему приложению внешний вид и функциональность Windows 8. Добавления этой таблицы стилей будет достаточно, чтобы элементы управления прекрасно выглядели и отлично работали с сенсорными экранами.
  • Автоматическая поддержка режимов высокой контрастности. Эти стили разработаны с учетом требований высокой контрастности и будут корректно отображаться в приложениях на устройствах, работающих в режиме высокой контрастности.
  • Автоматическая поддержка других языков. Таблицы стилей из библиотеки Windows для JavaScript автоматически выбирают подходящий шрифт для каждого языка, поддерживаемого Windows 8. Можно использовать в одном приложении несколько языков, и все они будут отображаться правильно.
  • Автоматическая поддержка другого направления чтения. Выполняется автоматическая настройка HTML и элементов управления из библиотеки Windows для JavaScript, макетов и стилей для языков с направлением чтения справа налево.

По умолчанию каждая HTML-страница в проекте содержит ссылку на таблицу темных стилей. В библиотеке Windows для JavaScript также содержится таблица светлых стилей. Обратитесь к ней и посмотрите, как будет выглядеть приложение.

Hh986964.wedge(ru-ru,WIN.10).gifПереключение к таблице светлых стилей

  1. В вашем файле default.html поменяйте ссылку на таблицу темных стилей
     <!-- WinJS references -->
     <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    на следующую:

     <!-- WinJS references -->
     <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  2. Запустите приложение. Теперь оно использует таблицу светлых стилей.

    Наше приложение HelloWorld с таблицей светлых стилей

Какую таблицу стилей вам использовать? Любую, какую пожелаете! Для приложений, которые главным образом выводят изображения или видео, рекомендуется таблица темных стилей, а для приложений с большим объемом текста рекомендуется использовать таблицу светлых стилей. (Если применяется пользовательская цветовая схема, подберите таблицу стилей, которая лучше всего сочетается с внешним видом вашего приложения.)

Создание собственных стилей

Чтобы изменить внешний вид приложения, не обязательно отказываться от стилей из библиотеки Windows для JavaScript и начинать с нуля. Можно постепенно вносить изменения, переопределяя отдельные стили.

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

Можно переопределить любой стиль в таблице стилей по умолчанию, создав собственную таблицу стилей и включив ее после таблицы из библиотеки Windows для JavaScript. Шаблон Blank App сделает это за вас. Он создает таблицу стилей с именем default.css, которую вы можете использовать для создания собственных стилей.

 <!-- WinJS references -->
 <link href="//Microsoft.WinJS.1.0/css/ui-light.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>


Создадим несколько собственных стилей.

  1. Сначала давайте добавим несколько div-элементов и классов в наш HTML-файл для облегчения создания стилей.
    1. В Visual Studio откройте файл default.html.
    2. Задайте для атрибута заголовка страницы class значение "headerClass". Создайте div-элемент и используйте его для хранения основного содержимого вашей страницы. Задайте для него параметр class со значением "mainContent".
      <body>
       <h1 class="headerClass">Hello, world!</h1>
       <div class="mainContent">
       <p>What's your name?</p>
       <input id="nameInput" type="text" />
       <button id="helloButton">Say "Hello"</button>
       <div id="greetingOutput"></div>
       </div>
      </body>
      
      
      
  2. Теперь определим наши стили. Откройте файл default.css.

    Рассмотрим файл, созданный для нас в Visual Studio.

    body {
    }
    
    @media screen and (-ms-view-state: fullscreen-landscape) {
    }
    
    @media screen and (-ms-view-state: filled) {
    }
    
    @media screen and (-ms-view-state: snapped) {
    }
    
    @media screen and (-ms-view-state: fullscreen-portrait) {
    }
    
    
    

    Созданный файл содержит несколько заглушек кода, чтобы определять стили для различных представлений. Сейчас мы будем игнорировать эти заглушки (но используем их в следующем руководстве).

  3. Согласно Макету страницы приложения, у заголовка имеется верхнее поле с размером 45 пикселей и левое поле с размером 120 пикселей. Область содержимого также имеет левое поле с размером 120 пикселей, верхнее поле с размером 31 пиксель и нижнее поле с размером 50 пикселей.

    Определите классы headerClass и mainContent и задайте для них поля соответственно этим правилам. Создайте стиль для элемента greetingOutput div, устанавливающий высоту в 20 пикселей и нижнее поле в 40 пикселей.

    body {
    }
    
    .headerClass {
     margin-top: 45px;
     margin-left: 120px; 
    }
    
    .mainContent {
     margin-top: 31px;
     margin-left: 120px;
     margin-bottom: 50px; 
    }
    
    #greetingOutput {
     height: 20px; 
     margin-bottom: 40px;
    }
    
    @media screen and (-ms-view-state: fullscreen-landscape) {
    }
    
    @media screen and (-ms-view-state: filled) {
    }
    
    @media screen and (-ms-view-state: snapped) {
    }
    
    @media screen and (-ms-view-state: fullscreen-portrait) {
    }
    
    
    
  4. Запустите приложение. Обратите внимание на изменения интервалов.

    Приложение Hello, world с полями

Приложения Магазина Windows поддерживают CSS3, поэтому вы можете сделать многое для настройки приложения.

Шаг 7. Добавление элемента управления библиотеки Windows для JavaScript

Помимо стандартных элементов управления HTML, в приложениях Магазина Windows на JavaScript можно использовать новые элементы управления из библиотеки Windows для JavaScript, например WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListView и WinJS.UI.Rating.

В отличие от элементов управления HTML, у элементов управления библиотеки Windows для JavaScript нет выделенных элементов разметки: например, нельзя создать элемент управления Rating, добавив элемент <rating />. Чтобы добавить элемент управления библиотеки Windows для JavaScript, требуется создать элемент div и с помощью атрибута data-win-control указать тип нужного элемента управления. Чтобы добавить элемент управления Rating, вам нужно задать атрибуту значение "WinJS.UI.Rating".

Добавим в приложение элемент управления Rating.

  1. В файле default.html добавьте элементы управления label и Rating после элемента greetingOutput div.

    <body>
     <h1 class="headerClass">Hello, world!</h1>
     <div class="mainContent">
     <p>What's your name?</p>
     <input id="nameInput" type="text" />
     <button id="helloButton">Say "Hello"</button>
     <div id="greetingOutput"></div>
     <label for="ratingControlDiv">
     Rate this greeting: 
     </label>
     <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
     </div>
     </div>
    </body>
    
    
    

    Для загрузки элемента управления Rating страница должна вызвать WinJS.UI.processAll. Так как наше приложение использует один из шаблонов Visual Studio, default.js уже содержит вызов WinJS.UI.processAll, как описано ранее на Шаге 5, поэтому вам не нужно добавлять какой-либо код.

  2. Запустите приложение. Обратите внимание на новый элемент управления Rating.

    Приложение Hello, world с элементом управления библиотеки Windows для JavaScript

На данном этапе при щелчке элемента управления Rating только изменяется оценка, и больше никаких действий не выполняется. Давайте воспользуемся обработчиком событий, чтобы выполнялось какое-нибудь действие при изменении оценки пользователем.

Шаг 8. Регистрация обработчика событий для элемента управления библиотеки Windows для JavaScript

Регистрация обработчика событий для элемента управления библиотеки Windows для JavaScript немного отличается от регистрации обработчика событий для стандартного элемента управления HTML. Ранее мы говорили, что обработчик событий onactivated вызывает метод WinJS.UI.processAll, чтобы инициализировать библиотеку Windows для JavaScript в вашей разметке. Функция WinJS.UI.processAll включена в вызов метода setPromise.

 args.setPromise(WinJS.UI.processAll()); 


Если бы элемент Rating был стандартным элементом управления HTML, вы могли бы добавить обработчик событий после этого вызова WinJS.UI.processAll. Но в случае такого элемента управления библиотеки Windows для JavaScript, как Rating, задача немного усложняется. Так как WinJS.UI.processAll создает для нас элемент управления Rating, мы не можем добавить обработчик событий к Rating до тех пор, пока WinJS.UI.processAll не закончит его обработку.

Если бы метод WinJS.UI.processAll был обычным методом, мы могли бы зарегистрировать обработчик событий Rating сразу же после его вызова. Но метод WinJS.UI.processAll является асинхронным, поэтому любой следующий за ним код может выполняться до завершения метода WinJS.UI.processAll. И что делать в таком случае? Мы используем объект Promise, чтобы получить уведомление о завершении работы WinJS.UI.processAll.

Как и все асинхронные методы библиотеки Windows для JavaScript, WinJS.UI.processAll возвращает объект Promise. Promise "обещает", что какое-то действие будет выполнено в будущем, и когда это действие выполняется, Promise завершает работу.

Объекты Promise имеют метод then, который принимает "завершенную" функцию в качестве параметра. Promise вызывает эту функцию по ее завершении.

Добавив код к "завершенной" функции и передав ее содержащемуся в объекте Promise методу then, вы можете быть уверены, что ваш код будет выполнен после завершения WinJS.UI.processAll.

  1. Выведем значение оценки при ее выборе пользователем. В файле default.html создайте элемент div для отображения значения оценки и присвойте ему идентификатор "ratingOutput".
    <body>
     <h1 class="headerClass">Hello, world!</h1>
     <div class="mainContent">
     <p>What's your name?</p>
     <input id="nameInput" type="text" />
     <button id="helloButton">Say "Hello"</button>
     <div id="greetingOutput"></div>
     <label for="ratingControlDiv">
     Rate this greeting: 
     </label>
     <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
     </div> 
     <div id="ratingOutput"></div>
     </div>
    </body>
    
    
    
  2. В файле default.js создайте обработчик события для события change элемента управления Rating под именем ratingChanged. Параметр eventInfo содержит свойство detail.tentativeRating, которое предоставляет новую оценку пользователя. Извлеките это значение и отобразите его в выходном элементе div.

     function ratingChanged(eventInfo) {
    
     var ratingOutput = document.getElementById("ratingOutput");
     ratingOutput.innerText = eventInfo.detail.tentativeRating; 
     }
    
    
    
  3. Обновите код в обработчике событий onactivated, который вызывает WinJS.UI.processAll, добавив вызов метода then и передав ему завершенную функцию. Из завершенной функции извлеките элемент ratingControlDiv, который содержит элемент управления Rating. Затем используйте свойство winControl, чтобы извлечь фактический элемент управления Rating. (В данном примере определяется встроенная функция completed.)

     args.setPromise(WinJS.UI.processAll().then(function completed() {
    
     // Retrieve the div that hosts the Rating control.
     var ratingControlDiv = document.getElementById("ratingControlDiv");
    
     // Retrieve the actual Rating control.
     var ratingControl = ratingControlDiv.winControl;
    
     // Register the event handler. 
     ratingControl.addEventListener("change", ratingChanged, false);
    
     }));
    
    
  4. Можно регистрировать обработчики событий для элементов управления HTML как после вызова WinJS.UI.processAll, так и внутри функции completed. Для простоты продолжим работу и переместим все наши регистрации обработчиков событий внутрь обработчика событий then.

    Вот наш обновленный обработчик событий onactivated:

     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().then(function completed() {
    
     // Retrieve the div that hosts the Rating control.
     var ratingControlDiv = document.getElementById("ratingControlDiv");
    
     // Retrieve the actual Rating control.
     var ratingControl = ratingControlDiv.winControl;
    
     // Register the event handler. 
     ratingControl.addEventListener("change", ratingChanged, false);
    
     // Retrieve the button and register our event handler. 
     var helloButton = document.getElementById("helloButton");
     helloButton.addEventListener("click", buttonClickHandler, false);
    
     }));
    
     }
     };
    
    
  5. Запустите приложение. Когда вы выбираете значение оценки, приложение выводит числовое значение под элементом управления Rating.

Примечание  В этом и последнем разделе затронуты только самые основные моменты, которые необходимо знать, чтобы начать использовать элементы управления библиотеки Windows для JavaScript. 

Заключение

Поздравляем, вы справились с этим руководством! Вы научились добавлять содержимое в приложение Магазина Windows. Вы также научились добавлять возможности взаимодействия и изменять стиль приложения.



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