Ваше первое приложение Windows Phone

Самое хитрое в написании первого приложения Windows Phone — создать нечто более-менее интересное и осмысленное, но достаточно простое для примера, который послужит отправной точкой. Учитывая это, мы подробно рассмотрим процесс создания простой утилиты, которой я пользуюсь ежедневно: NoteToMe. Идея в том, что вы можете набрать сообщение и отправить его самому себе нажатием одной кнопки, как показано на рис. 1.

Рис. 1. Интерфейс NoteToMe

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

• создание разметки приложения;
• сохранение и получение данных из изолированного хранилища (Isolated Storage);
• события и их обработка;
• создание и выполнение задач [запуска (launchers) и выбора (choosers)].

Для начала вам потребуется скачать инструментарий с сайта create.msdn.com. Если вы уже разблокировали свой смартфон, но еще не обновили его до b Windows Phone 7.5 («Mango»), сейчас самое время сделать это; Mango добавляет сотни новых возможностей в операционную систему Windows Phone.

Приступим

Как и многие разработчики для Windows Phone, я пришел к убеждению, что лучший инструмент для создания приложений Windows Phone — комбинация Visual Studio (для написания кода) и Expression Blend (для всего остального). Таким образом, мы начнем с открытия Expression Blend и создания нового приложения под названием NoteToMe, основанного на based Windows Phone SDK 7.1.

Первым делом изменим заголовок приложения. Щелкните его и в окне Properties найдите свойство Text для этого элемента управления. Правила проектирования в стиле Metro (т. е. правила проектирования для Windows Phone) требуют, чтобы заголовок состоял только из букв верхнего регистра, поэтому измените его на «NOTE TO ME».

Щелкните заголовок страницы и нажмите клавишу Del, чтобы удалить его.

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

Рис. 2. Размещение верхней строки в разметке

Конечно, вы можете задать размер строки вручную прямо в XAML:

<Grid.RowDefinitions>
  <RowDefinition Height="1*"/>
  <RowDefinition Height="9*"/>
</Grid.RowDefinitions>

Звездочка после значения указывает на относительный размер, в данном случае — 1:9. То есть размер первой строки будет равен одной девятой размера второй.

Добавление трех элементов управления к StackPanel

В верхней строке будут расположения три элемента управления — один за другим:

• TextBlock, действующий как метка;
• TextBlock для хранения адреса электронной почты;
• Button для отправки сообщения.

Этот дизайн представлен на рис. 3.

Рис. 3. Три элемента управления в верхней строке

В один столбец строки поместить эти три элемента нельзя без их включения в какой-либо структурирующий контейнер. Я воспользуюсь StackPanel, ориентация которого задана горизонтальной; набор StackPanel может размещаться один поверх другого или в ряд.

Чтобы создать StackPanel, щелкните крошечную белую стрелку рядом с элементом управления Layout на панели инструментов, как показано на рис. 4.

Рис. 4. Добавление StackPanel

Щелкните StackPanel, чтобы выбрать этот элемент управления. Теперь перетащите его в строку и задайте выравнивание по вертикали и горизонтали, чтобы растянуть этот элемент, а его поля (margins) установите в 0 в окне Layout, как показано на рис. 5.

Рис. 5. Размещение StackPanel

Добавьте TextBlock, задав размер его шрифта равным 32, а его текст как «To». Теперь перетащите TextBox на StackPanel. (Обратите внимание на важное различие между TextBlock, который отображает текст, и TextBox, который позволяет вводить текст.) Присвойте этому TextBox имя Address. Наконец, добавьте кнопку в StackPanel, назовите ее Send и установите ее свойство Content в Send.

Это приведет к генерации XAML, приведенного на рис. 6.

Рис. 6. Разметка StackPanel с помощью XAML

<StackPanel
  Margin="0"
  Orientation="Horizontal">
  <TextBlock
    Margin="0,8"
    TextWrapping="Wrap"
    Text="To"
    Width="42"
    HorizontalAlignment="Left"
    VerticalAlignment="Center"
    FontSize="32" />
  <TextBox
    x:Name="Address"
    Margin="0,0,0,-7"
    TextWrapping="Wrap"
    Text="foo@bar.com"
    Width="293" />
  <Button
    x:Name="Send"
    Content="Send"
    Margin="0,4,0,0"
    Width="124"
    Click="Send_Click" />
</StackPanel>

Заметьте, что у кнопки Send имеется свойство Click="Send_Click". Оно создается щелчком кнопки с последующим выбором кнопки Events в окне Properties (рис. 7).

Рис. 7. Кнопка Events

Это приведет к открытию всех событий для кнопки. Найдите событие щелчка (click) и дважды щелкните его. Кнопка обновится для включения этого события, и вы переключитесь в окно редактора кода для обработчика этого события (либо в Blend, либо в Visual Studio в зависимости от того, как вы настроили Blend). Пока оставьте этот обработчик как есть:

private void Send_Click( object sender, RoutedEventArgs e )
{
}

Добавление элемента управления для сообщения

Щелкните элемент управления TextBox на панели инструментов, а затем перетащите TextBox так, чтобы он заполнил половину оставшейся страницы (другую половину мы зарезервируем под клавиатуру, которая появится, когда придет время ввести что-нибудь в TextBox). Свойство HorizontalAlignment установите в Stretch, свойство VerticalAlignment — в Top, а поля (margins) — в 0. Задайте Width как Automatic, а Height установите равным 244. Все это можно сделать на глазок при изменении размеров TextBox или нарисовать TextBox примерно там, где он должен находиться, а потом задать его свойства в окне Properties, как показано на рис. 8.

Рис. 8. Добавление TextBox

Написание кода

Разместив элементы управления, вы готовы работать над логикой программы. В верхнем левом углу вы увидите вкладку Projects. После сохранения всех изменений щелкните эту вкладку, затем щелкните правой кнопкой мыши MainPage.xaml.cs и выберите Edit In Visual Studio, как показано на рис. 9.

Рис. 9. Подготовка к написанию кода

Спецификация

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

Более того, когда вы щелкаете Send, для вашей почтовой программы должно быть подготовлено новое сообщение электронной почты — с предварительным заполнением всех полей, чтобы можно было просто нажать Send или сначала отредактировать необходимые поля, а потом нажать Send.

Использование изолированного хранилища

Чтобы сохранить содержимое поля To между запусками приложения, нужно куда-то записывать это содержимое на устройстве. Для этого как раз и предназначено изолированное хранилище (Isolated Storage): в нем сохраняются данные, когда приложение закрывается. Как и подразумевает название этого хранилища, Isolated Storage позволяет вашему приложению хранить свои данные отдельно от данных других приложений. Использовать изолированное хранилище довольно легко. Сначала добавьте выражение using:

using System.IO.IsolatedStorage;

Объявите переменную-член типа IsolatedStorageSettings и строку-константу, которая будет использоваться как ключ в словаре Isolated Storage:

private IsolatedStorageSettings _isoSettings;
const string IsoKey = "EmailAddress";

Инициализируйте член _isoSettings в конструкторе:

_isoSettings = IsolatedStorageSettings.ApplicationSettings;

Сохранение и извлечение адреса электронной почты

Две задачи, связанные с изолированным хранилищем, — сохранение и извлечение строки. Сохранение лучше всего выполнять, когда вы покидаете страницу. При выходе с любой страницы в Windows Phone вызывается метод OnNavigatedFrom. Вы можете переопределить его, и одна из веских причин для этого — сохранение данных в изолированном хранилище, например:

protected override void OnNavigatedFrom(
  System.Windows.Navigation.NavigationEventArgs e )
{
  _isoSettings[IsoKey] = Address.Text;
  base.OnNavigatedFrom( e );
}

Теперь вы сохранили адрес электронной почты в словаре _isoSettings под ключом IsoKey. Когда вы вернетесь на эту страницу, этот параметр можно будет восстановить. Для этого я вызываю закрытый вспомогательный метод RestoreEmailAddress из конструктора:

private void RestoreEmailAddress()
  {
    if (_isoSettings.Contains( IsoKey ))
      Address.Text = _isoSettings[IsoKey].ToString();
  }

Заметьте, что я проверяю наличие ключа в Isolated Storage перед тем, как пытаться его восстановить, — это предотвращает генерацию исключения KeyNotFound при первом запуске программы. Помните, что при первом запуске ваша программа еще ничего не хранит в изолированном хранилище. В поле Address ничего нет. Как только пользователь введет адрес электронной почты в это поле, адрес будет сохранен в Isolated Storage и восстановлен при следующем запуске программы. Если пользователь потом изменит адрес, в дальнейшем будет восстанавливаться новый адрес.

Задачи

Windows Phone 7.5 поддерживает взаимодействие ряда задач со встроенными приложениями (почтовой программой, списком контактов, камерой и т. д.). Существует два типа задач: запуска (Launchers) и выбора (Choosers). Задачи выбора используются для выбора информации и возврата ее в вашу программу (чтобы получить адрес электронной почты и списка контактов, например). Задачи запуска применяются для запуска программы, которая не возвращает данные.

В данном случае у вас есть все, что нужно для отправки сообщения, поэтому вы можете вызвать задачу запуска e-mail и передать значения для обязательных полей. Когда вы вызываете Show в задаче запуска e-mail, почтовая программа запускается с вашими данными, но ничего не возвращает (что нормально; вам не нужны никакие данные от этой программы).

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

Вся работа по созданию задачи запуска (Launcher) инкапсулирована в обработчике события click для кнопки Send. Давайте начнем с создания экземпляра EmailComposeTask (задачи запуска). Заполните поля и вызовите Show — вот и все:

private void Send_Click( object sender, RoutedEventArgs e )
{
  EmailComposeTask emailComposeTask = new EmailComposeTask();
  emailComposeTask.Subject = "Send To Me";
  emailComposeTask.To = Address.Text;
  emailComposeTask.Body = Message.Text;
  Message.Text = String.Empty;
  emailComposeTask.Show();
}

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

Жизненный цикл приложения

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

Чтобы избежать такой неприятности, вы должны немного понимать жизненный цикл приложения и то, как можно сохранять его состояние, не теряя поддержки одной из самых мощных функций Mango: быстрого переключения приложений (Fast Application Switching).

При запуске вашего приложения (скажем, из меню Start) срабатывает событие Application Launching. Как только приложение запущено и начинает работать, каждый переход пользователя на вашу страницу приводит к вызову метода OnNavigatedTo, после чего ваша страница будет находиться в состоянии Running («выполняется»). Если пользователь запускает новое приложение, ваша программа получает событие Application Deactivated и переводится в пассивное состояние (dormant state). Если на смартфоне не хватает памяти, ваше приложение может быть «заморожено» (tombstoned).

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

Если ваше приложение находилось в пассивном состоянии, вам не нужно предпринимать какие-либо действия при его восстановлении и даже более того: вы этого не захотите; исходное состояние было сохранено, когда приложение перешло в пассивный режим, и теперь готово продолжать работу.

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

Таким образом, перед вами ставятся две задачи.

1. Сохранять состояние при вызове метода OnNavigatedFrom страницы.
2. Потенциально восстанавливать состояние при вызове метода OnNavigatedTo страницы, т. е. реально восстанавливать состояние, если приложение было заморожено, но не делать этого, если оно было в пассивном режиме.

Сохранение состояния при уходе пользователя со страницы

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

Начнем с создания строки-константы StateKey, которую вы будете использовать как смещение в словаре State:

const string StateKey = "MessageState";

В методе OnNavigatedFrom вы будете сохранять состояние (в данном случае — содержимое MessageBox) в словаре State:

protected override void OnNavigatedFrom(
  System.Windows.Navigation.NavigationEventArgs e )
{
  _isoSettings[IsoKey] = Address.Text;
  State[StateKey] = Message.Text;
  base.OnNavigatedFrom( e );
}

Восстановление состояния при создании страницы

При вызове метода OnNavigatedTo вам не требуется предпринимать какие-либо действия для восстановления состояния, если приложение находилось в пассивном режиме, но потребуется, если оно было заморожено.

Чтобы различать пассивное и замороженное состояние можно устанавливать какой-либо флаг в false, а затем возвращать его в true в конструкторе. Если приложение было в пассивном режиме, конструктор не будет вызываться, а если оно было в замороженном состоянии, конструктор будет вызван:

bool isNew = false;
  public MainPage()
  {
    InitializeComponent();
    isNew = true;
  }

Этот флаг можно проверять в OnNavigatedTo:

protected override void OnNavigatedTo(
  System.Windows.Navigation.NavigationEventArgs e )
{
  if (isNew)
  {
    if (State.ContainsKey( StateKey ))
    {
      Message.Text = State[StateKey].ToString();
    }
  }
  isNew = false;
  base.OnNavigatedTo( e );
}

Эта проверка экономит время, которое иначе впустую было бы потрачено на восстановление значения из словаря State. Вы можете опробовать это при первом обычном запуске своей программы (в этом случае при переключении в другую программу ваше приложение перейдет в пассивный режим), а затем принудительно заморозить ее. Для принудительной заморозки программы щелкните правой кнопкой мыши проект, выберите Properties, откройте вкладку Debug и установите флажок Tombstone upon deactivation while debugging (замораживать при деактивации в отладочном режиме).

Запустив программу с этим флажком в установленном состоянии, вы заметите ощутимую паузу при возврате к странице, так как в это время восстанавливается ее состояние.

Заключение

В этой короткой статье я показал, как написать свое первое нетривиальное приложение Windows Phone. Я начал с создания приложения в Expression Blend, где создал строку и использовал StackPanel для разметки элементов управления.

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

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