Создание мобильных Web-приложений с применением HTML 5: Часть 5. Разработка новых визуальных элементов пользовательского интерфейса в HTML 5

Добавление в мобильные приложения Canvas, CSS3 и других семантических элементов

В HTML 5 добавлено большое количество новых функций для мобильных Web-приложений, включая визуальные функции, которые обычно дают наибольший эффект. Canvas – наиболее привлекательная из новых возможностей пользовательского интерфейса – обеспечивает полную 2-D графику в браузере. Эта статья учит использовать Canvas и некоторые другие новые визуальные элементы HTML 5, которые мало весят, но имеют большое значение для пользователей мобильных телефонов.

Майкл Галпин, инженер по программному обеспечению, Vitria Technology

Майкл Галпин (Michael Galpin) имеет учёную степень по математике в Калифорнийском Технологическом институте. Он является Java-разработчиком с конца 90-х гг. и работает инженером по программному обеспечению в Vitria Technology, в Саннивейл, Калифорния.



13.02.2012

Об этом цикле статей

HTML 5 – чрезвычайно популярная технология, и не без оснований. Она обещает стать технологической переломной точкой в процессе переноса настольных приложений в браузер. Она перспективна для традиционных браузеров, но еще больше возможностей обещает браузерам мобильным. Более того, разработчики самых популярных мобильных браузеров уже освоили и реализовали многие важные элементы спецификации HTML 5. В этом цикле из пяти статей мы рассмотрим некоторые из этих новых технологий, которые входят в HTML 5 и могут оказать огромное влияние на разработку мобильных Web-приложений. В каждой статье мы будем разрабатывать какое-нибудь действующее мобильное Web-приложение, демонстрирующее функции HTML 5, которое можно использовать с современными мобильными Web-браузерами вроде тех, что работают на устройствах iPhone и Android.


Предварительные замечания

В этой статье мы разработаем Web-приложение с использованием новейших Web-технологий. Большая часть кода – это просто HTML, JavaScript и CSS – основные технологии любого Web-разработчика. Главное, что вам понадобится – это браузеры для тестирования. Большая часть кода из этой статьи будет работать с последними версиями настольных браузеров – за некоторыми редкими исключениями. Конечно, приложение нужно будет протестировать и на мобильных браузерах, так что понадобятся последние версии SDK для iPhone и Android. В этой статье используются iPhone SDK 3.1.3 и Android SDK 2.1. См. ссылки в разделе Ресурсы.


Достижение графических эффектов с помощью Canvas

Часто используемые сокращения

  • Ajax: Asynchronous JavaScript + XML
  • API: Application Programming Interface – интерфейс программирования приложений
  • CSS: Cascading stylesheet – каскадная таблица стилей
  • DOM: Document Object Model – объектная модель документов
  • HTML: Hypertext Markup Language – язык гипертекстовой разметки
  • SDK: Software Developer Kit – пакет ПО разработчика
  • UI: User Interface – пользовательский интерфейс
  • XML: Extensible Markup Language – расширяемый язык разметки гипертекста

Web-разработчики уже много лет жалуются на Canvas. Но зачем жаловаться на стандартный API рисования в браузере? Ведь он позволяет создавать такие графические интерфейсы, для которых в противном случае потребовался бы какой-нибудь плагин (а плагины, как известно каждому разработчику мобильных Web-приложений, часто отсутствуют даже для самых популярных мобильных браузеров). Web-разработчики жалуются на Canvas потому, что хотя на Firefox и Safari он доступен уже много лет, его до сих пор не поддерживает самый популярный настольный браузер, Microsoft® Internet Explorer®. Даже ранние версии Internet Explorer 9 не поддерживают Canvas. Так что в течение многих лет API Canvas оставался технологией, которая только раздразнивает. По всему Интернету можно найти восхитительные образцы применения Canvas, но большинство Web-приложений не в состоянии их использовать из-за отсутствия поддержки в Internet Explorer. К счастью, у мобильных Web-разработчиков нет подобных ограничений в отношении Canvas. Все Webkit-браузеры могут создавать API Canvas и в значительной мере оптимизируют их производительность.

API Canvas – это низкоуровневый API для рисования. Он позволяет создавать линии, кривые, многоугольники, круги и заполнять их цветом, градиентами и т.п. В Canvas можно создавать текст и выполнять многочисленные геометрические трансформации во что угодно. Понятно, что такой API имеет неограниченную область применения. Рассмотрим приложение, которое создает графический отчет с помощью Canvas. На рисунке 1 показан снимок с экрана приложения, строящего гистограмму результатов за год.

Рисунок 1. Приложение для создания отчетов на базе Canvas, работающее в браузере Android
Приложение для создания отчетов на базе Canvas, работающее в браузере Android

То, что вы видите на рисунке 1 – не статическое изображение в браузере. Это графический отчет, динамически генерируемый с помощью API Canvas. В листинге 1 показан HTML-код, создающий этот отчет.

Листинг 1. HTML-код отчета
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; 
        maximum-scale=1.0; user-scalable=0;"/>
    <meta name="apple-touch-fullscreen" content="YES" />
    <title>HTML 5 Reports</title>
    <script type="text/javascript">
        function init(){
            var data = [{year : "2007",sales : 49},
                {year : "2008",sales : 131},
                {year : "2009",sales : 294}, 
                {year : "2010",sales : 405}];
            var report = {x : "year",
                    y : "sales",
                    values : data};
            graph(report, 350, 300);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="graph"></canvas>
</body>
</html>

Он иллюстрирует базовую структуру HTML. Тело документа содержит единственный тег canvas. В функции init, которая вызывается, когда загружено тело документа, определяются статические данные (данные отчета), которые передаются функции graph. Хотя здесь отчет определен как статические данные, легко представить себе их динамическую загрузку по сети с помощью Ajax. Весь интересный код сосредоточен в функции report, так что давайте рассмотрим ее детально в листинге 2.

Листинг 2. Функция graph
function graph(report, maxWidth, maxHeight){
    var data = report.values;
    var canvas = document.getElementById("graph");
    var axisBuffer = 20;
    canvas.height = maxHeight + 100;
    canvas.width = maxWidth;
    var ctx = canvas.getContext("2d");

    var width = 50;
    var buffer = 20;
    var i = 0;
    var x = buffer + axisBuffer;
    ctx.font = "bold 12px sans-serif";
    ctx.textAlign = "start";
    for (i=0;i<data.length;i++){
        ctx.fillStyle = "rgba(0, 0, 200, 0.9)";
        ctx.fillRect(x, maxHeight – (data[i][report.y] / 2), 
                 width, (data[i][report.y] / 2));
        ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
        ctx.fillText(data[i][report.x], x + (width / 4), maxHeight + 15);
        x += width + buffer;
    }

    // прорисовка горизонтальной оси
    ctx.moveTo(axisBuffer, maxHeight);
    ctx.lineTo(axisBuffer+maxWidth, maxHeight);
    ctx.strokeStyle = "black";
    ctx.stroke();

    // прорисовка вертикальной оси
    ctx.moveTo(axisBuffer,0);
    ctx.lineTo(axisBuffer,maxHeight);
    ctx.stroke();

    // прорисовка сетки
    var lineSpacing = 50;
    var numLines = maxHeight/lineSpacing;
    var y = lineSpacing;
    ctx.font = "10px sans-serif";
    ctx.textBaseline = "middle";
    for (i=0;i<numLines;i++){
        ctx.strokeStyle = "rgba(0,0,0,0.25)";
        ctx.moveTo(axisBuffer, y);
        ctx.lineTo(axisBuffer + maxWidth,y);
        ctx.stroke();
        ctx.fillStyle = "rgba(0,0,0, 0.75)";
        ctx.fillText(""+(2*(maxHeight -y)), 0, y);
        y += lineSpacing; 
    }
}

В первом разделе этой функции установим объекты, необходимые для создания отчета, такие как ширина и высота полотна и переменные заполнения. Создадим также объект контекста полотна, который будем использовать для выполнения собственно рисования. Нарисуем гистограммы, показанные на рисунке 1, перебирая данные отчета. Сначала установим свойство fillStyle. Это не труднее, чем настройка цвета при использовании CSS. В данном случае воспользуемся системой rgba для установки не только цвета, но и альфа-значения. (Это прозрачность цвета; мы вернемся к ней, когда будем обсуждать функции CSS 3.0 в HTML 5.) Установив свойство fillStyle, создадим гистограмму для точки данных с помощью API fillRect. Здесь необходимо указать начальную точку (х,у) прямоугольника, а также его высоту и ширину. Затем заново определим fillStyle, так как в отчете нужно распечатать некоторый текст. Для отрисовки текста на полотне воспользуемся API fillText. Этот API принимает начальную точку (х,у) и текст. Это делается для каждой из точек данных, что приводит к созданию гистограммы с надписями.

Теперь изобразим другие элементы графика – линии осей и сетки. Сначала нарисуем горизонтальную и вертикальную оси. Для каждой используем API moveTo, чтобы установить точку начала линии. Затем используем API lineTo для проведения линии из начальной точки в конечную точку, переданные при вызове lineTo. Заметим, что на самом деле это не изображение сплошной линии - для прорисовки линий вызывается API stroke. После нанесения обеих осей вырисовывается сетка вместе с надписями через равные интервалы, а затем проводятся линии с использованием того же сочетания moveTo, lineTo и stroke.

Это весь код, необходимый для программного создания графиков отчета. На этом примере показаны многие из наиболее важных и часто используемых canvas-API, но есть и другие (например, для изображения кривых). Они позволяют сделать удивительные вещи и будут работать с любым браузером на базе Webkit. Если графики не нужны, в HTML 5 можно делать много других интересных вещей с помощью каскадных таблиц стилей (CSS) 3.0.


Удивительный мир CSS3

Когда мы говорим HTML 5, то подразумеваем теги HTML. Конечно же, в HTML 5 есть новые теги, и в следующем разделе мы рассмотрим некоторые из них. Мы видели, как использовать тег <canvas> для создания объекта canvas внутри DOM. Однако большую часть этого кода занимал JavaScript. HTML в HTML 5 – это еще не все, не менее важны JavaScript и CSS. Многие из новых элементов пользовательского интерфейса HTML 5 отражают последнюю версию стандарта CSS, CSS 3.0. На рисунке 2 приведена Web-страница, составленная с помощью нескольких новых методов CSS 3.0, которая отображается на телефоне на платформе Android и на iPhone.

Рисунок 2. Новые CSS-возможности мобильных устройств
Новые CSS-возможности мобильных устройств

На рисунке 2 показаны многие новые CSS-функции, работающие на Android-устройстве и на iPhone. Левое изображение получено на Android-устройстве. Оно крупнее, потому что у экрана Motorola Droid более высокое разрешение, чем у iPhone 3GS, который показан справа. По той же причине на Droid видна большая часть страницы. Однако у заголовка "The Gettysburg Address" есть отражение, которое на iPhone постепенно исчезает, а на Droid не исчезает и заслоняет собой следующий заголовок. Это всего лишь напоминание, что хотя оба устройства оснащены Webkit-браузерами, между ними есть тонкие различия, и все нужно тщательно тестировать. Теперь рассмотрим код (см. листинг 3), создавший эту красивую страницу, начиная с верхней части страницы.

Листинг 3. Код верхней половины страницы
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        function init(){
            var i=0;
            var row = {};
            var cell = {};
            var topics = ["nth-child", "gradients", "alpha", "text effects", 
                          "reflections", "transformations"];
            for (i=0;i<topics.length;i++){
                row = document.createElement("tr");
                cell = document.createElement("td");
                cell.appendChild(document.createTextNode(topics[i]));
                row.appendChild(cell);
                $("dtable").appendChild(row);
            }
        }
    </script>
    <style type="text/css">
        header > h1{
            color: yellow;
            background: -webkit-gradient(linear, left top, left bottom, 
                             from(blue), to(white))
        }
        tr:nth-child(4n+1) { color: navy; }
        tr:nth-child(4n+2) { color: green; }
        tr:nth-child(4n+3) { color: maroon; }
        tr:nth-child(4n+4) { color: purple; }

        input[type="text"]{
            background: rgba(150, 30, 30, 0.5);
        }
    </style>
</head>
<body onload="init()">
    <header>
        <h1>The World of CSS3</h1>
        <div>What kind of CSS3 does your browser support?</div>
    </header>
    <table id="dtable"></table>
    <div id="formSection">
        <label for="name">What's your name?</label>
        <input type="text" id="name"></input>
        <button id="rtBtn" onclick="rotate()">Rotate</button>
    </div>
</body>
</html>

Код, представленный в листинге 3, вырисовывает все, что выше заголовка "Gettysburg Address". Код нижней части страницы мы рассмотрим позднее.

Первое, на что следует обратить внимание, это заголовок страницы. Взглянув на тело страницы HTML в нижней части листинга, вы увидите, что этот заголовок выполнен в теге header – одном из новых элементов HTML 5.

Теперь посмотрите на элемент style (над телом HTML листинге 3). Текст стилизован с помощью CSS посредством селектора header > h1. Это правило делает текст желтым, но одновременно создает сине-белый фон. На этот фон наложен градиент. Это первый пример функций CSS, которые начинаются с префикса -webkit. Как вы уже, наверное, догадались, это означает, что данная особенность CSS предназначена для Webkit-браузеров. Однако в большинстве случаев они входят в стандарт CSS 3.0, но относятся к тем областям, где этот стандарт еще не совсем устоялся. Чаще всего эти возможности реализованы как в браузерах Webkit, так и в Mozilla Firefox. Если нужно поддерживать и браузеры Mozilla (например, мобильную версию Firefox, называемую Fennec, которая быстро набирает популярность на смартфонах Nokia в Европе), префикс -webkit, как правило, можно изменить на -moz.

Теперь нужно отобразить список тем с использованием таблицы dtable. Как видно на рисунке 2, по мере отображения содержимого этой таблицы меняется и цвет от строки к строке. Это делается с помощью следующего раздела CSS, деклараций tr:nth-child. Декларацию nth-child можно использовать с любым повторяющимся элементом. Мы передаем формулу, которая используется в качестве предиката, чтобы посмотреть, является ли она действительным правилом для элемента. В данном случае мы указываем, что строки с номерам вида 4n+1 (1, 5, 9 и т.д.) должны быть окрашены в цвет морской волны, а строки с номерами вида 4n+2 (2, 6, 10 и т.д.) – в зеленый, а затем, аналогично, в бордовый и пурпурный. До сих пор вы, скорее всего, вносили подобные детали оформления в таблицы, списки и другие объекты с помощью утомительных операций JavaScript.

Последние визуальные элементы – это красное текстовое поле с надписью What's your name? и кнопка с надписью Rotate. Красный цвет текстового поля достигается использованием селектора вводимого текста. Другими словами, это правило CSS, которое будет применяться только к элементам ввода с типом text. Теперь можно посмотреть, что делает кнопка Rotate. Из листинга 4 видно, что она вызывает функцию rotate.

Листинг 4. JavaScript-функция поворота с использованием CSS
function rotate(){
    $("formSection").style["-webkit-transform"] = "rotateZ(-5deg)";
    $("formSection").style["-webkit-transition"] = 
          "-webkit-transform 2s ease-in-out";
    $("rtBtn").innerHTML = "Undo";
    $("rtBtn").onclick = function() {
        $("formSection").style["-webkit-transform"] = "";
        $("rtBtn").innerHTML = "Rotate";
        $("rtBtn").setAttribute("onclick", "rotate()");
    }
}

Эта функция использует JavaScript для изменения CSS, которая применяется к элементу div с именем formSection. (Примечание. $() используется как псевдоним document.getElementById().) Чтобы повернуть div, установим стиль -webkit-transform в rotateZ(-5deg), таким образом повернув его на пять градусов против часовой стрелки. Затем установим стиль -webkit-transform в -webkit-transform 2s ease-in-out. Это приводит к тому, что процесс поворота будет длится две секунды, начинаясь медленно, затем ускоряясь и опять замедляясь в конце. На рисунке 3 в левой части показано поле What's your name? в первоначальном, не повернутом положении. Справа приведен визуальный эффект частично повернутого поля – это кнопка Undo.

Рисунок 3. Поворот элементов HTML
Поворот элементов HTML на мобильном устройстве

В разделе Ресурсы дана ссылка, по которой можно увидеть этот эффект в действии на HTML 5-совместимых браузерах, таких как Chrome, Safari 4 и Opera.

Теперь перейдем к нижней части страницы, изображенной на рисунке 2. Здесь есть несколько интересных примеров изобразительных и текстовых эффектов, а также макетов. Код для этой части страницы приведен в листинге 5.

Листинг 5. Код нижней половины рисунка 2
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        h2 {
            -webkit-text-fill-color: blue;
            -webkit-text-stroke-color: yellow;
            -webkit-text-stroke-width: 1.5px;
            background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), 
to(#000));
            -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left 
bottom, from(transparent), color-stop(0.5, transparent), to(white));
        }
        h3{
            color: rgba(0,0,255,0.75);
            background: rgba(255,255,0,0.5);
        }
        .xyz{
            text-shadow: #6374AB 4px -4px 2px;
            white-space: nowrap;
            width: 14em; 
            height: 2em; 
            overflow: hidden;
            text-overflow: ellipsis; 
            border: 1px solid #bbb; 
            border-radius: 9px;             
            background-color: #fff;
        }
        .abc {
            border: 1px solid #000;
            border-radius: 9px;        
            -webkit-column-count:4;
            -webkit-column-rule: 1px solid #a00;
            -webkit-column-gap: 0.75em;
        }
    </style>
</head>
<body onload="init()">
    <h2>The Gettysburg Address</h2>
    <h3>Abraham Lincoln, Gettysburg, PA. November 19, 1863</h3>
    <div class="xyz">
        Four score and seven years ago our fathers brought forth on this 
        continent a new nation, conceived in liberty, and dedicated to 
            the proposition that all men are created equal.
    </div>
    <div class="abc">
        Now we are engaged in a great civil war, testing whether that 
            nation, or any nation, so conceived and so dedicated, can long 
            endure. We are met on a great battle-field of that war. We have 
            come to dedicate a portion of that field, as a final resting 
            place for those who here gave their lives that that nation might 
            live. It is altogether fitting and proper that we should do this.
    </div>
</body>
</html>

Разберем этот код поэлементно. Во-первых, мы создаем заголовок "Gettysburg Address" и оформляем его разными способами.

  1. Для создания эффекта синего цвета внутри желтого используем стили -webkit-text-fill-color, -webkit-text-stroke-color и -webkit-text-stroke-width.
  2. Красно-черный фон позади текста устанавливается с помощью стиля фона -webkit-gradient. Отметим, что это радиальный градиент, тогда как раньше мы имели дело с линейным градиентом. Тот и другой одинаково хорошо работают на смартфонах.
  3. Применяем отражение к заголовку, устанавливая стиль -webkit-box-reflect. Этот стиль устанавливает отражение заголовка на пять пикселей ниже с применением к отражению эффекта градиента. Здесь эффект градиента создает впечатление постепенного исчезновения отражения. Возвращаясь к рисунку 2, теперь видно, что именно это сочетание градиента с отражением не воспроизводится браузером Android: он показывает только отражение, без градиента.

Переходя к следующему заголовку, применим к нему очень простой дизайн. У него есть только цвет текста и отдельно цвет фона. Оба эти цвета используют функцию rgba для указания красно-зелено-синих значений с применением альфа-прозрачности. Значение 1.0 полностью непрозрачно, а значение 0.0 – прозрачно.

В листинге 5 приведен код для отображения первого абзаца. Этот текст обведен рамкой с использованием нового стиля border-radius для скругления углов. Сегодня такие углы используют повсеместно в Web, и обычно они выполняются с использованием изображений. Такой способ кажется примитивным по сравнению с тем, как легко это делается в CSS 3.0. Тень, отбрасываемая текстом абзаца, достигается с помощью стиля text-shadow. Наконец, обратите внимание, что область абзаца ограничена путем указания высоты и ширины родительского div и что строка слишком длинна. Вместо того чтобы просто обрезать текст, как это было бы в старых браузерах, мы получаем симпатичный эффект многоточия (...), установив стиль text-overflow.

Наконец, мы подошли к последней части текста. Она также обведена рамкой, но заметьте, что текст разбит на четыре колонки с разделителями. Для этого установлен стиль -webkit-column-count, а также сопутствующий стиль -webkit-column-rule для получения разделителей. Только представьте себе, как трудно было бы получить текст в таком формате без всех этих новых возможностей CSS 3.0. Они могут пригодиться и при создании простых верхних и нижних колонтитулов – еще одного нового элемента HTML 5. Рассмотрим эти и некоторые другие новые способы разметки, добавленные в HTML 5.


Новая семантика

HTML 5 добавляет множество новых элементов разметки HTML. Некоторые из этих элементов наделяют браузеры новые возможностями отображения информации. Другие добавляют функции, доступные через JavaScript. Однако некоторые не делают ни того, ни другого. Они выглядят так же и имеют те же программные интерфейсы, что и <span>, <div> и <p>. Но при этом вносят дополнительное семантическое значение. Эта новая семантика важна для незрячих пользователей страницы (включая тех, кто использует вспомогательные технологии, такие как программы чтения вслух содержимого экрана) и для таких программ, как поисковые роботы. Эти новые теги помогают также разработчикам писать более выразительные CSS-селекторы. На рисунке 4 показана Web-страница с использованием некоторых новых семантических элементов.

Рисунок 4. Новые элементы HTML 5 в iPhone
Новые элементы HTML 5 в iPhone

В примере на рисунке 4 есть элемент header, а также элементы nav, article, section и aside. Они не требуют никакой специальной обработки. Они просто вносят семантическое значение, и их можно использовать для написания CSS, которая наделяет эти семантические значения визуальными чертами. Код страницы, изображенной на рисунке 4, приведен в листинге 6.

Листинг 6. Новые семантические элементы в HTML 5
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; 
        maximum-scale=1.0; user-scalable=0;"/>
    <meta name="apple-touch-fullscreen" content="YES" />
<title>Get the latest markup</title>
</head>
<body>
    <header style="border: 1px dotted #000;border-radius: 3px;">
        <hgroup align="center">
            <h1>Real documents have headers</h1>
            <h2>Even if they don't say so</h2>
        </hgroup>
        <hgroup>
        <nav style="-webkit-column-count:3;-webkit-column-rule: 1px solid #a00;">
            <a href="new-css.html">CSS3</a><br/>
            <a href="report.html">Canvas</a><br/>
            <a href="elements.html">Markup</a>
        </nav>
        </hgroup>
    </header>
    <article>
       <h1>There are a lot of new markup elements in HTML5</h1>
       <time datetime="2010-05-16" pubdate>Sunday, May 16</time>
       <section>Did you notice that we just had two H1's? 
       But it's cool!</section>
       <aside style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" >
            If this page was really popular, I'd put an ad here and make some
            serious cash
        </aside>
    </article>
</body>
</html>

Здесь есть ряд новых элементов, упоминавшихся выше. Обратите внимание, что мы применяем также некоторые новые стили CSS для создания рамки заголовка с закругленными углами header и разделителей для nav. Мы использовали также оформление переполнения текста aside. Дело в том, что можно создать гораздо более наглядную разметку без какой-либо дополнительной работы, а затем придать ей такой же вид, как при использовании <div> и <span>. Пример новых элементов HTML 5, которые влияют на наглядность и программирование, приведен на рисунке 5. (см. текстовую версию рисунка 5.)

Рисунок 5. Формы, созданные с помощью HTML 5, на iPhone
Формы, созданные с помощью HTML 5, на iPhone

Здесь используется много новых элементов формы, доступных в HTML 5. Во многих случаях они выглядят так же, как существующие элементы, но можно ожидать, что браузеры обогатят эти формы. Это видно на примере браузера Opera, приведенном на рисунке 6. (см. текстовую версию рисунка 6.)

Рисунок 6. Элементы HTML 5 в Opera
Формы, созданные с помощью HTML 5, в Opera

Опера лидирует по реализации функций HTML 5, и это особенно справедливо для новых элементов формы. Теперь поясним, почему Опера воспроизводит все именно так, рассмотрев код, который породил листинг 4 и листинг 5. Этот код приведен в листинге 7.

Листинг 7. Элементы формы HTML 5 в коде
<form id="settings">
<fieldset id="inputs" style="border: 1px solid #000;border-radius: 6px;">
    <legend>Settings</legend>
    <label for="name">Username</label>
    <input id="name" name="name" type="text" required autofocus /><br/>
    <label for="name">Name</label>
    <input id="name" name="name" type="text" 
          placeholder="First and last name" required /><br/>
    <label for="email">Email</label>
    <input id="email" name="email" type="email"           
           placeholder="example@domain.com" required /><br/>
    <label for="phone">Phone</label>
    <input id="phone" name="phone" type="tel" 
          placeholder="Eg. +447500000000" required /><br/>
    <label for="dob">Date of birth</label>
    <input id="dob" name="dob" type="date" required/>
    <fieldset style="border: 1px dotted #000; border-radius: 6px">
        <legend>Preferred Contact Method</legend>
        <ol>
            <li>
                <input id="emailMeth" name="contactMethod" 
                            type="radio">
                <label for="emailMeth">Email</label>
            </li>
            <li>
                <input id="phoneMeth" name="contactMethod" 
                            type="radio">
                <label for="phoneMeth">Phone</label>
            </li>
        </ol>
    </fieldset>
    <label for="climate">Preferred external temperature</label>
    <input id="climate" name="climate" type="range" min="50" 
          max="100" step="5" value="70"/><br/>
    <label for="color">Favorite color</label>
    <input id="color" name="color" type="color"/><br/>
    <label for="referrer">Where'd you hear about us?</label>
    <input type="url" name="refUrl" id="referrer" list="urls"/>
    <datalist id="urls">
        <option label="TechCrunch" value="http://www.techcrunch.com/">
        <option label="ReadWrite Web" value="http://www.readwriteweb.com/">
        <option label="Engadget" value="http://www.engadget.com/">
        <option label="Ajaxian" value="http://www.ajaxian.com/">
    </datalist><br/>
    <button type="button" onclick="checkInputs()">Save</button>
</fieldset>
</form>

Элементы form в листинге 7 демонстрируют многие новые возможности HTML 5. Обратите внимание на два новых атрибута, required и autofocus. Атрибут required используется при проверке формы (подробнее об этом см. ниже), а атрибут autofocus позволяет выбрать элемент на странице. Заметьте также, что некоторые из элементов содержат текст placeholder. Это подход, который Web-сайты используют много лет – помещение в текстовое поле какого-то примера или пояснительного текста, – но разработчику всегда приходилось вмешиваться в код. На рисунке 4 видно, как красиво это реализует iPhone.

Теперь рассмотрим некоторые новые типы элементов ввода данных, такие как email, phone, date, range, color, и url. Сегодня в браузерах iPhone и Android все они отображаются как текстовые поля, но так, как будто они созданы с использованием семантически менее корректного HTML 4.0. На рисунке 5 видно, как они могут выглядеть в будущем. В Opera, чтобы увидеть новый пользовательский интерфейс (всплывающий календарь), нужно навести фокус на поле ввода date. Это же справедливо и для поля ввода url на рисунке 7, но не потому, что это поле ввода url, а из-за его атрибута list. Он указывает на элемент datalist, который содержит допустимые значения для этого поля. Наведя фокус на это поле, вы увидите возможные значения (в данном случае несколько URL) из datalist, как в популярных теперь полях в стиле Ajax с предложением вариантов. Поля ввода date и datalist показаны на рисунке 7.

Рисунок 7. Поля ввода даты и раскрывающихся списков в HTML 5
Поля ввода даты и раскрывающихся списков в HTML 5

Можно ожидать, что по мере продолжения быстрого развития Webkit многие типы полей ввода данных позволят создать более полезные визуальные представления. Опера предоставляет возможность заглянуть в будущее. Многие из этих полей ввода обеспечивают также проверку, и HTML 5 имеет целый набор новых API для этой цели. Эти функции пока не работают на iPhone или Android-устройствах, но работают в их настольных эквивалентах, так что можно ожидать, что в ближайшее время они появятся и в мобильных браузерах. Рассмотрим пример использования новых API проверки, приведенный в листинге 8.

Листинг 8. API проверки HTML 5 в действии
function checkInputs(){
    var inputs = document.getElementById("inputs").childNodes;
    var len = inputs.length;
    var i = 0;
    var input = null;
    var errors = [];
    for (i=0;i<len;i++){
        input = inputs.item(i);
        if (input.nodeName == "INPUT"){
            if (input.validity){
                if (!input.checkValidity()){
                    errors.push(input.validationMessage);
                }
            }
        }
    }
    var errMsg = "There are " + errors.length + " errors";
    var notify = function(){
        var notification = 
            webkitNotifications.createNotification(null, "Errors!", errMsg);
        notification.show();
    };
    if (window.webkitNotifications){
        if (webkitNotifications.checkPermission()){
            webkitNotifications.requestPermission(notify);
        } else {
            notify();
        }
    } else {
        alert(errMsg);
    }
}

Каждый из элементов ввода имеет свойство validity. Можно использовать это свойство или воспользоваться функцией checkValidity(), которая возвращает значение "истина" или "ложь", и свойством validationMessage для получения локализованного сообщения об ошибке. На момент написания статьи последние версии настольных браузеров не возвращали ничего согласованного или стандартного для сообщения validationMessage, так что его применение ограничено. Объект validity можно использовать для проверки различных типов ошибок, таких как valueMissing, rangeOverflow, rangeUnderflow, patternMismatch и tooLong. Например, если в элементе есть обязательный атрибут, который пользователь оставляет пустым, будет истинным значение validity.valueMissing.

Наконец, обратите внимание на то, что в листинге 8 после проверки всех ошибок предпринимается попытка использовать webkitNotifications. Это аналогично системным уведомлениям настольного компьютера и поддерживается в последней версии Chrome. Опять же можно рассчитывать на то, что скоро это придет и в браузеры для iPhone и платформы Android. Способ применения этого API очевиден. Единственная трудность заключается в том, что нужно проверить, разрешил ли пользователь применять этот API вашему сайту. Если нет, нужно запросить разрешение, передав функцию, которая должна вызываться в том случае, если пользователь даст разрешение.


Заключение

В этой статье мы рассмотрели многие новые функции пользовательского интерфейса HTML 5, от новых элементов до нового стиля и рисунков. Все эти функции (за несколькими редкими исключениями, указанными в конце) можно использовать на Webkit-браузерах, которыми снабжены iPhone и устройства на платформе Android. Другие популярные платформы, такие как Blackberry и смартфоны Nokia, приобретают все более мощные браузеры, использующие технологии, рассмотренные в этой статье. Будучи разработчиком мобильных Web-приложений, вы можете предложить широкому кругу пользователей такие возможности, которые до сих пор были недоступны для HTML, CSS, JavaScript и настольных браузеров. В предыдущих четырех частях этого цикла статей мы рассказали обо многих других новых технологиях (таких как геолокация и Web Workers), которые имеются в этих замечательных новых мобильных браузерах. Мобильный интернет – это уже не тот облегченный вариант Web, для которого вы программировали много лет. Это более мощная версия, полная удивительных возможностей.


Загрузка

ОписаниеИмяРазмер
Исходный код для статьиui.zip5 КБ

Ресурсы

Научиться

Получить продукты и технологии

  • Проект Modernizr – всеобъемлющая утилита для обнаружения функций HTML 5.
  • Web-сайт разработчиков Android: загрузите Android SDK, познакомьтесь с материалами по API и следите за последними новостями о платформе Android.
  • SDK iPhone: загрузите последнюю версию SDK iPhone для разработки приложений, работающих на iPAD, iPhone и iPod Touch.
  • Проект Open Source Android: получите открытый исходный код мобильной платформы Android.
  • SDK Google App Engine: загрузите инструменты Java и Python для создания масштабируемых Web-приложений с использованием Google.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML, Open source
ArticleID=793275
ArticleTitle=Создание мобильных Web-приложений с применением HTML 5: Часть 5. Разработка новых визуальных элементов пользовательского интерфейса в HTML 5
publish-date=02132012