Шаг 4. Восстановление состояния приложения

Мы почти воссоздали функциональность приложения "Hello, world". Теперь необходимо только восстановить состояние приложения, когда пользователь запускает его.

Возможно, вы помните, что восстанавливаются два типа состояния приложения:

• имя пользователя и оценка. Мы восстанавливаем это состояние независимо от способа завершения работы приложения.
• Персональное приветствие. Это состояние восстанавливается, только если в прошлый раз работа приложения была успешно завершена.

Восстановление состояния приложения

1. Скопируйте код из приложения "Hello, world", который восстанавливает имя пользователя и оценку. Добавьте код в функцию ready в home.js.
   JavaScript

    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {
    // TODO: Initialize the page here.
   
    // Retrieve the div that hosts the Rating control.
    var ratingControlDiv = document.getElementById("ratingControlDiv");
   
    // Retrieve the actual Rating control.
    var ratingControl = ratingControlDiv.winControl;
   
    // Register the event handler. 
    ratingControl.addEventListener("change", this.ratingChanged, false);
   
    // Retrieve the button and register our event handler. 
    var helloButton = document.getElementById("helloButton");
    helloButton.addEventListener("click", this.buttonClickHandler, false);
   
    // Retrieve the input element and register our
    // event handler.
    var nameInput = document.getElementById("nameInput");
    nameInput.addEventListener("change", this.nameInputChanged);
   
    // Restore app data. 
    var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
   
    // Restore the user name.
    var userName =
    Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
    if (userName) {
    nameInput.value = userName;
    }
   
    // Restore the rating. 
    var greetingRating = roamingSettings.values["greetingRating"];
    if (greetingRating) {
    ratingControl.userRating = greetingRating;
    var ratingOutput = document.getElementById("ratingOutput");
    ratingOutput.innerText = greetingRating;
    }
   
    },
   
   

2. Мы восстановим персональное приветствие, только если в прошлый раз работа приложения была успешно завершена. К сожалению, объект PageControl не предусматривает встроенного способа для проверки предыдущего состояния выполнения приложения: эти данные передаются обработчику событий onactivated в файле default.js. Но эту проблему легко решить: нужно лишь сохранить предыдущее состояние выполнения приложения в объекте sessionState, чтобы эта информация стала доступной для объекта PageControl.
   1. В файле default.js добавьте код в обработчик onactivated, чтобы сохранить предыдущее состояние выполнения. Сохраните состояние, добавив свойство в объект sessionState с именем previousExecutionState.
      JavaScript

       app.addEventListener("activated", function (args) {
       if (args.detail.kind === activation.ActivationKind.launch) {
       if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
       // TODO: This application has been newly launched. Initialize
       // your application here.
       } else {
       // TODO: This application has been reactivated from suspension.
       // Restore application state here.
       }
      
       // Save the previous execution state. 
       WinJS.Application.sessionState.previousExecutionState = 
       args.detail.previousExecutionState;
      
       if (app.sessionState.history) {
       nav.history = app.sessionState.history;
       }
       args.setPromise(WinJS.UI.processAll().then(function () {
       if (nav.location) {
       nav.history.current.initialPlaceholder = true;
       return nav.navigate(nav.location, nav.state);
       } else {
       return nav.navigate(Application.navigator.home);
       }
       }));
       }
       });
      
      

   2. В файле home.js добавьте код в метод ready, который проверяет данные previousExecutionState. Если предыдущее состояние выполнения — terminated, восстановите персональное приветствие (можно скопировать код, выполняющий это действие, из файла default.js в приложении "Hello, world").
      JavaScript

       // If the app was terminated last time it ran, restore the personalized
       // greeting. 
       if (
       WinJS.Application.sessionState.previousExecutionState
       === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
       var outputValue = WinJS.Application.sessionState.greetingOutput;
       if (outputValue) {
       var greetingOutput = document.getElementById("greetingOutput");
       greetingOutput.innerText = outputValue;
       }
      
       }
      
      

      Далее приведен полный метод ready.

      JavaScript

       // This function is called whenever a user navigates to this page. It
       // populates the page elements with the app's data.
       ready: function (element, options) {
       // TODO: Initialize the page here.
      
       // Retrieve the div that hosts the Rating control.
       var ratingControlDiv = document.getElementById("ratingControlDiv");
      
       // Retrieve the actual Rating control.
       var ratingControl = ratingControlDiv.winControl;
      
       // Register the event handler. 
       ratingControl.addEventListener("change", this.ratingChanged, false);
      
       // Retrieve the button and register our event handler. 
       var helloButton = document.getElementById("helloButton");
       helloButton.addEventListener("click", this.buttonClickHandler, false);
      
       // Retrieve the input element and register our
       // event handler.
       var nameInput = document.getElementById("nameInput");
       nameInput.addEventListener("change", this.nameInputChanged);
      
       // Restore app data. 
       var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
      
       // Restore the user name.
       var userName =
       Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
       if (userName) {
       nameInput.value = userName;
       }
      
       // Restore the rating. 
       var greetingRating = roamingSettings.values["greetingRating"];
       if (greetingRating) {
       ratingControl.userRating = greetingRating;
       var ratingOutput = document.getElementById("ratingOutput");
       ratingOutput.innerText = greetingRating;
       }
      
       // If the app was terminated last time it ran, restore the personalized
       // greeting. 
       if (
       WinJS.Application.sessionState.previousExecutionState
       === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
       var outputValue = WinJS.Application.sessionState.greetingOutput;
       if (outputValue) {
       var greetingOutput = document.getElementById("greetingOutput");
       greetingOutput.innerText = outputValue;
       }
      
       }
      
       },
      
      

3. Запустите приложение. Мы скопировали функциональность исходного приложения "Hello, world".

Шаг 5. Добавление еще одной страницы

Большая часть приложений содержит несколько страниц. Добавим в приложение еще одну страницу. Использование шаблона Приложение навигации упрощает добавление дополнительных страниц.

Добавление еще одной страницы

1. В обозревателе решений щелкните правой кнопкой мыши папку pages и выберите Add > New Folder (Добавить > Создать папку). В проекте появится новая папка.
2. Измените имя папки на "page2".
3. Щелкните правой кнопкой мыши папку page2, а затем выберите Add > New Item... (Добавить > Создать элемент...). Откроется диалоговое окно Add New Item (Добавление нового элемента).

4. Выберите в списке PageControl. В текстовое поле Name (Имя) введите "page2.html".

5. Чтобы добавить PageControl, нажмите кнопку Add (Добавить). Новый объект PageControl появится в обозревателе решений.

   

   Новый объект PageControl имеет три файла: page2.css, page2.html и page2.js.

6. В вашем файле page2.html поменяйте ссылку на таблицу темных стилей
   HTML

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
   
   
   

   на следующую:

   HTML

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
   
   
   

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