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ỉ 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”>
<html xmlns=”http://www.w3.org/1999/xhtml” 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ẻ
<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>
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” 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>
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.
}
<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”>
<html xmlns=”http://www.w3.org/1999/xhtml” 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”
Đào Hải Nam 
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
OK, tất nhiên rồi 🙂
Pingback: Mục lục « Nam Già
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 ạ
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).
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
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.
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.
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.
Neu ma anh lam step by step silverligh thi good
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 ý
Em nên đọc phần Silverlight 2, phần Silverlight 1 này cũ quá rồi 😀