ออกแบบ หน้าจอ

ออกแบบ หน้าจอ (Display File)

นักศึกษาที่จบใหม่ ส่วนใหญ่ จะมีปัญหากับการออกแบบหน้าจอ (Display File)
กับชุดโปรแกรม RPG ที่มีอยู่  ...   อืมส์ ก็มันคนละยุคกันนี่ครับ :P

ไม่เป็นไร   แค่เข้าใจและประยุกต์ให้เหมาะสมก็ทำงานด้วยกันได้ง่ายแล้ว   เอาล่ะมาเริ่มกันเลยครับ

ชนิดของหน้าจอ

ผมแบ่ง  การเรียกใช้โปรแกรม RPG  ออกเป็น   กลุ่มดังนี้

a. ไม่ใช้หน้าจอ เลย  ... อันนี้ไม่พูดถึงน๊ะครับ
    ตย. ที่ใช้บ่อย  คือ  เรียกรายงานแบบ Batch
b. หน้าจอ  โดยไม่ติดต่อกับ DB  ...  มักทำเป็นแบบฝึกหัด
c. ใข้หน้าจอ  ติดต่อ DB ทีละ Record
    c.1 ดูอย่างเดียว
    c.2 add, change, delete Record
d. ใช้หน้าจอ  ติดต่อ DB ทีละหลาย Records  ... รู้จักกันในชื่อ Sub-File

    d.1 ดูอย่างเดียว 

    d.2 add, change, delete Record 

ลองดูภาพ   แล้วเทียบกับที่แต่ละคน  ออกแบบมาน๊ะครับ (เหมือน หรือ แตกต่าง)

หน้าจอ  โดยไม่ติดต่อกับ DB

จากภาพ  มีอะไร ?  ที่แตกต่างจากการออกแบบในยุคนี้ครับ ?

- ไม่ใช้  วิธีคลิก ปุ่ม (Submit) แต่ต้องกด Enter ...  แทบจะไม่ใช้งาน Mouse เลย

- การยกเลิกการใช้   ไม่ใช้ปิด Windows  แต่ต้องกดปุ่ม

   (F1 = ใช้ Function Key แถวบนของ Keyboard)

เทคนิคอื่นๆ 

- มุมบนซ้าย  ใส่ code   "w1","w2"  ใช้บอกสถานะว่า  กำลังใช้  หน้าจอลำดับไหนอยู่

- หน้าจอ  มีคำอธิบายที่ "ชัดเจน" (ไม่ต้องทำคุ่มือการใช้)

- ช่องที่ป้อนข้อมูลได้  จะเห็นเป็น "จุด" (Column Seperate) 

  ช่องไหน ที่ป้อนแล้ว  จะแสดงด้วย  "ตีเส้นใต้" (Underline)

Note   RPG พัฒนามาจากเครื่องมินิคอมพ์พิวเตอร์   
         มี Server ส่วนกลางตัวเดียว รับคำสั่งจาก PC (หรือ workstation) ผ่านการกด Enter  
จะเป็นการดีที่ให้ Server ทำงานน้อยเท่าที่จำเป็น  โดยการออกแบบหน้าจอที่เหมาะสม

หน้าจอ  ติดต่อ DB ทีละ Record

แบบดูผลอย่างเดียว

การออกแบบปัจจุบัน มักจะมี Dropdown รายชื่อพนักงานให้เลือก (ต้องเพิ่ม อ่านข้อมูล มาแสดง)
ตัวหน้าจอ  ต้องทำให้ Dropdown ทำงาน
- ถ้าตัวโปรแกรม  ทำงานบน Server  เท่ากับว่า  "เพิ่มภาระ" ให้ Server
- ถ้าตัวโปรแกรม  ทำงานบน PC ตัวมันเองก็จะดี (เช่น Java Script)

แต่ RPG ทำงานบน Server น๊ะ (ไม่ใช่ PC)  แนวคิดแบบข้างต้น ไม่เหมาะ (Server ต้องทำงานมากเกินไป)

แบบ add, change, delete Record

หน้าจอที่ 1 (w1) ป้อน Employee No  กด Enter

โปรแกรม จะตรวจ  

    ถ้า DB ไม่มีข้อมูล  จะเตรียม  หน้าจอที่ 2 (w2)    จะขึ้นสถานะ "Add" (ภาพแถวบน)

         บันทึกข้อมูล  แล้วกด Enter

              แสดง หน้าจอที่ 3 (w3) เพื่อยืนยัน (confirm)

    ถ้า DB มีข้อมูล  จะ Load ข้อมูล  หน้าจอที่ 2 (w2)    จะขึ้นสถานะ "Change" (ภาพแถวล่าง)

         ปรับ/แก้ไข  แล้วกด Enter

              แสดง หน้าจอที่ 3 (w3) เพื่อยืนยัน (confirm)

ถ้าต้องการ  ออกจากโปรแกรม ให้ กด F1

ถ้าต้องการ  ถอยกลับไปหน้าจอ ก่อนหน้า ให้กด F3

สังเกต  หน้าจอมีลักษณะเหมือนกัน    ในการออกแบบเราสามารถใช้ชุดเดียวกันได้

หน้าจอ  ติดต่อ DB ทีละหลาย Record

หน้าจอ ดูอย่างเดียว

รู้จักกันในชื่อ Sub-File

หน้าจอที่ 1 (w1) ป้อน  Employee No  เพื่อกำหนดจุดแสดงเริ่มต้น เช่น เริ่มต้นที่ B6940
เมื่อกด Enter จะแสดง รายการที่เริ่มต้น
(เทียบกับ .Net ก็คือ GridView)

หน้าจอ  add, change, delete Record 

หน้าจอจะคล้ายกัน  แต่ "เพิ่ม"  ช่องให้เลือกรายการข้อมูลได้
เมื่อเลือกแล้ว หน้าจอจะแสดง  หน้าจอติดต่อกับ DB 1 record
(เทียบกับ .Net ก็คือ GridView แบบแสดงตัวเลือก)

มาถึงจุดนี้  คงเห็นภาพขั้นต้น เพื่อที่จะเขียนโปรแกรมได้แล้วน๊ะครับ
ถัดไป  ก็เขียนโปรแกรม Flow

อืมส์... บางคนคงอึดอัดนิดๆ  เพราะ Developer มักจะคิด "ทุกด้่าน" ในครั้งเดียว
แต่ถ้าเรียงตามลำดับ คือ เราต้องคุ้นกับ "ข้อจำกัด" ก่อน แล้วจึงปรับตัวเลือกตาม