31 день Windows 8 для HTML5 | День № 4: Новые средства управления

Эта статья является четвертым днем ​​в серии под названием « 31 день Windows 8» . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти все ресурсы, инструменты и исходный код на нашем веб-сайте .

Когда Джефф и я составили список тем для этой серии, сегодня были выбраны «контроли». Теперь для тех, кто любит XAML, это то, что имеет полный смысл, но если вы такой веб-парень, как я, слово «контроль» на самом деле не является родным словом в нашем племени. Мы говорим с точки зрения элементов в DOM и теперь с html5, семантическими элементами.

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

Теперь я предполагаю, что вы, по крайней мере, знаете, что теперь с Windows 8 вы можете написать «родное» приложение для Магазина Windows. Я помещаю native в кавычки только потому, что он не работает против голого металла, как мог бы C ++. Наши приложения HTML5 фактически работают на тех же JavaScript и движках рендеринга, что и IE10.

HTML5 FTW

Сегодня HTML5 — это большая проблема в веб-пространстве. HTML5 сам по себе не единственная вещь, это действительно справочная информация, которая составляет более 100 спецификаций. Среди всего этого есть такие вещи, как:

• Новые элементы, такие как новые семантические теги; раздел, статья, верхний и нижний колонтитулы
• Новые атрибуты, такие как data-
• Потрясающие новые функции в CSS3, такие как медиа-запросы.
• Строгий режим в ES5

Сейчас я просто называю несколько потрясающих функций в действительно огромном наборе инструментов. В Windows 8, а также в механизмах JavaScript и рендеринга для IE 10 добавлена ​​огромная поддержка функций, составляющих то, что мы называем HTML5. Отличное доказательство этому было видно во вчерашней статье с медиа-запросами. Это основа того, как мы работаем с нашими параметрами экрана в Windows 8.

Как веб-разработчики, это, честно говоря, очень интересно. Это означает, что навыки, которые вы \ я \ приобрели за эти годы, теперь применимы на совершенно новой платформе. Есть даже возможности для совместного использования вашего кода между различными реализациями.

Короткий рассказ. HTML5 рушится, теперь он «родной» для Windows 8, и мы, веб-разработчики, можем продолжать править миром. Обязательно расскажите своим друзьям.

— боковая панель —

Важно помнить, что поведение некоторых HTML и DOM API отличается от поведения в браузере. Вы можете найти подробный список этих различий здесь . HTML — развивающаяся спецификация, и разные части утверждаются в разные моменты времени. Это означает, что наши браузеры также движутся. Чтобы эффективно писать кросс-браузерный \ платформенный код, нам нужно понять это понятие обнаружения функций. Если вы не знакомы с функцией обнаружения, я настоятельно рекомендую прочитать следующие две статьи:

• Браузер не остался позади: стратегия принятия HTML5
• Та же самая разметка: написание кросс-браузерного кода

Представляем WinRT и WinJS

Теперь мы все знаем, что Windows явно больше, чем просто браузер. С выпуском Windows 8 также был выпущен новый фреймворк под названием WinRT . Короче говоря, WinRT — это ряд API, которые предоставляют доступ ко всем основным функциям платформы. Эти API являются такими вещами, как устройства датчиков и сборщиков . Эти API доступны для C ++, .NET и JavaScript. Существует один набор API-интерфейсов для всех, и через что-то, называемое проекцией, они представляются таким образом, который кажется родным для используемого языка.

Затем, что-то под названием WinJS. Давайте начнем с кражи определения прямо из Microsoft:

Библиотека Windows для JavaScript — это библиотека файлов CSS и JavaScript. Он содержит объекты JavaScript, организованные в пространства имен, призванные упростить разработку приложения для Магазина Windows с использованием JavaScript. Библиотека Windows для JavaScript включает в себя объекты, которые помогают вам обрабатывать активацию, получать доступ к хранилищу и определять свои собственные классы и пространства имен. Он также включает в себя набор элементов управления. http://msdn.microsoft.com/en-us/library/windows/apps/hh465493.aspx

Когда я начал работать с Windows 8, я подумал, зачем мне это нужно. В конце концов, мы годами создавали довольно удивительные сайты без какой-либо новой библиотеки. На самом деле, на первый взгляд, вы можете думать об этом как о некоторой замене jQuery, но на самом деле это совсем не так. На самом деле, вы можете свободно использовать jQuery, jQuery UI или мой любимый Knockout.JS (это для вас Райан Н. ).

Что такое WinJS, важно. На самом деле очень важно. Мы, веб-разработчики, познакомились с новым миром мобильной разработки. Я говорю не о попытке создать адаптивную страницу, которая адаптируется к экрану меньшего размера, а о реальном собственном приложении, работающем на мобильном устройстве. ** Предупреждение ** это другое, но страшно знакомое. В наших приложениях есть вещи, которые мы должны учитывать, например, общий жизненный цикл приложения. Конечно, мы сделали это с веб-приложением, но здесь мы должны помнить о том, как наши приложения запускаются, когда их убивают и как вы видели вчера такие вещи, как пространства имен. WinJS здесь для нас.

WinJS также предоставляет набор «элементов управления» пользовательского интерфейса и таблицы стилей, которые дают нам согласованную тему Metro для Магазина Windows. Так что вы можете подумать, вводит ли Microsoft некоторые новые элементы в DOM и играет в игры с движком рендеринга. NO. Я начал эту статью с обсуждения важности HTML5 в нашем веб-мире и в мире Windows. Они реализуют эти элементы управления, используя преимущества функции HTML5, обычно называемой data- . Подробнее об этом позже.

Настройка и стиль

Каждый проект HTML5 \ JavaScript Visual Studio запускается уже с настройкой на использование WinJS. Это включает в себя «ссылку» на версию WinJS, в нашем случае 1.0. Создайте пустое приложение и посмотрите в своем обозревателе решений.

После создания пустого приложения откройте файл Default.html. Вы увидите прямо вверху, мы (действительно) ссылаемся на библиотеки WinJS.

<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>

При нажатии Run вы должны увидеть темно-пустое приложение. Если темнота не твоя сделка, то переключись на свет.

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

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

раскладка

Прежде чем перейти к нескольким элементам управления, давайте поговорим о макете. У нас есть несколько различных макетов CSS, таких как multi-column , flexbox и grid . Мы могли бы даже использовать некоторые платформы с открытым исходным кодом, такие как Twitter Bootstrap (хотя я еще не пробовал это в Windows 8). Недавно в HTML5 была добавлена ​​новая спецификация под названием CSS Grid . Вы можете думать о CSS Grid как об окончательном макете таблицы, которого мы ждали годами. Фактически, если вы выполнили какой-либо XAML и работали с Grid Control, это будет выглядеть аналогично.

Понятие простое: вы определяете ряд столбцов и строк, относительных и \ или фиксированных. Затем вы ссылаетесь на эти строки соответственно. Давайте создадим * очень * простую сетку, которую вы уже видели в моих примерах проектов. В этом случае мы собираемся создать простой один столбец, 3 строки макета. Я хочу, чтобы все строки \ столбцы были на одинаковом расстоянии. Мы определяем их, используя grid-столбцы и предоставляя наши фиксированные или относительные размеры.

body {
    width: 100%;
    height: 100%;

    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
}

Это создаст следующую сетку.

Определив сетку, мы можем легко использовать CSS, чтобы выбрать наши элементы и расположить их соответственно. Строки и столбцы основаны на 1, поэтому, если мы хотим поместить наш элемент содержимого идентификатора в середину, мы бы выбрали столбец 1 и строку 2, как показано ниже.

#content {
    -ms-grid-column: 1;
    -ms-grid-row: 2;

    text-align: center;
}

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

<div id="content">
        <h1>Day #6 - Search Contract</h1>
        <br /><br />
        <div id="ratings" data-win-control="WinJS.UI.Rating"></div>
    </div>

<div id="ratings" 
    data-win-control="WinJS.UI.Rating"
    data-win-options="{maxRating: 7}">
</div>

args.setPromise(WinJS.UI.processAll()
    .done(function () {
        var ratingControl = document.querySelector("#ratings").winControl;
        ratingControl.addEventListener("change", changeRating);
    })
);

function changeRating(ev) {
        var ratingControl = ev.target.winControl;
        if (ratingControl) {

            if (ratingControl.userRating != 0) {

                var userRated = ratingControl.userRating

            } else {

            }
        }
    }

<button 
    id="openAgenda" 
    data-win-control="WinJS.UI.AppBarCommand"     
    data-win-options="{
        label: 'Open', 
        icon: 'openfile', 
        tooltip: 'Open Existing Agenda.',
        section:'selection'}">
</button>