วันอังคารที่ 24 กุมภาพันธ์ พ.ศ. 2558

Work Shop Java GUI Lab1

          งานชิ้นนี้เป็น Java GUI ตัวแรกที่ได้เขียนขึ้นระหว่างการเรียนวิชา OOP โดยใช้โปรแกรม netbean ในการเขียน ซึ่งเหมาะกับผู้ที่มีพื้นฐานการใช้งาน gui ด้วย netbean มาบ้างแล้ว
          วิธีการติดตั้งและใช้งานเบื้องต้นสามารถเข้าไปศึกษาเพิ่มเติมได้ที่ https://netbeans.org/

โจทย์ ให้แก้ปัญหาตามที่กำหนดดังนี้ 
1.การกำหนดให้กล่องรับข้อความรับได้เฉพาะตัวเลข
2.การตรวจเช็คการกรอกข้อความว่าได้กรอกหรือยัง
3.การตรวจเช็คการกรอกอีเมล์
4.การเปลี่ยนรูป Icon


********************************

ลักษณะการทำงานของโปรแกรม

1.ฟอร์มโปแกรมเมื่อเปลี่ยนหน้า หัว Title จะเปลี่ยนไป โดยฟอร์มเป็นแบบ Panal เมื่อเปลี่ยนหน้าถัดไป จะไม่ได้โชว์แบบไดอะล๊อค
2.เมื่อคีย์ข้อมูลไม่ถูกต้องตามที่กำหนดโปรแกรมจะทำการเตือน
- เตือนเมื่อไม่กรอกชื่อ
- เตือนเมื่อไม่กรอกเลขบัตรประชาชน 13 หลัก และไม่กรอกเป็นตัวเลข
- เตือนเมื่อไม่กรอกรหัสพนักงาน 5 หลัก และไม่กรอกเป็นตัวเลข และตัวเลขที่กรอกจะต้องขึ้นต้นด้วย 13 เมื่อกรอกไม่ถูกต้องจะขึ้น Icon เตือน แต่ถ้ากรอกถูก Icon จะเปลี่ยนรูปไป
- เตือนเมื่อกรอกอีเมล์ไม่ถูกต้องตามหลั
- เตือนเมื่อไม่เลือกแผนก
3.เซตโปรแกรมให้ทำงานตรงกลางหน้าจอ
4.การปิดโปรแกรม โดยให้กดยืนยันก่อน


การเขียนโค๊ด
1. เปิด JFrameForm แล้ว Set Layout ให้เป็นแบบ Card Layout การทำงานแบบ Card Layout  เมื่อทำงานจะไม่มีการซ่อนเฟรมแต่จะทำงานผ่าน Card Layout เลย


2. ใส่ Panal (เมื่อใช้แบบ Card Layout แล้วลาก Panal มา Panal จะเต็มหน้าจอ) แล้วเปลี่ยนชื่อเป็น p1

3. จากนั้นคลิ๊กขวาที่ JFrame ตรง Navigator แล้วเลือกตามรูป จากนั้นตั้งชื่อว่า p2 (แต่ถ้าไปลากพาเนลจากขวามือมันจะลอยอยู่บนหน้าฟอร์ม = การทำงานไม่เหมือนกัน)





4. ใส่สีที่พาเนลแต่ละตัว ถ้าลองรันดู จะเห็นสีที่ขึ้นมาคือพาเนลตัวแรก ถ้าอยากเปลี่ยนพาเนลใช้เมาท์ลากแล้วสลับการ์ด

5. ตั้งชื่อ Title ของ JFrame ว่า Form


6. สร้างปุ่ม ok ที่ p1 สำหรับสลับหน้า  แล้วไปที่ p2 สร้างปุ่ม “แก้ไขข้อมูล”

    - หลักการใช้งานเมื่อกดปุ่ม ok ที่ p1 จะกลับไปที่ p2 และหัวไตเติ้ลจะเปลี่ยนเป็น ตรวจสอบข้อมูล
    - เมื่อกดปุ่มแก้ไขข้อมูล ก็จะกลับไปที่ p1 และหัวไตเติ้ลจะเปลี่ยนเป็น แก้ไขข้อมูล

7. จากนั้นพิมพ์โค๊ดที่ปุ่ม cmdOK  เมื่อต้องการเปลี่ยนหัว Title เมื่อกดจาก p1 ไป p2 ใช้คำสั่ง setTitle
          p1.setVisible(false);
          p2.setVisible(true);
          this.setTitle("ตรวจสอบข้อมูล");

8. จากนั้นพิมพ์โค๊ดที่ปุ่ม cmdEdit 
          p1.setVisible(true);
     p2.setVisible(false);
     this.setTitle("แก้ไขข้อมูล");


          เมื่อรันแล้วจะได้ดังนี้


9. ออกแบบหน้าจอดังรูป (รหัส พนักงาน ใช้ jFormattedTextField)


10.การตรวจสอบ ตรวจสอบว่ายังไม่ได้กรอกอะไรบ้าง

    10.1 เริ่มจากเปลี่ยนชื่อ TextField ของชื่อ เปลี่ยนเป็น txName / บัตรประชานเปลี่ยนเป็น txId/ รหัส พนักงาน เปลี่ยนเป็น txIde/email เปลี่ยนเป็น TxEmail/ เปลี่ยนชื่อ คอมโบบ๊อก เป็น cb 
    - จากนั้นแก้ ปุ่ม คอมโบบ๊อก ให้เป็นแผนกต่างๆ โดยเข้าไปที่ ฟรอฟเพอร์ตี้ แก้ที่ model
    10.2 จากนั้นเขียนโค๊ดลงทีปุ่ม ok ดังนี้
    - ประกาศตัวแปร
          String e_name, e_id, e_ids,email;
     int e_department=cb.getSelectedIndex();
     String emailSntx = "^[A-Z0-9._%-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$";
        
     e_name = txName.getText();
     e_id = txId.getText();
     e_ids = txIde.getText();

     email = txEmail.getText();

    - เขียนโค๊ดดังนี้
   //ส่วนตรวจสอบ
          if (e_name.equals("")){//ตรวจสอบชื่อ ถ้าชื่อเท่ากับช่องว่าง
               JOptionPane.showMessageDialog(this,"ยังไม่ได้กรอกชื่อ");//ให้โชว์ไดอะล๊อค
               TxName.requestFocus();//ให้เคอร์เซอร์กลับไปที่ช่องนั้น
               return;
          }
        
          if (e_id.equals("")){//ตรวจสอบบัตรประชาชน
               JOptionPane.showMessageDialog(this,"ยังไม่ได้กรอกบัตรประชาชน");
               TxId.requestFocus();
               return;
          }
        
          if (e_id.length()!=13){//ถ้าความยาวไม่เท่ากับ 13 หลัก
               JOptionPane.showMessageDialog(this,"กรุณากรอกเลขบัตรประชาชน 13 หลัก");
               TxId.requestFocus();
               return;
          }
        
          if (e_ide.equals("")){//ตรวจสอบรหัสพนักงาน
               JOptionPane.showMessageDialog(this,"ยังไม่ได้กรอกรหัส พนง.");
               TxIde.requestFocus();
               return;
          }
        
          if (e_ide.length()!=5){//ความยาวไม่เท่ากับ 5 หลัก
               JOptionPane.showMessageDialog(this,"กรุณากรอกรหัส พนง. 5 หลัก");
               TxIde.requestFocus();
               return;
          }
        
          if (!email.toLowerCase().matches
(emailSntx.toLowerCase())) {//ตรวจสอบอีเมล์
               JOptionPane.showMessageDialog(this,"กรุณากรอก email ให้ถูกต้อง");
               TxEmail.requestFocus();
               return;
          }
        
          if (e_department==0){//ตรวจสอบสาขา
               JOptionPane.showMessageDialog(this,"กรุณาเลือกสาขาวิชา");
               cb.requestFocus();
               return;
          }

11.ตรวจสอบความผิดพลาดนะเหตุการณ์นั้น  
     -เพิ่มลาเบลที่ท้าย กล่องข้อความของรหัส พนง. เพื่อใช้สำหรับเปลี่ยนรูปถูกผิด
     -เปลี่ยนเท็กที่ลาเบลเป็นรูปผิด
     -เปลี่ยนชื่อเป็น IdeCheck
     -จากนั้นใส่โค๊ดที่ คอนสตรัคเตอร์  โดยการเซตให้ลาเบล setVisible ให้เป็น false เมื่อรันก็จะทำให้มองไม่เห็น

          IdeCheck.setVisible(false);



     เมื่อรันแล้วจะได้ดังนี้


จากนั้นไปเซ็ตอิมเมจ icon
          ImageIcon t;
              public Form() {
                  initComponents();
                  IdeCheck.setVisible(false);

                  t = new ImageIcon(this.getClass().getResource("/Midterm/Pic/ok_32.png"));}



     - คลิ๊กขวาที่กล่องข้อความของรหัส พนง.  Events  Caret  caretUpdate เป็นการตรวจจับขณะที่ทำ





     - เขียนโค๊ดดังนี้
     String text = TxIde.getText();
             if (text.length() >= 2) {
                 System.out.println("" + text.substring(0, 2));
                 String sub = text.substring(0, 2);
                 if (!sub.equals("13")) {
                     IdeCheck.setVisible(true);
                 } else if (text.length() == 5) {
                     IdeCheck.setVisible(true);
                     IdeCheck.setIcon(t);
                 }
               } else {
                 IdeCheck.setVisible(false);
             }



***************

คำสั่งให้กล่อง มาวางหน้าจอ ให้เขียนที่คอนสตรัคเตอร์

//คำสั่งให้กล่องมาวางที่หน้าจอ
        Toolkit tk = this.getToolkit();
        Dimension scr = tk.getScreenSize();
        Dimension fr = this.getSize();
        this.setLocation((scr.width - fr.width) / 2, (scr.height - fr.height) / 2);


เมื่อรันไฟล์ กล่องหรือฟอร์มจะมาอยู่ที่หน้าจอโดยอัตโนมัติ 




***************

การปิดหน้าจอ โดยมีถามก่อนว่าจะปิดหรือไม่ โดยทำการดักอีเว้นที่เฟรม



- จากนั้นใส่โค๊ด
          int result = JOptionPane.showConfirmDialog
(this,"ยืนยันการออกโปรแกรม","ออก?",JOptionPane.
OK_CANCEL_OPTION);
          if (result == JOptionPane.YES_OPTION){
          //ยืนยันการออก
          System.exit(0);
          }else{
          //ไม่ออก
          return;
          }      


- จากนั้นทำการเซตฟรอฟเพอตี้ของเฟรม เพื่อให้ทำงานตามโค๊ด


- ที่ default ให้เลือก DO_NOTHING
หมายความว่าไม่ต้องทำอะไรกับมัน โดยมีทิกว่าจะต้องเขียนโค๊ดก่อนเซต เพราะถ้าเซตก่อนมันจะไม่สามารถปิดเฟรมได้








ทำโชว์หน้าตรวจสอบ

- ไปที่พาเนลที่ 2 เพื่อทำฟอร์มรับข้อมูลตามรูป





- เปลี่ยนชื่อลาเบล เป็น NameTxt/ IdTxt/ IdeTxt/ EmailTxt/ DeparTxt ตามลำดับ
- จากนั้นเปิดคลาสใหม่ เป็น java class ตั้งชื่อว่า Employee
- สร้างตัวแปร 
     String name,id,ide,email,department;

- สร้างคอนสตรัคเตอร์ แบบไม่รับพารามิเตอร์ กับรับพารามิเตอร์ จากนั้นเกต์เตอร์และเซตเตอร์ ตัวแปรทั้งหมด
- จากนั้นไปเขียนโค๊ดที่ปุ่มตกลง  1 ทำการสร้างวัตถุจากคลาส
   Employee Employee employee = new Employee ();


- เขียนโค๊ด
//เก็บข้อมูลลงใน employee ค่าในวงเล็บคือตัวแปรที่ประกาศไว้
     employee.setName(e_name);
     employee.setId(e_id);
     employee.setIde(e_ide);
     employee.setEmail(email);
     employee.setDepartment((String)
cb.getSelectedItem());

//แก้ไขข้อความใน p2

     NameTxt.setText(employee.getName());
     IdTxt.setText(employee.getId());
     IdeTxt.setText(employee.getIde());        EmailTxt.setText(employee.getEmail());
     DeparTxt.setText(employee
.getDepartment());



Dowload Code







0 ความคิดเห็น:

แสดงความคิดเห็น