Bài viết này được dịch từ http://weblogs.asp.net/scottgu/archive/2010/03/18/building-a-windows-phone-7-twitter-application-using-silverlight.aspx
Xây dựng một ứng dụng “Hello World” cho Windows Phone 7
Đầu tiên phải đảm bảo là bạn đã cài đặt Windows Phone Developer Tools CTP – nó hoặc bao gồm công cụ phát triển Visual Studio 2010 Express for Windows Phone (miễn phí mãi mãi và là thứ duy nhất bạn cần để xây dựng các ứng dụng cho Windows Phone 7) hoặc được cài như một add-on cho VS 2010 cho phép phát triển ứng dụng cho phone bên trong bản đầy đủ của VS 2010.
Sau khi đã tải và cài đặt Windows Phone Developer Tools CTP, bạn chạy Visual Studio 2010 Express for Windows Phone vừa được cài hoặc chạy VS 2010 (nếu bạn đã cài sẵn), và sau đó chọn “File”->”New Project”. Tại đây, bạn sẽ tìm thấy một phân loại mới trong danh sách các mẫu dự án: “Silverlight for Windows Phone”. Bản CTP đầu tiên cung cấp 2 dạng ứng dụng, “Windows Phone Application” – mà chúng ta sẽ dùng trong ví dụ này, dạng thứ hai là “Windows Phone List Application” – được sử dụng khi muốn tạo các ứng dụng dạng master-details:
Sau khi tạo một project mới, bạn sẽ thấy các cửa sổ cho việc thiết kế giao diện và mã XAML. Chú ý là phần thiết kế sẽ hiện giao diện điện thoại, cho phép bạn dễ dàng xem cách ứng dụng hiển thị trong khi đang phát triển. Với những người đã quen với Visual Studio, bạn cũng sẽ thấy các bảng ToolBox, Solution Explorer và Properties quen thuộc.
Với ứng dụng HelloWorld của chúng ta, chúng ta sẽ bắt đầu bằng việc thêm vào một TextBox và một Button từ ToolBox. Nhớ là bạn sẽ có cùng giao diện thiết kế cho Silverlight trên cả web và desktop. Bạn có thể dễ dàng thay đổi kích cỡ, vị trí và cân chỉnh các control trên giao diện thiết kế. Thay đổi các thuộc tính một cách dễ dàng với bảng Properties. Chúng ta sẽ thay đổi tên của TextBox mà chúng ta đã thêm vào thành username và đổi tiêu đề trang lại thành “Hello World”.
Chúng ta sẽ viết vài dòng lệnh bằng cách double-click lên button và tạo một event handler cho file code-behind (MainPage.xaml.cs).
Chúng ta sẽ bắt đầu bằng việc thay đổi tiêu đề của ứng dụng. Mẫu ứng dụng đã bao gồm tiêu đề này như một TextBlock với tên textBlockListTitle (ghi chú là tên hiện tại không chính xác vì có chữ “list”; sẽ được sửa lại trong bản chính thức). Khi chúng ta viết code, chúng ta sẽ thấy danh sách các thành phần của nó trong menu xổ xuống. Ở dưới ta sẽ đặt lại giá trị cho thuộc tính Text của tiêu đề thành “Hello “ + thuộc tính Text ô TextBox username:
Giờ ta đã có các câu lệnh cần thiết cho ứng dụng Hello World. Chúng ta có 2 lựa chọn khi triển khai và chạy ứng dụng, hoặc có thể triển khai trên một thiết bị thực hoặc dùng máy điện thoại giả lập kèm theo:
Vì máy điện thoại giả lập chứa hệ điều hành thực sự bên trong một máy ảo, chúng ta sẽ có được những cảm nhận giống hệt như khi chạy trên một thiết bị thật. Với ví dụ này, chúng ta sẽ nhấn F5 để chạy ứng dụng trong chế độ debug dùng trình giả lập. Một khi hệ điều hành đã nạp xong, trình giả lập sẽ chạy chương trình “Hello world” giống như khi chạy trên thiết bị:
Chú ý là chúng ta có thể thay đổi một số thiết lập với thay công cụ của trình giả lập – là thanh công cụ nằm phía trên bên phải. Nó sẽ bao gồm khả năng thay đổi kích cỡ/zoom và hai nút xoay. Zoom cho phép bạn phóng to các chi tiết của ứng dụng:
Các nút điều chỉnh hướng cho phép chúng ta dễ dàng xem ứng dụng chạy thê nào trong chế độ nằm ngang (khả năng hỗ trợ thay đổi hướng cũng có sẵn trong mấu ứng dụng).
Nhớ là trình giả lập có thể được dùng lại giữa các phiên debug – có nghĩa là bạn không cần chạy lại nó mỗi khi triển khai. Chúng tôi đã thêm một hộp thoại để giúp bạn nếu lỡ tắt trình giả lập thay vì dùng lại. Việc nạp một ứng dụng vào một trình giả lập đang chạy chỉ mất khoảng 3 giây bao gồm cả triển khai và chạy.
Bên trong chương trình Hello World, chúng ta sẽ nhấn vào textbox “username” để đặt focus. Điều này sẽ tự động bật bảng nhập liệu mềm (SIP). Chúng ta có thể gõ vào một tin nhắn hoặc – do đang dùng trình giả lập – nên chỉ đơn giản nhập một đoạn văn bản. Nhớ là trình giả lập cũng hỗ trợ tính năng multi-touch với Windows 7, do vậy, nếu bạn có một màn hình cảm ứng, bạn có thế thấy việc tương tác bằng cách chạm vào màn hình sẽ giống như trên một thiết bị thật.
Chúng ta sẽ nhập vào “MIX 10” trên ô văn bản và nhấn nút – nó sẽ làm tiêu đề được cập nhật thành “Hello MIX 10”:
Chúng tôi cung cấp cùng một trải nghiệm cho người dùng Visual Studio khi phát triển ứng dụng trên phone cũng như trên các ứng dụng .NET khác. Có nghĩa là bạn có thể đặt các break point bên trong trình xử lý sự kiện nhấn nút, nhấn nút lại một lần nữa để cho nó dừng lại bên trong trình gỡ lỗi:
Xây dựng một ứng dụng “Twitter” cho Windows Phone 7 dùng SIlverlight
Thay vì dừng lại với “Hello World”, chúng ta hãy tiếp tục phát triển nó thành một ứng dụng Twitter đơn giản.
Chúng ta sẽ quay lại màn hình thiết kế và thêm vào một ListBox, dùng các thanh căn lề để đặt nó vừa vào màn hình thiết bị và tận dụng tốt nhất không gian trên màn hình. Chúng ta cũng sẽ đổi tên nú bấm thành “Lookup”:
Chúng ta cũng sẽ quay trở lại với trình xử lý sự kiện cho nút bấm trong file Main.xaml.cs, xóa đoạn lệnh “Hello World” cũ và tận dụng ưu điểm của lớp WebClient để tải về một cách không đồng bộ các dữ liệu trên Twitter. Sẽ mất 3 dòng cho việc này: (1) khai báo và tạo đối tượng WebClient, (2) gắn sự kiện cho trình xử lý tương ứng và (3) gọi phương thức DownloadStringAsync.
Trong lời gọi DownloadStringAsync, chúng ta sẽ truyền một Uri đến Twitter cộng thêm một query string có kèm chuỗi lấy từ TextBox “username”. Nó sẽ lấy về những đoạn post gần nhất ở dạng XML. Khi lời gọi hoàn thành, sự kiện DownloadStringCompleted sẽ phát ra và phương thức xử lý DownloadStringCompleted của chúng ta sẽ được gọi:
Kết quả trả về từ lời gọi đến Twitter sẽ ở dạng XML. Để xử lý ta sẽ dung LINQ to XML. LINQ to XML cho phép ta tạo ra các câu truy vấn đơn giản để truy cập vào dữ liệu trong một đoạn xml. Để dùng thư viện này, chúng ta đầu tiên sẽ phải thêm một reference đến Assembly tương ứng (nhấn nút phải vào References trong cửa sổ Solution Explorer và chọn Add Reference):
Chúng ta sau đó thêm vào một câu lệnh tham chiếu “using System.Xml.Linq” vào đầu file code-behind Main.xaml.cs:
Ta tiếp tục thêm một lớp phụ trợ gọi là TwitterItem và dự án. TwitterItem có ba thành phần: UserName, Message và ImageSource:
Chúng ta sau đó sẽ viết các câu lệnh xử lý cho twitter_DownloadStringCompleted và dùng LINQ to XML đểxử lý dữ liệu XML trả về từ Twitter. Cái mà cau query làm là lấy về 3 thành phần thông tin của mỗi bài post Twitter từ tên người dùng mà ta chuyển kèm với câu query. Các thông tin bao gồm ImageSource, Message và UserName, cho mỗi bài post trong XML, chúng ta sẽ tạo một TwitterItem trong IEnumerable<XElement>trả về bởi câu truy vấn LINQ.
Sau đó ta gán tập TwitterItem được tạo vào thuộc tính ItemsSource của ListBox:
Ta sẽ làm thêm một bước để hoàn chỉnh ứng dụng. Trong file Main.xaml, chúng ta thêm vào một ItemTemplate cho ListBox. Với bài demo này, tôi đã dùng một template đơn giản dùng gắn nối dữ liệu để hiển thị hình ảnh, bài post và tên người dùng.
<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>
Bây giờ, nhấn F5 lại một lần nữa, chúng ta sẽ dùng lại trình giả lập và chạy lại ứng dụng. Một khi ứng dụng đã được chạy, bạn có thể gõ vào tên người dùng và nhấn nút để xem kết quả. Thử với tên đăng nhập của tôi (scottgu), bạn sẽ lấy được về một tập các TwitterItem trong ListBox:
Thử dùng chuột (hoặc dùng ngón tay nếu bạn có màn hình cảm ứng) để cuộn qua các mục trong ListBox – bạn sẽ thấy chúng di chuyển rất nhanh trong trình giả lập. Đó là vì trình giả lập đã được tăng tốc bởi phần cứng – và mang lại cho bạn cùng một hiệu năng như khi làm việc trên các phần cứng điện thoại thực sự.
Tổng kết
Silverlight và VS 2010 Tools for Windows Phone (và công cụ tương ứng Expression Blend Tools for Windows Phone) làm cho việc xây dựng các ứng dụng cho Windows Phone thực sự dễ dàng và fun :).
Tại MIX, trong tuần này một số các đối tác lớn của chúng tôi (bao gồm Netflix, FourSquare, Seesmic, Shazaam, Major League Soccer, Graphic.ly, Associated Press, Jackson Fish và nhiều nữa) đã giới thiệu một số nguyên mẫu ứng dụng mà họ đã xây dựng trong mấy tuần vừa qua. Bạn có thể xem tại đây http://live.visitmix.com/MIX10/Sessions/KEY01 để xem chúng hoạt động. Tôi nghĩ họ đã bắt đầu cho thấy nhiều tiềm năng và hứa hẹn trong việc dùng Silverlight với Windows Phone 7. Tôi sẽ viết thêm các bài khác trong các tuần và tháng tới để khám phá thêm về điều đó.
Hope this helps,
Scott
(Dịch bởi Đào Hải Nam)
Cập nhật thêm bới người dịch:
Các bộ công cụ nói trên các bạn có thể tải về tại:
– Visual Studio 2010: http://www.microsoft.com/visualstudio/en-us/download
– Windows Phone Developer Tools CTP: http://www.microsoft.com/downloads/details.aspx?FamilyID=2338B5D1-79D8-46AF-B828-380B0F854203&displaylang=en
– Microsoft® Expression Blend™ 4 Beta: http://www.microsoft.com/downloads/details.aspx?FamilyID=6f014e07-0053-4aca-84a7-cd82f9aa989f&displaylang=en
– Microsoft Expression Blend® Add-in Preview for Windows® Phone: http://www.microsoft.com/downloads/details.aspx?familyid=47F5C718-9DEC-4557-9687-619C0FDD3D4F&displaylang=en
Đào Hải Nam 
hay quá 😀