Створюємо Twitter додаток для Windows Phone 7

Отже, в понеділок у мене була можливість відкрити 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 програми:


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


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


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


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


Тепер у нас є весь потрібний код для Hello World додатки. У нас є два варіанти для розгортання і запуску програми. Ми можемо зробити це на реальному пристрої або ж через вбудований емулятор:


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


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


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


Зверніть увагу, що емулятор переіспользуется в наступних F5 сесіях налагодження – це означає, що не доведеться запускати емулятор для кожного запуску програми. Ми додали вікно, яке допомагає вам випадково не вимкнути емулятор, якщо ви хочете використовувати його заново. Запуск програми на вже занедбаному емуляторі має зайняти приблизно 3 секунди для розгортання і запуску.

У нашому Hello World додатку, ми натиснемо на текстовому полі "username" для фокусування. Ця дія автоматично відкриває програмну панель вводу (software input panel, SIP). Ми можемо надрукувати повідомлення або, так як ми використовуємо емулятор, набрати текст з допомогою віртуальної клавіатури. Хочу звернути увагу, що емулятор чудово працює з мультисенсорним екраном в Windows 7, якщо він у вас є, то ви насолодитеся повним взаємодією з пристроєм.


Ми напишемо "MIX 10" в текстове поле і натиснемо на кнопку, змінивши заголовок на "Hello MIX 10":


Ми надаємо все той же досвід розробки Visual Studio для телефону, як для інших. NET додатків. Це означає, що ми можемо поставити крапку зупинки в обробнику події кнопки, натиснути знову кнопку і отримати зупинку в відладчик:



Створення Twitter Windows Phone 7 додатка з Silverlight


Замість того, щоб зупинитися на "Hello World", давайте продовжимо і розвинемо додатка до простого Twitter-клієнта.

Ми повернемося до макету програми і додамо ListBox, використовуючи напрямні в дизайнера для розміщення елементу на екрані і дозволяючи оптимально використовувати простір на екрані. Змінимо текст на кнопки на "Lookup":


Далі повернемося до обробникові події кнопки в Main.xaml.cs і видалимо первісний "Hello World" код і скористаємося перевагами класу для роботи з мережею WebClient для асинхронної завантаження Twitter-стрічки. Це займе всього три рядки коду: (1) оголошення і створення WebClient, (2) прикріплення обробника події, (3) виклик асинхронного методу DownloadStringAsync.

У виклику DownloadStringAsync ми передаємо Twitter адресу і рядок запиту, яка витягує текст з "username" TextBox. Дана стрічка поверне останні повідомлення користувача у форматі XML. Після завершення виклику, викличеться події DownloadStringCompleted і відповідно наш згенерований обробник події twitter_DownloadStringCompleted.


Результат повертається від Twitter в певному XML форматі. Для розбору ми будемо використовувати LINQ to XML. LINQ to XML дозволяє нам створити простий запит для доступу до даних в xml стрічці. Для використання даної бібліотеки ми перш за все додамо посилання на збору (правою кнопкою на папці References в Solution Explorer і вибираєте Add Reference):


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


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


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

Ми задаємо послідовність TwitterItem властивості ItemsSource для ListBox:


Проробимо ще один крок для завершення програми. У файлі 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)


Спробуйте скористатися мишкою, а якщо у вас сенсорний екран, то пальцем, для прокручування соббщеній в 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 і т.д., продемонстрували деякі забійні прототипи додатків, які вони розробили за кілька тижнів.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*