Навигация в приложении

Цель работы: освоить методику организации навигации в приложениях

Организация системы навигации в приложениях

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

Приложение для Windows Phone содержит базовый элемент Microsoft.Phone.Controls.PhoneApplicationFrame (http://msdn.microsoft.com/en-us/library/windowsphone/develop/microsoft.phone.controls.phoneapplicationframe%28v=vs.105%29.aspx), так называемую рамку, которая, в свою очередь, служит контейнером для элементов Microsoft.Phone.Controls.PhoneApplicationPage (http://msdn.microsoft.com/en-us/library/windowsphone/develop/microsoft.phone.controls.phoneapplicationpage%28v=vs.105%29.aspx), то есть – для страниц приложения. Страницы, в свою очередь, могут содержать другие элементы управления, некоторые из которых служат для организации содержимого страницы, некоторые служат для отображения содержимого и организации непосредственного взаимодействия с пользователем. Элементы управления, которые отвечают за организацию содержимого страницы, это, например, System.Windows.Control.Grid, то есть – сетка для содержимого, Microsoft.Phone.Controls.Panorama – то есть элемент управления для организации панорамного просмотра данных, с общим заголовком, располагающийся на странице и содержащий элементы Microsoft.Phone.Controls.PanoramaItem. Это – элемент управления Microsoft.Phone.Controls.Pivot, который содержит элементы Microsoft.Phone.Controls.PivotItem и позволяет организовывать данные на странице, снабжая их отдельными заголовками.

Корневая рамка приложения, PhoneApplicationFrame, определяется в файле App.xaml.cs, она носит имя RootFrame, в приложении может быть только одна рамка. В свою очередь, XAML-страницы приложения – это объекты PhoneApplicationPage – их в приложении может быть столько, сколько нужно для решения задач, возложенных на него разработчиком.

Помимо обычных элементов управления, на странице можно описать так называемую панель приложения, Microsoft.Phone.Shell.ApplicationBar (http://msdn.microsoft.com/en-us/library/windowsphone/develop/microsoft.phone.shell.applicationbar%28v=vs.105%29.aspx). Уже из пространства имён панели приложения ясно, что перед нами системный объект. Поэтому и работа с ним из кода выглядит не так, как работа с обычными элементами управления. Панель приложения располагается в нижней части страницы. Фактически, это – комбинация панели инструментов и меню. "Панель инструментов" может содержать до четырех кнопок с пиктограммами для организации быстрого доступа к наиболее востребованным командам, а в меню, при необходимости, выносятся другие команды. Если на странице нужна функциональность, подобная функциональности панели инструментов и меню, желательно реализовать её именно с помощью панели приложения. Пользователи платформы Windows Phone привыкли к подобному средству взаимодействия с приложением, знают, чего от него можно ожидать, в большинстве случаев панель приложения – это наилучший выбор. Однако, не стоит забывать о том, что если в приложении, например, в графическом редакторе, нужна особая функциональность меню и панелей инструментов, не запрещено реализовывать её средствами, избранными разработчиком. Помимо команд, которые отвечают за выполнение некоторых действий, имеющих отношение к текущей странице приложения, панель приложения можно использовать и для организации перехода на другие страницы, то есть – она является одним из инструментов, который применим в навигации по страницам.

Разрабатывая систему навигации для приложения, стоит помнить о роли кнопки Назад, которая позволяет пользователю вернуться на предыдущую страницу. Не нужно создавать элементы управления, дублирующие её функциональность. Кроме того, стоит постоянно помнить о том, что приложения для Windows Phone – это приложения для мобильных устройств. Чем проще и понятнее будет система навигации по приложению, чем меньше действий пользователю придётся совершить для того, чтобы выполнить то, ради чего он запустил приложение, тем выше шансы приложения на успех. Если без некоторого экрана в вашем приложении можно обойтись – значит избавьтесь от него, сосредоточьтесь на основной задаче приложения, помните о том, что приложением могут пользоваться в условиях, когда на то, чтобы разбираться в сложной структуре его страниц, просто нет времени.

Для того, чтобы освоить задачи по организации навигации в приложениях, создадим учебное приложение, реализующее следующие возможности:

1. Обеспечение навигации по страницам приложения с помощью кнопок, кнопок-гиперссылок и команд панели приложения.
2. Обработка событий, возникающих при перемещении по страницам приложения
3. Работа со стеком навигации

Организация перемещения по страницам

Создадим проект приложения P4_1 на основе шаблона Приложение Windows Phone. Добавим в проект приложения страницу CommonPage.xaml, она будет создана по шаблону элемента Страница Windows Phone в книжной ориентации и представлять собой пример некоей обычной страницы приложения. Так же создадим в проекте папку Pages и добавим страницу Settings.xaml, которая она создана по шаблону Сводная страница Windows Phone, например, такая страница может использоваться для организации настроек приложения с помощью элемента управления Microsoft.Phone.Controls.Pivot). Добавим в приложение еще одну страницу, About.xaml, созданную по шаблону Страница Windows Phone в книжной ориентации. Будем использовать их для демонстрации организации навигации в приложении. Сейчас проект выглядит так, как показано на рис. 17.1.

увеличить изображение
Рис. 17.1. Окно проекта P4_1 после добавления нескольких страниц

На страницу MainPage.xaml добавим текстовое поле и кнопку с надписью "Вход", свойство Content кнопки установим в значение "Вход". Мы хотим реализовать здесь следующие возможности. Кнопка cmdEnter служит для перехода на страницу CommonPage, при этом переход осуществляется только тогда, когда заполнено текстовое поле. На практике подобный сценарий можно использовать, например, для создания страницы приложения, которая используется для ввода учетных данных. После нажатия на кнопку учетные данные проходят проверку, если они соответствуют, например, некоей учетной записи пользователя, осуществляется переход на следующую страницу приложения, если нет - пользователю можно показать сообщение, где говорится об ошибке ввода данных, или о другой ошибке, из-за которой данные не могут быть проверены. Например – такое возможно, если мы пытаемся подключиться к некоей онлайновой службе, а соединения с интернетом нет, либо если данные, которые ввёл пользователь, не прошли некоторую формальную проверку, например, поле, в котором должен содержаться адрес электронной почты, заполнено неверно, поле, где ожидается данные, имеющие определенную длину, состоящие из определенного набора символов (номер телефона, например), содержит данные неверного размера.

Подобную задачу можно решить несколькими способами. Можно, перехватывая событие текстового поля TextChanged, проверять введенные данные и, если они введены верно, устанавливать в True свойство кнопки IsEnabled, которое было до этого установлено в False. То есть, пользователь сможет нажать на кнопку, обработчик события Click которой содержит код для перехода на другую страницу, лишь тогда, когда данные введены верно. Можно, в обработчике события Click кнопки проверить условие правильности ввода данных (или произвести попытку авторизации в интернет-сервисе, если речь идет о приложении, которое используется для работы с сервисом, требующим авторизации). Мы поступим иначе – воспользуемся возможностью отмены навигации в том случае, если текстовое поле осталось незаполненным и выведем при этом пользователю соответствующее сообщение.

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

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

Когда пользователю разрешено перейти на следующую страницу, он не может вернуться на стартовую страницу, которая является страницей авторизации, просто нажав на кнопку Назад. Для возврата ему нужно выполнить особую команду. В нашем случае это будет команда Выйти из системы, которая будет находиться на странице Settings.xaml. Но возврат со страницы Settings.xaml на страницу MainPage.xaml – это так же не обычный переход, после которого можно воспользоваться кнопкой Назад для возврата на Settings.xaml. Это переход, выполнение которого подразумевает невозможность дальнейшей работы с программой без ввода учетных данных на MainPage.xaml. Подобная логика переходов по страницам приложения понятна пользователям. Внутри приложения, при переходе от страницы CommonPage.xaml к страницам Settings.xaml и About.xaml, действует стандартный механизм обработки переходов.

На рис. 17.2. приведена готовая страница MainPage.xaml.

увеличить изображение
Рис. 17.2. Страница MainPage.xaml

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

Application.Current.Host.Settings.EnableFrameRateCounter = true;