การสร้างเพจโฮม ใน LightSwitch


บทความจาก นิตยสาร WindowsITPro (ฉบับ August – September 2012)
ได้ขออนุญาตทางบก. เรียบร้อยแล้ว

 

โปรแกรม LightSwitch ช่วยให้การพัฒนาโปรแกรม
เป็นเรื่องง่ายมาก เพียงแค่คุณกำหนดแหล่งฐานข้อมูล
ให้ LightSwitch มันจะสามารถเข้าไปอ่านโครงสร้างฐานข้อมูล
แล้วนำไปสร้างหน้าจอโปรแกรม ให้คุณอย่างอัตโนมัติ
และพร้อมใช้งานทันที โดยที่คุณยังไม่ทันได้เขียนโค้ดโปรแกรมเลย แม้บรรทัดเดียว

แต่ในโลกของความเป็นจริง

ไม่ได้มีความเรียบง่าย เช่นนั้นเสมอไป
มันย่อมมีข้อจำกัด และติดขัดในเงื่อนไขทางด้านของธุรกิจที่ซับซ้อนขึ้น
หรือในกรณีที่คุณต้องการความพิเศษบางอย่าง
ที่ LightSwitch ไม่ได้เตรียมไว้ให้
เช่น คุณต้องการสร้างหน้าจอแรก(Home) หรือ
การสร้างเพจโฮม เพื่อแสดงรายละเอียดของโปรแกรม
เช่น ชื่อ เวอร์ชั่น หรือโลโก้ของโปรแกรม
คุณต้องอาศัยความชำนาญด้านการโปรแกรมมิ่ง
โดยการเขียนโค้ดบางส่วน เพื่อดึงข้อมูลเหล่านั้น
ไปแสดงบนหน้าจอ ซึ่งการสร้างเพจโฮม
ที่จะช่วยให้หน้าจอโปรแกรมของคุณดูน่าใช้งานมากขึ้น
เป็นเนื้อหาที่จะนำเสนอในบทความนี้

ก่อนอื่นไปดูสิ่งที่จำเป็นในบทความ ดังนี้

สิ่งที่จำเป็น (Prerequisites)

 

โดยมีขั้นตอนการพัฒนาโปรแกรม มีดังนี้

 

ขั้นตอนการพัฒนาโปรแกรม

  • ขั้นตอนที่ 1 การสร้างโปรเจ็กต์
  • ขั้นตอนที่ 2 การสร้างหน้าจอเพจโฮม
  • ขั้นตอนที่ 3 การเพิ่มรูปภาพโลโก้
  • ขั้นตอนที่ 4 การเขียนโด้ดโปรแกรม
  • ขั้นตอนที่ 5 การกำหนดหน้าจอแรก(Home)
  • ขั้นตอนที่ 6 การทดสอบโปรแกรม

 

ขั้นตอนที่ 1 การสร้างโปรเจ็กต์

1. เปิดโปรแกรม Microsoft Visual Studio 2010 (VS2010)

2. ไปที่เมนู New Project… ในหน้า Start Page หรือคลิกเมนู File =>
คลิกเมนู New =>คลิกเมนู Project…

3. ในหนเต่าง New Project คลิก LightSwitch =>
เลือก LightSwitch Application(Visual C#) หรือตามถนัด

3.1 ในช่อง Name: ระบุชื่อโปเจ็กต์

3.2 ช่อง Location: ระบุพาธที่เก็บโปรเจ็กต์

3.3 ช่อง Solution name: ระบุชื่อโซลูชั่น
(ปล่อยตามดีฟอลต์ ซึ่งเป็นชื่อเดียวกับชื่อโปรเจ็กต์)

4. กด OK ดังรูปที่ 1 (หมายเลข 1)

 


รูปที่ 1 การสร้างโปรเจ็กต์

 

ขั้นตอนที่ 2 การสร้างหน้าจอเพจโฮม

ในบทความนี้ เป็นการกล่าวถึง การสร้างเพจ โฮม ในLightSwitch เป็นหลัก
ฉะนั้นจะไม่มีการเชื่อมต่อฐานข้อมูล ผู้เขียนจึงข้ามขั้นตอน
ในการกำหนดแหล่งฐานข้อมูล โดยจะกระโดดไปสู่
การสร้างหน้าจอทันที เพื่อความง่ายในการทำความเข้าใจ ดังนี้

 

5. คลิก ขวาบนโฟลเดอร์ Screens=>
เลือกเมนู Add Screen…ดังรูปที่ 1 (หมายเลข2)

6. ในหน้าต่าง Add New Screen =>
เลือกเทมเพลตหน้าจอเป็น New Data Screen โดยช่อง
Screen Name: ตั้งชื่อเป็น Home จากนั้นคลิก OK ดังรูปที่ 2 (หมายเลข 1)

7. คุณผู้อ่านจะเข้าสู่หน้าจอ Screen Designer ดังรูปที่ 2 (หมายเลข 2)

 


รูปที่ 2 การสร้างหน้าจอ Home

 

8. ทำการเพิ่ม Data Item เพื่อนำไปแสดง
ชื่อโปรแกรม เลขที่เวอร์ชั่น และรูปโลโก้ของโปรแกรม
โดยคลิกที่ไอคอน Add Data Item…

9. ในหน้าต่าง Add Data Item

9.1 เลือก Local Property โดยกำหนด Type เป็น String

9.2 ช่อง Name: ระบุชื่อ Data Item เป็น AppName ดังรูปที่ 3 (หมายเลข 1)

9.3 คลิก OK

10. ให้เพิ่ม Data Item อีก 2 ตัว
โดยให้เริ่มทำตามขั้นตอน ตั้งแต่ ข้อ8 อีกครั้ง
โดยเปลี่ยนชื่อ Data Item เป็น AppVersion ดังรูปที่ 3 (หมายเลข 2)
และ AppLogo ดังรูปที่ 3 (หมายเลข 3)
โดย Data Item AppLogo ต้องการกำหนด Type เป็น Image
เนื่องจากคุณต้องนำไปแสดงรูปภาพโลโก้นั่นเอง

 


รูปที่ 3 การเพิ่ม Data Item

 

11. จากนั้นลาก Data Item ทั้ง 3 ตัวไปวางบน Screen
ดังรูปที่ 4 (หมายเลข 1) มันจะกลายเป็นคอนโทรลของ Screen

12. จากนั้นทำการเปลี่ยนคอนโทรล App Name และ App Version เป็น Label
เพื่อทำเป็นป้ายแสดงข้อความ ชื่อโปรแกรม และเลขที่เวอร์ชั่น
ดังรูปที่ 4 (หมายเลข 2)

13. ส่วนคอนโทรล App Logo
ให้ทำการเปลี่ยนโหมดของ Image เป็น Image Viewer
ดังรูปที่ 4 (หมายเลข 3)

 


รูปที่ 4 การปรับแต่งคอนโทรลของ Screen

 

14. ทำการปรับแต่งพรอปเพอร์ตี้ของ App Logo เพิ่มเติม ดังนี้

    14.1 Control Type = Image Viewer (ตามที่กล่าวแล้วใน ข้อ 13)

    14.2 Label Possition = Collapsed (ซ่อนไม่แสดงป้ายชื่อ)

    14.3 กำหนดความกว้าง(MaxWidth) = 680

    14.4 กำหนดความสูง(MaxHeight) = 370 ดังรูปที่ 5

 


รูปที่ 5 การปรับแต่งพรอปเพอร์ตี้ของคอนโทรล App Logo (Image)

 

 

ขั้นตอนที่ 3 การเพิ่มรูปภาพโลโก้

ในการเพิ่มรูปภาพ
ให้คุณผู้อ่านเข้าไปเพิ่มบนโปรเจ็กต์ Client
ซึ่งคุณอ่านต้องเปลี่ยนมุมมองโปรเจ็กต์เป็น File View
จึงจะเห็นโครงสร้างโปรเจ็กต์ทั้งหมด ซึ่งมีขั้นตอนดังนี้

15. คลิกเมาส์ บนชื่อโปรเจ็กต์ จากนั้นคลิกไอคอน File View =>
เลือก File View

16. คลิกขวาบนโปรเจฌกต์ Client =>
คลิกเมนู Add =>
คลิกเมนู New Folder =>
จากนั้นตั้งชื่อเป็น Images
ดังรูปที่ 6

 


รูปที่ 6 การสร้างโฟลเดอร์ Images

 

17. จากนั้นทำการนำไฟล์รูปภาพโลโก้
ไปใส่ในโฟล์เดอร์ที่เตรียมไว้ โดยการคลิก – ลาก – วาง
ดังรูปที่ 7

 


รูปที่ 7 การเพิ่มรูปภาพโลโก้ โดยการคลิก – ลาก – วาง

 

18. จากนั้นทำการปรับพรอปเพอร์ตี้ของรูปภาพเพิ่มเติม
โดยกำหนด Build Action เป็น Embedded Resource
เพื่อแนบไฟล์รูปไปพร้อมกับ Resource ของโปรแกรม
ดังรูปที่ 8

 

 


รูปที่ 8 การกำหนดพรอปเพอร์ตี้ของรูปภาพเป็น Embedded Resource

 

 

ขั้นตอนที่ 4 การเขียนโด้ดโปรแกรม

19. เมื่อเตรียมหน้าจอพร้อมแล้ว
คุณผู้อ่านต้องไปขียนโค้ด เพื่อดึงชื่อ เวอร์ชั่น และโลโก้ของโปรแกรม
ไปแสดงบนหน้า Home
โดยวิธีการเข้าไปเขียนโค้ด
ให้คลิกบนไอคอน Write Code
แล้วเลือกเมธอด Home Created
ดังรูปที่ 9

 


รูปที่ 9 Write Code

 

20. จากนั้นทำการเขียนโค้ดโปรแกรมลงไปใน
เมธอด Home_create()
ดังนี้


 

ขั้นตอนที่ 5 การกำหนดหน้าจอแรก(Home)

ใน LightSwitch หน้าจอที่ถูกสร้างอันแรก
จะถูกกำหนดเป็นหน้าโฮมอัตโนมัติ
แต่ถ้าคุณต้องการกำหนด
หน้าจอที่ต้องการให้เปิดเป็นหน้าจอแรก
สามารถทำได้ดังนี้

21. คลิกเมาส์เลือกโปรเจ็กต์ =>
เลือกเมนู Properties

22. ในหน้าต่าง Project Designer =>
คลิกแทบ Screen Navigation =>
จากนั้นคลิกเลือกหน้าจอที่ต้องการ
แล้วคลิกปุ่ม Set ดังรูปที่ 10
แต่ในบทความนี้
ผู้เขียนมีเพียงหนึ่งหน้าจอ
มันจึงถูกกำหนดให้เป็นหน้าโฮมอัตโนมัติ

 


รูปที่ 10 Set Startup Screen

 

 

ขั้นตอนที่ 6 การทดสอบโปรแกรม

กดปุ่ม F5 เพื่อรันโปรแกรม
คุณจะได้หน้าจอ Home
เปิดเป็นหน้าแรก แสดงชื่โปรแกรม เวอร์ชั่น และรูปภาพโลโก้ของโปรแกรม
ดังรูปที่ 11

 


รูปที่ 11 หน้าจอ Home

 

การสร้างเพจ โฮม ในLightSwitch
เพื่อบ่งบอกให้ (ผู้ใช้) ทราบว่า โปรแกรมชื่ออะไร? เวอร์ชั่นใหน และ
เพิ่มความสวยงาม โดยการแต่งรูปสวยๆ ทำเป็นโลโก้ ประจำโปรแกรม
ก็จะช่วยโปรแกรมน่าใช้งานมากขึ้น
ดึงดูดความน่าสนใจ และเป็นยกระดับความเป็นมืออาชีพ ของคุณสูงขึ้นไปอีก
แล้วพบกันใหม่ครับ

 

แหล่งข้อมูลอ้างอิง:

แหล่งข้อมูลดาวน์โหลด:

  • โปรเจ็กต์ประกอบบทความ (2012-07-26_CreateHomePageInLightSwitch.zip): http://sdrv.ms/QkbvQE

 

ขอบคุณ บทความจาก นิตยสาร WindowsITPro (ฉบับ August – September 2012)

โดย:
Mr.Nano


 

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน LightSwitch

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: