Silverlight – Step by Step (phần 1)

– 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ỉ

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ệuCó 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>

<!DOCTYPE html PUBLIC
  “-//W3C//DTD XHTML 1.0 Transitional//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”
  <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>

File HTML của bạn giờ sẽ chứa các thành phần sau:-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/1999/xhtml&#8221 ; xml:lang=”en”>

A Sample HTML page

    <!– 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”

Share this:

Like this:

Like

Loading…

Related Posts

Trả lời

Email của bạn sẽ không được hiển thị công khai.