การจัดการไฟล์บน LightSwitch ตอนที่ 3 การดีฟอลต์หน้าจอ เพิ่มแก้ไขไฟล์


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

บทความชุด การจัดการไฟล์บน LightSwitch

มีทั้งหมด 3 ตอน โดยในตอนที่ 1 และตอนที่ 2 ได้นำเสนอ ไปก่อนหน้านี้แล้ว ซึ่งใน
ตอนที่1: เป็นการกล่าวถึง การอัปโหลดไฟล์เอกสารไปบันทึกลงในฐานข้อมูล ใน
ตอนที่2: เป็นการกล่าวถึง การดาวน์โหลดไฟล์เอกสารกลับมาใช้งานอีกครั้ง และ
เมื่อนำไปใช้งาน แล้วคุณมีการปรับปรุง แก้ไขไฟล์ข้อมูล
โดยคุณต้องการนำไฟล์ไปเก็บไว้ที่เดิม นั่นคือคุณสามารถแก้ไขได้ ซึ่งเป็นเนื้อหาที่กำลังจะกล่าวใน
ตอนที่3: เป็นตอนสุดท้ายของบทความชุดนี้
ก่อนเข้าสู่เนื้อหา ไปดูสิ่งที่จำเป็นในบทความ ดังนี้

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

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

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

  • ขั้นตอนที่ 1 เพิ่มเทมเพลตหน้าจอ New Data Screen
  • ขั้นตอนที่ 2 การดีฟอลต์หน้าจอ เพิ่มแก้ไขไฟล์
  • ขั้นตอนที่ 3 การเขียนโด้ด เพื่อดีฟอลต์หน้าจอ เพิ่มแก้ไขไฟล์
  • ขั้นตอนที่ 4 การทดสอบโปรแกรม

ขั้นตอนที่ 1 เพิ่มเทมเพลตหน้าจอ New Data Screen

1. โปรเจ็กต์ในตอนที่3 นี้ ให้คุณนำโปรเจ็กต์ ในตอนที่2 มาใช้ต่อ
ซึ่งหน้าจอ New Data Screen (สำหรับอัปโหลดไฟล์) คุณได้สร้างไว้ก่อนแล้ว
โดยสามารถข้ามผ่านขั้นตอนที่1 ไปได้ และไปเริ่มในขั้นตอนที่2
แต่หากคุณสร้างโปรเจ็กต์ใหม่ สามารถทำตามขั้นตอน
ดังนี้

1.1 ในหน้าต่าง Entity Designer

1.2 การเพิ่มหน้าจอ ให้คลิกปุ่ม Screen (รูปที่ 1 หมายเลข 1)

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

1.3 ในหน้าต่าง Add New Screen =>
เลือก New Data Screen จากนั้น คุณจะได้หน้าจอ CreateNewDocument
(ดูรายละเอียดการสร้าง ในบทความตอนที่ 1 ประกอบเพิ่มเติม)


รูปที่ 1 Creates a screen

ขั้นตอนที่ 2 การดีฟอลต์หน้าจอ เพิ่มแก้ไขไฟล์

2.เข้าสู่หน้าต่าง Screen Designer ดังรูปที่2

2.1. LightSwitch ไม่มีคอนโทรลอัปโหลด และดาวน์โหลดไฟล์มาให้
คุณจำเป็นต้องสร้างขึ้นเอง

2.2 และคุณต้องเขียนโค้ดพิเศษเหล่านั้น ด้วยตัวเอง
(ดูรายละเอียดการสร้างในบทความตอนที่ 1 ประกอบ เพิ่มเติม)


รูปที่ 2 Screen Designer

3. ทำการเพิ่มพรอเพอร์ตี้ fileID เพื่อกำหนดเป็นพารามิเตอร์
สำหรับผ่านค่า id ของข้อมูลอ็อบเจ็กต์ Document
ซึ่งจะนำพารามิเตอร์ fileID ไปใช้เป็นเงื่อนไขในการคิวรี่ข้อมูลขึ้นมา
แล้วไปแสดงบนหน้าจอ CreateNewDocument
ให้คุณสามารถแก้ไขข้อมูลได้ทันที การสร้างทำได้โดย
คลิกเมนู Add Data Item บนหน้าจอ Screen Designer

4. บนหน้าจอ Add Data Item

4.1 ให้เลือก
Screen Member Type เป็น Local Property

4.2 เลือก Type =>
เป็น Integer (ซึ่งเป็นประเภทข้อมูล(Type) เดียวกันกับ id ของตาราง Document)

4.3 จากนั้น ติ๊ก Is Required ออก
(เพื่อให้รับค่าเป็น null ได้ เนื่องจาก ตอนเพิ่มข้อมูลใหม่ โดยกดปุ่ม Add คุณจะต้องผ่านค่า null ให้มัน จะกล่าวถึงรายละเอียดอีกครั้งในตอนเขียนโค้ด)

5. ช่อง Name

5.1 ให้ระบุชื่อเป็น fileID

5.2 จากนั้นคลิก OK…

6. กำหนดพรอเพอร์ fileID ให้เป็น Parameter โดยติ๊กถูกที่พรอเพอร์ตี้ Is Parameter

รูปที่ 3 เพิ่มพรอเพอร์ fileID

7. เพิ่มพรอเพอร์ตี้ Document โดยคลิกเมนู Add Data Item

7.1 แต่เลือก Screen Member Type เป็น Query

7.2 และใน รายการคิวรี่ เลือกคิวรี่ที่ชื่อ: Documents_SingleOrDefault
เพื่อโหลดข้อมูล 1 เร็กคอร์ด ตามพารามิเตอร์ fileID ที่คุณส่งให้มัน
เพื่อดึงข้อมูลไปแสดงบนหน้าจอ New Data Screen
(สำหรับ การแก้ไข ซึ่งจะกล่าวถึงอีกครั้งในตอนเขียนโค้ด)

8. ช่อง Name

8.1 ให้ระบุชื่อเป็น Document

8.2 จากนั้นคลิก OK…

9. ไปที่ Query parameter กำหนด Parameter binding
ให้เป็น fileID พรอเพอร์ตี้ที่เราได้เพิ่มไว้ก่อนหน้านี้
ในข้อ 3-6


รูปที่4 เพิ่มพรอเพอร์ตี้ Document

10. กำหนดดีฟอลต์หน้าจอ เพิ่มแก้ไขไฟล์ ให้เอนทิตี้ Document
ชี้ไปที่หน้าจอที่คุณสร้างเอง นั่นคือ CreateNewDocument

11. เปิดตาราง Document

11.1 ไปที่หน้าต่าง Properties

11.2. Default Screen เลือก CreateNewDocument

รูปที่5 Default NewEditeScreen

ขั้นตอนที่ 3 การเขียนโด้ด เพื่อดีฟอลต์หน้าจอ เพิ่มแก้ไขไฟล์

12. เปิดหน้าจอ CreateNewDocument ขึ้นมา

13. บนหน้าจอ CreateNewDocument Designer

13.1 ให้คลิกเมนู Write Code

13.2 จากนั้นคลิก เลือกเมธอด CreateNewCustomer_InitializeDataWorkspace
ซึ่งเป็นเมธอดเริ่มต้นโหลดหน้าจอ…
จากนั้นเตรียมใส่โค้ดลงในเมธอดดังกล่าว

รูปที่6 Write Code

14. ทำการใส่โค้ดในตอนเริ่มโหลดหน้าจอ CreateNewDocument
ดังนี้

14.1 โดยค่าดีฟอลต์ เป็นการเพิ่มอ็อบเจ็กต์ ใหม่เพียงอย่างเดียว
นั่นคือหน้าจอ CreateNewDocument ที่เราสร้างในบทความตอนที่ 1
เป็นการเพิ่มข้อมูลเท่านั้น ซึ่งเห็นได้จากโค้ดบรรทัดนี้ 21
ในรูปที่ 6
this.DocumentProperty = new Document();

14.2 ให้คุณคอมเมนท์ไว้ แล้วเพิ่มโค้ดของตัวเองลงไป
เพื่อให้หน้าจอทำหน้าที่ได้สองอย่าง ในหน้าจอเดียวกัน คือ ทั้งเพิ่ม และแก้ไข:


15. ในการเพิ่มข้อมูลใหม่ โดยกดปุ่ม Add
ถ้าคุณปล่อยให้เอนทิตี้ Default Screen เป็นแบบ Auto
โปรแกรม LightSwitch จะสร้างหน้าจออัตโนมัติให้
ซึ่งเป็นการยาก หากบนหน้าเพิ่มข้อมูลดังกล่าว
คุณได้เพิ่มความพิเศษบางลงไป โดยที่ค่าดีฟอลต์ของLightSwitch ไม่มีให้
เช่น ในหน้าจอที่เรากำลังกล่าวถึงในบทความนี้ ที่มีคอนโทรล อัปโหลดไฟล์ เป็นต้น

16. เปิดหน้าจอ SearchDocuments

17. บนหน้าจอ SearchDocuments Designer

17.1 ให้คลิก Command Bar

17.2 ทำการเพิ่มปุ่มคอมมานด์ 2 ปุ่มคือ
ปุ่ม Add และ ปุ่มEdit โดยคลิกเมนู +Add

17.3 เมื่อคลิกจะเห็นรายการเมนูของปุ่มต่างๆ แสดงออกมา

18. การเพิ่มปุ่ม…

18.1 ทำการเพิ่มปุ่มAdd ให้คลิก เมนู AddNew

18.2 การเพิ่มปุ่มEdit ให้คลิก เมนู EditSelected

19. จากนั้นเข้าไปเขียนโค้ดบนปุ่ม=>
โดยคลิกขวาบนปุ่มดังกล่าว (ปุ่มAdd หรือ ปุ่มEdit) =>
แล้วเลือกเมนู Overide Code


รูปที่7 เพิ่มปุ่ม Command Bar

20. เขียนโค้ดบนปุ่มAdd โดยคลิกขวาบน ปุ่มAdd=> จากนั้นเลือกเมนู Overide Code


21. เขียนโค้ดบนปุ่มEdit โดยคลิกขวาบน ปุ่มEdit=> จากนั้นเลือกเมนู Overide Code


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

22. กดปุ่มF5 บนคีย์บอร์ด เพื่อรันโปรแกรม คุณจะได้หน้าจอหลัก
ดังรูปที่8


รูปที่8 หน้าจอหลัก

23. การเพิ่มข้อมูล…

ในหน้าจอ Search Documents ให้คลิกไอคอนเพิ่มข้อมูล
(รูปเครื่องหมายบวกสีเขียว)

24. หน้าจอ Create New Document แสดงขึ้นมา
โดยพร้อมให้ป้อนข้อมูลใหม่ทันที ซึ่งเป็นหน้าจอที่คุณสร้างขึ้นเอง
ตามที่คุณกำหนดให้เป็นหน้าจอดีฟอลต์ของเอนทิตี้ Document เพื่อทำหน้าที่ในการเพิ่ม และแก้ไขข้อมูล


รูปที่9 การเพิ่มข้อมูล

25. การแก้ไขข้อมูล

ในหน้าจอ Search Documents เมื่อคลิกเมาส์บนแถวที่ต้องการแก้ไข
แล้วคลิกไอคอน แก้ไขข้อมูล (รูปดินสอ)

26. หน้าจอ Create New Document
ซึ่งเป็นหน้าจอที่คุณสร้างขึ้นเอง แสดงขึ้นมา
โดยโหลดข้อมูลที่คุณเลือกไว้ มาให้พร้อมสำหรับการแก้ไข


รูปที่10 การแก้ไขข้อมูล

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

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

  • การจัดการไฟล์บน LightSwitch ตอนที่ 1 การอัพโหลดไฟล์
  • การจัดการไฟล์บน LightSwitch ตอนที่ 2 การดาวน์โหลด และเปิดไฟล์
  • Visual Studio LightSwitch Default NewEditeScreen : http://bit.ly/vBEc7V

     

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

  • โปรเจ็กต์ประกอบบทความ (2012-12-23_FileManagOnLS_Part3.zip): http://sdrv.ms/12HymIw

 

ขอบคุณ บทความจาก นิตยสาร WindowsITPro

โดย:
Mr.Nano

  • บล็อก โปรแกรม ซอฟต์แวร์http://bit.ly/JANAWAT
  • บล็อก โปรแกรม จิต ฝึกความคิด สร้างความสุข: http://bit.ly/jNuchit
เกี่ยวกับ

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: