Опрос
Вы участвуете в программе Windows Insider?
Популярные новости
Обсуждаемые новости

Начала Metro-программирования: панели инструментов и работа с текстовыми файлами (ч.1)

Напечатать страницу
29.05.2012 16:45 | dronov_va

Платформа Metro, предназначенная для разработки и выполнения нового поколения Windows-приложений и поставляемая в составе Windows 8, предоставляет нам как разработчикам множество полезных инструментов. В их число входят набор новых элементов управления (списки, панели инструментов, всплывающие элементы и др.), средства для работы с файлами (выбор, открытие, чтение, запись, перечисление, получение миниатюр и др.) и специальные механизмы, призванные реализовать применяемую в Metro-приложениях модель асинхронного программирования (обязательства). Все эти инструменты весьма просты в использовании и позволяют достичь нужного результата минимальным количеством кода. В чём мы скоро и убедимся.

Эта статья будет посвящена разработке Metro-приложения простейшего текстового редактора с применением "связки" HTML+CSS+JavaScript. Попутно мы познакомимся со следующими инструментами платформы Metro:

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


И не только познакомимся, но и применим их на практике.

Внимание!
Перед чтением следует ознакомиться со статьёй "Начала Metro-программирования: простейшее Metro-приложение", где описывается процесс создания Metro-приложений, предназначенные для этого средства разработки и основные приёмы Metro-программирования.


1. Подготовительные действия
Запустим Visual Studio и создадим в нём новый проект приложения под названием TextEditor. Это и будет приложение текстового редактора, которое мы собираемся создать.

Откроем файл default.html и введём в тег <body> следующий код:

<textarea id="txtEdit"></textarea>


Тег <textarea> формирует на экране обычную область редактирования HTML. Чтобы впоследствие получить к этой области редактирования доступ из кода логики, мы дадим ей имя txtEdit, для чего воспользуемся атрибутом тега id.

После этого откроем файл default.css и создадим в нём такой стиль:

#txtEdit {
  margin-top: 90px;
  width: 100%;
  height: calc(100% - 90px);
}


Прежде всего, он укажет для области редактирования txtEdit отступ сверху в 90 пикселов (атрибут стиля margin-top создаёт внешний отступ сверху). Зачем это нужно, мы узнаем потом.

Далее мы растягиваем область редактирования на всю ширину экрана. Для этого мы используем атрибут стиля width, указывающий ширину элемента интерфейса, и задаём для этого атрибута стиля значение 100%, то есть полную ширину экрана.

Наконец, мы указываем для области редактирования высоту, равную полной высоте экрана за вычетом заданной ранее величины внешнего отступа сверху. Здесь мы применили атрибут стиля height, задающий высоту элемента интерфейса. А в качестве его значения мы указали функцию CSS calc, которая и выполнит нужное нам вычисление - вычтет из полной высоты экрана (100%) значение отступа (90 пикселов).

Сохраним все исправленные файлы, но пока не будем запускать приложение, поскольку оно ещё далеко не закончено. Нам предстоит сделать довольно много...


2. Панели инструментов Metro
Прежде всего, нам следует расположить на экране кнопки, которые будут запускать операции создания нового документа, открытия существующего файла и сохранения набранного текста в новом файле. Сделать это можно двумя способами.

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

Однако здесь мы столкнёмся с той самой простотой, что хуже воровства. Дело в том, что данные кнопки будут нужны пользователю только время от времени, и весьма нечасто; остальное же время они будут просто присутствовать на экране, попусту занимая его площадь.

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

Платформа Metro предоставляет нам особые элементы управления, служащие именно для размещения на экране кнопок и позволяющие их скрывать, пока в них не возникнет нужда. Это панели инструментов Metro. Именно их мы и используем в нашем простеньком текстовом редакторе.

Панели инструментов по умолчанию скрыты. Чтобы вывести их на экран, достаточно либо "вытянуть" их из-за края экрана, либо щёлкнуть правой кнопкой мыши на любом месте экрана, не занятом элементами интерфейса.

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


2.1. Элементы управления HTML и элементы управления Metro
Все элементы управления, что мы можем использовать в Metro-приложениях, написанных с применением "связки" HTML+CSS+JavaScript, можно разделить на две группы.

  • Элементы управления HTML предоставляются самим языком HTML. Они формируются с помощью особых тегов (так, кнопки, флажки, переключатели и поля ввода создаются с помощью тега <input>, списки - тега <select>, а области редактирования - тега <textarea>) и не требуют для нормального функционирования никакого дополнительного кода. Это простейшие элементы управления, выполняющие элементарные задачи.
  • Элементы управления Metro являются комбинацией более простых элементов интерфейса (блоков, встроенных контейнеров, элементов управления HTML); их функциональность обеспечивается базовой логикой Metro. Это более сложные элементы управления, не поддерживаемые языком HTML, - панели инструментов, списки, всплывающие элементы и др.


Все элементы управления Metro, в том числе и панели инструментов, создаются особым образом. Каким - мы сейчас выясним.

2.1.1. Создание элементов управления Metro
Все элементы управления Metro создаются в три этапа.

На первом этапе в то место, где должен присутствовать элемент Metro, вставляется "заготовка", на основе которого он будет создан, или элемент-основа. Этой "заготовкой" служит обычный блок — тег <div>.

Кстати, поскольку все элементы управления Metro создаются на основе блока, то все они являются блочными элементами. В этом одно из ключевых отличий элементов управления Metro от их "коллег", предоставляемых языком HTML, - эти элементы управления, как мы уже знаем, являются встроенными.

На втором этапе в тег <div> помещается атрибут data-win-control. В качестве значения данного атрибута тега указывается имя объекта, который представляет нужный нам элемент управления.

На третьем, необязательном этапе, задаются параметры создаваемого элемента управления, фактически — значения свойств экземпляра объекта, что его представляет. Они указываются в качестве значения атрибута тега data-win-options.

Параметры элемента задаются в виде пар <имя свойства>: <значение>; строковые значения при этом берутся не в двойные, а в одинарные кавычки. Весь набор пар, задающих свойства элемента, берётся в фигурные скобки; сами пары отделяются друг от друга запятыми.

Вот пример кода, создающего элемент управления Metro - панель инструментов:

<div id="divAppBar" data-win-control="WinJS.UI.AppBar"
data-win-options="{placement: 'top'}"></div>


Как видим, панель инструментов Metro представляет собой экземпляр объекта WinJS.UI.AppBar. Дополнительно мы задали для неё местоположение вверху экрана, присвоив свойству placement строковое значение top.

2.1.2. Инициализация элементов управления Metro
Что ж, основы для элементов управления Metro мы создали. Теперь нам нужно выполнить их инициализацию, в процессе которой Metro собственно сформирует эти элементы и подготовит их к работе.

Откроем файл default.js, отыщем обработчик события DOMContentLoaded или создадим его, если ещё не сделали этого. И вставим в самое его начало вызов метода processAll объекта WinJS.UI без параметров - он-то и выполнит инициализацию.

document.addEventListener("DOMContentLoaded", function() {
  WinJS.UI.processAll();
  . . .
});


Объект WinJS.UI содержит набор служебных методов, которыми мы будем часто пользоваться в дальнейшем. Единственный экземпляр этого объекта создаётся самой платформой Metro и хранится в переменной WinJS.UI.

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

2.1.3. Обязательства. Асинхронное программирование
Проблема в том, что метод processAll объекта WinJS.UI не выполняет инициализацию элементов управления Metro, а только запускает этот процесс. То есть инициализация будет продолжаться и после того, как данный метод завершит свою работу, и начнут выполняться выражения, следующие за его вызовом. И здесь могут возникнуть проблемы...

Предположим, что мы поставили сразу после вызова метода processAll выражения, получающие доступ к элементам управления Metro и задающие их параметры. (Кстати, доступ к таким элементам управления тоже следует получать особым образом, о чём вскоре и пойдёт речь.) Метод processAll запустит инициализацию элементов, после чего вернёт управление, и начнут выполняться выражения, следующие за ним. Тогда, если инициализация ещё не закончена, эти выражения могут быть выполнены некорректно или вообще вызвать ошибку времени выполнения. И наши кропотливо созданные элементы управления Metro не будут работать, как мы хотим.

В идеале, нам следует выполнить эти выражения только после того, как закончится инициализация. Но как это сделать? Как отследить момент, когда инициализация будет закончена?

Дело в том, что метод processAll возвращает результат. Этим результатом является обязательство (promise) - экземпляр объекта WinJS.Promise, хранящий сведения об операции, запущенной данным методом и выполняемой в данный момент, то есть инициализации элементов управления Metro.

var oP = WinJS.UI.processAll();


C помощью обязательства мы можем без проблем отследить момент, когда запущенная операция закончится. И в этом нам поможет метод then, поддерживаемый объектом WinJS.Promise.

<обязательство>.then(
  <функция завершения>[,
  <функция ошибки>[,
  <функция прогресса>]]
)


<функция прогресса>]]
)[/code]
Как видим, метод then принимает три параметра - три функции. Рассмотрим их.

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

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

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

Функция завершения — единственный обязательный параметр метода then. Функции ошибки и прогресса указывать необязательно.

[code]document.addEventListener("DOMContentLoaded", function() {
WinJS.UI.processAll().then(function() {
. . .
});
});[/code]
Здесь мы выполнили операцию инициализации элементов управления Metro, как требуют правила Metro-программирования. Все выражения, получающие доступ к элементам управления Metro и задающие их параметры, должны находиться в теле функции, переданной методу then обязательства в качестве первого параметра, то есть функции завершения.

Здесь мы столкнулись с концепцией асинхронного программирования, активно применяемой в разработке Metro-приложений. Она заключается в том, что все длительные операции, в том числе и требующие какой-либо реакции пользователя, по возможности выполняются в фоновом режиме. Благодаря этому Metro-приложение в любом случае остаётся отзывчивым на действия пользователя.

Запомним всё, что было сказано в этом параграфе. Впоследствии мы будем сталкиваться с методами, возвращающими обязательства, очень и очень часто.

2.1.4. Получение доступа к элементам управления Metro
Чтобы получить возможность обращаться к элементу интерфейса из кода логики, мы сначала должны получить экземпляр объекта, представляющий этот элемент. Или, иными словами, получить к нему доступ.

Как получить доступ к элементам интерфейса, мы уже знаем.

[code]var divAppBar = document.getElementById("divAppBar");[/code]
Однако в этом случае мы получим доступ не к элементу управления Metro, а к его элементу-основе - блоку. Чтобы добраться до элемента управления Metro, созданного на основе этого элемента, нам придётся воспользоваться свойством winControl экземпляра объекта, представляющего этот элемент-основу.

[code]var ctrAppBar = document.getElementById("divAppBar").winControl;[/code]
Вот теперь мы получим в переменной ctrAppBar экземпляр объекта WinJS.UI.AppBar, представляющий созданную нами панель инструментов.


2.2. Создание панелей инструментов
Что ж, можно приступать к собственно созданию панелей инструментов.

2.2.1 Создание самих панелей инструментов
Сначала нам следует создать саму панель инструментов. Она представляется объектом WinJS.UI.AppBar, чьё имя мы укажем в качестве значения атрибута data-win-control тега <div>, создающего элемент-основу. Собственно, это мы уже знаем.

[code]<div id="divAppBar" data-win-control="WinJS.UI.AppBar"></div>[/code]
HTML-код, создающий панель инструментов, может находиться в любом месте кода интерфейса. Панель инструментов — элемент достаточно "умный", он сам займёт место на экране, которое мы для него укажем.

Объект WinJS.UI.AppBar поддерживает ряд свойств, которые помогут нам задать местоположение и поведение панели инструментов.

Свойство placement позволяет задать местоположение панели инструментов. Оно принимает в качестве значения две предопределенные строки: top (панель инструментов находится в верхней части экрана) и bottom (в нижней части экрана; поведение по умолчанию).

[code]<div id="divTopAppBar" data-win-control="WinJS.UI.AppBar"
data-win-options="{placement: 'top'}"></div>[/code]
Создаем верхнюю панель инструментов.

Свойство sticky включает или отключает автоматическое скрытие панели инструментов по истечении определённого промежутка времени. Значение true отключает автоматическое скрытие, а значение false — включает (поведение по умолчанию).

Свойство disabled позволяет сделать панель инструментов недоступной для ввода, для чего ему достаточно присвоить значение true. А значение false этого свойства делает панель инструментов доступной для ввода (поведение по умолчанию).

2.2.2. Создание обычных кнопок
На втором этапе в панелях инструментов формируются кнопки. Они являются особыми элементами управления Metro и представляются объектом WinJS.UI.AppBarCommand. Создаются эти кнопки с помощью знакомых нам тегов <button>, которые помещаются в тег <div>, формирующий элемент-основу.

[code]<div id="divAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"></button>
</div>[/code]
Внимание!
В обычных панелях инструментов Metro могут присутствовать только кнопки, представляемые объектом WinJS.UI.AppBarCommand. Если же нам требуется поместить в панель инструментов другие элементы интерфейса, мы создадим универсальную панель; как это делается, будет рассказано потом.

Для каждой кнопки мы укажем параметры, воспользовавшись специально предназначенными для этого свойствами объекта WinJS.UI.AppBarCommand.

Свойство id служит для указания имени кнопки, а свойство label - её надписи. Значения обоих этих свойств указывается в виде строк.

Свойство icon задаёт графическое обозначение, или глиф, для кнопки. В качестве его значения указывается строка, обозначающая один из предопределённых глифов; этих глифов очень много, и среди которых легко найти подходящий. Список всех поддерживаемых платформой Metro глифов и соответствующих им обозначений приведен на этой веб-странице.

Свойство tooltip позволяет задать для кнопки текст всплывающей подсказки. Если таковой не указан, во всплывающей подсказке будет выводиться текст надписи.

Свойство section указывает секцию панели инструментов, в которой будет находиться данная кнопка. Таких секций платформа Metro предусматривает две:

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


Значение свойства selection указывается в виде одной из строк: section (поместить кнопку в левую секцию) или global (в правую).

Также кнопка панели инструментов поддерживает уже знакомое нам свойство disabled.

[code]<div id="divAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id: 'btnPlay', label: 'Пуск', icon: 'play', section: 'selection', tooltip: 'Воспроизведение', disabled: true}"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id: 'btnStop', label: 'Стоп', icon: 'stop', section: 'selection', tooltip: 'Стоп', disabled: true}"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id: 'btnOpen', label: 'Открыть', icon: 'openfile', section: 'global', tooltip: 'Открыть'}"></button>
</div>[/code]
Создаём для гипотетического приложения проигрывателя панель инструментов с тремя кнопками: Пуск, Стоп и Открыть. Первые две кнопки будут включены в состав левой секции панели инструментов, а третья — в состав правой.

2.2.3. Создание кнопок-выключателей
Ещё платформа Metro позволяет нам создать в панели инструментов так называемые кнопки-выключатели. Такая кнопка при первом нажатии на неё активизирует определённую функцию (или, как ещё говорят, включается), а при втором нажатии — деактивирует (выключается). В качестве кнопки-выключателя можно выполнить, скажем, кнопку приглушения звука в приложении проигрывателя.

Объект WinJS.UI.AppBarCommand, представляющий кнопку панели инструментов, поддерживает свойство type. Значение этого свойства задается в виде одной из предопределённых строк. По умолчанию данное свойство имеет значение button, предписывающее Metro создать обычную кнопку. Чтобы создать кнопку-выключатель, достаточно задать этому свойству значение toggle.

Свойство selected кнопки хранит логическое значение true, если кнопка-выключатель включена, и false, если она выключена. Значение этого свойства по умолчанию — false.

[code]<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id: 'btnMute', label: 'Тихо!', icon: 'mute', section: 'global', tooltip: 'Тихий режим', type: 'toggle'}"></button>[/code]
Создаем кнопку-выключатель Тихо!.

2.2.4. Создание разделителей
Также мы можем стандартными средствами отделить визуально одну кнопку на панели инструментов от другой, вставив между ними разделитель. Такой разделитель выглядит как тонкая вертикальная линия.

Разделитель Metro представляется тем же объектом, что и кнопка, — WinJS.UI.AppBarCommand. Однако создаётся он с помощью одинарного тега <hr>, а его свойство type должно иметь строковое значение separator.

[code]<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global' . . .}"></button>
<hr data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{type: 'separator', section: 'global'}" />
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global' . . .}"></button>[/code]
Создаём разделитель между двумя кнопками.

2.2.5. Создание универсальных панелей инструментов
Ранее мы заметили, что обычные панели инструментов Metro могут содержать только кнопки, представляемые объектом WinJS.UI.AppBarCommand. В большинстве случаев этого хватает. Но что делать, если нам потребуется поместить в панель инструментов, скажем, регулятор?

Создать универсальную панель инструментов. Такие панели могут содержать любые элементы интерфейса: блоки, абзацы, поля ввода, списки, обычные кнопки, регуляторы и др. Но, к сожалению, кнопки, что представляются объектом WinJS.UI.AppBarCommand, вставить в такие панели нельзя — они не будут работать. Так что или — или...

Объект WinJS.UI.AppBar, представляющий панель инструментов, поддерживает свойство layout. Значение этого свойства должно представлять собой одну из двух предопределённых строк:

  • commands — создаёт обычную панель инструментов, способную содержать только кнопки (значение по умолчанию);
  • custom — создаёт универсальную панель инструментов.


[code]<div id="divTopAppBar" data-win-control="WinJS.UI.AppBar"
data-win-options={layout: 'custom', position: 'top'}>
<input type="range" id="sldRange" />
</div>[/code]
Создаём универсальную панель инструментов, содержащую регулятор (формируется тегом <input>, для атрибута type которого задано значение range).

2.2.6. Работа с панелями инструментов и кнопками
А теперь рассмотрим несколько полезных для нас свойств, методов и событий объекта WinJS.UI.AppBar.

Метод getCommandById принимает в качестве параметра строку, содержащую имя кнопки, и возвращает экземпляр объекта WinJS.UI.AppBarCommand, представляющий эту кнопку, или null, если кнопки с таким именем в панели инструментов нет.

[code]var ctrAppBar = document.getElementById("divAppBar").winControl;
var btnPlay = ctrAppbar.getCommandById("btnPlay");
btnPlay.addEventListener("click", function() { . . . });[/code]
Получаем кнопку Пуск и привязываем к ней обработчик события.

Метод show выводит панель инструментов на экран, а метод hide её скрывает. Оба метода не принимают параметров и не возвращают результата.

[code]ctrAppBar.show();[/code]
Свойство hidden возвращает true, если панель инструментов скрыта, и false, если она выведена на экран.

[code]if (ctrAppBar.hidden) {
//Панель инструментов скрыта
}[/code]
Метод showCommands выводит на экран указанные кнопки.

[code]<панель инструментов>.showCommands(<выводимые кнопки>)[/code]
В качестве параметра передаётся массив кнопок, которые следует вывести на экран. В этот массив могут входить как строки с именами кнопок, так и экземпляры объекта WinJS.UI.AppBarCommand, представляющие эти кнопки.

Метод showCommands не возвращает результата.

[code]ctrAppBar.showCommands([btnPlay, "btnStop"]);[/code]
Выводим на экран кнопки Пуск и Стоп. Отметим, что для кнопки Пуск мы указали экземпляр объекта, что её представляет, а для кнопки Стоп — её имя в виде строки.

Метод hideCommands, напротив, скрывает указанные нами кнопки. Он принимает те же параметры, что и метод showCommands, и также не возвращает результата.

[code]ctrAppBar.hideCommands(["btnStop"]);[/code]
Скрываем кнопку Стоп.

Метод showOnlyCommands выводит на экран указанные кнопки и скрывает все остальные. Вызывается он так же, как и метод showCommands.

[code]ctrAppBar.showOnlyCommands(["btnOpen"]);[/code]
Выводим кнопку Открыть и скрываем все остальные кнопки.

Теперь поговорим о событиях панели инструментов. Их четыре:

  • beforeshow — возникает перед выводом панели инструментов на экран;
  • aftershow — возникает после вывода панели инструментов на экран;
  • beforehide — возникает перед скрытием панели инструментов;
  • afterhide — возникает после скрытия панели инструментов.


[code]ctrAppBar.addEventListener("beforeshow", function() { . . . });[/code]
Теперь мы можем выполнить какие-либо действия перед выводом панели инструментов на экран.

Объект WinJS.UI.AppBarCommand, представляющий кнопку, также поддерживает свойство hidden.

2.2.7. Создаём панель инструментов для нашего приложения
Теперь мы можем создать для нашего приложения панель инструментов.

Переключимся на файл default.html и вставим куда-либо в тег <body> следующий код:

[code]<div id="divAppBar" data-win-control="WinJS.UI.AppBar"
data-win-options="{placement: 'top'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id: 'btnNew', label: 'Создать', icon: 'document', section: 'global'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id: 'btnOpen', label: 'Открыть', icon: 'openfile', section: 'global'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id: 'btnSave', label: 'Сохранить', icon: 'savelocal', section: 'global'}"></button>
</div>[/code]
Созданная нами панель инструментов будет находиться вверху и включать кнопки Создать, Открыть и Сохранить.

Переключимся на файл default.js и сразу же добавим код, объявляющий необходимую переменную:

[code]var txtEdit;[/code]
Эта переменная будет хранить область редактирования.

Напишем код инициализации приложения:

[code]document.addEventListener("DOMContentLoaded", function() {
WinJS.UI.processAll().then(function() {
txtEdit = document.getElementById("txtEdit");
var ctrAppBar = document.getElementById("divAppBar").winControl;
var btnNew = ctrAppBar.getCommandById("btnNew");
var btnOpen = ctrAppBar.getCommandById("btnOpen");
var btnSave = ctrAppBar.getCommandById("btnSave");
btnNew.addEventListener("click", btnNewClick);
btnOpen.addEventListener("click", btnOpenClick);
btnSave.addEventListener("click", btnSaveClick);
});
});[/code]
Здесь мы выполняем инициализацию всех элементов управления Metro, получаем доступ к кнопкам панели инструментов и привязываем к ним обработчики событий.

Сразу же реализуем создание нового текстового документа:

[code]function btnNewClick() {
txtEdit.value = "";
}[/code]
Для этого достаточно просто очистить область редактирования.


Дополнительные материалы


Окончание следует...

dronov_va, TheVista.Ru Team
Май 2012

Комментарии

Комментариев нет...
Для возможности комментировать войдите в 1 клик через

По теме

Акции MSFT
420.55 0.00
Акции торгуются с 17:30 до 00:00 по Москве
Все права принадлежат © ms insider @thevista.ru, 2022
Сайт является источником уникальной информации о семействе операционных систем Windows и других продуктах Microsoft. Перепечатка материалов возможна только с разрешения редакции.
Работает на WMS 2.34 (Страница создана за 0.061 секунд (Общее время SQL: 0.034 секунд - SQL запросов: 51 - Среднее время SQL: 0.00066 секунд))
Top.Mail.Ru