Silverlight 2 Tutorial – Viết chương trình “Hello World” với Silverlight 2 và VS 2008


Bài này sẽ là bài đầu tiên trong loạt 8 bài được dịch lại từ Scottgu’s blog. Đây cũng là một loạt bài hướng dẫn khá hay về Silverlight 2, các bạn có thể xem danh sách 8 bài này trong bài viết First Look at Silverlight 2
Nếu bắt đầu từ đầu, lời khuyên là bạn nên đọc tất cả các bài viết này theo thứ tự, và hãy cố gắng tự mình làm lại các ví dụ có sẵn.


Chúng ta sẽ bắt đầu xây dựng chương trình Digg bằng cách chọn File->New trong VS2008 và dùng hộp thoại New Project để tạo một ứng dụng “Silverlight Application” (nhớ rằng bạn đã tải về và cài đặt Silverlight Tools for VS 2008 thì mới có mục này)

Chúng ta sẽ đặt tên cho dự án này là “DiggSample”. Khi nhấn vào nút OK, Visual Studio sẽ mở một hộp thoại nữa cho phép lựa chọn việc tạo chỉ một ứng dụng Silverlight, hay tạo thêm cả một ứng dụng ASP.NET vào Solution để chứa ứng dụng Silverlight bên trong. Với ứng dụng này, chúng ta sẽ chọn để thêm một ứng dụng ASP.NET và đặt tên cho nó là “DiggSample_WebServer”. Khi chúng ta nhấn OK, VS sẽ tạo một solution chứa cả hai ứng dụng Silverlight và ASP.NET.

Khi thực hiện lệnh build, VS sẽ tự động sao chép ứng dụng Silverlight sang ứng dụng web của chúng ta. Ứng dụng web được tạo sẵn này sẽ có cả các trang ASP.NET và các trang HTML tĩnh, và chúng ta có thể dùng các trang này để test ứng dụng Silverlight.
Ghi chú: Các ứng dụng Silverlight có thể được dùng bên trong bất kỳ web server nào (bao gồm cả Apache trên Linux) và được chứa bên trong các trang HTML tĩnh hay bất kỳ dạng trang web động nào (bao gồm cả PHP, Java, Ruby, Python…). Với ứng dụng Digg, chúng ta sẽ không dùng mã server-side nào, chúng ta sẽ dùng tính năng “cross-domain networking” của Silverlight để truy cập tập hàm của dịch vụ Digg một cách trực tiếp. Sở dĩ tôi tạo cả ứng dụng ASP.NET là vì muốn tận dụng tính năng triển khai tự động và dùng thử nó trong web server có sẵn khi phát triển ứng dụng ASP.NET với VS.

Có gì trong một ứng dụng Silverlight
Mặc nhiên, một ứng dụng Silverlight mới được tạo sẽ chứa hai file có tên Page.xaml và App.xaml, cũng như các file code behind tương ứng (được viết bằng VB, C#, Ruby hoặc Python).

Các file XAML là các file ở dạng văn bản mà bạn dùng để khai báo các thành phần giao diện trong một ứng dụng Silverlight hay WPF. XAML cũng có thể được dùng cả trong việc khai báo các đối tượng .NET.
File App.xaml được dùng để khai báo các tài nguyên, kiểu như các đối tượng brush hay style mà sẽ được dùng trong suốt toàn bộ ứng dụng. Lớp Application (code-behind của file App.xaml) có thể được dùng để xử lý các sự kiện ở cấp độ ứng dụng, như Application_Startup, Application_Exit và Application_UnhandledException.
File Page.xaml mặc nhiên được dùng như thành phần giao diện mà nó sẽ được hiển thị khi ứng dụng được kích hoạt. Chúng ta có thể định nghĩa giao diện bên trong nó, và chúng ta cũng có thể xử lý các sự kiện gây ra bởi các thành phần giao diện này bên trong lớp code-behind của file Page.xaml.
Khi chúng ta build ứng dụng DiggSample, Visual Studio sẽ mặc nhiên biên dịch các lệnh và các thẻ XAML vào một file assembly .NET, rồi đóng gói nó cùng với các tài nguyên tĩnh (như các file hình ảnh hay văn bản mà chúng ta muốn đóng gói cùng) vào một file có tên DiggSample.xap:

Các file “.xap” (đọc là zap) dùng thuật toán nén zip để tối thiểu hóa kích thước file. Một ứng dụng “Hello world” được viết trong .NET Silverlight (dùng VB hay C#) chỉ có kích thước 4KB.
Ghi chú: Một số control trong bản Beta1 nếu được dùng sẽ phải được đóng góp kèm với ứng dụng, do vậy có thể sẽ làm tăng kích thước của file .xap. Chương trình Diggchỉ dùng các control trong bản Beta2 và phiên bản chính thức, do vậy kích thước tổng cộng sẽ chỉ khoảng 6-8KB
Để chạy một file Silverlight 2, bạn sẽ phải thêm thẻvào trong một file HTML (không cần dùng Javascript> Silverlight sẽ tự động download file .xap, khởi tạo nó và chạy nó trên nền của trình duyệt. Điều này cho phép việc chạy ứng dụng Silverlight không phụ thuộc trình duyệt (Safari, FireFox, IE, …) và hệ điều hành (Windows, Mac, và Linux).
Các file HTML và ASP.NET để test cũng được thêm vào sẵn ngay khi tạo project, do vậy chúng ta chỉ việc đơn giản là nhấn F5 để build, run và test.

Cách thêm vào các control và bắt các sự kiện
Hiện tại chương trình Digg của chúng ta vẫn chưa có gì, do vậy khi chạy nó các bạn sẽ chỉ thấy một trang web trống. Chúng ta có thể thay đổi bằng cách mở file Page.xaml và thêm vào một số nội dung:

Chúng ta sẽ bắt đầu bằng việc thay đổi màu nền của grid và khai báo một nút bấm bên trong nó. Chúng ta cũng sẽ đặt vá trị cho thuộc tính “x:Name” của nút bấm thành “MyButton” – điều này sẽ cho phép có thể tham chiếu đến nút bấm này khi lập trình, chúng ta cũng sẽ đặt giá trị cho các thuộc tính Content, Width và Height:

Khi chạy, chương trình của chúng ta sẽ hiển thị ở giữa trang với một nút bấm có dòng chữ “Push Me” giống như sau:

Để thêm một “hành vi” cho nút bấm, chúng ta có thể thêm một hàm xử lý sự kiện “Click” cho nó, để thêm vào, chúng ta sẽ gõ vào tên sự kiện như sau:

Ngay khi đó, VS sẽ nhắc chúng ta thêm hàm xử lý sự kiện vào lớp code-behind:

Chúng ta có thể gõ vào tên của một phương thức mới mà chúng ta muốn tạo, hoặc chỉ đơn giản nhấn Enter để dùng luôn tên mặc nhiên của nó:

VS sẽ tự thêm vào một hàm xử lý sự kiện trong file code-behind. Chúng ta có thể dùng hàm này để cập nhật nội dung của nút bấm mỗi khi nhấn chuột lên nó:

Sau khi đã thay đổi giống như trên, chúng ta có thể chạy lại ứng dụng và nhấn lên nút bấm lần nữa, bây giờ nội dung của nó sẽ được cập nhật lại thành “Pushed!”:

Bước tiếp theo
Chúng ta vẫn còn một vài việc phải làm trước khi ứng dụng được hoàn thành…🙂
Bước kế tiếp là điều chỉnh lại cấu trúc tổng thể giao diện của ứng dụng, và sắp đặt thêm một số control bên trong nó. Để làm điều này, xin mời các bạn xem phần tiếp theo:
Quản lý layout

17 thoughts on “Silverlight 2 Tutorial – Viết chương trình “Hello World” với Silverlight 2 và VS 2008

  1. Anh Nam cho em hỏi,sau khi em install tool silverlight thì khi tạo new project VS silverlight app bị báo lỗi “Package load failure”?

  2. Híc, chắc chỉ có một cách giả quyết là download lại các gói mới nhất và cài đặt lại thử.😦

  3. Cho em hỏi tại sao em cài silverlight rồi mới tạo ứng dụng silverlgiht thử thì chạy bình thường, lúc sau mở visual 2008 lên tạo ứng dụng silverlight thì ko còn thấy SilverLight trong phần New Project nữa. Em kiểm tra trong control panel thì thấy vẫn còn cài Microsoft Silver Light 2 SDK và Microsoft Silver Light 2 toolkit 2009 và kể cả Microsoft Silver Light Beta 3 SDK nữa. Visual studio em cũng upgrade lên Version 9.0.30729.1 SP rồi. Vậy sao giờ em ko thể tạo ứng dụng Silverlight = visual 2008 đc nữa vậy, chỉ dùm em với, sao tự dưng lại mất silverlight trong phần New Project vậy😦

  4. Em rất muốn đc anh namdh chỉ giáo thêm nhiều điều nhưng ko biết níck yahoo hay skype của anh để liên hệ, ko biết anh có thể cho em cái ních để liên lạc ko vậy
    nick yahoo của em là shjn8x@yahoo.com và skype là vanhuy.doan
    Rất vui đc làm quen với anh.

  5. Em thử remove hết đi, rồi cài lại Silverlight SDK mới (đã có bản chính thức).
    Theo tài liệu từ MS thì nếu đã cài Silverlight Tools bản Beta thì không thể làm việc với SL 2 được nữa.

  6. Em đã làm đc rồi, do em cài cả bản Beta và bản SL2 nữa nên ko dc.
    Design SilverLight ko thể kéo thả các control như bên winform với webform đc phải ko vậy anh. em làm thử mà ko đc, ví dụ khi mình muốn thêm 1 Button mình chỉ thêm đc vào phần file Page.xaml chứ ko kéo vàophần Design đc, ko di chuyển các control trong phần design đc phải ko?

  7. Trong bản này em vẫn chưa làm được nhiều với trình design, nếu mới bắt đầu, em nên dùng thêm Expression Blend để design rồi xem code nó tạo ra.
    Anh cũng thường dùng Blend để tạo giao diện rồi sau đó mới chuyển sang VS thêm code vào.

  8. Mọi người muốn dùng thử Expression Blend thì dow ở đây(bản này dùng thử có 60 ngày thôi) :
    http://www.microsoft.com/downloads/details.aspx?FamilyID=e82db5e2-7106-419e-80b0-65cce89f06bb&displaylang=en

    thông tin EB ở đây.
    http://www.microsoft.com/expression/products/Blend_Overview.aspx

    Thanks anh nam già nhiều lắm😀
    Design mà ko có tool dùng code thì nản lắm😀
    Mong sao MS có thể sớm hoàn thiện Silverlight tốt hơn nữa:D

  9. Vậy thôi, anh cũng chỉ dùng bản 60 ngày. Cứ dùng gần hết thi ghost lại🙂

  10. a ơi, cho em hỏi sau khi em đã cài đặt xong rùi, mà khi viết ứng dụng hệt như anh chỉ dẫn thì F5 chỉ ra trang trắng là sao hả anh?

  11. Ra trang trắng có thể là do đã có lỗi trong chương trình, em thử nhấp phải chuột lên trang web nếu menu ngữ cảnh hiện ra chỉ có 1 mục là Silverlight thì có nghĩa lỗi cho chương trình của em, nếu vẫn thấy menu như bình thường thì do cách em nhúng vào trang web không đúng.
    Trong trường hợp đầu em có thể tham khảo thêm thông báo lỗi bằng cách double click vào status bar (dùng IE).

  12. mình cũng bị trường hợp trang trắng như bạn ở trên, làm cách nào sửa lỗi đây

  13. anh ơi, sao chẳng chạy được gì hết, cũng chẳng thấy báo lỗi gì, ai gặp trường hợp như mình, chỉ với

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s