Создаем Twitter приложение для Windows Phone 7

Автор оригинала: Scott Gu
  • Перевод
imageИтак, в понедельник у меня была возможность открыть MIX 2010 День 1 Keynote в Лас Вегасе (видео прилагается). В keynot'e я сделал анонс Silverlight 4 RC версии (финальная версия будет доступна в следующем месяце) и инструменты VS 2010 RC для Silverlight 4. У меня так же была возможность впервые обсудить применение Silverlight и XNA для разработки Windows Phone 7 приложений.

В процессе выступления я создал два небольших Windows Phone 7 приложения, используя Silverlight: простое “Hello World” приложение и приложение, которое получает данные с Twitter. Обе программы легко создать, на это нужно всего пару минут. Ниже показаны шаги, которые вы можете совершить для создания приложений на своей машине.

Создание “Hello World” Windows Phone 7 приложения.


Прежде всего убедитесь, что у вас установлен Windows Phone Developer Tools CTP, он включает в себя Visual Studio 2010 Express для разработки под Windows Phone (он будет бесплатен всегда, это единственное, что вам нужно для разработки Windows Phone 7 приложений), а также надстройку для VS2010 RC.

После загрузки и установки Windows Phone Developer Tools CTP, запустите Visual Studio 2010 Express for Windows Phone или запустите VS 2010 RC (если она у вас установлена), и выберите File->New Project. Вы увидите обычный список типов шаблонов проектов, но с новой категорией — “Silverlight for Windows Phone”. Первый CTP предлагает два типа проектов. Первый шаблон — “Windows Phone Application”, его мы будем использовать для данного примера. Второй — “Windows Phone List Application”, которые предлагает стандартный шаблон master-details приложения:

image

Создав новые проект, вы увидите устройство и разметку. Обратите внимание на то, что устройство показывает UI телефона, позволяя вам видеть во время разработки выглядит ваше приложение. Те, кто знаком с Visual Studio с легкостью обнаружат ToolBox, Solution Explorer и панель Properties.

image

Для HelloWorld приложения, мы начнем с добавления TextBox и Button из Toolbox. Заметьте, что все действия идентичны с Silverlight в вебе или на десктопе. Вы можете с легкостью изменять размер, перемещать и выравнивать элементы управления прямо в дизайнере. изменять свойства также просто через панель Properties. Мы изменим имя TextBox, который добавлен для username и изменим заголовок страницы на “Hello world”.

image

Далее пишем код, нажав два раза на кнопку и создав обработчик события в code-behind файле (MainPage.xaml.cs).

image

Мы начнем с изменения заголовка приложения. Шаблон проекта включает в себя заголовок в виде TextBlock с именем textBlockListTitle (данное имя ошибочно содержит слово “list”, в финальной версии мы это исправим). По ходу написания кода, intellisense, показывая доступные члены. Ниже мы устанавливаем свойство заголовка TextBlock, как “Hello “ + свойство Text от TextBox username:

image

Теперь у нас есть весь нужный код для Hello World приложения. У нас есть два варианта для развертывания и запуска приложения. Мы можем сделать это на реальном устройстве или же через встроенный эмулятор:

image

Мы получаем полную функциональность в эмуляторе, так как это реальная операционная система запущенная на виртуальной машине. Для нашего примера мы просто нажмем F5 для запуска приложения в режиме отладки, используя эмулятор. Как только операционная система загрузилась, эмулятор запустит новое “Hello world” приложение, точно так же, если бы это было реальное устройство:

image

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

image

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

image

Обратите внимание, что эмулятор переиспользуется в следующих F5 сессиях отладки — это означает, что не придется запускать эмулятор для каждого запуска приложения. Мы добавили окно, которое помогает вам случайно не выключить эмулятор, если вы хотите использовать его заново. Запуск приложения на уже запущенном эмуляторе должно занять примерно 3 секунды для развертывания и запуска.

В нашем Hello World приложении, мы нажмем на текстовом поле “username” для фокусировки. Данное действие автоматически открывает программную панель ввода (software input panel, SIP). Мы можем напечатать сообщение или, так как мы используем эмулятор, набрать текст с помощью виртуальной клавиатуры. Хочу обратить внимание, что эмулятор прекрасно работает с мультисенсорным экраном в Windows 7, если он у вас есть, то вы насладитесь полным взаимодействием с устройством.

image

Мы напишем “MIX 10” в текстовое поле и нажмем на кнопку, изменив заголовок на “Hello MIX 10”:

image

Мы предоставляем все тот же опыт разработки Visual Studio для телефона, как для других .NET приложений. Это означает, что мы можем поставить точку остановки в обработчике события кнопки, нажать снова кнопку и получить остановку в отладчике:

image

Создание Twitter Windows Phone 7 приложения с Silverlight


Вместо того, чтобы остановиться на “Hello World”, давайте продолжим и разовьем приложения до простого Twitter-клиента.

Мы вернемся к макету приложения и добавим ListBox, используя направляющие в дизайнере для размещения элемента на экране и позволяя оптимально использовать пространство на экране. Изменим текст на кнопки на “Lookup”:

image

Далее вернемся к обработчику события кнопки в Main.xaml.cs и удалим первоначальный “Hello World” код и воспользуемся преимуществами класса для работы с сетью WebClient для асинхронной загрузки Twitter-ленты. Это займет всего три строчки кода: (1) объявление и создание WebClient, (2) прикрепление обработчика события, (3) вызов асинхронного метода DownloadStringAsync.

В вызове DownloadStringAsync мы передаем Twitter адрес и строку запроса, которая вытягивает текст из “username” TextBox. Данная лента вернет последние сообщения пользователя в формате XML. После завершения вызова, вызовется события DownloadStringCompleted и соответственно наш сгенерированный обработчик события twitter_DownloadStringCompleted.

image

Результат возвращается от Twitter в определенном XML формате. Для разбора мы будем использовать LINQ to XML. LINQ to XML позволяет нам создать простой запрос для доступа к данным в xml ленте. Для использования данной библиотеки, мы прежде всего добавим ссылку на сбору (правой кнопкой по папке References в Solution Explorer и выбираете Add Reference):

image

Добавим пространство имен “using System.Xml.Linq” в шапку code-behind Main.xaml.cs файла:

image

Далее добавим в наш проект простой вспомогательный класс и назовем его TwitterItem, у которого будет три члена — UserName, Message и ImageSource:

image

Далее реализуем обработчик события twitter_DownloadStringCompleted и используем LINQ to XML для разбора вернувшейся XML строки от Twitter. Что делает запрос — он вытягивает три ключевых части информации для каждого сообщения в Twitter от пользователя, которого мы передали в запросе. ImageSource используется для изображения профиля, Message для твита, ну и UserName. Для каждого твита в XML, мы создаем новый TwitterItem в IEnumerable, возвращаемого Linq запросом.

Мы задаем последовательность TwitterItem свойству ItemsSource для ListBox:

image

Проделаем еще один шаг для завершения приложения. В файле Main.xaml, добавим ItemTemplate для ListBox. Для демонстрации, я использовал простой шаблон, который использует привязку к данным для отображения пользовательских изображений профиля, их твитов и имя пользователя.
  <ListBox Height="521" HorizonalAlignment="Left" Margin="0,131,0,0" Name="listBox1" VerticalAlignment="Top" Width="476">

    <ListBox.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Horizontal" Height="132">
         <Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
         <StackPanel Width="370">
           <TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28" />
           <TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
         </StackPanel>
        </StackPanel>
      </DataTemplate>
     </ListBox.ItemTemplate>

  </ListBox>

Теперь жмём F5, мы используем уже запущенный эмулятор и перезапускаем приложение. Как только приложение запустилось, мы можем набрать имя пользователя в Twitter и нажать кнопку для получения результата. Попробуйте набрать моего пользователя (scottgu):

image

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

Итог


Silverlight и VS 2010 Tools для Windows Phone (и соответственно Expression Blend Tools для Windows Phone) позволяет очень быстро и весело создавать приложения.

На MIX несколько прекрасных партнеров, включая Netflix, FourSquare, Seesmic, Shazaam, Major League Soccer, Graphic.ly, Associated Press, Jackson Fish и т.д., продемонстрировали некоторые убойные прототипы приложений, которые они разработали за несколько недель. Вы можете просмотреть полную запись первого дня keynote, чтобы увидеть это собственными глазами. Я думаю, они продемонстрировали весь потенциал Silverlight на Windows Phone 7. В следующие месяцы ждите от меня статьи на эту тему.
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 27

    +2
    Просто шик. Действительно быстро и весело (;
      0
      Наконец то! Всё никак не мог дождаться примера создания приложения под winMo7. Спасибо огромное за перевод.
        0
        в таком случае здесь вы найдете много чего полезного
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Платформа радикально меняет подход к программированию, старые приложения не поддерживаются, поэтому платформа вышла заранее, релиз первого аппарата в начале осени.
        +1
        Попытка сделать разработку максимально удобной и простой. Хороший шаг.
          +25
          На дотнете все так разрабатывается.
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              >почувствов подступающее к горлу лёгкое удушье
              какие мы нежные, что вы ожидали увидеть в посте о разработку SL?
              Я бы понимаю что вы бы закрепили свои мысли фактам, а так языком почесали да и все.
              >По сравнению с разработкой под Мак / Айфон
              Видели мы вашу платформу, платформа, как платформа, изысканного в ней ничего нет.
            +1
            это видео по которому писалась статья.
              0
              Там же наоборот постят в титтер, а не лукапят
          +6
          Я не понимаю, кто такие статьи минусует…
            +1
            наверное юзеры из лагеря ифон\андроид
              0
              Некоторые уже высказывали здесь свои мысли по этому поводу. Якобы Хабр превращается в няшный рерайт скучной документации. Типа зачем читать документацию, если кто-то прочтет и все разжует. Я с этим не согласен, но мысль имеет рациональное зерно.
              0
              Сделал всё как было на видео. В итоге вместо аккуратного списка — список из пустых элементов. XML получается, парсится, но DataTemplate не работает. Код — один в один. Но не работает, хоть убейся.
                0
                Вы забыли ItemTemplate для ListBox добавить. Сам долго ломал голову:)
                  0
                  Нет, не забыл. Без ItemTemplate в XAML синтаксическая ошибка вообще-то. Дело, собственно, даже не в Template, а в Data Binding. Если вручную вписать в TextBlock статичный текст «Блабла» вместо Binding — то получим список из «Блабла» :) Также, если убрать DataTemplate совсем и переопределить метод ToString у класса для LINQ (в этом примере TwitterItem), то получим список из результатов этого метода, как и должно быть.
                0
                api.twitter.com/1/status/user_timeline.xml?screen_name=Wolverine_Ru Sorry, that page doesn’t exist! К какому URL обращаться-то?

                P.S. Я забирал по такому адресу twitter.com/statuses/user_timeline/Wolverine_Ru.rss
                –1
                жаль что в Windows XP не получится разрабатывать
                  0
                  Майкрософт молодцы. Надеюсь они откусят большой кусок пирога и развернут конкуренцию.
                    0
                    Спасибо за статью. Очень интересная, и поучительная, для меня так тем более(интересуюсь разработкой приложений под Win7 Phone).
                      0
                      Если кто-то из читателей-студентов пробовал программировать под Win Phone 7 — до 24 мая можно подать это приложение на конкурс. Подробности — habrahabr.ru/blogs/ms_for_students/93850/

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

                      Самое читаемое