* Требования: Visual Studio 2010 Express, Windows 7 Operating System, Windows Phone 7 SDK
* Необходимое время: от 2 до 4 часов, в зависимости от скорости соединения с интернет и от производительности ПК
* Скачать исходные файлы
В сегодняшней статье мы изучим основы разработки приложений для Windows Phone 7, предложим вам инструменты, с помощью которых вы без труда сможете влиться в процесс и довести его до завершения. От ознакомления с богатым набором инструментов до написания XAML и C#-кода.
Нравится кому-то это или нет, мобильные технологии уверенно шагают по Земле. В наше время у каждого разработчика появилась специфическая обязанность в том, чтобы изучить определенный набор инструментов. Но как же новичкам сегодня можно влиться в процесс разработки мобильных приложений? Лучше приступить уже сейчас. Что если вы уже разработали приложение для какой-либо платформы, и вам хотелось бы увидеть его в действии на другой? Именно на эти вопросы и направлено наше сегодняшнее руководство. Мы постараемся снабдить вас актуальной информацией о процессе разработки приложений для Windows Phone 7 от начала и до конца.
Сегодня мы начнем с разработки приложений для платформы Windows Phone 7. Будь то ваше первое знакомство с процессом разработки мобильных приложений или вы являетесь просто любопытным разработчиком, желающим поглубже изучить процесс разработки приложений именно для Windows Phone 7, эта статья как раз для вас. Давайте начнем с скачивания необходимого нам набора инструментов, который позволит нам начать процесс разработки приложений для Windows Phone 7, а затем поглубже «нырнем» в разработку кода, и постараемся создать простенькое функционирующее приложение. Итак, приступим!
Скачиваем инструменты
Перед тем как начать разработку для данной платформы, нам нужно скачать и установить некоторые инструменты. Ниже мы представили вам необходимые инструменты, а также некоторые дополнительные ресурсы, которые помогут вам ускорить процесс разработки.
* Windows Phone Software Development Kit (SDK) 7.1: по сути, это единственное действительно необходимое приложение, которое предоставит нам все нужные инструменты для разработки приложений и игр для устройств на базе Windows Phone 7. Посредством данного скачанного файла вы сможете установить Visual Studio 2010 Express (IDE), которое включает шаблоны приложений для мобильных устройств, а также предлагает различные расширения для процесса разработки, типа инструмента профилирования приложений или усовершенствованного эмулятора.
* Документация Windows Phone SDK: при разработке приложений для Windows Phone, вы сможете обращаться за помощью к страницам данного сайта. Здесь вам представлена вся документация относительно АПИ, а также множество примеров кода.
* Примеры кода Windows Phone: когда у вас будут нужные инструменты и документация, вы можете скачать некоторые примеры кода для приложений. На данной странице размещены все примеры приложений, которые предлагает корпорация Microsoft. Все приложения разделены по свойствам, так что вы без труда сможете найти нужную вам страницу.
Наше первое приложение для Windows Phone
Twitter повсюду. Это сильнейшая тенденция в интернете, на которой стоит заострить внимание каждому новичку в области разработки новых приложений. Эта система требует вводить данные, управлять событиями и отслеживать ошибки, отправлять веб-запросы и получать ответы для корректного форматирования данных в приложении. Итак, сегодня мы займемся разработкой Twitter-приложения, позволяющего пользователю вводить логин в сети Twitter и получать твиты в простом и доступном виде.
Приступаем
Заметка автора: Скриншоты, приведенные ниже, были сделаны при помощи Visual Studio 2010 Ultimate. Если будете использовать Visual Studio 2010 Express для Windows Phone, то вы, возможно, столкнетесь с различиями в некоторых командах меню или окон. Тем не менее, основной функционал абсолютно идентичен.
Теперь, когда мы скачали и установили инструменты, пришло время начать наш новый проект. Откройте Visual Studio и пройдите в меню File -> New Project. Откройте раздел шаблонов Visual C# и выберите Silverlight для Windows Phone. И, наконец, выберите Windows Phone Application и задайте необходимое имя.
Теперь кликайте ОК, и перед вами появится следующее диалоговое окно:
Здесь у нас есть две опции:
* Windows Phone OS 7.1: Это нужно для приложений на базе Mango, и включает в себя дополнительный набор АПИ для работы с Windows Phone. Это стандартная опция, которую следует использовать для создания новых приложений.
* Windows Phone OS 7.0: Это нужно для оригинальной версии ОС Windows Phone. Эту опцию следует использовать лишь при редких обстоятельствах.
Давайте продвигаться дальше. Выбираем Windows Phone OS 7.1 и жмем ОК.
Как только загрузится Visual Studio 2010, на экране вы увидите то, что отображено на картинке сверху.
* Toolbox включает в себя управление Windows Phone, которое вы можете добавить в собственное приложение. Также представлены следующие примеры: TextBox, Buttons, Images и многие другие.
* Design View отображает то, как ваше приложение в реальном времени выглядит на Windows Phone 7.
* XAML View отображает текущий код XAML, генерирующий то, что отображено в экране под номером 2.
* Solution Explorer Window отображает все файлы, которые генерируют ваше приложение. Здесь можно видеть изображения и файлы проекта.
* Properties Window позволяет вам изменять определенные характеристики контроллеров, добавленных в ваше мобильное приложение.
Редактируем существующее приложение и название страницы
Первое, что нам нужно изменить, это стандартные параметры Application Name и Page Title на собственные. Откройте ваш MainPage.xaml (отображен на изображении №3, пункт №3), и измените параметр Text рядом с каждым элементом TextBlock, как показано ниже:
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY TWITTER LOOKUP" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="enter user" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>Если вы сейчас посмотрите в окно с дизайном, то увидите примерно следующее:
Настройка шаблона и добавление управления
Следующее, что нам нужно сделать, настроить шаблон так, чтобы управление заполнило экран.
Ведите курсором мыши на экран отображения дизайна и кликайте левой кнопкой по точке, отображенной на изображении ниже. Это позволит нам заполнить данное пространство элементами TextBox и Button.
Как только все будет размещено по своим местам, нам нужно будет перетащить TextBox, Button и ListBox из набора инструментов (Toolbox) на окно с отображение дизайна, как показано ниже:
Так что же делают эти кнопки?
* TextBox представляет собой поле для ввода данных пользователя, которые позволяют ввести имя пользователя, используемое в Twitter.
* Button можно будет нажимать тогда, когда пользователь будет готов к просмотру твитов пользователя, чье имя введено в поле TextBox.
* ListBox будет содержать изображения пользователя, а также твиты.
Теперь давайте двигаться дальше, и внесем следующие изменения в файл MainPage.xaml. Найдите тэг
<!--ContentPanel - place additional content here--><Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="74*" />
<RowDefinition Height="533*" />
</Grid.RowDefinitions>
<TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0" Name="txtUserName" VerticalAlignment="Top" Width="294" />
<Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" />
<ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="10,10,8,10"/>
<TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>Вы заметите здесь несколько различий, если сравните этот отрывок кода с тем, что у вас уже есть.
* TextBox: мы задали этому полю имя и удалили параметр Text. Это позволит нам обращаться к элементу TextBox, когда пользователь нажимает кнопку.
* Button: мы также задали этому элементу имя и изменили параметр Content на Lookup. Наконец, мы добавили управление событием Click для того, чтобы выполнять процедуру при нажатии курсором мыши по кнопке.
* ListBox: данный элемент претерпел самые серьезные изменения. Мы добавили имя, а затем ListBox.ItemTemplate. ItemTemplate определяет шаблон каждого пункта в списке. Далее вы свяжете DataTemplates с этими элементами данных для определения того, какие элементы интерфейса используются для его генерации.
В данном случае мы используем StackPanel, который выставляет элементы в нужном порядке. Мы в горизонтальной ориентации размещаем изображение и TextBlock для отображения картинки пользователя, а также его/ее твиты.
Приступаем к коду
Теперь, когда мы добавили в наш проект XAML, пришло время добавить некоторый код во «внутренности» нашей страницы, чтобы сделать наше приложение функционирующим.
Давайте начнем с добавления привязки к существующему файлу, созданному Microsoft для того, чтобы помочь нам пропарсить XML, полученный в ответ от АПИ Twitter’а, которое мы будем применять.
Нажмите правой кнопкой мыши на References, и выберите пункт Add Reference. Прокрутите немного вниз по списку, пока не увидите System.Xml.Linq, а затем нажмите ОК:
Теперь у нас есть нужная библиотека в нужном месте, и нам нужно добавить новый класс, который будет состоять из пунктов из Twitter.
Нажмите правой кнопкой на проекте, а затем выберите меню Add, затем Class. Введите имя TwitterItem, и нажмите на кнопку возврата. Внутри данного класса мы добавим два параметра, как показано ниже, которые будут содержать ImageSource и Message.
public class TwitterItem
{
public string ImageSource { get; set; }
public string Message { get; set; }
}ImageSource будет привязан к расположению изображения в интернете. Message будет содержать твиты пользователя.
Продолжайте в том же духе, сделайте двойной щелчок по файлу MainPage.xaml.cs, и добавьте следующий отрывок кода сразу после конструктора MainPage():
private void btnLookupUser_Click(object sender, RoutedEventArgs e)
{
WebClient twitter = new WebClient();
twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + txtUserName.Text));
}
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null)
return;
XElement xmlTweets = XElement.Parse(e.Result);
lstTwitter.ItemsSource = from tweet in xmlTweets.Descendants("status")
select new TwitterItem
{
ImageSource = tweet.Element("user").Element("profile_image_url").Value,
Message = tweet.Element("text").Value
};
}Первый контроллер событий будет называться btnLookupUser_Click и будет запускаться сразу, как только пользователь кликнет по кнопке Lookup. Мы используем встроенный класс WebClient, так как он предлагает нам самые основные методы отправки и получения данных из источника. В данном случае, мы проводим имя пользователя через АПИ, предоставленное системой Twitter, и он возвращает нам XML-файл с запрашиваемыми данными.
Событие twitter_DownloadStringCompleted использует LINQ для парсинга XML-файла, полученного посредством АПИ, и указывает URL изображение, а также Message.
Если вы не в курсе того, что такое LINQ, то данная система была создана специально в целях обработки языковых свойств, некоторых из которых абсолютно новые для C# 3.0 и Visual Basic 9.0. Каждое из этих свойств может работать по-отдельности, но вместе они предоставляют гибкие возможности определения запросов или АПИ с возможностью созданию запросов.
Готово к запуску
Теперь, когда у нас есть готовое приложение, пришло время запустить его и проверить в действии. Первое, что нам нужно сделать, это убедиться в том, что Windows Phone Emulator указан в качестве целевой платформы:
Примечание: если у вас есть устройство, работающее на Windows Phone и вы состоите в членстве App Hub, то вы можете изменить выбранный пункт в выпадающем меню на Windows Phone Device.
Как только загрузится приложение, вы увидите следующее изображение:
Продолжайте, выберите TextBox, и вам отобразится виртуальная клавиатура. Вы можете опционально нажать на переход на страницу вверх для того, чтобы использовать компьютерную клавиатуру. Введите любое существующее имя пользователя в Twitter и нажимайте Lookup. Приложение «добудет» вам твиты из указанного аккаунта:
Ваши пользователи также могут переключиться на светлую тему оформлению, встроенную в меню настроек Windows Phone 7, и тогда цвета приложения автоматически станут такими:
Важно учитывать, что данный пример приложения должен включать еще и дополнительный контроллер ошибок. Мы исключили их из демо в целях наглядно продемонстрировать урок.
Завершение
Всего за пару часов мы умудрились скачать инструменты, ознакомиться с IDE и создать наше первое приложение для Windows Phone 7. Конечно же, мы очень неаккуратно сделали это, так как Windows Phone 7 позволяет сделать все гораздо привлекательнее. Советуем вам прочесть парочку книг, ознакомиться с другими примерами приложений и найти знакомых в сообществе разработчиков. Вы будете удивлены, поверьте!
