| Новые программы oszone.net |  |
Сбылись не только мечты Билла Гейтса о компьютере на каждом столе и в каждом доме — прогресс шагнул еще дальше с появлением таких устройств, как планшеты Surface. Вдобавок к выпуску Surface, уже наблюдается взрывной рост новых ориентированных на потребителей устройств всевозможных форм-факторов. Иначе говоря, компьютеры стали вездесущими. Только задумайтесь, что на этих компьютерах по всему миру установлено более миллиарда копий операционных систем Windows, причем за последние пару лет ежегодно продавались по 300 миллионов лицензий на Windows 7. Сложите текущую базу установок Windows, готовую к обновлению, с быстро растущим рынком устройств под управлением Windows 8 вроде Surface и вы получите формулу монетизации этого успеха: использование переосмысленной Windows дает беспрецедентную возможность заработать деньги на публикации приложений в Windows Store. Платформа, язык и инструментарий для создания приложений Windows StoreЧтобы создать приложение Windows Store, вам понадобятся Windows 8, Visual Studio 2012 и любые SDK, специфичные для требований вашего приложения, например Windows Live SDK или Bing Maps SDK. Эти минимальные системные требования и конфигурация упрощают разработку приложений в Windows 8 — от установки инструментария до развертывания готового продукта. После установки необходимого программного обеспечения вы должны выбрать язык программирования. Если раньше вы вели разработки в основном под Microsoft .NET Framework и писали приложения Windows Forms, Windows Presentation Foundation (WPF) или Silverlight на C# или Visual Basic, в таком случае вам будет легче всего создавать приложения Windows Store с помощью XAML и C# или Visual Basic. Разработчики на C++ могут также использовать C++ как компилируемый язык в сочетании с XAML для построения GUI. Если же вы веб-разработчик и имели дело, в том числе, с ASP.NET, то можете применить уже имеющиеся у вас знания открытого стандарта HTML5, JavaScript и CSS3 непосредственно к разработке приложений Windows Store. Веб-разработчики могут по-прежнему использовать многие популярные сторонние JavaScript-библиотеки вроде jQuery или Knockout. В этой статье я буду использовать JavaScript в качестве языка программирования. Независимо от прежнего опыта в области разработки барьер входа в программирование «родных» для Windows 8 приложений невысок. Это вызвано тем, что платформа Windows Runtime (WinRT) содержит API, которые размещаются поверх базовых сервисов Windows, как показано на рис. 1.
Основные принципы приложения Windows StoreПриложения Windows Store выполняются в полноэкранном режиме с «полным погружением», обеспечивая передачу контента пользователю напрямую, без выбора каких-либо команд. Эти приложения также обеспечивают эффектную визуализацию данных, привлекающую внимание пользователя к контенту. Приложения Windows Store делают такие вещи, которые ранее нельзя было делать в традиционных Windows- или веб-приложениях, например обмен данными, поиск и взаимодействие друг с другом простым и унифицированным способом, используя элементы Windows Runtime, называемые контрактами, в качестве связующих звеньев между приложениями. Высокая степень удобства использования является важнейшим аспектом разработки приложения Windows Store — от презентационного уровня и разметки до навигации и производительности. Пользователи ожидают согласованности как между приложениями, так и между приложениями и операционной системой (ОС). Суть приложений Windows Store сводится именно к удобству в использовании, и применение таких проектировочных принципов, как единый шрифт, контурный (silhouette) Windows UI и масштабируемая сетка, повышает уровень комфорта пользователя при работе с вашим приложением. Обеспечение надежной и единообразной работы сенсорного ввода, а также манипуляций с мышью очень важно, потому что у пользователей теперь больше способов взаимодействия с их вычислительными устройствами — мыши, перья, сенсоры, камеры и различные датчики. Поскольку устройства на аккумуляторах с процессорами вроде ARM становятся заметной частью всего рынка вычислительной техники, Windows 8 должна управлять общей памятью и памятью, выделяемой каждому приложению, по четкой стратегии, чтобы обеспечить быстродействие и адаптацию под условия даже с малыми ресурсами. Хотя многие программы будут отлично работать как приложения Windows Store, не все из них годятся на роль кандидатов в такие приложения. Например, хотя сама Visual Studio поддерживает многие принципы проектирования современных UI, ее цель — дать возможность пользователю выполнять команды (другими словами, программировать). Это не подходит для приложения Windows Store. Шаблоны проектов для приложений Windows Store в Visual Studio 2012В Visual Studio 2012 введен набор новых шаблонов для разработки приложений Windows Store на C#, Visual Basic, C++ и JavaScript. Независимо от языка доступны следующие стили шаблонов.
Поскольку шаблон Grid содержит код, поддерживающий многие средства Windows 8, такие как прикрепленное представление, масштабирование экрана и навигация, он является отличным вариантом для тех, кто только начинает писать приложения Windows Store. Создав новый проект по шаблону JavaScript Grid, изучите его структуру. Вы увидите, что проект содержит все стандартные типы веб-файлов, например .html, .css и .js, организованные в папки, которые помещаются в корень проекта. После этого можно отлаживать и запускать приложение Windows Store нажатием клавиши F5 или выбором команды Start Debugging из меню Debug. В шаблонах приложений Windows Store файл default.html является начальной страницей для таких приложений, и ему сопутствует файл скрипта /js/default.js, содержащий базовый код управления жизненным циклом процесса. Как и в случае любого другого HTML-файла, в default.html находится ожидаемый вами код, в том числе ссылки на скрипты и HTML5-разметка с новой семантикой, которая определяет структуру страницы. Следующий фрагмент кода содержится в теге <body> файла default.html и использует элементы управления WinJS для навигации и загрузки страницы groupedItems.html: <div id="contenthost"
data-win-control="Application.PageControlNavigator"
data-win-options=
"{home: '/pages/groupedItems/groupedItems.html'}"></div>Атрибуты data-* в HTML5 предназначены для применения пользовательского кода или поведения к HTML-элементу, а в разработке приложений Windows Store атрибуты data-win-* обычно ссылаются на элементы управления Windows JavaScript. Эти элементы управления — встроенные WinRT-компоненты, которые вы применяете к HTML-элементам для расширения или модификации их поведения или стиля. Атрибуты data-win-* превалируют в приложениях Windows Store, написанных на JavaScript, особенно при связывании с данными. Доступ к данным в приложениях Windows StoreКак часть шаблона Grid файл data.js в папке /js содержит код, создающий набор данных из массивов, а также функции для группирования и манипулирования данными. Файл data.js также хранит образцы данных, которые вы должны заменить собственными данными. В этой статье я буду использовать данные для приложения, ведущего обратный отсчет: сколько дней остается до какого-либо события, например праздника или отпуска. В файле data.js вы найдете единственный комментарий // TODO почти в начале файла. Замените код под этим комментарием на свой, так чтобы он напоминал нечто вроде показанного в следующем фрагменте кода, который вызывает XMLHttpRequest для получения JSON-данных, а затем создает набор данных, в том числе динамические свойства, такие как daysToGo и поля сообщения (message): var list = new WinJS.Binding.List();
...
WinJS.xhr({ url: "data.json" }).then(function (xhr) {
var items = JSON.parse(xhr.responseText);
items.forEach(function (item) {
item.daysToGo = Math.floor(
(Date.parse(item.eventDate) - new Date()) / 86400000);
item.message = item.daysToGo + " days until " + item.title;
if (item.daysToGo >= 0) {
list.push(item);
};
})
})В начале data.js есть строка кода, которая создает экземпляр объекта WinJS.Binding.List, удачно названного списком, а предшествующий код записывает индивидуальные элементы в этот List. Объект List обеспечивает связывание между JSON-данными или JavaScript-массивами и HTML-элементами. Как только переменная list заполнена данными, используйте выражения связывания в HTML-разметке для привязки членов List к HTML-элементам. Когда вы считываете JSON-данные вызовом JSON.parse, имена в парах «имя-значения» сравниваются со свойствами JavaScript-объектов в период выполнения. Следующие JSON-данные показывают, как JSON-структура сопоставляет члены переменным item в предыдущем фрагменте кода. Все поля (key, title, eventDate, image, color и group) сопоставляются свойствам объекта item: [{"key":"1","group":{"key":"group1","title":"Important Dates"},
"title":"Rachel's Birthday","eventDate":"01/13/2013",
"image":"/images/birthday.png","color":"#6666FF"},
{"key":"2","group":{"key":"group1","title":"Important Dates"},
"title":"Ada Lovelace Day","eventDate":"10/16/2013",
"image":"/images/ada.jpg","color":"#fff"},
{"key":"3","group":{"key":"group2","title":"Holidays"},"title":"Christmas",
"eventDate":"12/25/2013","image":"/images/tree.png","color":"#ef0d0d"},
{"key":"4","group":{"key":"group3","title":"School"},"title":"School Ends","eventDate":"6/10/2013","image":"/images/schoolbus.png","color":"#fff"},
{"key":"5","group":{"key":"group2","title":"Holidays"},"title":"Thanksgiving",
"eventDate":"11/29/2012","image":"/images/thanksgiving.png","color":"#FFCC00"},
{"key":"6","group":{"key":"group2","title":"Holidays"},"title":"New Year's Day", "eventDate":"1/1/2013","image":"/images/celebrate.png","color":"#f8baba"}]Теперь, когда вы загрузили данные, вы должны удостовериться, что объект List связан с нужными HTML-элементами. Модификации, внесенные в страницу /pages/groupedItems/groupedItems.html на рис. 2, иллюстрируют связывание с данными в действии. Рис. 2. Связывание объекта List с HTML-элементами с помощью элементов управления WinJS <!-- Эти шаблоны используются для отображения каждого
элемента в ListView, объявленном ниже -->
<div class="headertemplate" data-win-control="WinJS.Binding.Template">
<button class="group-header win-type-x-large win-type-interactive"
data-win-bind="groupKey: key"
onclick
="Application.navigator.pageControl.navigateToGroup(
event.srcElement.groupKey)"
role="link" tabindex="-1" type="button">
<span class="group-title win-type-ellipsis"
data-win-bind="textContent: title"></span>
<span class="group-chevron"></span>
</button>
</div>
<div class="itemtemplate" data-win-control="WinJS.Binding.Template" >
<div id="myitem" class="item"
data-win-bind="style.background: color">
<img class="item-image" src="#"
data-win-bind="src: image; alt: title" />
<div class="item-overlay">
<h2 class="item-title" data-win-bind="innerText: message"></h2>
<h6 class="item-subtitle"
data-win-bind="textContent: eventDate"></h6>
</div>
</div>
</div>
<!-- Контент, который будет загружаться и отображаться -->
<div class="fragment groupeditemspage">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back"
disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">How long until...</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div id="listView" class="groupeditemslist"
aria-label="List of groups"
data-win-control="WinJS.UI.ListView"
data-win-options
="{ selectionMode: 'multi',
tapBehavior:'toggleSelect' }"
></div>
</section>
</div>Каждый HTML-элемент на рис. 2, содержащий атрибут data-win-bind, имеет выражение привязки, которое соответствует имени свойства переменной item из предыдущего фрагмента кода, поэтому от вас требуется лишь убедиться, что выражения привязки соответствуют именам полей. Не забудьте проверить, что вы также модифицировали выражения привязки в страницах groupedDetail.html и itemDetails.html, чтобы при переходе на них пользователя показывались правильные данные. Запуск этого проекта в Windows Simulator дает результаты, сходные с теми, которые представлены на рис. 3. (Узнать больше об использовании симулятора можно по ссылке bit.ly/M1nWOY.)
Как видите, вы можете просто заменить код из шаблона Visual Studio и быстро получить доступ к данным. Однако проекты зачастую довольно велики или сложны, что затрудняет их сопровождение. В этом случае используйте шаблон Model-View-ViewModel (MVVM), который облегчает сопровождение. Данный шаблон исчерпывающе документирован в Интернете. Хотя выше приложение теперь работает, пришла пора задействовать преимущества многих средств Windows 8, способных выделить ваше приложение из толпы ему подобных. Брэндинг вашего приложения Windows StoreУчитывая, что фокальной точкой Windows 8 является страница Start, имеет смысл приступать к брэндингу именно здесь. Страница Start заполняется активными плитками (тайлами), и это не просто набор квадратных значков. Напротив, это лучший способ показать свое приложение в выгодном свете и привлечь к нему внимание пользователей. Активные плитки не зря называются «активными» — на них можно динамически выводить информацию и изображения, тем самым делая ваше приложение еще привлекательнее. Приложения Windows Store требуют создания трех изображений плиток со следующими размерами в пикселах:
У изображений может быть любой популярный формат, но лучше всего работают изображения с прозрачным фоном. Открыв файл package.appxmanifest из корня проекта, вы найдете палитру конфигурации, где можно выбрать изображения для плиток и задать цвета фона. Стандартная и широкая плитки представлены на рис. 4.
При подготовке плиток самое время настроить начальный экран-заставку, выбрав только изображение и цвет фона — никакого кода не используется. Хотя плитки и начальные экраны — важные факторы в брэндинге вашего приложения, вы можете сделать гораздо больше, используя информацию по ссылке bit.ly/M4HYmL. Обязательные средства Windows 8 для вашего приложенияХотя к этому моменту ваше приложение может работать, в экосистеме приложений Windows 8 много новых средств и API, с помощью которых вы можете сделать свое приложение по-настоящему выдающимся. Я кратко опишу каждое из них. AppBar Важная функция для каждого приложения, которая представляет собой элемент управления WinJS, содержащийся в default.html. Обычно AppBar остается вне поля зрения, но, когда пользователь щелкает правой кнопкой мыши или проводит пальцем по экрану сверху или снизу, AppBar отображается в виде полосы в нижней части экрана. Разметка AppBar, содержащая три кнопки и соответствующие слушатели их событий, показана на рис. 5. Рис. 5. AppBar с кнопками для добавления, удаления и экспорта данных // Разметка AppBar в default.html
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'addItem', label:'Add',
icon:'add', section:'global'}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'exportData', label:'Save',
icon:'save', section:'global'}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'deleteItem', label:'Delete',
icon:'delete', section:'selection'}"
type="button"></button>
</div>
// Скрипт в groupedItems.js
document.getElementById("exportData").addEventListener("click", Data.exportData);
document.getElementById("addItem").addEventListener("click", this.addItem);
document.getElementById("deleteItem").addEventListener("click", this.deleteItem);Глобальные команды AppBar должны быть расположены в правой части AppBar, а контекстно-зависимые команды — в левой. Оформление AppBar изменяется применением CSS-стилей, так как это всего лишь <div>. Прикрепленное представление (snapped view) Приложения Windows Store могут выполняться в полноэкранном режиме или в режиме прикрепленного представления, когда пользователь «приклеивает» приложение к левой или правой стороне экрана. Так как приложение теперь имеет меньшее экранное пространство, оно должно отображать только необходимые данные. Поскольку поддержка прикрепленных представлений встроена в шаблон Grid, вы должны проверить корректность отображения данных и их читаемость в таком представлении. AppBar также работает, пока приложение находится в режиме прикрепленного представления, поэтому и на этот случай вам могут понадобиться изменения в его стиле. Контекстное масштабирование (Semantic Zoom) Эта новая функция Windows 8, удобная на сенсорных экранах, — способ агрегации больших количеств данных в одно легко воспринимаемое представление. Пользователи вызывают контекстное масштабирование следующими способами:
Контекстное масштабирование в большей мере относится к осмысленной визуализации данных, помогающей при навигации, а не к простому выводу их отмасштабированного представления. Если данных много, пользователю лучше увидеть их представление с высоты птичьего полета, чем долго и нудно прокручивать большие объемы информации. Здесь вы должны сами решить, как лучше представлять данные. Поиск и общий доступ Поиск и обмен данными между приложениями — базовые аспекты современных приложений. Пользователи теперь могут вести поиск данных сразу в нескольких приложениях, а затем обмениваться найденными данными. Или же ваше приложение может зарегистрироваться в качестве получателя данных (share target) и принимать данные, которыми делятся пользователи других приложений Windows Store. Взаимодействие между приложения еще никогда не было столь простым и единообразным. Элементы управления выбором (picker controls) Эти традиционные элементы управления Windows были обновлены под современный UI (примеры таких элементов — File Open Picker или File Save Picker). Также изменены диалоговые окна настройки печати, уже давно ставшие одними из основных элементов приложений Windows многих версий. Медиа Поскольку приложения Windows Store, написанные на JavaScript, полностью поддерживают HTML5, элементы <audio> и <video> работают точно так же, как и в обычных веб-страницах. Всплывающие уведомления (toast notifications) Это отличный способ мгновенного вывода пользователям сообщений независимо от того, используется ли в данный момент приложение. Самые популярные их формы — всплывающие оповещения о приеме электронной почты и текстовые сообщения на смартфонах. Всплывающие уведомления могут содержать текст и изображения и служат еще одним способом привлечь внимание пользователей к вашему приложению. Вы можете отправлять те же уведомления на экран блокировки Windows 8, чтобы пользователь узнавал об ожидающих его внимания сообщениях. Программа Generation AppИтак, Windows 8 — это переосмысленная версия Windows, в которую были внесены некоторые из крупнейших изменений со времен Windows 95. Она открывает разработчикам новый беспрецедентный рынок. Встроенные в Visual Studio шаблоны проектов позволяют быстрее и проще создавать и публиковать коммерческие приложения на этом рынке. В этой статье слишком мало места, чтобы обсудить все потрясающие средства, которые вы можете и должны использовать в приложении Windows Store, поэтому я настоятельно советую проверить программу Generation App (bit.ly/W8GenAppDev). Она послужит вам путеводителем по процессу создания приложения Windows Store (или Windows Phone), и в течение 30 дней вы сможете бесплатно получать техническую помощь и консультации по проектированию наряду с эксклюзивными ресурсами и информацией.
Теги:
HTML5, JavaScript.
Комментарии посетителей
18.02.2014/20:44
alexpts@twitter
Скачал с сайта microsoft Microsoft Visual Studio Express 2012, чтобы попробовать создать js приложение по книге "Вальтер Ш. - Создание приложений для Windows 8 с использованием HTML5 и JavaScript - 2013", но у меня в проектах в разделе installed нет совсем javascript. Как его поставить? Комментарии отключены. С вопросами по статьям обращайтесь в форум.
|
|
.png)
.png)
.png)
