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

พัฒนาโปรแกรมด้วย 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 แล้วครับ

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

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 ครับ

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

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

NetBeans IDE นั้นมี Feature หนึ่งที่น่าสนใจคือ UML modeling ซึ่งจะคอยช่วยให้เราสามารถวาด Diagram ต่างๆบน NetBeans ได้ นอกจากนี้ยังสนับสนุนการใช้ Design Pattern อีกด้วย

สำหรับผู้ที่มี NetBeans Version 6.9.1 จะยังไม่สามารถใช้งานได้ครับ ต้องทำการติดตั้ง Plugin เพิ่มเติม โดยทำตามขั้นตอนดังนี้
1. ไปที่ http://dlc.sun.com.edgesuite.net/netbeans/updates/6.7.1/uc/final/beta/modules/uml6/
2. ทำการ Download ไฟล์ .nbm ทุกไฟล์
3. ทำการติดตั้งโดย เปิด NetBeans แล้วไปที่ Tools->Plugins
4. คลิกที่ tab Downloaded แล้วกด Add Plugins…
5. เลือกไฟล์ .nbm ทุกไฟล์ที่ Download มาจากข้างต้น
6. กด Install แล้วทำตามขั้นตอนจนเสร็จ เมื่อติดตั้งเสร็จแล้วให้ทำการ Restart NetBeans
เพียงเท่านี้ท่านก็สามารถใช้ Design Pattern บน NetBeans ได้แล้วครับ

*** สำหรับผู้ที่มี NetBeans Version 7.0 หลังติดตั้ง Plugin แล้ว จะสามารถใช้งานได้เฉพาะในส่วนของ Design Pattern ครับ เนื่องจาก Plugin ไม่รองรับเวอร์ชั่นนี้ ทำให้ไม่สามารถวาด Diagram ได้

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

1. ให้ทำการคลิกขวาที่ package ที่ต้องการใช้ Design Pattern แล้วเลือก Reverse Engineer…

*** สำหรับท่านใดที่ทำตามข้อ1 แล้วไม่มี Reverse Engineer… ขึ้นมาให้เลือก ให้ท่านทำการติดตั้ง Plugin ดังที่กล่าวไว้ข้างต้นก่อนครับ

2. จะปรากฏหน้าต่างขึ้นมาดังรูป ให้คลิกที่ปุ่ม OK

3. หลังจากนั้น จะได้ Project ใหม่ขึ้นมา ให้คลิกขวาที่ Model แล้วเลือก Apply Design Pattern… ดังรูป

 

4. จะปรากฏหน้าต่างขึ้นมา ให้ทำการกด Next แล้วเลือก Project เป็น GoF Design Patterns และเลือก Design Pattern ที่เราต้องการใช้ เสร็จแล้วทำการกด Next

5. หลังจากให้เลือก namespace แล้วกด Next จะปรากฏหน้าต่างขึ้นมาให้เลือก class ที่เราต้องการให้เป็นไปตาม Design Pattern เสร็จแล้วกด Next

6. หลังจากนั้นให้เลือก Create class diagram แล้วตั้งชื่อ class diagram เสร็จแล้วให้กด Next->Finish จะปรากฏ class diagram ตาม Design Pattern ที่เลือกไว้

7. เราสามารถ Generate Code ให้เป็นไปตาม Design Pattern ได้โดยคลิกขวาที่ชื่อ Project ของ Class Diagram แล้วเลือก Generate Code จะปรากฏหน้าต่างขึ้นมาให้คลิก OK

8. หลังจากนั้น NetBeans จะทำการ Generate Code ให้เราดังตัวอย่าง

 

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

Class ที่สร้าง Object แบบใช้ Factory Method ใน JAVA

Class ที่สร้าง Object แบบใช้ Factory Method ใน JAVA

ใน Java มีหลาย Class ที่ใช้หลักการในการสร้าง object แบบ Factory method จะขอยกตัวอย่างสัก 2 Classดังนี้ครับ


1.  Class DocumentBuilderFactory
     java.lang.Object
        javax.xml.parsers.DocumentBuilderFactory

Class DocumentBuilderFactory เป็น Class ที่สร้าง object ของ API ตัวหนึ่งที่สามารถแปลง XML Document ให้เป็น DOM object ได้ ซึ่ง DOM (Document Object Model) เป็นการมองส่วนต่างๆของหน้าเว็บให้เป็น Object เพื่อที่จะเรียกใช้ Object เหล่านั้นได้ครับ ในส่วนของ Class DocumentBuilderFactory  นี้ก็จะทำการแปลงให้ออกมาในรูปของ DOM Object Trees

เราสามารถสร้าง instance ของ DocumentBuilderFactory  ได้ด้วย Code ดังนี้

DocumentBuilderFactory testBuilderFactory = DocumentBuilderFactory.newInstance(); 


2.  Interface ThreadFactory           java.util.concurrent

ThreadFactory เป็นทางเลือกหนึ่งในการสร้าง Thread แทนการที่จะทำการ new Thread แบบเดิม โดย ThreadFactory เป็น Interface เวลาใช้งานก็ต้องทำการ implements ดังตัวอย่างนี้

import java.util.concurrent.ThreadFactory;

class TestThreadFactory implements ThreadFactory {
         public Thread newThread(Runnable r) { 

                Thread t = new Thread(r);

                // do something

                return t;
         }
 }

การใช้ ThreadFactoty มีประโยชน์ในการทำงานของโปรแกรมที่ทำงานแบบ Multi-Thread ในหลายๆเรื่อง เช่น

การ Debug โปรแกรม , Exception Handler หรือการ set priority ของ Thread ทั้งนี้ทั้งนั้นก็ขึ้นอยู่กับการนำไป

ประยุกต์ใช้ของผู้เขียนโปรแกรมแต่ละคนเองด้วยครับ 

Photoshop Tips: ดึงภาพจากข้างนอกมาใส่แบบไดนามิกด้วย Variables

สวัสดีครับ พบกันในหมวด How to อีกครั้ง สำหรับคราวนี้เป็นเทคนิคการใช้งาน Photoshop แบบที่ถ้าใครได้ทำงานแนวออกแบบ Mockup / UI น่าจะได้มีโอกาสใช้งานกันบ่อยๆ เพราะหลายครั้งเวลาเราจำเป็นต้องมีการ “ลิงก์ภาพจากภายนอก” มาใส่ในอีกไฟล์ แล้วเวลาแก้ไขไฟล์ข้างนอกปั๊บ ไฟล์ข้างในก็ควรจะถูกแก้ไขไปด้วยพร้อมกัน
อันที่จริง แนวคิดในการลิงก์ไฟล์จากภายนอกนี้ ใครที่ใช้ Illustrator ก็น่าจะชินกันอยู่แล้วเนอะ?แต่สำหรับ Photoshop เรากลับพบว่าถ้าจะทำบ้างนี่ มันกลับเป็นเรื่องน่าปวดกบาล อาจจะเพราะตัวโปรแกรมไม่ได้ออกแบบมาเพื่อการนี้โดยตรงหรือเปล่าก็ไม่รู้ ที่ผ่านมาผมเองก็เคยใช้แต่พวก Smart Objects (ใครไม่รู้จัก ลองดูคลิปสาธิตการทำงานที่ นี่ครับ) ซึ่งก็สะดวกดีในการกรุ๊ป Layers เป็นก้อนเดียว เผื่อเอาไว้ทำนั่นนี่ได้สะดวกๆ แต่มันก็ยังไม่ตอบโจทย์ในกรณีที่เราต้องการแก้ไขไฟล์นึง แล้วมันส่งผลกระทบไปอีกไฟล์นึงไปด้วย
จึงเป็นที่มาของบล็อกตอนนี้ครับ วิธีการใช้งาน “Image Variables”
กรณีตัวอย่างที่จะสาธิตก็คือ ลูกค้าต้องการให้นำตัวอักษรไปซ้อนหลังภาพทั้งสอง แต่ตัวอักษรยังไม่เคาะฟันธงนะ อาจจะมีขอแก้ดีไซน์นิดหน่อย แต่ทำมาส่งให้ดูก่อนละกัน .. โอเค ได้!

สมมติผมมีไฟล์ภาพอยู่ 3 ไฟล์ดังนี้

1. ไฟล์แรก เป็นไอโฟนบนพื้นสีเหลือง (กำหนดให้เป็นไฟล์แม่)
2. ไฟล์ที่สอง เป็นไอโฟนบนพื้นสีชมพู?(กำหนดให้เป็นไฟล์แม่)
3. ไฟล์ที่สาม เป็นตัวอักษร “เจ็บจุงเบย”?(กำหนดให้เป็นไฟล์ลูก)

มาถึงเราก็เปิดไฟล์แม่ (พื้นสีเหลืองและสีชมพู) ขึ้นมา แล้วสร้างเลเยอร์ใหม่ขึ้นมา เพื่อเดี๋ยวจะนำตัวอักษรจากไฟล์ลูก (เจ็บจุงเบย) มายัดใส่แทนที่ ทั้งนี้ผมจะเรียกชื่อเลเยอร์ดังกล่าวนี้ว่า “container” นะครับ
ทีนี้ก็ให้คลิกที่เมนู Image > Variables > Define…

จะมี Dialog โผล่มา ให้เราเลือกส่วน Layer เป็นเลเยอร์ที่เราจะให้ถูก “แทนที่” ด้วยภาพข้างนอก ในกรณีนี้คือเลเยอร์ชื่อ container นะครับ

เสร็จแล้วก็ติ๊กถูกตรงช่อง “Pixel Replacement” ก็ตั้งชื่อไปว่าจะให้เรียกอีตรงนี้ว่าอะไร แล้วกำหนดขนาดของสิ่งที่จะเอามาแหมะลงแทนเลเยอร์นี้ ว่าจะวางแบบไหนดี ระหว่าง

1. Fit (ยัดลงให้อยู่ในกรอบเลเยอร์นั้นให้ได้)
2. Fill (ถ้าล้นให้แสดงทั้งหมด โดยย่อขนาดให้พอดีสักด้านละกัน)
3. As Is (ถ้าเกิดภาพที่ดึงมามันล้น ก็ปล่อยล้นทั้งอย่างนั้นแหละ)
4. Conform (บีบภาพให้อยู่ในเลเยอร์นั้นพอดี โดยไม่สนใจจะรักษาสัดส่วนภาพ)

ซึ่งที่จริงถ้าอ่านคำอธิบกายสี่ข้อข้างบนนี้แล้วงง ก็ไปดูภาพตัวอย่างในโปรแกรมก็ได้ครับ มันมีสาธิตเป็นภาพเล็กๆ ให้ดูอยู่แล้ว อ้อ อย่าลืมติ๊กตรงเม็ดๆ Alignment เพื่อกำหนดจุดที่จะวางด้วยนะครับ (ในกรณีนี้ผมใส่เป็นมุมบนซ้าย)?เสร็จแล้วก็กดปุ่ม Next เพื่อเข้าสู่การกำหนด Data Sets?(หรือจะเอื้อมไปกดเปลี่ยนหน้าจาก Define ก็ได้เหมือนกัน)

เมื่อ Dialog หน้าที่แล้วเป็นการกำหนด “เลเยอร์ที่จะถูกแทนที่” ดังนั้นหน้านี้ก็จะเป็นการกำหนดว่า “จะให้แทนที่ด้วยอะไร” ทำได้ด้วยการสร้าง “Data Set” (ชุดข้อมูล) ใหม่ขึ้นมาอันนึง กดปุ่มใกล้ๆ ถังขยะ ตรงลูกศรสีดำชี้นั่นแหละครับ เสร็จแล้วมันจะมีชื่อของเลเยอร์ตัวแปรที่เรากำหนดตะกี้ โผล่พรวด! ตรงข้างล่าง (ถ้ามีหลายเลเยอร์ก็จะโผล่มาให้ดูหลายบรรทัดครับ)
ทีนี้เราก็กดปุ่ม “Select File…” แล้วเลือกไฟล์ลูก ดึงตัวอักษร “เจ็บจุงเบย” ข้างนอกมาแหมะ (อย่าลืมกด Apply นะ) ก็จะได้ผลออกมาดังนี้

เสร็จแล้วครับ ส่งงานให้ลูกค้าไปได้เลยจ้ะ
แต่เดี๋ยวก่อน! คุณผู้อ่านอาจจะสงสัยว่า เออ ถ้ามันจะเอาไปใช้แค่นี้ เราทำเป็น Smart Object หรือแค่ก็อปปี้ภาพจากอีกไฟล์มาแปะไม่ง่ายกว่าเหรอ? .. ขอบอกว่าได้ครับ (อ้าว) แต่คืองี้ ถ้าเกิดมีความต้องการการใช้งานในปริมาณมาก เช่นมีไฟล์ภาพเป็นกระตั้กแบบนี้ แล้วมีการออกแบบและแก้ไขเปลี่ยนแปลงหลายๆ ตลบ?กว่าจะมานั่งแก้ๆ โยกๆ แต่ละทีคงเกิดการเสียชีวิตกันไปข้างนึงแน่นอน

กลับมาในงานเจ็บจุงเบยกันต่อนะครับ สมมติว่าลูกค้าส่ง feedback มาแล้ว บอกว่าอยากให้ “เปลี่ยนตัวอักษรจากสีฟ้าเป็นสีขาว” โอเคครับ ได้เลย เราก็ไปเปิดไฟล์ตัวอักษรตะกี้ แล้วแก้ไขให้เรียบร้อยซะ

แล้วก็กลับมาที่ภาพตัวแม่ครับ คลิกเมนู Image > Apply Data Sets… แล้วกด OK หนึ่งจึ้ก เสร็จแล้ว!

และสุดท้าย ถ้าเกิดปริมาณไฟล์มันเยอะมากๆ แล้วคุณอยากขี้เกียจมากกว่านี้ อาจจะทำเป็น Actions หรือสั่งรันอัตโนมัติด้วย Automate > Batch ไปเลยก็ได้ครับ จะได้กดปั๊บแล้วนั่งยิ้มดูจนเสร็จจ้ะ
อ้อ มีไฟล์ตัวอย่างมาให้ลองโหลดไปทำดูนะครับ ดาวน์โหลดได้ที่นี่เลยจ้ะ

Design Patterns ทำไมต้องใช้

ปัญหาที่พบเจอบ่อยในการเขียนโปรแกรมคือ เมื่อโปรแกรมมีความซับซ้อนและจำนวนโค้ดที่มากขึ้นทำให้ยากจะดูแล คนในทีมก็ยากจะทำงานร่วมกันได้เพราะแต่ละคนมีรูปแบบการเขียนโค้ดที่ไม่ เหมือนกัน ในกรณีที่โปรแกรมต้องการพัฒนาให้มีฟังก์ชันในการทำงานที่มากกว่าเดิมก็ทำได้ ยาก เพราะตัวโค้ดเองถูกพัฒนาโดยไม่มีรูปแบบ
Design patterns คือรูปแบบการเขียนโปรแกรมที่ถูกพัฒนาขึ้นเพื่อแก้ปัญหาโค้ดที่ดูซับซ้อนให้ ดูได้ง่ายขึ้น ทำให้ผู้พัฒนาและทีมสามารถเข้าใจสิ่งที่โปรแกรมต้องทำได้ง่ายขึ้นและสามารถ เพิ่มฟังก์ชันใหม่ๆเข้าไปในระบบได้ง่ายขึ้น โดยรูปแบบต่างๆถูกคิดค้นมาเพื่อใช้ในงานที่ต่างกัน
Design Patterns นั้นสามารถแบ่งเป็นกลุ่มใหญ่ๆตามรูปแบบการใช้งานได้ทั้งหมด 3 กลุ่มดังนี้

• creational
• structural
• behavioral

Creational เป็นรูปแบบการเขียนที่ทำให้ตัวอ็อบเจกต์สามารถสร้างอ๊อบเจกต์อื่นๆขึ้นมาระหว่างการทำงานได้
Structural เป็นรูปแบบการเขียนที่ทำให้แต่ละอ็อบเจกต์ที่มีอยู่แล้วให้สามารถทำงานร่วมกันได้
Behavioral เป็นรูปแบบการเขียนที่ควบคุมการส่งข้อมูลระหว่างแต่ล่ะอ๊อบเจกต์
ตัวอย่างการใช้งาน ทุกครั้งที่มีการพูดถึง design patterns จำเป็นอย่างยิ่งที่จะต้องมีโค้ดประกอบ ซึ่งหากจะให้ลงลึกในทุกหัวข้ออาจทำให้บทความนี้มีความยาวมากเกินไป จึงขอยกตัวอย่างการทำใช้งาน design patterns ในกลุ่ม cretional ที่มีการใช้งานบ่อย

Creational

จากรูปการเขียนโค้ดในรูปแบบในกลุ่มของ Creational นั้นจะเป็นการทำงานโดยผ่าน Creator โดยหน้าที่หลักๆคือ หลังจากที่มี Request เข้ามาจะทำการเรียกอ็อบเจกต์ที่จำเป็นต้องใช้งานแล้วส่งค่ากลับไปยัง Request จะสังเกตได้ว่าตัว Request นั้นไม่จำเป็นจะต้องรู้เลยว่าอ๊อฟเจกต์ทำงานอย่างไรแค่เรียกสิ่งที่อยากได้ ก็พอ และตัว Creator เองก็ไม่จำเป็นต้องรู้ว่าระบบทำงานอย่างไรแค่เรียกอ๊อบเจกต์ให้ทำงานแล้วส่ง กลับไปให้ Request ก็พอ การทำงานส่วนใหญ่จะอยู่ที่ Abstracted Object โดยเราจะแบ่งงานที่มีความซับซ้อนออกเป็นกลุ่มที่ทำงานในลักษณะเดียวกัน จากนั้นให้ส่วนของ Creator คอยควบคุมการการสร้างอ็อบเจกต์ใหม่ให้ตรงกับความต้องการของ Request ก็พอ
Creational สามารถแยกย่อยได้ออกเป็นอีกหลายรูปแบบ โดยแต่ละรูปแบบจะมีลักษณะการทำงานที่เหมือนกันคือมี Creator คอยสร้างอ็อบเจกต์ขึ้นมา
ตัวอย่าง Design Patterns ที่อยู่ในกลุ่ม Creational

• Factory Method
• Prototype
• Adapter
• Decorator

Factory Method

Factory Method เป็น Design Patterns หนึ่งที่อยู่ในกลุ่มของ Creational ซึ่งแน่นอนว่าการทำงานตัองอยู่ในรูปแบบมี Creator คอยสร้างอ๊อบเจกต์อื่นขึ้นมาอย่างแน่นอน
ตัวออย่างการใช้งาน Factory Method Design Pattern
ตัวอย่างนี้สมมุติให้เป็นการพัฒนาโปรแกรมสำหรับชำระเงินออนไลน์ โดยจะมีทั้งหมด 2 วิธีคือ
1.ผ่านทางระบบ Paypal
2.ผ่านทางระบบ Credit Card
โดยวิธีการชำระเงิน 2 ระบบนี้มีความแตกต่างกันในการส่งข้อมูลไปยังเซิร์ฟเวอร์ที่ใช้ในการชำระเงิน และรับค่าที่ถูกส่งมาจากเซิร์ฟเวอร์ของระบบชำระเงินมายังระบบซึ่งขั้นตอน ต่างๆของการชำระเงินของทั้ง 2 วิธีนั้นไม่มีทางเหมือนกันอย่างแน่นอน หากไม่มีการใช้ design patterns เข้ามาช่วยรับรองได้ว่าโค้ดจะต้องมีความยุ่งเหยิงมาก เพราะต้องรองรับการทำงานของระบบ 2 วิธีที่ไม่เหมือนกัน นอกจากนี้หากมีระบบใหม่เพิ่มขึ้นมาเช่น มีการเปลี่ยนธนาคารที่ใช้ในการชำระเงิน การแก้ไขจะมีความยุ่งยากมาก
ในกรณีนี้จึงแยกการทำงานของทั้ง 2 ระบบออกเป็น 2 คลาส คือ Paypal , Creditcard โดย Extended มาจากคลาส Payment หากต้องการใช้งานคลาสทั้ง 2 ก็สามารถเรียกใช้งานผ่านทางคลาส PaymentFactory ดังภาพด้านล่าง

ตัวอย่างโค้ด
Payment.php

interface Payment { //เมธอดสำหรับเตรียมข้อมูลเพื่อส่งไปเซิร์ฟเวอร์ของระบบชำระเงิน public function createTransaction(); //เมธอดสำหรับรับข้อมูลที่ส่งกลับมาจากเซิร์ฟเวอร์ของระบบชำระเงิน public function callbackTransaction(); }

interface Payment {     //เมธอดสำหรับเตรียมข้อมูลเพื่อส่งไปเซิร์ฟเวอร์ของระบบชำระเงิน     public function createTransaction();     //เมธอดสำหรับรับข้อมูลที่ส่งกลับมาจากเซิร์ฟเวอร์ของระบบชำระเงิน     public function callbackTransaction(); }

ไฟล์นี้ใช้สำหรับเป็นแม่แบบให้กับไฟล์ paypal.php , creditcard.php ความสำคัญที่จำเป็นต้องใช้ interface เพื่อให้คลาสทั้ง 2 มีเมธอดที่เหมือนกันเพื่อให้ paymentfactory เรียกใช้ได้ถูกต้อง และเผื่อไว้ในกรณีที่มีระบบการชำระเงินแบบใหม่จะได้ดูตัวอย่างการเขียนจาก interface คลาสและสามารถเข้าใจการทำงานของระบบได้เร็วขึ้น
PayPal.php

class PayPal implements Payment { public function createTransaction() { //การเตรียมค่าสำหรับระบบชำระเงินผ่านระบบ PayPal }; public function callbackTransaction() { //หลังจากรับค่าจากเซิร์ฟเวอร์ของระบบ PayPal ต้องการให้ทำอะไรต่อไป }; }

class PayPal implements Payment {     public function createTransaction()     {        //การเตรียมค่าสำหรับระบบชำระเงินผ่านระบบ PayPal     };     public function callbackTransaction()     {        //หลังจากรับค่าจากเซิร์ฟเวอร์ของระบบ PayPal ต้องการให้ทำอะไรต่อไป     }; }

CreditCard.php

class CreditCard implements Payment { public function createTransaction() { //การเตรียมค่าสำหรับระบบชำระเงินผ่านระบบ Credit Card }; public function callbackTransaction() { //หลังจากรับค่าจากเซิร์ฟเวอร์ของระบบ Credit Card ต้องการให้ทำอะไรต่อไป }; }

class CreditCard implements Payment {     public function createTransaction()     {        //การเตรียมค่าสำหรับระบบชำระเงินผ่านระบบ Credit Card     };     public function callbackTransaction()     {        //หลังจากรับค่าจากเซิร์ฟเวอร์ของระบบ Credit Card ต้องการให้ทำอะไรต่อไป     }; }

จะเห็นได้ว่าทั้ง 2 ไฟล์นั้นสามารถอ่านเข้าใจได้ง่ายขึ้น ไม่มีความซับซ้อนเหลือคลาสใดทำอะไรก็จบในคลาสนั้นได้ ถ้าหากต้องการเพิ่มระบบชำระเงินก็สามารถเพิ่มคลาสใหม่เข้ามาในระบบโดยอ้าง อิงจาก Payment คลาสซึ่งเป็น Interface ได้ทันที
PaymentFactory.php

class PaymentFactory { public static function paymentGateway($type) { $targetClass = ucfirst($type); if (class_exists($targetClass) && is_subclass_of($targetClass, $baseClass)) { return new $targetClass; } else { throw new Exception("The Payment type '$type' is not recognized."); } } }

class PaymentFactory {     public static function paymentGateway($type)     {         $targetClass = ucfirst($type);            if (class_exists($targetClass) && is_subclass_of($targetClass, $baseClass)) {             return new $targetClass;         } else {             throw new Exception("The Payment type '$type' is not recognized.");         }     } }

คลาส PaymentFactory คือหัวใจของการทำงานโดยทำหน้าที่เป็น Creator สำหรับสร้างอ็อบเจกต์ใหม่ขึ้นมาและส่งกลับไปยัง Request
ยังมีข้อสงสัยเรื่อง Factory Method แนะนำให้อ่านเพิ่มเติมที่นี่ได้ http://www.oodesign.com/factory-pattern.html

สรุป

จากประสพการณ์ในการพัฒนา เมื่อการ design patterns มาใช้พบว่าสามารถทำให้การทำงานรวดเร็วขึ้น เพราะระหว่างการพัฒนาไม่จำเป็นต้องวางคิดรูปแบบการเขียนโค้ดเอง แต่เลือกใช้จากรูปแบบที่มีคนอื่นคิดไว้แล้ว เมื่อจะให้คนอื่นทำงานต่อจากส่วนที่เราทำไว้ก็แค่บอกว่าเราได้เลือกใช้ design patterns แบบใดเอาไว้ก็สามารถต่องานกันได้โดยไม่จำเป็นต้องอธิบายมาก และตัวเราเองเมื่อกลับมาแก้ไขโค้ดที่ตัวเองได้เขียนไว้ก็สามารถทำได้ง่าย ด้วย
Design Patterns นั้นช่วยให้เราสามารถทำงานได้เร็วขึ้นแต่ไม่ได้ช่วยให้โปรแกรมของเรามี ประสิทธิ์ภาพมากขึ้น ดังนั้นเราควรศึกษารูปแบบเอาไว้ให้มากๆเพราะให้เราได้เลือกใช้ได้ตรงจุด ประสงค์ มีคำกล่าวที่ว่า “หากค้อนเป็นเครื่องมืออย่างเดียวที่เรามีอยู่ จงมองทุกงานให้เป็นตะปู” สิ่งนี้ใช้ไม่ได้กับการใช้งาน design patterns เพราะหากเลือกใช้งานผิดแทนที่จะช่วยให้เราทำงานได้เร็วขึ้นกลับจะทำให้ ทุกอย่างแย่ลง
หนังสือแนะนำสำหรับผู้อยากศึกษาเพิ่มเติม
Learning PHP Design Patterns

Design Patterns

 Design Patterns

ดีไซน์แพตเทิร์น (อังกฤษ: Design Patterns) คือแบบแผนหรือแนวทางที่ใช้ในการแก้ไขปัญหาที่เกิดขึ้นเสมอๆ ในการออกแบบคอมพิวเตอร์ซอฟต์แวร์ แบบแผนและแนวทางเหล่านี้ไม่ใช่รูปแบบตายตัวที่จะถูกนำไปใช้โดยตรง แต่เป็นการอธิบายแนวทางหรือโครงที่จะถูกนำไปประยุกต์ใช้ในสถานการณ์ต่างๆ กล่าวเฉพาะในทางการเขียนโปรแกรมเชิงวัตถุ ดีไซน์แพตเทิร์นจะแสดงความสัมพันธ์ต่อกันระหว่างคลาสหรืออ็อบเจกต์ต่างๆ โดยไม่จำเพาะเจาะจงการนำไปใช้งานในขั้นสุดท้าย ขั้นตอนวิธีไม่จัดเป็นดีไซน์แพตเทิร์นเพราะเป็นการแก้ปัญหาในทางการประมวลผล มากกว่าในทางการออกแบบ

จุดเริ่มต้น

ดีไซน์แพตเทิร์นมีจุดเริ่มต้นจากหนังสือชื่อ A Pattern Language: Towns, Buildings, Construction แต่งโดยสถาปนิกชื่อ Christopher Alexander เมื่อปี ค.ศ. 1977 จากนั้น Kent Beck และ Ward Cunningham ริเริ่มนำเอาแนวคิดนี้มาทดลองใช้กับการเขียนโปรแกรมในปี ค.ศ. 1987 และได้นำเสนอผลงานในงานประชุม OOPSLA ในปีเดียวกันนั้น
ดีไซน์แพตเทิร์นเริ่มเป็นที่นิยมในวงการวิทยาการคอมพิวเตอร์ในปี ค.ศ. 1994 หลังจากมีหนังสือที่แต่งโดย Erich Gamma, Richard Helm, Ralph Johnson และ John Vlissides (Gang of four: GoF) ชื่อ Design Patterns: Elements of Reusable Object-Oriented Software (ISBN 0-201-63361-2)

ประโยชน์

ดีไซน์แพตเทิร์นช่วยทำให้กระบวนการพัฒนาโปรแกรมรวดเร็วขึ้นเพราะเป็น ตัวอย่างที่ผ่านการพิสูจน์ทดสอบมาแล้ว การออกแบบซอฟต์แวร์ที่ดีต้องเตรียมการสำหรับปัญหาที่อาจจะไม่พบจนกว่าจะ เริ่มนำไปใช้งาน การใช้ดีไซน์แพตเทิร์นช่วยป้องกันปัญหาเล็กน้อยที่อาจจะลุกลามใหญ่โต ทั้งยังทำให้การทำความเข้าใจโค้ดง่ายขึ้นในหมู่ผู้ร่วมงานในทีมที่คุ้นเคย กับดีไซน์แพตเทิร์น

การจัดหมวดหมู่และแพตเทิร์นในหนังสือ Design Patterns

การจัดหมวดหมู่ดีไซน์แพตเทิร์นตามหนังสือ Design Patterns แบ่งตามวัตถุประสงค์การใช้งาน ดังนี้

แพตเทิร์นการสร้างอ็อบเจกต์ (creational patterns)

• Abstract Factory
• Builder
• Factory Method
• Prototype
• Singleton

แพตเทิร์นโครงสร้าง (structural patterns)

• Adapter
• Bridge
• Composite
• Decorator
• Façade
• Flyweight
• Proxy

แพตเทิร์นพฤติกรรม (behavioral patterns)

• Chain of responsibility
• Command
• Interpreter
• Iterator
• Mediator
• Memento
• Observer
• State
• Strategy
• Template method
• Visitor

หมวดหมู่แพตเทิร์นอื่นๆ

• concurrency patterns
• architectural patterns