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

Заканчиваем создавать наше второе по счёту Metro-приложение - простейший текстовый редактор.


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


3.1. Реализация выбора файла для открытия
Пользователь выбирает файл, который требуется открыть, с помощью стандартного экрана открытия файла Metro. Этот экран выводится поверх интерфейса приложения, перекрывая его, и содержит список файлов, хранящихся в текущей папке, средства для выбора нужной папки и кнопки Открыть (Open) и Отмена (Cancel).

3.1.1. Подготовка экрана открытия файла к выводу
Экран открытия файла в платформе Metro представляется объектом Window.Storage.Pickers.FileOpenPicker. Нам потребуется явно создать экземпляр этого объекта с помощью оператора new и сразу же присвоить его какой-либо переменной.

var oFOP = new Windows.Storage.Pickers.FileOpenPicker();

Далее мы зададим для экрана открытия файла нужные параметры. Для этого используется набор особых свойств, поддерживаемых объектом Window.Storage.Pickers.FileOpenPicker.

Свойство suggestedStartLocation позволяет указать, какая системная папка или библиотека Windows 8 должна быть изначально открыта в этом экране (станет текущей). В качестве значения этого свойства следует использовать один из следующих элементов перечисления Windows.Storage.Pickers.PickerLocationId:

• documentsLibrary — библиотека Документы;
• computerFolder — системная папка Компьютер;
• desktop — системная папка Рабочий стол;
• downloads — системная папка Загрузки;
• homeGroup — системная папка Домашняя сетевая группа;
• musicLibrary — библиотека Музыка;
• picturesLibrary — библиотека Изображения;
• videosLibrary — библиотека Видео.

oFOP.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;

Изначально открываем в данном экране библиотеку Документы.

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

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

oFOP.fileTypeFilter.replaceAll([".txt", ".ini", ".inf"]);

Указываем для нашего экрана открытия файла допустимые расширения txt, ini и inf.

Свойство viewMode позволяет указать, в каком виде в экране открытия файла будут перечислены позиции, соответствующие отдельным файлам. Значение этого свойства указывается в виде одного из элементов перечисления Windows.Storage.Pickers.PickerViewMode:

• list — каждая позиция будет содержать миниатюру и имя файла;
• thumbnail — каждая позиция будет содержать только миниатюру файла.

oFOP.viewMode = Windows.Storage.Pickers.PickerViewMode.list;

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

Свойство commitButtonText позволяет указать надпись для кнопки открытия файла. Надпись должна быть задана в виде строки. По умолчанию эта кнопка имеет надпись "Открыть" ("Open").

oFOP.commitButtonText = "Загрузить текст";

ot;;[/code]
3.1.2. Вывод экрана открытия файла и получение выбранного в нём файла
Подготовив экран открытия файла, мы можем вывести его на экран и получить файл, который пользователь в нём выбрал. Для этого применяются два метода объекта Window.Storage.Pickers.FileOpenPicker, которые мы сейчас рассмотрим.

Метод pickSingleFileAsync выводит экран и даёт возможность пользователю выбрать в нём один файл. Этот метод не принимает параметров и возвращает в качестве результата обязательство. Для этого обязательства мы с помощью метода then зададим функцию, которая будет выполнена после того, как пользователь выберет файл. В качестве единственного параметра данная функция получит:

• экземпляр объекта Windows.Storage.StorageFile, если пользователь выбрал какой-либо файл и нажал кнопку Открыть (Open);
• значение null, если пользователь отказался от выбора файла, нажав кнопку Отмена (Cancel).

Объект Windows.Storage.StorageFile представляет в платформе Metro файл.

[code]oFOP.pickSingleFileAsync().then(function(file) {
if (file) {
//Файл был выбран
} else {
//Файл не был выбран
}
});[/code]
Чтобы проверить, был ли выбран файл, мы используем условное выражение, в качестве условия которого подставим полученный функцией параметр. Если он представляет собой экземпляр объекта, платформа Metro автоматически преобразует его в значение true, и условие выполнится. Если же он представляет собой null, данное значение будет преобразовано в false, и условие не выполнится.

Метод pickMultipleFilesAsync выводит экран и позволяет пользователю выбрать в нём сразу несколько файлов. Этот метод также не принимает параметров и также возвращает в качестве результата обязательство. В качестве единственного параметра функция, которую мы укажем для этого обязательства с помощью метода then, получит экземпляр объекта-коллекции, хранящего список всех выбранных пользователем файлов.

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

Отметим, что, даже если пользователь не выбрал в диалоге ни одного файла, функция все равно получит экземпляр этого объекта-коллекции. Просто в данном случае он не будет содержать файлов, и его свойство size будет хранить значение 0.

[code]var arrFiles = [];
oFOP.pickMultipleFileAsync().then(function(files) {
if (files.size > 0) {
for (var i = 0; i < files.size; i++) {
arrFiles.push(files);
}
}
});[/code]
Получаем список всех выбранных пользователем файлов и помещаем их в массив arrFiles. (Метод push помещает переданный ему в качестве единственного параметра в массив, у которого был вызван.)


3.2. Реализация выбора файла для сохранения
Для выбора файла, в котором требуется сохранить какие-либо данные, платформа Metro предоставляет другой стандартный экран - экран сохранения файла. Он также выводится поверх интерфейса приложения, перекрывая его, и содержит список файлов, уже присутствующий в текущей папке, средства для выбора нужной папки, поле ввода имени файла, список доступных типов файлов и кнопки Сохранить (Save) и Отмена (Cancel).

Экран сохранения файла представляется объектом Window.Storage.Pickers.FileSavePicker. Нам следует создать экземпляр этого объекта и присвоить его переменной.

[code]var oFSP = new Windows.Storage.Pickers.FileSavePicker();[/code]
Далее мы зададим для диалога сохранения файла нужные параметры, воспользовавшись различными свойствами объекта Window.Storage.Pickers.FileSavePicker.

Свойства suggestedStartLocation и commitButtonText уже нам знакомы. Они задают, соответственно, папку, содержимое которой изначально будет выведено в экране сохранения файла, и надпись для кнопки сохранения.

[code]oFSP.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;[/code]
Свойство fileTypeChoices хранит массив расширений, которые будут перечислены в экране сохранения и которые пользователь сможет выбрать для сохраняемого файла. Но этот массив несколько иного рода, чем тот, что задаётся для экрана открытия файла. Вместе с собственно расширениями он хранит наименования соответствующих им типов файлов.

Изначально этот массив пуст, так что мы должны сразу же его заполнить. Для этого следует использовать метод insert данного массива, который добавляет в него новый элемент.

[code]<массив расширений>.insert(<наименование типа файлов>, <расширения>)[/code]
Первым параметром этому методу передаётся строка с наименованием типа файлов, а вторым — массив строк, каждая из которых хранит одно из расширений, соответствующих этому типу. Расширения должны быть указаны с начальными точками.

Результата метод insert не возвращает.

[code]oFSP.fileTypeChoices.insert("Текстовые файлы", [".txt"]);
oFSP.fileTypeChoices.insert("Служебные файлы", [".ini", ".inf"]);[/code]
Свойство defaultFileExtension служит для указания расширения файла по умолчанию; оно будет добавлено к имени файла, если пользователь не укажет расширение сам. Расширение задаётся в виде строки с начальной точкой.

[code]oFSP.defaultFileExtension = ".txt";[/code]
Свойство suggestedFileName задает имя файла, которое будет подставлено в экран сохранения изначально. Оно указывается в виде строки и не должно включать расширение.

[code]oFSP.suggestedFileName = "Новый текстовый файл";[/code]
Метод pickSaveFileAsync выполняет вывод экрана. Он не принимает параметров и возвращает в качестве результата обязательство. Для этого обязательства мы с помощью метода then зададим функцию, которая будет выполнена после того, как пользователь укажет файл, и получит в качестве единственного
параметра:

• экземпляр объекта Windows.Storage.StorageFile, если пользователь указал файл для сохранения и нажал кнопку Сохранить (Save);
• значение null, если пользователь отказался от сохранения файла, нажав кнопку Отмена (Cancel).

[code]oFSP.pickSaveFileAsync().then(function(file) {
if (file) {
//Файл был указан
} else {
//Файл не был указан
}
});[/code]

4. Чтение и запись текста
Осталось рассмотреть, как выполняется чтение текста из файлов и запись в них текста. Разговор будет совсем коротким, так как платформа Metro предоставляет для чтения и записи текстовых файлов исключительно простые средства. (Чего не скажешь о средствах для работы с двоичными файлами - они весьма мудрёные...)

Для чтения текста из файла удобно применять метод readTextAsync объекта Windows.Storage.FileIO. (Этот объект предоставляет ряд методов для чтения и записи информации.) В качестве единственного параметра он принимает файл - экземпляр объекта Windows.Storage.StorageFile, содержимое которого требуется прочитать. Этот файл мы получим от экрана открытия файла.

А возвращает этот метод обязательство, для которого мы в вызове метода then укажем функцию, что выполнится после завершения чтения файла. Эта функция получит в качестве единственного параметра строку, содержащую прочитанный из файла текст.

[code]oFOP.pickSingleFileAsync().then(function(file) {
if (file) {
Windows.Storage.FileIO.readTextAsync(file).then(function(content) {
//Что-то делаем с текстом, считанным из файла
});
}
});[/code]
Записать же текст в файл можно вызовом метода writeTextAsync всё того же объекта Windows.Storage.FileIO. Формат его вызова таков:

[code] Windows.Storage.FileIO.writeTextAsync(<файл>, <записываемый текст>)[/code]
Первым параметром передаётся файл в виде представляющего его экземпляра объекта Windows.Storage.StorageFile; этот экземпляр объекта мы можем получить от экрана сохранения файла. Вторым параметром передаётся строка, содержащая текст, который следует записать в файл.

Метод writeTextAsync возвращает в качестве результата, опять же, обязательство. Для него мы укажем в вызове метода then не принимающую параметров функцию, которая выполнится после завершения записи в файл. Эту функцию мы можем использовать для индикации того, что запись была успешно выполнена.

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

[code]oFSP.pickSaveFileAsync().then(function(file) {
if (file) {
Windows.Storage.FileIO.writeTextAsync(file, content).then(function() {
//Возможно, выполняем какие-то завершающие операции
});
}
});[/code]
Записываем в файл содержимое переменной content.


5. Реализуем в приложении чтение из файла и запись в файл
Вооружившись новыми знаниями, мы можем наконец реализовать чтение текста из файла и запись в файл набранного пользователем текста в своём приложении.

Переключимся на файл default.js и напишем объявление функции binOpenClick, которая выполнится после нажатия кнопки Открыть.

[code]function btnOpenClick() {
var oFOP = new Windows.Storage.Pickers.FileOpenPicker();
var oReadStream, oDataReader;
oFOP.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
oFOP.fileTypeFilter.replaceAll([".txt", ".ini", ".inf"]);
oFOP.viewMode = Windows.Storage.Pickers.PickerViewMode.list;
oFOP.pickSingleFileAsync().then(function(file) {
if (file) {
Windows.Storage.FileIO.readTextAsync(file).then(function(content) {
txtEdit.value = content;
});
}
});
}[/code]
Комментировать здесь абсолютно нечего - всё нам уже знакомо.

И создадим объявление функции btnSaveClick, которая будет выполнена после нажатия кнопки Сохранить.

[code]function btnSaveClick() {
var oFSP = new Windows.Storage.Pickers.FileSavePicker();
var oWriteStream, oDataWriter;
oFSP.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
oFSP.fileTypeChoices.insert("Текстовые файлы", [".txt"]);
oFSP.fileTypeChoices.insert("Служебные файлы", [".ini", ".inf"]);
oFSP.suggestedFileName = "Новый текстовый файл";
oFSP.defaultFileExtension = ".txt";
oFSP.pickSaveFileAsync().then(function(file) {
if (file) {
Windows.Storage.FileIO.writeTextAsync(file, txtEdit.value).then(function() { });
}
});
}[/code]
Здесь тоже нечего комментировать.

Сохраним все исправленные файлы и запустим приложение на выполнение. Мы увидим то, что показано на рис. 1. Попробуем открыть какой-либо файл, исправить его и сохранить, а потом — создать и сохранить новый текстовый документ.


6. Заключение
Вот мы и создали ещё одно Metro-приложение - простейший текстовый редактор. Конечно, до полноценного приложения ему ещё далеко, но ведь мы пока только учимся...


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

• Раздел веб-сайта MSDN, посвящённый Metro-программированию
• Справочник по языку HTML и объектной модели документа DOM для Metro-разработчиков
• Справочник по таблицам стилей CSS для Metro-разработчиков
• Руководство по языку JavaScript для Metro-разработчиков
• Описание объекта Windows.Storage.Pickers.FileOpenPicker
• Описание объекта Windows.Storage.Pickers.FileSavePicker
• Описание метода readTextAsync
• Описание метода writeTextAsync