Silverlight – Step by Step (phần 1)


Chào mừng bạn đến với SilverLight, một công nghệ đa nền tảng, cho phép xây dựng các ứng dụng tương tác trên Web không phụ thuộc trình duyệt và tương tác với server. Dùng SilverLight, bạn có thể xây dựng các loại ứng dụng sau:
– Các ứng dụng nặng cho phép xem phim, nghe nhạc trên Internet
– Các ứng dụng nhỏ, kiểu như game hoặc các thành phần tương tác khác
– Các thành phần trực quan trên Web, hiển thị dữ liệu

Có thể coi SilverLight như một đối thủ nặng ký của Adobe Flash, ra đời sau, thừa hưởng tính ưu việt của các công nghệ hiện có, nhỏ gọn, (sẽ) đa nền tảng, bộ công cụ phát triển mạnh mẽ và hoàn chỉnh, và hơn hết là được phát triển bởi Microsoft – ông trùm số một trong thế giới phần mềm.
(Bài viết này chủ yếu dựa trên SilverLight QuickStart tại địa chỉ http://silverlight.net/quickstarts/silverlight10/default.aspx )

1. Tạo dự án SilverLight Làm thế nào để đưa SilverLight vào trang Web của bạn ? Một dự án SilverLight tiêu biểu thường có 4 file: 1 file HTML để chứa Silverlight plug-in, 1 file silverlight.js, 1 file XAML và một file Javascript chứa các hàm hỗ trợ cho file HTML. Tài liệu này mô tả cách tạo ra một dự án Silverlight cơ bản và đưa thêm nội dung vào file HTML trong vòng 3 bước

Trước khi bắt đầu

Trước khi bắt đầu, bạn cần chuẩn bị một số thứ sau: – Silverlight plug-in: nếu chưa có, xin mời nhấn vào đây để cài đặt Silverlight. Silverlight plug-in là phần mềm chạy trên trình duyệt để xử lý nội dung Silverlight, nó cũng tương tự như Flash Player – Một file HTML: bạn sẽ cần file này để hiển thị nội dung Silverlight, bạn có thể tự tạo một file của riêng bạn hoặc copy từ đây – một trình soạn thảo văn bản: bạn sẽ cần nó để chỉnh sửa file HTML, bạn có thể dùng Notepad, UltraEdit hoặc EditPlus

2. Thêm các tham chiếu cần thiết vào file HTML Trong bước này, bạn sẽ thêm các tham chiếu đến các file Silverlight.js và createSilverlight.js vào trong trang HTML, đồng thời tạo một element để chứa plug-in Silverlight. File Silverlight.js là một file hỗ trợ viết bằng Javascript, nó cho phép nội dung Silverlight có thể hiển thị được trên nhiều nền tảng khác nhau. Bạn cũng sẽ tạo file createSilverlight.js trong bước 2.

a. Lấy file Silverlight.js Bạn có thể lấy file này từ thư mục Tools trong bộ Silverlight 1.0 SDK.

b. Mở file HTML và thêm đoạn mã sau vào phần <head>. Nếu bạn chưa có sẵn một file HTML để dùng, nhấn nút phải chuột lên trên liên kết SampleHTMLPage.html và chọn “Save Target As…” để lưu file SampleHTMLPage.html vào cùng thư mục với file Silverlight.js.

<script type=”text/javascript” src=”Silverlight.js”></script>

c. Tạo một file trống và đặt tên là createSilverlight.js, bạn sẽ dùng file này trong bước 3. d. Trong trang HTML(SampleHTMLPage.html), thêm một tham chiếu đến script khác trong phần <head>, đặt thuộc tính src của tham chiếu là createSilverlight.js.

<script type=”text/javascript” src=”createSilverlight.js”></script>

Trang HTML của bạn giờ đã có những thành phần cơ bản sau:

<!DOCTYPE html PUBLIC
  “-//W3C//DTD XHTML 1.0 Transitional//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en”>
  <head>
    <title>A Sample HTML page</title>
    <script type=”text/javascript” src=”Silverlight.js”></script>
    <script type=”text/javascript” src=”createSilverlight.js”></script>
  </head>
  <body>
  </body>
</html>

2. Tạo thành phần chứa Silverlight và khởi tạo trên trang HTML a. Thêm ba dòng sau vào giữa cặp thẻ <body>, nơi bạn muốn Silverlight hiển thị:

<!– Where the Silverlight plug-in will go–> <div id=”mySilverlightPluginHost”> </div>

Bạn có thể thay đổi giá trị của ID trong thẻ

nếu muốn. Nếu bạn đang tạo nhiều plug-in Silverlight trên cùng một trang web, làm lại bước này cho một cái và phải đảm bảo giá trị của ID là duy nhất. b. Tạo khối lệnh khởi tạo: ngay sau đoạn HTML bạn vừa thêm vào ở bước trước, hãy thêm đoạn HTML và script sau:

<script type=”text/javascript”>
       
        // Retrieve the div element you created in the previous step.
        var parentElement =
            document.getElementById(“mySilverlightPluginHost”);
       
        // This function creates the Silverlight plug-in.
        createMySilverlightPlugin();
      
</script>

Nếu đang tạo nhiểu plug-in Silverlight trên cùng trang, hãy lặp lại bước này cho mỗi cái, bảo đảm mỗi tên hàm là duy nhất, hoặc bạn có thể dùng một hàm nhận tham số ID mà bạn đã đặt giá trị duy nhất. Cũng phải đảm bảo một điều là mỗi đọan script phải nằm ngay sau thẻ DIV tương ứng mà bạn đã tạo ở bước trên. Bạn đã hoàn thành bước 2. File HTML của bạn giờ có nội dung như sau:

<!DOCTYPE html PUBLIC
  “-//W3C//DTD XHTML 1.0 Transitional//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en”>
  <head>
    <title>A Sample HTML page</title>
    <script type=”text/javascript” src=”Silverlight.js”></script>
    <script type=”text/javascript” src=”createSilverlight.js”></script>
  </head>
  <body>

    <!– Where the Silverlight plug-in will go–>
    <div id=”mySilverlightPluginHost”>
    </div>
    <script type=”text/javascript”>
       
       
        // Retrieve the div element you created in the previous step.
        var parentElement =
            document.getElementById(“mySilverlightPluginHost”);
       
        // This function creates the Silverlight plug-in.
        createMySilverlightPlugin();
       
    </script>

  </body>
</html>

3. Định nghĩa hàm khởi tạo đối tượng Silverlight plug-in Mở file createSilverlight.js file bạn đã tạo ở bước 1 và thêm vào hàm javascript sau:

function createMySilverlightPlugin()

    Silverlight.createObject(
        “myxaml.xaml”,                  // Source property value.
        parentElement,                  // DOM reference to hosting DIV tag.
        “mySilverlightPlugin”,         // Unique plug-in ID value.
        {                               // Per-instance properties.
            width:’300′,                // Width of rectangular region of
                                        // plug-in area in pixels.
            height:’300′,               // Height of rectangular region of
                                        // plug-in area in pixels.
            inplaceInstallPrompt:false, // Determines whether to display
                                        // in-place install prompt if
                                        // invalid version detected.
            background:’#D6D6D6′,       // Background color of plug-in.
            isWindowless:’false’,       // Determines whether to display plug-in
                                        // in Windowless mode.
            framerate:’24’,             // MaxFrameRate property value.
            version:’1.0′               // Silverlight version to use.
        },
        {
            onError:null,               // OnError property value —
                                        // event handler function name.
            onLoad:null                 // OnLoad property value —
                                        // event handler function name.
        },
        null);                          // Context value — event handler function name.
}

 

Đoạn script trên chứa một số tham số mà bạn có thể sẽ muốn tùy biến, kiểu như chiều cao và chiều rộng của plug-in (có thể đặt kích thước theo phần trăm %), tên của file XAML chứa nội dung Silverlight của bạn, và một giá trị chỉ ra plug-in của bạn sẽ hoạt động ở chế độ cửa sổ hay tòan màn hình. Nếu đang thêm nhiều plug-in vào cùng một trang, hãy tạo một hàm mới cho mỗi cái, hoặc dùng hàm tạo sử dụng tham số (xem lại 2b). Với cách nào bạn cũng đều phải đảm bảo rằng lời gọi khởi tạo chỉ đến ID của mỗi plug-in khác nhau (“mySilverlightPlugin” trong ví dụ trên).
4. Tạo file chứa nội dung Silverlight Bạn đã tạm hoàn thành file HTML, giờ hãy tạo ra nội dung cho đối tượng Silverlight. Tạo một file trống có tên “myxaml.xaml” trong cùng thư mục với file HTML. Nếu bạn đã đổi tham số tên file trong bước trước, hãy đặt lại tên file của bạn cho đúng với giá trị mới của bạn. Bước này là tùy chọn: nếu muốn dự án Silverlight của bạn có khả năng xử lý các sự kiện, tạo mã động, hoặc những gì khác cho phép tương tác với người dùng, bạn sẽ cần thêm một file script nữa. Tạo file một file Javascript và thêm tham chiếu đến nó trong file HTML, bạn có thể làm giống ví dụ sau, trong ví dụ này tên file được đặt là “my-script.js”.

<script type=”text/javascript” src=”my-script.js”></script>

File HTML của bạn giờ sẽ chứa các thành phần sau:
<!DOCTYPE html PUBLIC
  “-//W3C//DTD XHTML 1.0 Transitional//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en”>
  <head>
    <title>A Sample HTML page</title>
    <script type=”text/javascript” src=”Silverlight.js”></script>
    <script type=”text/javascript” src=”createSilverlight.js”></script>
    <script type=”text/javascript” src=”my-script.js”></script>
  </head>
  <body>

    <!– Where the Silverlight plug-in will go–>
    <div id=”mySilverlightPluginHost”>
    </div>
    <script type=”text/javascript”>
       
       
        // Retrieve the div element you created in the previous step.
        var parentElement = document.getElementById(“mySilverlightPluginHost”);
        createMySilverlightPlugin();
       
    </script>

  </body>
</html>

Tạo nhiều đối tượng Silverlight

Nếu muốn tạo nhiều đối tượng Silverlight trên trang của bạn, hãy lặp lại các bước 2,3, và 4 cho mỗi đối tượng. Mỗi thẻ DIV (tạo trong bước 2a) phải có một giá trị ID duy nhất. Mỗi đoạn lệnh khởi tạo (trong bước 2b) phải nằm ngay sau thẻ DIV tương ứng được tạo ở bước trước (2a). Mỗi tham số ID của đối tượng cũng là duy nhất. Ghi chú: trong phần trên, các cụm từ “Silverlight plug-in”, “đối tượng Silverlight” được dịch từ cụm từ “Silverlight plug-in instance”

12 thoughts on “Silverlight – Step by Step (phần 1)

  1. Cám ơn bài viết của bạn. Bạn có thể cho phép mình đăng ký đăng bài của bạn trên cộng đồng Rich internet application Vietnam được không (tất nhiên với đầy đủ nguồn gốc xuất xứ):
    http://riavietnam.com

  2. Pingback: Mục lục « Nam Già

  3. anh cho em hỏi , em chỉ bik cách dùng source co săn để làm web mà chưa hề bik gì về các ngôn ngữ LT web như HTML XML PHp thì liệu có thể dùng fan hướng dẫn của anh bên trên để làm cho web của mỉnh ko ạ, và với 1 trang BLOG wordpress thì nên làm thế nào ạ

  4. Nếu đã muốn làm web thì em nên học qua các ngôn ngữ bản như xml, html, javascript… Những thứ này rất đơn giản và dễ nắm bắt, em có thể tìm đọc trong sách (có nhiều sách tiếng Việt).

  5. Em mới nghiên cứu silverlight được mấy ngày
    em muốn hỏi về bộ công cụ Microsoft Expression Blend 2 sao không thấy anh giới thiệu
    không sử dụng cái này liệu có cách nào khác thay thế không

  6. Bộ công cụ Blend được dùng chủ yếu bởi dân thiết kế, còn các bài viết chủ yếu tập trung vào lập trình, ngôn ngữ…
    Vậy nên anh không nói nhiều về chương trình này, tuy nhiên nếu mới học, em cũng có thể dùng nó để thiết kế, sau đó xem mã nó sinh ra, đó cũng là một cách hay để học đó em.

  7. Không phải học silverlight là phải học cả blend nữa sao.

    Có nghĩa là design sẽ tạo ra file tương tự như file .swf của flash và minh chỉ lấy file đó embed vào code.

  8. Code em đang nói đến chỉ là code HTML, hoặc thêm JavaScript. Tuy nhiên khi làm việc với Silverlight thì không chỉ có vậy, em còn có thể làm rất nhiều thứ, ví dụ như tạo/xử lý các đối tượng, kết nối đến một máy chủ nào đó để tải dữ liệu về, kiểm tra dữ liệu xem có đúng định dạng hay không… Tất cả những thứ như vậy phải được xử ly ngay bên trong chương trình Silverlight. Tương tự, bên Flash cũng có ActionScript, em có thể dùng nó để lập trình, vậy nên người ta mới có thể viết các game trên Flash được, và tất nhiên, mã lệnh ActionScript sẽ dịch và nhúng ngay bên trong file swf.

  9. E bắt đầu học về Sliverlight,e đọc bài của a là tài liệu đầu tiên tuy nhiên mấy cái file e k tải đc,a có thể up lại các file đc k? Mấy file ban đầu cần thiết ý

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