Краткое руководство: создание нескольких окон для приложения (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

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

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

Приложение “Почта” с двумя открытыми окнами

При помощи этого краткого руководства вы научитесь:

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

Это версия краткого руководства для JavaScript. Версию для C# с XAML см. в разделе Краткое руководство: создание нескольких окон для приложения (XAML).

Создание нескольких окон для приложения отличается от проецирования отдельного окна на другой экран только для просмотра, но не для взаимодействия. Дополнительные сведения о проецировании окна см. в разделе Руководство по диспетчеру проекции.

Необходимые условия

Если у вас не установлены Microsoft Visual Studio 2013 и Windows 8.1, скачайте их из раздела Скачиваемые файлы.
Предполагается, что вы умеете создавать простые приложения Магазина Windows на JavaScript. Дополнительные сведения о создании первого приложения см. в разделе Создание первого приложения Магазина Windows на JavaScript.
Просмотрите рекомендации по проектированию приложений с поддержкой нескольких окон.

Создание вспомогательной страницы

В обозревателе решений откройте контекстное меню узла проекта и выберите пункты Добавить > Создать элемент.
В диалоговом окне Добавление нового элемента выберите пункт Элемент управления страницей на центральной панели.
В поле Имя введите название страницы, например secondaryView, и нажмите кнопку Добавить.
Добавьте элементы пользовательского интерфейса и функции для вспомогательной страницы. Дополнительные сведения см. в разделах Создание макета пользовательского интерфейса и Руководство по поддержке нескольких окон.

Создание нового представления

Создайте новый поток и новое окно для этого потока, вызвав метод MSApp.createNewView. Совокупность потока и окна называется представлением. Другие объекты, которые вы создаете в этом представлении, такие как элементы пользовательского интерфейса, привязываются к этому потоку.

Первое представление, создаваемое при запуске приложения, называется главным. Если окно главного представления закрывается, работа приложения завершается.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");

Этот код автоматически загружает указанную страницу secondaryView в новом окне.

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

newView.postMessage({ myState: 'My important state'}, thisOrigin);

Отображение нового окна

Создав новое представление (совокупность потока и окна), вы можете отобразить новое окно при помощи метода ApplicationViewSwitcher.TryShowAsStandaloneAsync. Параметр viewId в методе TryShowAsStandaloneAsync представляет собой целое число, уникальным образом идентифицирующее каждое представление в приложении. Для извлечения идентификатора представления используйте ApplicationView.Id или ApplicationView.GetApplicationViewIdForWindow.

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");
newView.postMessage({ myState: 'My important state' }, thisOrigin);
Windows.UI.ViewManagement.ApplicationViewSwitcher.tryShowAsStandaloneAsync(newView.viewId).done(function (viewShown) {

});

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

Переключение между окнами

Необходимо предоставить пользователю возможность вернуться в главное окно из вторичного. Для этого используйте метод ApplicationViewSwitcher.SwitchAsync. Вызовите этот метод из потока окна, из которого вы переключаетесь, и передайте идентификатор представления окна, на которое вы переключаетесь.

Windows.UI.ViewManagement.ApplicationViewSwitcher.SwitchAsync(viewIdToShow).done();

В приложении "Почта" кнопка "Назад" во вторичном окне вызывает метод SwitchAsync. Приложение "Почта" также использует метод SwitchAsync, когда пользователь отправляет или удаляет сообщение, содержащееся во вторичном окне. Приложение "Почта" заменяет вторичное окно главным окном сообщения.

Используя SwitchAsync, можно определить, следует ли закрыть начальное окно и удалить его из списка последних использованных приложений, указав значение ApplicationViewSwitchingOptions.

Закрытие нового окна

После отображения вторичного окна оно остается в списке последних использованных приложений, пока пользователь не запустит достаточное число других приложений. Тогда вторичное окно будет удалено из списка. Событие consolidated event возникает, когда окно удаляется из списка последних использованных приложений, при условии, что в списке остается еще хотя бы одно окно приложения. Поскольку каждое окно расходует ресурсы памяти, рекомендуется закрыть окно, когда оно выйдет из списка.

Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("consolidated", viewConsolidated, false);

function viewConsolidated(e) {
    if (!isMainView) {
        window.close();
    }
}

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

Краткая сводка и дальнейшие действия

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

Информацию об использовании диспетчера проекции для проецирования отдельного окна приложения на другой экран см. в разделе Руководство по диспетчеру проекции.

Связанные разделы

Руководство по поддержке нескольких окон

Руководство по диспетчеру проекции

Гибкое оформление 101 для приложений универсальной платформы Windows (UWP)

Пример нескольких представлений

Поделиться через