1. เปิด VisualStudio 2008 หรือ Visual Web Developer 2008 แล้วเลือกเมนู File -> New Project
2. แล้วเลือก Silverlight Application
3. เราตั้งชื่อโปรเจ็กว่า DiggSample เมื่อเรากด OK แล้ว โปรแกรมจะขึ้นไดอะลอกถามว่า ต้องการสร้างเพียงโปรเจ็ก Silverlight เพียว ๆ หรือ ต้องการให้ผนวกโปรเจ็กนี้เข้าไปในเว็บ ASP.NET ด้วยเลย
สำหรับตัวอย่างนี้เราจะเลือกผนวกเข้าใน ASP.NET และตั้งชื่อว่า DiggSample_WebServer เมื่อเราคลิก OK โปรแกรมก็จะสร้าง โซลูชั่น ซึ่งจะมีทั้งไฟล์ในฝั่ง Client และในฝั่ง Server ให้พร้อมกันในทีเดียว
เมื่อเรากด "Build" แล้ว VisualStudio จะคอมไพล์โปรแกรมของเรา และนำไปใส่ไว้ใน โปรเจ็กเว็บเซิร์ฟเวอร์ของเราโดยอัตโนมัติ โดยจะสร้างหน้า ASP และหน้า Html ให้โดยอัตโนมัติ
(โปรแกรม Silverlight รันได้กับเว็บเซิร์ฟเวอร์ทุกชนิด แม้แต่บน Apache
และหน้า Html ที่เราจะใส่ Silverlight เข้าไป ก็เขียนได้จากภาษาใดก็ได้ เช่น PHP,Java ,Python,Ruby)
มีไฟล์อะไรบ้างใน Silverlight
เมื่อเราสร้างโปรเจ็กเสร็จใหม่ เราจะได้ไฟล์ Page.xaml และ App.xaml และไฟล์ภาษา (C# หรือ VB ที่่เราได้เลือกไว้) เป็นไฟล์ที่เรียกว่า Code Behide Class file ซึ่งจะคู่กันกับไฟล์ .xaml เช่น (cs คือ C Sharp)
Page.xaml คู่กับไฟล์ Page.xaml.cs
App.xaml คู่กับไฟล์ App.xaml.cs
ไฟล์ .xap (อ่านว่า แซ๊บ) ได้ย่อขนาดมาแล้ว ด้วยวิธี Zip ดังนั้นจึงได้ขนาดที่เล็กApp.xaml คู่กับไฟล์ App.xaml.cs
ไฟล์ XAML คือ ไฟล์ XML ชนิดใหม่ เอาไว้สำหรับเขียนกำหนด หน้าตา ของโปรแกรม สำหรับ silverlight หรือ WPF
App.xaml ใช้เขียนเพื่อเก็บ resource ที่จะใช้ร่วมกันทั้งโปรแกรม เช่น Brush(แปรงสี) หรือ Style
App.xaml.cs ใช้เขียน เพื่อทำงานตอนที่เกิด Event (เหตุการณ์) ต่าง ๆ ที่เกี่ยวกับโปรแกรม เช่น Application_Startup , Application_Exit ,Application_UnhandledException
Page.xaml ใช้เขียนกำหนดหน้าตา UI ของโปรแกรม โดยเราจะเขียนว่ามี UI Control ใดบ้างที่อยู่บนหน้าโปรแกรม และเชื่อมไปยัง Page.xmal.cs เมื่อเกิด event บน UI เหล่านั้น
ตั้งแต่ตอนแรกที่คอมไพล์โปรเจ็กเสร็จ VS จะคอมไพล์หน้า Page.xmal ออกมาเป็นคลาส .NET ครึ่งหนึ่ง และคอมไพล์ Page.xmal.cs อีกครึ่งหนึ่ง แล้วนำมารวมเป็นคลาสเดียวกัน
เช่นเดียวกัน คอมไพล์และรวมไฟล์ App.xaml และ App.xmal.cs รวมเป็นอีกหนึ่งคลาส
รวมได้ 2 คลาส แล้วเอามาแพ็กรวมกัน เป็นไฟล์ DiggSample.xap บนฮาร์ดดิสก์
App.xaml ใช้เขียนเพื่อเก็บ resource ที่จะใช้ร่วมกันทั้งโปรแกรม เช่น Brush(แปรงสี) หรือ Style
App.xaml.cs ใช้เขียน เพื่อทำงานตอนที่เกิด Event (เหตุการณ์) ต่าง ๆ ที่เกี่ยวกับโปรแกรม เช่น Application_Startup , Application_Exit ,Application_UnhandledException
Page.xaml ใช้เขียนกำหนดหน้าตา UI ของโปรแกรม โดยเราจะเขียนว่ามี UI Control ใดบ้างที่อยู่บนหน้าโปรแกรม และเชื่อมไปยัง Page.xmal.cs เมื่อเกิด event บน UI เหล่านั้น
ตั้งแต่ตอนแรกที่คอมไพล์โปรเจ็กเสร็จ VS จะคอมไพล์หน้า Page.xmal ออกมาเป็นคลาส .NET ครึ่งหนึ่ง และคอมไพล์ Page.xmal.cs อีกครึ่งหนึ่ง แล้วนำมารวมเป็นคลาสเดียวกัน
เช่นเดียวกัน คอมไพล์และรวมไฟล์ App.xaml และ App.xmal.cs รวมเป็นอีกหนึ่งคลาส
รวมได้ 2 คลาส แล้วเอามาแพ็กรวมกัน เป็นไฟล์ DiggSample.xap บนฮาร์ดดิสก์
การนำโปรแกรมที่ได้ไปรันบนเว็บ ก็คือ ปะแท็ก <object> บนหน้าไฟล์ Html (ไม่ต้องใช้ JavaScript) แล้วชี้ไปที่ไฟล์ .xap ง่าย ๆ แค่นั้น
โปรแกรมที่เราเขียนขึ้นจะรันได้ ทั้งบน IE(Internet Explorer),FireFox ,Safari,etc)
และบน Windows, Mac, Linux
มาใส่ Control และทำ Event กัน
ให้เปิดไฟล์ Page.xaml ขึ้นมา เราจะเพิ่มปุ่ม โดยใส่แท็ก <Button> เข้าไประหว่างบรรทัด <Grid> และ </Grid> ดังนี้
พอเราเริ่มเขียน <B แล้ว Intellisense จะขึ้นมาทันที
ให้เลือก Button แล้วกดเว้นวรรค
เราจะกำหนดชื่อให้ปุ่มนี้ด้วยแอททริบิว x:Name="MyButton"
กำหนดข้อความบนปุ่ม ด้วย Content="Push Me!"
ความกว้าง 100 สูง 50 ด้วย Width="100" Height="50"
แล้วปิดด้วย /> ดังนี้
เมื่อเราคอมไพล์และสั่ง Run แล้วจะปรากฏหน้าตา ดังนี้
เราจะใส่ event ชื่อว่า "Click"ให้กับปุ่มนี้ ดังนี้
เมื่อ VS ขึ้น ช่อง new event handler แล้ว ให้กดปุ่ม Enter
จะปรากฏ method ชื่อดีฟอลท์ว่า MyButton_Click ขึ้นที่ไฟล์ Page.xaml.cs
ให้เราเขียนคำสั่งใน Method นั้นว่า MyButton.Content = "Pushed!"
(เปลี่ยนข้อความบนปุ่มให้เป็น Pushed!)
หลังจากที่คอมไพล์ใหม่แล้วรัน จะปรากฏหน้าเดิม
แต่เมื่อเรากดปุ่ม ข้อความบนปุ่มจะเปลี่ยนเป็น "Pushed!"
ไม่มีความคิดเห็น:
แสดงความคิดเห็น