Adding persistent data to applications - Build Windows 8 Apps with HTML5 and JavaScript - page 244

The click handler for the New button is fairly straightforward: it just creates a blank new Task
object and displays through the helper method displayTask . The click handler for the Open button is a
bit more elaborate since it is connected to a File Open Picker that locates and selects the file to open.
Locating the file to open
The code for the TodoList.pickFileAndOpenTask method is similar to the code you used earlier for the
File Save Picker. This time you configure the picker object to select files with a .todo extension. This
function must be added to the todolist.js file as well:
TodoList.pickFileAndOpenTask = function () {
var currentState = Windows.UI.ViewManagement.ApplicationView.value;
if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
!Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
// Fail silently if we can't unsnap
return;
}
TodoList.invokeOpenPicker();
}
The code first ensures that the application is not in a snapped state and then invokes another
helper function that deals with the File Open Picker. Note that file pickers can only be used in filled
or full screen and can't be invoked from snapped applications and from flyouts, including settings
flyouts. Here's the code for the helper function TodoList.invokeOpenPicker :
TodoList.invokeOpenPicker = function () {
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.
computerFolder;
openPicker.fileTypeFilter.replaceAll([".todo"]);
openPicker.pickSingleFileAsync().then(function (file) {
if (file) {
// Do something with the selected .todo file
}
});
}
Once the user has picked up a .todo file, the code should read the entire content and try to build a
Task object out of it. As mentioned, the .todo file is a file that contains JSON-formatted text resulting
from the previous serialization of a Task object.