โครงสร้างของ Theme

ไฟล์ที่จะทำงานกับ Theme ได้ จะเป็นเว็บฟอร์ม ที่มีการทำงานที่ฝั่งเซิร์ฟเวอร์เท่านั้น จะไม่สามารถใช้กับไฟล์ยูสเซอร์คอนโทรล (User Control) ได้ เพื่อความรวดเร็วในการสร้าง Theme ขอแนะนำให้เข้าไปเลือกดาวน์โหลดตัวอย่างเทมเพลตของไมโครซอฟท์ที่ http://msdn2.microsoft.com/en-us/asp.net/aa336613.aspx ดังภาพที่ 9-3

หลังจากที่ดาวน์โหลดตัวอย่างเทมเพลตมาแล้ว เราจะได้ไฟล์ติดตั้งที่มีนามสกุล vsi ให้เราทำการติดตั้งลงบนเครื่อง เมื่อติดตั้งเสร็จแล้วให้เปิด Visual Studio 2005 ขึ้นมาจะพบเทมเพลตดังภาพที่ 9-4

เมื่อสร้างเว็บไซต์จากเทมเพลตแล้ว ให้เราสำรวจโฟล์เดอร์ App_Themes ซึ่งเป็นโฟล์เดอร์ที่ใช้เก็บ Theme หลายๆ แบบ ใน ASP.NET 2.0 โครงสร้างของโฟลเดอร์ App_Themes แสดงดังภาพที่ 9-5

จากภาพที่ 9-5 ภายในโฟลเดอร์ App_Themes จะประกอบไปด้วย Theme ได้หลายๆ แบบ จากภาพเราจะเห็นว่ามี Theme1 และ Theme2 อยู่ภายใน และในโฟลเดอร์ Theme ก็มีไฟล์สไตล์ชีต โฟลเดอร์ที่เก็บรูปภาพ และไฟล์ Skin ซึ่งเป็นไฟล์หลักที่ใช้ในการกำหนดสไตล์ของเว็บฟอร์ม

การกำหนด Theme ให้กับเว็บฟอร์ม

เราสามารถกำหนด Theme ให้กับเว็บฟอร์มได้ง่ายๆ โดยเข้าไปกำหนดที่ Page Directive ในมุมมอง Source ของเว็บฟอร์ม ดังภาพที่ 9-6

จากภาพที่ 9-6 จะเห็นว่าเราสามารถเพิ่มแอตทริบิวต์ Theme ให้กับไดเรคทีฟ Page ซึ่งจะระบุชนิดของ Theme ที่เราต้องการกำหนดให้กับเว็บฟอร์ม ในกรณีที่มี Theme อยู่ในเว็บไซต์ ตัว Intelligence ของ Visual Studio 2005 จะตรวจพบโดยอัตโนมัติ พร้อมแสดงรายการ Theme ทั้งหมดที่เราสามารถกำหนดได้ขึ้นมา ภาพที่ 9-7a และ 9-7b จะแสดงผลการรันเว็บฟอร์มเดียวกัน แต่ต่าง Theme กัน

จากภาพตัวอย่างของ Theme ทั้งสองแบบ จะเห็นว่าผลของ Theme จะทำให้สีสัน และหน้าตาของตัวอักษรมีรูปแบบต่างกัน ที่น่าสนใจมากกว่านั้น คือรูปภาพที่แสดงในแต่ละ Theme จะแตกต่างกันด้วย ซึ่งตรงนี้เทคโลโลยีของสไตล์ชีตเดิมทำได้เหมือนกันผ่านสไตล์ที่ชื่อ background-image แต่จะไม่ยืดหยุ่นเท่า Theme ซึ่งสามารถกำหนดรูปภาพให้กับคอนโทรลที่ต้องการโดยตรง