สวัสดีครับ เหล่า Developer ทุกท่าน สำหรับบทความชุดนี้ เป็นบทความแปลจากบทความชุด Silverlight QuickStart บนเว็บไซต์ Silverlight.net ซึ่งผมได้ทำการเรียบเรียงเนื้อหา ให้เหมาะสมกับ Developer โดยเฉพาะ ซึ่งคุณสามารถนำเอาเทคนิคต่างๆ จากบทความชุดนี้ ไปใช้ในการนำเอาโปคเจค Silverlight ที่สร้างจาก Microsoft Expression Blend 2 มาใช้บนหน้าเว็บ ได้อย่างมีประสิทธิภาพมากขึ้น สำหรับบทความแรกในชุดนี้ จะเป็นการทำความรู้จักกับโครงสร้างและไฟล์ต่างๆ ที่จำเป็นในการแสดงผล Silverlight บนหน้าเว็บของคุณ เชิญติดตามอ่านได้เลยครับ
ตอนที่ 1
คุณจะสร้างสีสันให้แก่เว็บเพจของคุณด้วยการเพิ่ม Silverlight เข้าไปได้อย่างไร? โดยปกติแล้ว Silverlight Project ประกอบด้วยไฟล์ 4 ชนิด ได้แก่ไฟล์ HTML ที่ใช้เก็บ plug-in instance ของ Silverlight ไฟล์ silverlight.js ไฟล์ XAML และไฟล์ JavaScript ซึ่งสนับสนุนการทำงานของไฟล์ HTML หน้านี้จะอธิบายว่าคุณจะสร้าง Silverlight Project แบบง่ายๆ และเพิ่ม Silverlight Content ลงไปในไฟล์ HTML โดยเพียงแค่ 3 ขั้นตอน คู่มือนี้ประกอบด้วยเนื้อหาส่วนต่างๆ ดังนี้
· ก่อนที่จะเริ่มต้น Silverlight Project
· ขั้นตอนที่ 1: เพิ่มการอ้างอิงสคริปท์ลงไปในเพจ HTML
· ขั้นตอนที่ 2: สร้าง HTML host element และบล็อกตั้งค่าเริ่มต้น
· ขั้นตอนที่ 3: กำหนด create function ที่ตั้งค่าเริ่มต้นให้แก่ plug-in instance
· ขั้นตอนที่ 4: สร้าง Silverlight Content File
· สร้าง Silverlight plug-in instance หลายๆ ชุด
ก่อนที่จะเริ่มต้นทำงาน
ก่อนที่คุณจะสร้างเนื้อหาของ Silverlight คุณจำเป็นต้องมีองค์ประกอบดังต่อไปนี้
· ปลั๊กอิน Silverlight: ถ้าหากคุณยังไม่มี เข้าไปในลิงก์นี้เพื่อติดตั้งปลั๊กอิน Silverlight ให้แก่บราวเซอร์ของคุณ
· ไฟล์ HTML: คุณจำเป็นต้องมีไฟล์ HTML เพื่อเอาไว้แสดงเนื้อหาของ Silverlight ใช้ไฟล์ HTML ที่คุณมีอยู่แล้ว หรือก็อปปี้ไฟล์นี้ไปใช้ก็ได้
· เทกซ์อิดิเตอร์: คุณจำเป็นต้องมีเทกซ์อิดิเตอร์อาทิ Notepad เพื่อเอาไว้แก้ไขไฟล์ HTML ของคุณ
ขั้นตอนที่ 1: เพิ่มการอ้างอิงสคริปท์ลงไปในเพจ HTML
ในขั้นตอนนี้ คุณจะเพิ่มการอ้างอิงไปในไฟล์จาวาสคริปท์ที่ชื่อ Silverlight.js และ createSilverlight.js ให้กับเพจ HTML ของคุณ รวมทั้งสร้างองค์ประกอบที่ใช้เป็นตัวเก็บปลั๊กอิน Silverlight ด้วย ไฟล์ Silverlight.js เป็นไฟล์ตัวช่วยจาวาสคริปท์ที่ช่วยให้สามารถเรียกดูเนื้อหาของ Silverlight บนแพลตฟอร์มหลายชนิด จากนั้นคุณจะสร้างไฟล์ createSilverlight.js ขึ้นมาในขั้นตอนที่ 2
ก. ก็อปปี้ไฟล์ Silverlight.js จากโฟลเดอร์ Tools ซึ่งอยู่ใน Silverlight 1.0 SDK และนำไปไว้ในโฟลเดอร์ใหม่ หรือโฟลเดอร์เดียวกับไฟล์ HTML ที่คุณต้องการใช้ Silverlight
ข. เปิดเพจ HTML แล้วเพิ่ม markup เหล่านี้ลงไปในแท็ก <head> ของไฟล์ ถ้าหากคุณยังไม่มีไฟล์ HTML ใช้อยู่ คุณสามารถเซฟไฟล์ SampleHTMLPage.html ที่เราเตรียมไว้ให้ ไปไว้ในโฟลเดอร์เดียวกับไฟล์ Silverlight.js ได้เช่นกัน
<script type="text/javascript" src="Silverlight.js"></script>
ค.สร้างไฟล์ว่างๆขึ้นมาแล้วตั้งชื่อว่า createSilverlight.js คุณจะใช้ไฟล์นี้ในขั้นตอนที่ 3
ง.ในเพจ HTML (SampleHTMLPage.html) เพิ่มการอ้างอิงสคริปท์อีกชุดหนึ่งอยู่ในแท็ก <head> ในครั้งนี้กำหนด src เป็น createSilverlight.js
<script type="text/javascript" src="createSilverlight.js"></script>
ในตอนนี้โค้ด HTML ของคุณควรมีโค๊ดในลักษณะนี้
<!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: สร้าง HTML host element และบล็อกตั้งค่าเริ่มต้น
ก. สร้าง แท็ก HTML element โดยการเพิ่มโค้ด 3 บรรทัดนี้ลงไปในไฟล์ HTML ของคุณ โดยอยู่ระหว่างแท็ก <body> ตรงจุดที่คุณต้องการให้เนื้อหาของ Silverlight ปรากฏขึ้นมา
<!-- Where the Silverlight plug-in will go-->
<div id="mySilverlightPluginHost">
</div>
คุณสามารถเปลี่ยนแปลง ID ของ <div> tag ได้ตามความพอใจ ถ้าหากคุณต้องการสร้าง Silverlight plug-in instance หลายๆชุดในเพจเดียวกัน ให้คุณทำขั้นตอนนี้ซ้ำอีกครั้งสำหรับ plug-in instance แต่ละชุด และตรวจสอบให้แน่ใจว่า ID ไม่ซ้ำกัน
ข. สร้างบล็อกตั้งค่าเริ่มต้น: หลังจากเริ่ม HTML ลงไปในขั้นตอนก่อนหน้านี้ ให้คุณเพิ่ม HTML และสคริปท์ต่อไปนี้ลงไป
<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>
ถ้าหากคุณสร้าง Silverlight plug-in instance หลายชุดในเพจเดียวกันให้คุณทำขั้นตอนนี้ซ้ำสำหรับ plug-in instance แต่ละชุด ตรวจสอบให้แน่ใจว่าชื่อ create function ไม่ซ้ำกัน หรือคุณอาจใช้ฟังก์ชันที่รับพารามิเตอร์ที่คุณกำหนดให้ใช้ได้กับ ID ตัวใดตัวหนึ่งโดยเฉพาะก็ได้ ตรวจสอบให้แน่ใจว่าสคริปท์บล็อกแต่ละชุดสอดคล้องกับ DIV ที่คุณสร้างขึ้นมาในตอนก่อนหน้านี้
ตอนนี้จบขั้นตอนที่สองแล้ว ไฟล์ HTML ของคุณควรนี้มีโค๊ดดังต่อไปนี้
<!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>
ขั้นตอนที่ 3: กำหนด create function ที่ตั้งค่าเริ่มต้นให้แก่ plug-in instance
เปิดไฟล์ createSilverlight.js ที่คุณสร้างในขั้นตอนที่ 1 ขึ้นมาแล้วเพิ่มฟังก์ชัน JavaScript เหล่านี้ลงไป
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.
}
ฟังก์ชั่นนี้มีพารามิเตอร์หลายิย่างที่น่าสนใจ เช่น การปรับแต่งความสูงและความกว้างของปลั๊กอิน (กำหนดเป็นเปอร์เซ็นต์ได้) ชื่อของไฟล์ XAML ที่เก็บเนื้อหาของ Silverlight และค่าที่กำหนดให้การทำงานของของปลั๊กอินเป็นแบบ Windowless (ซึ่งจะทำให้คุณสามารถสร้าง Silverlight ที่มีพื้นหลังแบบโปร่งใส และผู้ใช้สามารถเห็นเนื้อหา HTML ที่อยู่ด้านหลังได้)
ถ้าหากคุณเพิ่ม Silverlight plug-in เป็นจำนวนมากลงไปในเพจเดียวกัน ให้คุณสร้างฟังก์ชันใหม่ขึ้นมาสำหรับ plug-in instance แต่ละชุด หรือใช้ฟังก์ชั่น Silverlight.createObject โดยตรงก็ได้ ซึ่งไม่ว่าคุณเลือกวิธีการใดก็ตาม ตรวจสอบให้แน่ใจว่า คุณได้กำหนด plug-in ID ที่ไม่ซ้ำกัน (ในตัวอย่างนี้คือ mySilverlightPlugin)
ขั้นตอนที่ 4: สร้างไฟล์เนื้อหา Silverlight ของคุณเองขึ้นมา
ก. สร้างไฟล์ว่างๆขึ้นมาชื่อ myxaml.xaml ในไดเรกทอรีเดียวกับไฟล์ HTML ถ้าหากคุณปลี่ยนแปลงพารามิเตอร์ของซอร์ซไฟล์ในขั้นตอนก่อนหน้านี้ เปลี่ยนชื่อไฟล์ให้ตรงกันด้วย
ข. (ทำหรือไม่ก็ได้) ถ้าหากคุณต้องการให้โครงการ Silverlights จัดการกับเหตุการณ์ต่างๆ สร้างโค้ดตามการเปลี่ยนแปลง หรือติดต่อกับผู้ใช้แล้วละก็ คุณจำเป็นต้องใส่ไฟล์สคริปท์เพิ่มเติมลงไป ให้คุณสร้างไฟล์ JavaSvipt ที่มีสคริปท์ของคุณ จากนั้นเพิ่มการอ้างอิงไปยังไฟล์ดงกล่าวในเพจ HTML ของคุณ ตัวอย่างด้านล่างนี้สร้างการอ้างอิงไปยังไฟล์สคริปท์ที่ชื่อ my-scrip.js
<script type="text/javascript" src="my-script.js"></script>
ไฟล์ HTML ของคุณควรมีองค์ประกอบดังต่อไปนี้
<!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="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");
createMySilverlightPlugin();
</script>
</body>
</html>
สร้าง Silverlight plug-in instance หลายๆชุด
ถ้าหากคุณต้องการสร้าง Silverlight plug-in มากกว่าหนึ่งชุดในเพจของคุณให้ทำขั้นตอนที่ 2, 3, 4 ซ้ำอีก สำหรับแต่ละ instance
· host <div> tag แต่ละชุด (ที่สร้างขึ้นในขั้นตอนที่ 2 ก.) ต้องที่ ID ที่ไม่ซ้ำกัน
· บล็อกตั้งค่าเริ่มต้น (ที่สร้างในขั้นตอนที่ 2 ข.)ต้องสอดคล้องกับ <div> tag ที่คุณสร้างขึ้นในขั้นตอนก่อนหน้านี้ (2 ก.)
· plug-in ID parameter ต้องไม่ซ้ำกัน
ขั้นตอนต่อไป
ในส่วนต่อไป หัวข้อ "สร้างไฟล์ XAML" คุณจะได้ลองวิธีการเพิ่มเนื้อหาลงไปในไฟล์ XMAL