วันพฤหัสบดีที่ 30 มิถุนายน พ.ศ. 2554

JavaBeans บน NetBeans

                จากบทความที่แล้วที่เราแสดงตัวอย่างการใช้ JavaBeans บน BeanBox กันไปแล้ว ต่อไปในบทความนี้ เราจะนำเอา JavaBeans มาใช้บน NetBeans กันบ้างครับ ซึ่งเราจะใช้โปรแกรม Counter มาแสดงเป็นตัวอย่างเหมือนเดิม โดยเริ่มจาก
 
1. สร้าง Java Project ขึ้นมาใหม่

2. สร้าง JFrame Form ขึ้นมาใหม่ ชื่อ CounterForm

3. นำ Beans ที่ต้องการใช้ ใส่เข้าไปใน NetBeans โดยเข้าไปที่ Tools->Palette->Swing/AWT Components

4. จะปรากฏหน้าต่าง Palette Manager ให้เลือก Add from JAR…

5. หลังจากนั้นให้เข้าไปยัง Directory ที่เราติดตั้ง BDK ไว้(จากบทความที่แล้ว) เข้าไปที่ beans\jars แล้วเลือกไฟล์ button.jar, misc.jar, counter.jar (จากบทความที่แล้ว) โดยกดปุ่ม Ctrl ค้างไว้ขณะคลิกเลือกไฟล์ เสร็จแล้วกด Next

6. เลือก Show All JavaBeans แล้วเลือก Counter, ExplicitButton, TickTock ดังภาพ เสร็จแล้วกด Next

7. เลือก Beans แล้วกด Finish จะปรากฏ Component ขึ้นมาให้ใช้งาน ดังภาพ

8. เลือก Counter Bean แล้วนำมาวางบน Form แล้วตั้งชื่อตัวแปรว่า ct

*** สำหรับผู้ที่มีปัญหา เมื่อใช้งาน Counter Bean แล้วพบข้อความ "The component cannot be instantiated. Please make sure it is a JavaBeans component." ให้ทำการ comment หรือ ลบ method getPreferredSize() ก่อน แล้วสร้างไฟล์ JAR อีกครั้ง ก่อนนำเข้ามาใน NetBeans
9. เลือก TickTock แล้วนำมาวางบน Form แล้วตั้งค่า interval เป็น 1 และเปลี่ยนชื่อตัวแปรเป็น timer

10. เลือก ExplicitButton แล้วนำมาวางบน Form แล้วตั้งค่า Label เป็น Start และเปลี่ยนชื่อตัวแปรเป็น startButton

11. ทำซ้ำข้อ 10 อีก 2 ครั้ง โดยตั้งค่า Label เป็น Stop กับ Reset และเปลี่ยนชื่อตัวแปรเป็น stopButton กับ resetButton ตามลำดับ

12. คลิกขวาที่ timer แล้วเลือก Events->PropertyChange->propertyChange

13. NetBeans จะทำการ gen method timerPropertyChange มาให้ แล้วให้เราทำการเพิ่ม ct.increment(); ใน method นั้น

14. กลับไปที่หน้า Design คลิกขวาที่ startButton เลือก Events->Action->actionPerformed แล้วให้เราทำการเพิ่ม ct.start(); ใน method นั้น

15. ทำข้อ 14 ซ้ำ 2 ครั้ง กับ stopButton และ resetButton โดยเพิ่ม ct.stop(); ลงใน method stopButtonActionPerformed และเพิ่ม ct.reset(); ลงใน method resetButtonActionPerformed

16. ทำการสั่ง run


เพียงเท่านี้ก็เสร็จแล้วครับ กับการพัฒนาโปรแกรมโดยใช้ JavaBeans บน NetBeans

พัฒนาโปรแกรมด้วย BeanBox

          BeanBox  คือ โปรแกรมที่เราสามารถใช้พัฒนาโปรแกรมง่ายๆ โดยใช้ JavaBean ซึ่งสนับสนุนการพัฒนาโปรแกรมแบบ Component

โดยก่อนอื่นเราต้องทำการติดตั้ง BeanBox ลงที่เครื่องของเราก่อนครับ โดยเริ่มจาก
1. เข้าไปที่ http://sites.google.com/site/kmitlcomponentthai/home/relataed-links
2. Download ตัว BDK และ nmake
3. ทำการแตกไฟล์ BDK ไปไว้ใน Directory ที่ต้องการติดตั้งตัว BeanBox
***สำหรับผู้ที่มี JDK 1.4 ขึ้นไป ให้ท่านทำตามข้อ 4. ต่อไป
4.  ไปแก้ไขไฟล์ที่ชื่อ ExplicitButtonBeanInfo.java ใน beans\demo\sunw\demo\buttons โดยแก้ไขโค้ดที่ประมาณบรรทัดที่ 47 จาก
EventSetDescriptor push = new EventSetDescriptor(beanClass,
                    "actionPerformed",
            java.awt.event.ActionListener.class,
            "actionPerformed");
ไปเป็น  EventSetDescriptor push = new EventSetDescriptor(beanClass,
                    "action",
            java.awt.event.ActionListener.class,
            "actionPerformed");
5. แตกไฟล์ nmake ไปไว้ใน beans\demo ซึ่งอยู่ใน Directory เราติดตั้ง BeanBox ลงไป
6. เปิดไฟล์ nmake15.exe ที่ได้จากการแตกไฟล์ข้างต้น จะได้ไฟล์ nmake.exe ออกมา
7. เปิด Command Prompt เข้าไปใน Directory ที่เราติดตั้ง BeanBox ไว้ แล้วไปที่ beans\demo\ พิมพ์คำสั่ง nmake buttons.mk แล้วรอโปรแกรมทำงานเสร็จ เป็นอันเสร็จการติดตั้ง BeanBox

เริ่มต้นใช้ BeanBox
                วันนี้เราจะมาแสดงตัวอย่างง่ายๆ ในการใช้ BeanBox พัฒนาโปรแกรมครับ ซึ่งโปรแกรมที่จะนำมาแสดงเป็นตัวอย่าง คือ โปรแกรม Counter ครับ โดยเมื่อผู้ใช้กดปุ่ม Start ตัวโปรแกรมจะนับ counter เพิ่มที่ละ 1 ทุกๆ 1 วินาที เมื่อกดปุ่ม Stop ตัวโปรแกรมจะหยุดนับ และเมื่อกดปุ่ม Reset ค่า counter จะกลับมาเป็น 0
โดยตัว Counter Bean มีโค้ดดังนี้
package counter;
import java.awt.*;

public class Counter extends Canvas {
  private final static int XPAD = 10;
  private final static int YPAD = 10;
  private int count;
  private boolean operate;

  public Counter() {
    count = 0;
    operate = true;
  }

  public void reset() {
    count = 0;
    repaint();
  }

  public void start( ) {
    operate = true;
  }

  public void stop() {
    operate = false;
  }

  public synchronized void increment() {
    if(operate) {
      ++count;
      adjustSize();
      repaint();
    }
  }

  public void setFont(Font font) {
    super.setFont(font);
    adjustSize();
  }

  public Dimension getPreferredSize() {
    Graphics g = getGraphics();
    FontMetrics fm = g.getFontMetrics();
    int w = fm.stringWidth("" + count) + 2 * XPAD;
    int h = fm.getHeight() + 2 * YPAD;
    return new Dimension(w, h);
  }

  private void adjustSize() {
    Dimension d = getPreferredSize();
    setSize(d.width, d.height);
    Component parent = getParent();
    if(parent != null) {
      parent.invalidate();
      parent.doLayout();
    }
  }

  public void paint(Graphics g) {
    Dimension d = getSize();
    FontMetrics fm = g.getFontMetrics();
    int x = (d.width - fm.stringWidth("" + count))/2;
    int y = (d.height + fm.getMaxAscent() -
      fm.getMaxDescent())/2;
    g.drawString("" + count, x, y);
    g.drawRect(0, 0, d.width - 1, d.height - 1);
  }
}
โดยก่อนอื่น เราต้องทำการสร้าง JavaBean ชื่อ Counter เพื่อให้ BeanBox สามารถนำ component นี้ ไปใช้งานได้ เริ่มจาก
1. ให้ทำการ copy code ข้างต้น แล้ว save เป็นไฟล์ชื่อ Counter.java
2. Compile โดยใช้คำสั่ง javac –d . Counter.java ใน Command Prompt
3. สร้างไฟล์ Manifest โดย copy code 3 บรรทัดด้านล่าง แล้ว save เป็นไฟล์ชื่อ manifest.mf ใน Directory เดียวกับไฟล์ Counter.java
Main-Class: counter.Counter
Name: counter/Counter.class
Java-Bean: True

*** Manifest file ต้องเว้นบรรทัดสุดท้าย ให้เป็นบรรทัดว่าง โดยให้กดปุ่ม Enter 1 ครั้ง เพื่อให้บรรทัดสุดท้ายเป็นบรรทัดว่าง
4. สร้างไฟล์ Jar โดยใช้คำสั่ง jar –cfm Counter.jar manifest.mf .\counter\*.* ใน Command Prompt
5. เปิดโปรแกรม BeanBox โดยไปที่ Directory ที่ติดตั้ง BeanBox ไว้ beans\beanbox\run.bat
6. เมื่อเปิด BeanBox ขึ้นมาแล้วให้ไปที่ File->LoadJar… ดังภาพ

7. หลังจากนั้นให้เลือกไฟล์ Counter.jar ที่เราสร้างขึ้นในขั้นตอนที่ 4
เพียงเท่านี้ เราก็จะสามารถใช้
Counter Bean ใน BeanBox ได้แล้ว
ขั้นตอนต่อไปก็มาถึงการพัฒนาโปรแกรมด้วย BeanBox กันแล้วนะครับ โดย
1. ให้คลิกเลือกที่ counter แล้วคลิกอีกครั้งในหน้าต่าง BeanBox เพื่อวาง Counter  Bean ในตำแหน่งที่ต้องการ จะได้ดังภาพ

2. ให้คลิกเลือกที่ ExplicitButton แล้วคลิกอีกครั้งในหน้าต่าง BeanBox เพื่อวาง Button ในตำแหน่งที่ต้องการ แล้วเปลี่ยน Label เป็น Start จะได้ดังภาพ

3. ให้ทำตามข้อ 2 ซ้ำอีก 2 ครั้ง โดยเปลี่ยน Label เป็น Stop และ Reset ดังภาพ

4. คลิกที่ปุ่ม Start แล้วเลือก Edit->Events->button push->actionPerformed
5. เมื่อเลือกแล้วจะปรากฏเส้นสีแดง ให้คลิก counter bean จะปรากฏหน้าต่างขึ้นมาให้เลือก method start

6. ทำซ้ำข้อ 4 และ 5 กับปุ่ม Stop แล้วเลือก method stop และปุ่ม Reset แล้วเลือก method reset
7. คลิกเลือก TickTock แล้วคลิกอีกครั้งในหน้าต่าง BeanBox แล้วเปลี่ยน interval เป็น 1 เพื่อให้นับทุกๆ 1 วินาที

8. คลิกที่ TickTock ในหน้าต่าง BeanBox แล้วเลือก Edit->Events->propertyChange->propertyChange

9. เมื่อเลือกแล้วจะปรากฏเส้นสีแดง ให้คลิก counter bean จะปรากฏหน้าต่างขึ้นมาให้เลือก method increment

เพียงเท่านี้ เราก็จะได้โปรแกรม Counter ที่พัฒนามาจาก BeanBox แล้วครับ

 

วันพฤหัสบดีที่ 23 มิถุนายน พ.ศ. 2554

Eclipse กับการใช้ Design Pattern

ก่อนการใช้งาน Design Pattern บน Eclipse นั้น เราจะต้องทำการติดตั้ง Plugin เพิ่มเติมก่อน จึงจะสามารถใช้งานได้
โดยให้ทำตามขั้นตอนดังนี้
1. ให้ทำการ Download Plugin จาก http://www.patternbox.com/download/patternbox_1.1.6.zip
2. Unzip file ไปไว้ในที่โฟลเดอร์ชื่อ plugins ใน Directory ที่เราได้ทำการติดตั้ง Eclipse ไว้
3. Restart Ecilpse
เพียงเท่านี้เราก็จะสามารถใช้งาน Design Pattern บน Eclipse ได้แล้วครับ


เริ่มใช้งาน Design Pattern

การใช้งาน
Design Pattern บน Eclipse นั้น จะต่างจาก NetBeans ตรงที่ Eclipse จะทำการสร้าง Class ให้เราใหม่ ตาม Design Pattern ที่เราต้องการ ในขณะที่ NetBeans นั้น จะเลือกจาก Class ที่มีอยู่แล้วมาประยุกต์เข้ากับ Design Pattern

หลังจากที่ได้ทำการติดตั้ง
Plugin เรียบร้อยแล้ว เราจะมาสาธิตวิธีใช้งาน Design Pattern บน Eclipse อย่างง่ายๆกันครับ โดยเริ่มจาก
1. ให้เราทำการ New Java Project ขึ้นมาใหม่ โดยในตัวอย่างนี้จะใช้ชื่อ Project ว่า Pattern
2. หลังจากสร้าง Project เสร็จแล้ว ให้เลือกที่ File->New->Other… แล้วเลือก Java-> Design Pattern Wizard ดังภาพ


3. เมื่อเลือกแล้วให้ทำการกด Next จะปรากฏหน้าต่างดังภาพ



4. ให้ทำการกด Browse… เพื่อเลือก Project ที่จะใช้ Design Pattern



5. ในตัวอย่างนี้เราจะใช้ Composite Pattern โดยให้เลือกที่ GoF->Structural Pattern->Composite เสร็จแล้วกด Finish




6. จะปรากฏดังภาพ



7. หลังจากนั้นให้เลือก Component แล้วกดปุ่ม Add… จะปรากฏหน้าต่างขึ้นมาเพื่อให้เราตั้งชื่อ Class



8. เสร็จแล้วกด Finish ตัว Eclipse จะทำการสร้าง Class และ Generate Code ให้กับเราดังภาพ



9. ให้เราทำซ้ำ โดยเลือกที่ Leaf, Composite, Client แล้วกด Add… เพื่อเพิ่ม Class ได้ตามต้องการ


 

นี่ก็เป็นเพียงตัวอย่างง่ายๆ สำหรับการใช้ Design Pattern บน Eclipse ครับ