การสร้าง HELP

November 16, 2020 admin No Comments สู่เส้นทางดิจิตอล

ส่วนช่วยเหลือ(Help) เป็นส่วนหนึ่งที่ได้ถูกพัฒนามาอย่างต่อเนื่อง ในยุคแรกที่ยังใช้ DOS เป็นระบบปฎิบัติการจะเป็นแบบ .DBF-Style Help พอเริ่มเข้ามาสู่ในยุคของ Windows ก็ได้เปลี่ยนมาเป็นแบบ Graphical Help ครั้นเข้าสู่ยุคของ Internet ก็ได้เกิดมี HTML Help ซึ่งก็คือ help ที่สร้างโดยใช้ภาษา HTML(Hypertext Markup Language) สำหรับหนังสือเล่มนี้จะอธิบายการสร้างส่วนช่วยเหลือในแบบ HTML Help

ก่อนที่ท่านจะทำการสร้างส่วนช่วยเหลือได้นั้นจำเป็นจะต้องมีโปรแกรมที่ใช้ในการสร้างก่อน ซึ่งเราไม่สามารถสร้างโดยใช้โปรแกรม Visual FoxPro ได้โดยตรง สำหรับโปรแกรมที่เราจะใช้มีชื่อว่า HTML Help Workshop

การ Setup โปรแกรม HTML Help Workshop

      1. ทำการใส่แผ่น CD โปรแกรม Visual FoxPro 6 ลงใน CD-Rom Drive แล้วคลิ๊กที่ปุ่ม Start
      2. จากนั้นทำการคลิ๊กที่ Run ให้ป้อนคำสั่งดังนี้
        Image1.gif (3671 bytes)
  • ทำการ setup โปรแกรมตามขั้นตอนที่กำหนด

คุณสามารถ Download โปรแกรม HTML Help Workshop ได้ที่ เว๊ปไซด์ http://msdn.microsoft.com/workshop/author/htmlhelp/htmlhelp.exe

 

  1. ทำการ Setup ดังต่อไปนี้

Image2.gif (5890 bytes)

Image5.gif (9215 bytes)

คลิ๊กปุ่ม Next โปรแกรมก็จะทำการ Install โปรแกรม HTML Workshop ลงสู่เครื่องคอมพิวเตอร์จนเสร็จ

การสร้าง HTML Help

ในการสร้าง HTML Help จะมีขั้นตอนในการสร้างดังนี้คือ

  1. สร้างเอกสารที่อยู่ในรูปของไฟล์ Hypertext Markup Language (HTML)
  2. สร้าง Help Project
  3. สร้าง Table of Contents (TOC) หรือสารบัญ
  4. สร้าง Help Index (ดัขนี)

สร้างเอกสารที่อยู่ในรูปของ ไฟล์ Hypertext Markup Language(HTML)

เนื้อหาของ Help ที่เราจะทำการสร้างขึ้นมาจะประกอบไปด้วย ไฟล์ .HTM หรือ .HTML เป็นหลัก คุณสามารถที่จะสร้างเอกสารเหล่านี้ได้โดยใช้โปรแกรม Microsoft FontPage หรือโปรแกรมที่ใช้สร้างเอกสาร HTML อื่นๆ ก็ได้ วิธีการสร้างเอกสารเพื่อใช้เป็นเนื้อหานั้นให้คุณสร้างเป็นไฟล์ย่อยๆตามหัวข้อของ Table of Contents (สารบัญ) เช่น ถ้าคุณมีสารบัญทั้งหมดอยู่ 10 หัวข้อ ก็ให้คุณทำการสร้างเป็นไฟล์ HTML ตามจำนวนหัวข้อของสารบัญ เป็นต้น หรืออาจจะสร้างไว้มากหรือน้อยกว่าก็ได้ (ในที่นี้จะไม่ขออธิบายวิธีการสร้างไฟล์ HTML) เมื่อทำการสร้างเป็นที่เรียบร้อยแล้วก็ทำขั้นตอนต่อไปคือการสร้าง Table of Contents

สร้าง Help Project

Help Project จะเป็นตัวที่ใช้จัดการในเรื่องของการสร้างส่วนช่วยเหลือ ซึ่งก็จะคล้ายกับ Project ในโปรแกรม Visual FoxPro ให้คุณทำการสร้างโปรเจ็กขึ้นมาดังนี้

      1. ทำการเรียกโปรแกรม HTML Help Workshop ขึ้นมาแล้วคลิ๊กที่เมนู File จากนั้นคลิ๊กที่รายการ New
      2. ที่ New dialog box เลือก Project แล้วคลิ๊กปุ่ม OK
        Image7.gif (3024 bytes)
  • จากนั้นเราจะเข้าสู่ New Project Wizard ซึ่งเป็นเครื่องเมื่อที่ช่วยอำนวยความสะดวกในการสร้างโปรเจ็ก
  • ที่ dialog box ของ New Project ให้คุณคลิ๊กปุ่ม Next
      1. ที่ dialog box ของ New Project – Destination ให้คุณตั้งชื่อของโปรเจ็กที่คุณจะทำการสร้างขึ้นมา ให้คุณกำหนดชื่อเป็น MYHELP แล้ว คลิ๊กที่ปุ่ม Next
  • ที่ dialog box ของ New Project – Existing Files จะเป็นส่วนที่ใช้ในการกำหนดไฟล์ต่างๆที่มีอยู่แล้วนำมาใส่ไว้ในโปรเจ็กHTML Help table of contents (.hhc) กำหนดให้นำไฟล์ TOC ที่มีอยู่แล้วนำมารวมไว้ในโปรเจ็ก

    HTML Help Index (.hhk) กำหนดให้นำไฟล์ ดัชนี ที่มีอยูแล้วนำมารวมไว้ในโปรเจ็ก

    HTML File (.htm) กำหนดให้นำไฟล์ HTML ที่มีอยูแล้วนำมามารวมไว้ในโปรเจ็ก

    ในหน้านี้ให้คุณคลิ๊กปุ่ม Next ไปก่อนโดยไม่ต้องทำการคลิ๊กที่รายการใดๆ

  • ที่ dialog box ของ New Project – Finish ให้คลิ๊กปุ่ม Finish หลังจากนั้นเราก็จะได้ โปรเจ็ก MYHELP ดังภาพ
    1. คุณสามารถที่จะนำนำไฟล์ HTML ที่สร้างไว้ก่อนหน้านี้มารวมใน โปรเจ็กได้โดยการคลิ๊กที่ปุ่ม (Add/Remove topic Files) จากนั้นก็จะขึ้น dialog box ของ Topic Files ให้คุณทำการคลิ๊กที่ปุ่ม Add เพื่อนำไฟล์ HTML มารวมไว้ในโปรเจ็ก ดังภาพ แล้วคลิ๊กปุ่ม OK

สร้าง Table of Contents(TOC)

Table of Contents เป็นหัวข้อที่ใช้ในการเข้าถึงเนื้อหาของ help ซึ่งก็เหมือกับสารบัญของหนังสือ มีขั้นตอนในการสร้างดังนี้

  • ทำการคลิ๊กที่แท๊ป Contents จากนั้นให้ทำการเลือกรายการ Create a new contents File แล้วคลิ๊กปุ่ม OK
      1. ให้ทำการป้อนชื่อไฟล์ contents ที่สร้างขึ้นใหม่ว่า MYTOC แล้วคลิ๊กปุ่ม OK จากนั้นเราก็จะเข้าสู่ส่วนของการสร้าง Table of Contents
      2. ทำการกำหนด Heading โดยคลิ๊กที่ปุ่ม (Insert a heading)จากนั้นเราจะเข้าสู่ในส่วนของ Table of Contents Entry ที่แท๊ป General ในช่อง Entry title: เป็นส่วนที่ให้กำหนดข้อความที่จะแสดงในส่วนของสารบัญ ให้ทำการป้อน “เรียนเขียนโปรแกรม Visual FoxPro” (ไม่ต้องพิมพ์เครื่องหมาย “) จากนั้นให้คล๊กที่ปุ่ม OK
      3. ต่อมาก็ทำการกำหนดรายการของสารบัญโดยทำการคลิ๊กที่ปุ่ม (Insert a page) โปรแกรมก็จะถามว่า
        ให้คลิ๊กที่ปุ่ม No เพื่อเพิ่มรายการต่อจาก Heading ที่ได้สร้างไว้ก่อนหน้านี้
      4. ที่แท๊ป General ในช่อง Entry title: ให้ป้อน “เริ่มต้นกับ Visual FoxPro” จากนั้นให้ คลิ๊กปุ่ม Add
      5. ในส่วนของ Path or URL ที่ช่อง File or URL: ให้กำหนดชื่อไฟล์ HTML ที่เราต้องการ เช่น TOPIC1.HTM แล้วคลิ๊กที่ปุ่ม OK สองครั้งจากนั้นจะได้ TOC ดังภาพ

         

      6. ในกรณีที่มีรายการอื่นๆอีกให้ย้อนกลับไปทำตามในข้อ 3-6 แล้วแต่กรณี
      7. การกำหนดรูป Icon ให้กับรายการใน TOC ให้เข้าไปทำการแก้ไขรายการที่ต้องการ ให้เลื่อนแถบแสงไปที่รายการ “เรียนเขียนโปรแกรม Visual FoxPro” แล้วคลิ๊กที่ปุ่ม (Edit Selection)
  • คลิ๊กที่แท๊ป Advance ในช่อง Image Index กำหนดค่า เป็น 5 (Icon รูป folder) จากนั้นคลิ๊กปุ่ม OK
    1. ต่อมาให้คุณกำหนด Icon ให้กับรายการ “เริ่มต้นกับ Visual FoxPro” โดยกำหนดค่าให้กับ Image Index เป็น 1 (Icon รูป หนังสือ)
    2. คุณสามารถที่จะลบรายการใน TOC ได้โดยการคลิ๊กที่ปุ่ม (Delete Selection)

Help Index (ดัชนี)

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

  • ทำการคลิ๊กที่แท๊ป Index จากนั้นให้ทำการเลือกรายการ Create a new Index File แล้วคลิ๊กปุ่ม OK
      1. ให้ทำการป้อนชื่อไฟล์ Index ที่สร้างขึ้นใหม่ว่า MYINDEX แล้วคลิ๊กปุ่ม OK จากนั้นเราก็จะเข้าสู่ส่วนของการสร้าง Index ซึ่งจะมีลักษณะคล้ายกับการสร้าง Contents
      2. ให้คลิ๊กที่ปุ่ม (Insert a keyword) จากนั้นเราจะเข้าสู่ในส่วนของ Index Entry ที่แท๊ป General ในช่อง Keyword: เป็นส่วนที่ให้กำหนดข้อความ(keyword) ที่จะแสดงในส่วนของดัชนี ให้ทำการป้อน “Visual FoxPro” (ไม่ต้องพิมพ์เครื่องหมาย “) จากนั้นให้คล๊กที่ปุ่ม Add
  • ในส่วนของ Path or URL ที่ช่อง File or URL: ให้กำหนดชื่อไฟล์ HTML ที่เราต้องการ เช่น WELCOME.HTM แล้วคลิ๊กที่ปุ่ม OK ถ้าในกรณีที่ keyword ที่เรากำหนดไว้มีการอ้างถึงในไฟล์ HTML มากกว่าหนึ่งไฟล์ ก็ให้คลิ๊กปุ่ม Add เพื่อทำการเพิ่มไฟล์ HTML เข้าใน Keyword ได้อีก

  กำหนดข้อความไตเติ้ลให้กับ Help

คุณสามารถที่จะทำการกำหนดข้อความให้แสดงบนไตเติ้ลบาร์ให้กับโปรแกรม help ของคุณได้โดยการคลิ๊กที่แท๊ป Project แล้วคลิ๊กที่ปุ่ม (Change Properties Options) ทำการป้อนข้อความที่ช่อง Title: ในส่วนของ แท๊ป General จากตัวอย่างให้คุณป้อนคำว่า “เรียนเขียนโปรแกรม Visual FoxPro”

กำหนดไฟล์เพื่อแสดงตอนเริ่มเรียก Help

เมื่อทำการเรียกโปรแกรม help ขึ้นมาแล้วเราสามารถที่จะกำหนดให้แสดงไฟล์ HTML ตอนเริ่มต้นแสดง help ได้โดยเข้าไปกำหนดในส่วนของ Project แล้วทำการ Change Properties Option เลือกแท๊ป General ในช่อง Default File: ให้กำหนดไฟล์ที่ต้องการแสดงตอนเริ่มเรียก help

กำหนดให้มีแท๊ป Search ใน Help

ในการสร้าง help นั้นเราสามารถที่จะกำหนดให้ help ของเราสามารถที่จะค้นหา (Search) คำหรือข้อความใดๆก็ได้ โดยการเพิ่มแท๊ป Search ไว้ในโปรแกรม help จากเดิมที่จะมีเฉพาะแท๊ป Contents และ แท๊ป Index ได้โดยการเข้าไปกำหนดในส่วนของ Project แล้วทำการ Change Properties Option คลิ๊กที่แท๊ป Compiler แล้วคลิ๊กที่ช่อง Compile full-text search information

Compile HTML Help File

ก่อนที่คุณจะนำโปรเจ็กที่ได้สร้างไว้ไปใช้งานได้คุณต้องทำการ Compile โปรเจ็กนั้นก่อนโดยการคลิ๊กที่ปุ่ม (Compile HTML file) จากนั้นทำการกำหนดไฟล์โปรเจ็กที่ต้องการจะ Compile โดยกำหนดในช่อง Project file: และถ้าต้องการที่จะแสดง help ไฟล์หลังจากที่ทำการ compile แล้วก็ให้คลิ๊กที่ช่อง Automatically display compiled help file when don ดังภาพ

การเรียกใช้งาน Help ในโปรแกรม Visual FoxPro

เมื่อได้ทำการ compile โปรแกรม help เรียบร้อยแล้วเราจะได้ไฟล์ที่มีนามสกุล .CHM (MYHELP.CHM) คุณสามารถที่จะเรียกใช้งาน help ได้โดยการเรียกโปรแกรมนี้ที่ Windows ได้ทันที แต่สำหรับจุดประสงค์ในบทเรียนนี้คือการเรียก help ภายใต้โปรแกรม Visual FoxPro คุณสามรถทำได้โดยการป้อนคำสั่งที่ Command window ของ Visual FoxPro ดังนี้

เมื่อทำการกดปุ่มฟังก์ชัน F1 ที่แป้นพิมพ์ก็จะปรากฎ help ที่เราสร้างขึ้นมา ในกรณีที่ต้องการต้องการยกเลิกการแสดง help ที่ได้ทำการสร้างขึ้นมา โดยให้กลับไปเป็น help ของ Visual FoxPro ตามเดิมให้ป้อนคำสั่งดังนี้

Context-sensitive Help

Context-sensitive คือการอนุญาติให้ผู้ใช้งานสามารถที่จะเข้าถึงในส่วนต่างๆของ help ได้โดยตรง โดยการคลิ๊กที่ปุ่มเครื่องหมายคำถามบนฟอร์ม แล้วก็ทำการคลิ๊กในฟอร์ม ณ. ส่วนของวัตถุที่ต้องการแล้วโปรแกรมก็จะทำการแสดง help ในส่วนนั้นๆขึ้นมา

หลักและวิธีการเรียก Context-sensitive Help

หลักการของ Context-sensitive Help นั้นเมื่อเราทำการคลิ๊กที่ปุ่มเครื่องหมายคำถามบนฟอร์มแล้วนำไปคลิ๊ก ณ. ตำแหน่งที่ต้องการ ก่อนที่โปรแกรมจะแสดง help ขึ้นมานั้นมันจะไปนำค่าของ WhatsThisHelpID ที่กำหนดไว้ในส่วน Properties ของวัตถุ ซึ่งจะมีค่าเป็นตัวเลข (ค่านี้เราจะเป็นผู้กำหนดเองตอนสร้างฟอร์ม) จากนั้นโปรแกรมก็จะไปหาค่าตัวเลขที่ตรงกับค่าของ WhatsThisHelpID ที่ไฟล์เฮดเดอร์ ต่อจากนั้นก็จะนำค่าคงที่ที่ได้จากไฟล์เฮดเดอร์มาค้นหาในส่วนของ [ALIAS] ใน help ถ้ามีตรงกันก็จะแสดง help ของส่วนนั้นๆขึ้นมา

วิธีการสร้าง Context-sensitive Help

    1. ให้ทำการสร้าง Header File ขึ้นมาโดยตั้งชื่อว่า MYMAP.H โดยพิมพ์คำสั่งที่ Command Window ของ Visual FoxPro ดังนี้
      MODIFY FILE C:\MYHELP\MYMAP.H

      จากนั้นทำการป้อนคำสั่ง

      ทำการบันทึกไฟล์โดยกดปุ่ม Ctrl+W

      #DEFINE TOPIC1 1 เป็นการกำหนดค่าคงที่ 1 ให้กับตัวแปร TOPIC1

    2. ให้ทำการเรียกโปรแกรม HTML Help Workshop แล้วเปิดไฟล์ MYHELP.HHP ขึ้นมาแก้ไข ที่แท๊ป Project ให้คลิ๊กปุ่ม HtmlHelp API Information

    3. ที่แท๊ป Map ให้คลิ๊กที่ปุ่ม Header File… ให้ป้อนชื่อไฟล์ที่ได้สร้างไว้ในข้อ 1 คือ MYMAP.H แล้วคลิ๊กปุ่ม OK  ให้คลิ๊กที่แท๊ป Alias เพื่อกำหนดไฟล์ HTML ให้กับตัวแปร โดยคลิ๊กที่ปุ่ม Add

      จากนั้นทำการป้อนค่าตัวแปรให้ตรงกับที่ได้กำหนดไว้ในเฮดเดอร์ไฟล์ แล้วกำหนดชื่อไฟล์ HTML ที่ต้องการให้แสดง ดังภาพ

    4. ให้ทำการกำหนดค่าใน Alias ให้เท่ากำที่ได้กำหนดค่าไว้ในเฮดเดอร์ไฟล์ ดังภาพ

    5. จากนั้นทำการ Compile HTML Help File

 

การนำ Context-sensitive Help ไปใช้ในฟอร์ม

    1. ให้ทำการสร้างฟอร์ม โดยพิมพ์คำสั่งที่ Command Window ของ Visual FoxPro ดังนี้MODIFY FORM FORMHELP
    2. ให้ทำการสร้างฟอร์ม ตามตัวอย่างดังภาพ
      กำหนด Properties ของ Form ดังนี้

      WhatsThisButton = .T.

      WhatsThisHelp = .T.

      กำหนด Properties ของ Command1 ดังนี้

      Caption = Topic1

      WhatsThisHelpID = 1

      กำหนด Properties ของ Command2 ดังนี้

      Caption = Topic2

      WhatsThisHelpID = 2

      กำหนด Properties ของ Command3 ดังนี้

      Caption = Topic3

      WhatsThisHelpID = 3

      กำหนด Properties ของ Command4 ดังนี้

      Caption = Topic4

      WhatsThisHelpID = 4

      กำหนด Properties ของ Command5 ดังนี้

      Caption = Topic5

      WhatsThisHelpID = 5

    3. ทำการบันทึกฟอร์มแล้วเรียกฟอร์มขึ้นมาใช้งานโดยกดปุ่ม Ctrl+E

คุณก็จะได้ Help ตามความประสงค์ ….