Notebook.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# ตัวอย่างการสร้าง GUI ด้วยมือ\n",
    "\n",
    "**โค้ดที่จะแสดงในเนื้อหาต่อไปนี้อาจไม่สะท้อนถึง Best Practice ในการสร้าง GUI เนื่องจากเวลาที่จำกัด**\n",
    "\n",
    "## เนื้อหาเบื้องต้น\n",
    "\n",
    "Link: https://github.com/Poonna/java-book/blob/master/07%20-%20Events%20and%20GUI%20Programming/Events%20and%20GUI%20Programming.ipynb\n",
    "\n",
    "## GUI เปล่า ๆ\n",
    "\n",
    "![Container](Container.png)\n",
    "\n",
    "JFrame คือกรอบหน้าต่างของโปรแกรม เราสามารถใช้งาน JFrame ได้ 2 รูปแบบ\n",
    "\n",
    "1. สร้างอ็อบเจกต์ JFrame ขึ้นในโปรแกรม วิธีนี้เหมาะกับโปรแกรมที่มีลักษณะไม่ซับซ้อน\n",
    "2. ให้ตัวคลาสหลักสีบทอดจาก JFrame เราจะสามารถปรับแต่งลักษณะของหน้าต่างได้มากกว่า\n",
    "\n",
    "แบบแรกจะมีรูปแบบดังนี้"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JFrame;\n",
    "\n",
    "public class BasicApp {\n",
    "    public static void main(String[] args) {\n",
    "        JFrame frame = new JFrame(\"Basic GUI Demo\");\n",
    "        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\n",
    "        frame.setSize(400, 300);\n",
    "        frame.setVisible(true);\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "ถ้าเราใช้การสืบทอดจาก JFrame เราสามารถเขียนใหม่ได้ดังนี้"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JFrame;\n",
    "\n",
    "public class BasicApp extends JFrame {\n",
    "    public BasicApp() {\n",
    "        super(\"Basic GUI Demo\");\n",
    "        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\n",
    "        setSize(400, 300);\n",
    "        setVisible(true);\n",
    "    }\n",
    "\n",
    "    public static void main(String[] args) {\n",
    "        new BasicApp();\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## หลีกเลี่ยงปัญหากับ EDT ด้วย SwingUtilities.invokeLater()\n",
    "\n",
    "โปรแกรมที่ทำงานแบบ GUI จะมีการทำงานแบบหลายเทรด ดังจะเห็นได้จากตัวอย่างที่ผ่านมา เมื่อการทำงานของ main() จบลง โปรแกรมจะยังทำงานต่อไปได้ ในขณะที่โปรแกรมที่ไม่มี GUI จะจบการทำงานทันทีที่ main() จบการทำงาน\n",
    "\n",
    "ที่เป็นแบบนี้ได้เพราะระบบ GUI ของ Java จะทำงานแบบหลายเทรด โดยเมื่อโปรแกรมเริ่มทำงาน เทรดแรกหรือ main thread จะเริ่มต้นทำงานก่อน และเมื่อไหร่ก็ตามที่คอมโพเนนต์ GUI ถูกสั่งให้แสดงขึ้นมา เทรด event dispatch thread (EDT) จะเริ่มทำงานไปควบคู่กับ main thread\n",
    "\n",
    "EDT ทำหน้าที่คอยตรวจสอบการสภาวะที่ทำให้เกิดอีเวนต์ได้ และแจ้งไปยังคอมโพเนนต์ที่เกี่ยวข้อง การสร้างอีเวนต์ การจัดการอีเวนต์ การปรับเปลี่ยนสถานะและหน้าตาของคอมโพเนนต์ต่าง ๆ จะทำโดย EDT เรียกได้ว่า EDT ทำหน้าที่จัดการโค้ดที่เกี่ยวข้องกับ GUI ทั้งหมด\n",
    "\n",
    "การจัดการกับอีเวนต์ใน EDT จะต้องเป็นกระบวนการที่ใช้เวลาสั้น เราไม่ควรมีการคำนวณหรือประมวลผลที่ใช้เวลานานในโค้ดจัดการอีเวนต์ เพราะจะทำให้ GUI ค้างไม่ตอบสนองผู้ใช้ในขณะที่กำลังประมวลผล เนื่องจาก EDT ต้องมาประมวลผล ไม่ว่างไปจัดการเหตุการณ์อื่น ถ้าต้องการประมวลผลที่ใช้เวลานาน ให้ใช้ worker thread แยกไปทำงานต่างหาก\n",
    "\n",
    "ข้อควรระวังที่สำคัญที่สุดข้อหนึ่ง ซึ่งเป็นคำแนะนำจาก Oracle เองคือ อย่าเรียกคำสั่งของ GUI จาก main thread หรือ worker thread โดยเด็ดขาด ตัวอย่างที่ผ่านมาทั้งหมดเป็นตัวอย่างที่ไม่ดีนัก เนื่องจากใน main มีการเรียกเมทอดของ JFrame ซึ่งไม่ควรทำ การเรียกควรไปเรียกใน EDT ซึ่งเราสามารถทำได้โดยการใช้เมทอด SwingUtilities.invokeLater() หรือ EventQueue.invokeLayer() ซึ่งเป็นการส่งงานไปให้ EDT เป็นคนทำ ดังในตัวอย่างนี้"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JFrame;\n",
    "\n",
    "public class BasicApp extends JFrame {\n",
    "    public BasicApp() {\n",
    "        super(\"Basic GUI Demo\");\n",
    "        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\n",
    "        setSize(400, 300);\n",
    "        setVisible(true);\n",
    "    }\n",
    "\n",
    "    public static void main(String[] args) {\n",
    "        javax.swing.SwingUtilities.invokeLater(new Runnable() {\n",
    "            @Override\n",
    "            public void run() {\n",
    "                new BasicApp();                \n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "เราจะใช้รูปแบบดังตัวอย่างข้างบนนี้สำหรับโค้ดตัวอย่างอื่น ๆ ที่เหลือในบทเรียนนี้\n",
    "\n",
    "## ข้อความ ปุ่ม และกล่องข้อความ"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JFrame;\n",
    "import javax.swing.JLabel;\n",
    "import javax.swing.JButton;\n",
    "import javax.swing.JTextField;\n",
    "import java.awt.FlowLayout;\n",
    "\n",
    "public class BasicApp extends JFrame {\n",
    "    public BasicApp() {\n",
    "        super(\"Basic GUI Demo\");\n",
    "\n",
    "        JLabel label = new JLabel(\"Click here:\");\n",
    "        JButton button = new JButton(\"Click!\");\n",
    "        JTextField textField = new JTextField(\"Nothing here.\", 20);\n",
    "\n",
    "        setLayout(new FlowLayout());\n",
    "        add(label);\n",
    "        add(button);\n",
    "        add(textField);\n",
    "\n",
    "        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\n",
    "        pack();\n",
    "        setVisible(true);\n",
    "    }\n",
    "\n",
    "    public static void main(String[] args) {\n",
    "        javax.swing.SwingUtilities.invokeLater(new Runnable() {\n",
    "            @Override\n",
    "            public void run() {\n",
    "                new BasicApp();\n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "สังเกตว่าเราเปลี่ยนมาใช้ pack() แทน setSize() ในการกำหนดขนาดหน้าต่าง นอกจากนี้เรายังเลือกใช้ layout manager แบบ FlowLayout สำหรับ JFrame ของเราด้วย\n",
    "\n",
    "### A Visual Guide to Layout Managers\n",
    "\n",
    "Link: https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html\n",
    "\n",
    "ถ้าเราไม่กำหนด layout manager ให้ใหม่ default layout manager ของ JFrame จะเป็น BorderLayout และของ JPanel จะเป็น FlowLayout\n",
    "\n",
    "ในตัวอย่างที่แล้ว หน้าตาของ GUI ยังไม่เป็นไปตามที่เราต้องการ เราอยากให้ label กับ button แยกอยู่คนละแนวกับ text field เราควรทำอย่างไร?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JFrame;\n",
    "import javax.swing.JPanel;\n",
    "import javax.swing.JLabel;\n",
    "import javax.swing.JButton;\n",
    "import javax.swing.JTextField;\n",
    "import java.awt.BorderLayout;\n",
    "\n",
    "public class BasicApp extends JFrame {\n",
    "    public BasicApp() {\n",
    "        super(\"Basic GUI Demo\");\n",
    "\n",
    "        JLabel label = new JLabel(\"Click here:\");\n",
    "        JButton button = new JButton(\"Click!\");\n",
    "        JTextField textField = new JTextField(\"Nothing here.\", 20);\n",
    "\n",
    "        JPanel topPanel = new JPanel();\n",
    "        topPanel.add(label);\n",
    "        topPanel.add(button);\n",
    "\n",
    "        add(topPanel, BorderLayout.NORTH);\n",
    "        add(textField, BorderLayout.CENTER);\n",
    "\n",
    "        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\n",
    "        pack();\n",
    "        setVisible(true);\n",
    "    }\n",
    "\n",
    "    public static void main(String[] args) {\n",
    "        javax.swing.SwingUtilities.invokeLater(new Runnable() {\n",
    "            @Override\n",
    "            public void run() {\n",
    "                new BasicApp();\n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## ActionEvent\n",
    "\n",
    "เดี๋ยวเราจะลองมากำหนดพฤติกรรมให้กับปุ่มกดดู เพิ่มสิ่งนี้เข้าไป อย่าลืม import java.awt.event.ActionEvent และ java.awt.event.ActionListener"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "button.addActionListener(new ActionListener() {\n",
    "    @Override\n",
    "    public void actionPerformed(ActionEvent e) {\n",
    "        textField.setText(\"Button clicked!\");\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## แยกส่วนการสร้างหน้า GUI เพื่อการจัดการที่ง่ายขึ้นในอนาคต\n",
    "\n",
    "### BasicApp.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JFrame;\n",
    "import javax.swing.JPanel;\n",
    "\n",
    "public class BasicApp extends JFrame {\n",
    "    public BasicApp() {\n",
    "        super(\"Basic GUI Demo\");\n",
    "\n",
    "        add(new PageA());\n",
    "\n",
    "        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\n",
    "        pack();\n",
    "        setVisible(true);\n",
    "    }\n",
    "\n",
    "    public static void main(String[] args) {\n",
    "        javax.swing.SwingUtilities.invokeLater(new Runnable() {\n",
    "            @Override\n",
    "            public void run() {\n",
    "                new BasicApp();\n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### PageA.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JPanel;\n",
    "import javax.swing.JLabel;\n",
    "import javax.swing.JButton;\n",
    "import javax.swing.JTextField;\n",
    "import java.awt.BorderLayout;\n",
    "import java.awt.event.ActionListener;\n",
    "import java.awt.event.ActionEvent;\n",
    "\n",
    "class PageA extends JPanel {\n",
    "    public PageA() {\n",
    "        JLabel label = new JLabel(\"Click here:\");\n",
    "        JButton button = new JButton(\"Click!\");\n",
    "        JTextField textField = new JTextField(\"Nothing here.\", 20);\n",
    "\n",
    "        JPanel topPanel = new JPanel();\n",
    "        topPanel.add(label);\n",
    "        topPanel.add(button);\n",
    "\n",
    "        button.addActionListener(new ActionListener() {\n",
    "            @Override\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                textField.setText(\"Button clicked!\");\n",
    "            }\n",
    "        });\n",
    "\n",
    "        setLayout(new BorderLayout());\n",
    "        add(topPanel, BorderLayout.NORTH);\n",
    "        add(textField, BorderLayout.CENTER);\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## การสร้าง GUI หลายหน้าด้วย CardLayout\n",
    "\n",
    "CardLayout ทำให้เราสามารถใส่หน้า GUI หลาย ๆ แบบในโปรแกรมและเลือกว่าจะแสดงอันไหนได้ แต่การสั่งให้สลับหน้าโดยที่แต่ละหน้าไม่รู้จักกัน อาจต้องทำผ่านตัวกลางโดยใช้เทคนิคที่เรียกว่า dependency injection\n",
    "\n",
    "### BasicApp.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JFrame;\n",
    "import java.awt.CardLayout;\n",
    "\n",
    "public class BasicApp extends JFrame {\n",
    "    private CardLayout layout;\n",
    "\n",
    "    public BasicApp() {\n",
    "        super(\"Basic GUI Demo\");\n",
    "\n",
    "        layout = new CardLayout();\n",
    "        setLayout(layout);\n",
    "        PageA pageA = new PageA(this);\n",
    "        PageB pageB = new PageB(this);\n",
    "        add(pageA, \"PageA\");\n",
    "        add(pageB, \"PageB\");\n",
    "\n",
    "        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\n",
    "        pack();\n",
    "        setVisible(true);\n",
    "    }\n",
    "\n",
    "    public void switchToPageA() {\n",
    "        layout.show(this.getContentPane(), \"PageA\");\n",
    "    }\n",
    "\n",
    "    public void switchToPageB() {\n",
    "        layout.show(this.getContentPane(), \"PageB\");\n",
    "    }\n",
    "\n",
    "    public static void main(String[] args) {\n",
    "        javax.swing.SwingUtilities.invokeLater(new Runnable() {\n",
    "            @Override\n",
    "            public void run() {\n",
    "                new BasicApp();\n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### PageA.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JPanel;\n",
    "import javax.swing.JLabel;\n",
    "import javax.swing.JButton;\n",
    "import javax.swing.JTextField;\n",
    "import java.awt.BorderLayout;\n",
    "import java.awt.event.ActionEvent;\n",
    "import java.awt.event.ActionListener;\n",
    "\n",
    "class PageA extends JPanel {\n",
    "    private BasicApp app;\n",
    "\n",
    "    public PageA(BasicApp app) {\n",
    "        this.app = app;\n",
    "\n",
    "        JLabel label = new JLabel(\"Click here:\");\n",
    "        JButton button = new JButton(\"Click!\");\n",
    "        JTextField textField = new JTextField(\"Nothing here.\", 20);\n",
    "\n",
    "        JPanel topPanel = new JPanel();\n",
    "        topPanel.add(label);\n",
    "        topPanel.add(button);\n",
    "\n",
    "        setLayout(new BorderLayout());\n",
    "        add(topPanel, BorderLayout.NORTH);\n",
    "        add(textField, BorderLayout.CENTER);\n",
    "\n",
    "        button.addActionListener(new ActionListener() {\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                PageA.this.app.switchToPageB();\n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### PageB.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JPanel;\n",
    "import javax.swing.JLabel;\n",
    "import javax.swing.JButton;\n",
    "import javax.swing.JTextField;\n",
    "import java.awt.event.ActionEvent;\n",
    "import java.awt.event.ActionListener;\n",
    "import javax.swing.JOptionPane;\n",
    "\n",
    "class PageB extends JPanel {\n",
    "    private BasicApp app;\n",
    "\n",
    "    public PageB(BasicApp app) {\n",
    "        this.app = app;\n",
    "\n",
    "        JButton backButton = new JButton(\"Back\");\n",
    "        JButton showButton = new JButton(\"Show\");\n",
    "\n",
    "        add(backButton);\n",
    "        add(showButton);\n",
    "\n",
    "        backButton.addActionListener(new ActionListener() {\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                PageB.this.app.switchToPageA();\n",
    "            }\n",
    "        });\n",
    "\n",
    "        showButton.addActionListener(new ActionListener() {\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                JOptionPane.showMessageDialog(null, \"Hello!\");\n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## การแลกเปลี่ยนข้อมูลระหว่างหน้า\n",
    "\n",
    "ผู้เกี่ยวข้องมี 3 ส่วน ได้แก่\n",
    "\n",
    "1. ผู้ส่ง\n",
    "2. ผู้รับ\n",
    "3. ตัวกลาง\n",
    "\n",
    "บ่อยครั้งที่หน้า GUI แต่ละหน้าจะถูกออกแบบมาให้เป็นอิสระต่อกัน หมายถึงว่าทั้งสองหน้าไม่รู้จักกันด้วย การส่งข้อมูลจากหน้า A ไปหน้า B จึงต้องกระทำผ่านตัวกลางเช่นกัน\n",
    "\n",
    "ในที่นี้เราจะให้ PageA ส่งข้อความไปยัง PageB โดยใช้ BasicApp เป็นตัวกลาง PageB ซึ่งเป็นผู้รับ เราจะประกาศตัวแปรเพิ่มเติมสำหรับรับข้อมูล และสร้างเมทอดสำหรับรับข้อมูลดังนี้ นอกจากนี้ ในส่วนการจัดการการคลิกปุ่ม Show ก็จะมีการเอาข้อมูลที่ส่งมามาแสดงด้วย"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "private String text;\n",
    "\n",
    "public PageB(BasicApp app) {\n",
    "\n",
    "    // ...\n",
    "\n",
    "    showButton.addActionListener(new ActionListener() {\n",
    "        public void actionPerformed(ActionEvent e) {\n",
    "            JOptionPane.showMessageDialog(null, text);\n",
    "        }\n",
    "    });\n",
    "}\n",
    "\n",
    "void setData(String text) {\n",
    "    this.text = text;\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "เราจะย้ายการประกาศ PageA และ PageB ใน BasicApp ออกไปที่ระดับคลาส และเพิ่มการส่งข้อมูลไป PageB ที่เมทอด switchToPageB()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "private PageA pageA;\n",
    "private PageB pageB;\n",
    "\n",
    "// ...\n",
    "\n",
    "public void switchToPageB(String text) {\n",
    "    pageB.setData(text);\n",
    "    layout.show(this.getContentPane(), \"PageB\");\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "PageA ในส่วนของการสั่ง switchToPageB() ก็จะส่งค่าจะ text field ไปด้วย"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "button.addActionListener(new ActionListener() {\n",
    "    public void actionPerformed(ActionEvent e) {\n",
    "        PageA.this.app.switchToPageB(textField.getText());\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## JTable\n",
    "\n",
    "### How to Use Tables\n",
    "\n",
    "Link: https://docs.oracle.com/javase/tutorial/uiswing/components/table.html\n",
    "\n",
    "เราปรับแก้ PanelA.java ดังนี้"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import javax.swing.JPanel;\n",
    "import javax.swing.JLabel;\n",
    "import javax.swing.JButton;\n",
    "import javax.swing.JTextField;\n",
    "import javax.swing.JTable;\n",
    "import javax.swing.JScrollPane;\n",
    "import java.awt.BorderLayout;\n",
    "import java.awt.event.ActionEvent;\n",
    "import java.awt.event.ActionListener;\n",
    "\n",
    "class PageA extends JPanel {\n",
    "    private BasicApp app;\n",
    "\n",
    "    public PageA(BasicApp app) {\n",
    "        this.app = app;\n",
    "\n",
    "        JLabel label = new JLabel(\"Click here:\");\n",
    "        JButton button = new JButton(\"Click!\");\n",
    "        JTextField textField = new JTextField(\"Nothing here.\", 20);\n",
    "\n",
    "        JPanel topPanel = new JPanel();\n",
    "        topPanel.add(label);\n",
    "        topPanel.add(button);\n",
    "\n",
    "        String[] columnNames = { \"Text\", \"Length\" };\n",
    "        Object[][] data = {\n",
    "            { \"Hello\", Integer.valueOf(5) },\n",
    "            { \"Goodbye\", Integer.valueOf(7) }\n",
    "        };\n",
    "\n",
    "        JTable table = new JTable(data, columnNames);\n",
    "        table.setFillsViewportHeight(true);\n",
    "        JScrollPane scrollPane = new JScrollPane(table);\n",
    "\n",
    "        setLayout(new BorderLayout());\n",
    "        add(topPanel, BorderLayout.NORTH);\n",
    "        add(scrollPane, BorderLayout.CENTER);\n",
    "        add(textField, BorderLayout.SOUTH);\n",
    "\n",
    "        button.addActionListener(new ActionListener() {\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                table.setValueAt(textField.getText(), 0, 0);\n",
    "                table.setValueAt(textField.getText().length(), 0, 1);\n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# เป้าหมายของเรา\n",
    "\n",
    "## หน้าตาของโปรแกรมที่คาดหวัง\n",
    "\n",
    "![NotebookPanel](NotebookPanels.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Notebook App ฉบับสมบูรณ์ (ที่ไหนกันเล่า)\n",
    "\n",
    "## โครงสร้าง\n",
    "\n",
    "![NotebookApp UML](NotebookApp.png)\n",
    "\n",
    "## โค้ด\n",
    "\n",
    "### NotebookContext.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "package my.notebook.app;\n",
    "\n",
    "interface NotebookContext {\n",
    "    void switchToNoteList();\n",
    "    void switchToNoteEntry(Note note);\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Note.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "package my.notebook.app;\n",
    "\n",
    "import java.time.LocalDate;\n",
    "import java.time.format.DateTimeFormatter;\n",
    "\n",
    "class Note {\n",
    "    private LocalDate date;\n",
    "    private String subject;\n",
    "    private String note;\n",
    "\n",
    "    public Note() {\n",
    "        this(LocalDate.now(), \"\", \"\");\n",
    "    }\n",
    "\n",
    "    public Note(LocalDate date, String subject, String note) {\n",
    "        this.date = date;\n",
    "        this.subject = subject;\n",
    "        this.note = note;\n",
    "    }\n",
    "\n",
    "    public String getDate() {\n",
    "        return date.format(DateTimeFormatter.ofPattern(\"dd/MM/yyyy\"));\n",
    "    }\n",
    "\n",
    "    public void setDate(String date) {\n",
    "        this.date = LocalDate.parse(date, DateTimeFormatter.ofPattern(\"d/M/yy\"));\n",
    "    }\n",
    "\n",
    "    public String getSubject() {\n",
    "        return subject;\n",
    "    }\n",
    "\n",
    "    public void setSubject(String subject) {\n",
    "        this.subject = subject;\n",
    "    }\n",
    "\n",
    "    public String getNote() {\n",
    "        return note;\n",
    "    }\n",
    "\n",
    "    public void setNote(String note) {\n",
    "        this.note = note;\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### NoteEntryPanel.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "package my.notebook.app;\n",
    "\n",
    "import javax.swing.JPanel;\n",
    "import javax.swing.JLabel;\n",
    "import javax.swing.JTextField;\n",
    "import javax.swing.JTextArea;\n",
    "import javax.swing.JScrollPane;\n",
    "import javax.swing.JButton;\n",
    "import java.awt.BorderLayout;\n",
    "import java.awt.event.ActionEvent;\n",
    "import java.awt.event.ActionListener;\n",
    "\n",
    "class NoteEntryPanel extends JPanel {\n",
    "    private NotebookContext appContext;\n",
    "    private JTextField subjectEntry;\n",
    "    private JTextField dateEntry;\n",
    "    private JTextArea noteEntry;\n",
    "    private Note currentNote;\n",
    "\n",
    "    public NoteEntryPanel(NotebookContext appContext, Note newNote) {\n",
    "        this.appContext = appContext;\n",
    "\n",
    "        setLayout(new BorderLayout());\n",
    "\n",
    "        JLabel subjectLabel = new JLabel(\"Subject\");\n",
    "        JLabel dateLabel = new JLabel(\"Date\");\n",
    "        JButton okButton = new JButton(\"OK\");\n",
    "\n",
    "        subjectEntry = new JTextField(40);\n",
    "        dateEntry = new JTextField(8);\n",
    "\n",
    "        noteEntry = new JTextArea(10, 60);\n",
    "        noteEntry.setLineWrap(true);\n",
    "        noteEntry.setWrapStyleWord(true);\n",
    "        JScrollPane scrollPane = new JScrollPane(noteEntry);\n",
    "\n",
    "        JPanel topPanel = new JPanel();\n",
    "\n",
    "        topPanel.add(subjectLabel);\n",
    "        topPanel.add(subjectEntry);\n",
    "        topPanel.add(dateLabel);\n",
    "        topPanel.add(dateEntry);\n",
    "        add(topPanel, BorderLayout.NORTH);\n",
    "        add(scrollPane, BorderLayout.CENTER);\n",
    "        add(okButton, BorderLayout.SOUTH);\n",
    "\n",
    "        okButton.addActionListener(new ActionListener() {\n",
    "            @Override\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                currentNote.setSubject(subjectEntry.getText());\n",
    "                currentNote.setDate(dateEntry.getText());\n",
    "                currentNote.setNote(noteEntry.getText());\n",
    "                appContext.switchToNoteList();\n",
    "            }\n",
    "        });\n",
    "\n",
    "        editNote(newNote);\n",
    "    }\n",
    "\n",
    "    public void editNote(Note note) {\n",
    "        currentNote = note;\n",
    "        subjectEntry.setText(note.getSubject());\n",
    "        dateEntry.setText(note.getDate());\n",
    "        noteEntry.setText(note.getNote());\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### NoteListPanel.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "package my.notebook.app;\n",
    "\n",
    "import java.util.ArrayList;\n",
    "import javax.swing.JPanel;\n",
    "import javax.swing.JLabel;\n",
    "import javax.swing.JButton;\n",
    "import javax.swing.JScrollPane;\n",
    "import javax.swing.JTable;\n",
    "import javax.swing.table.AbstractTableModel;\n",
    "import javax.swing.SwingConstants;\n",
    "import java.awt.BorderLayout;\n",
    "import java.awt.event.ActionEvent;\n",
    "import java.awt.event.ActionListener;\n",
    "\n",
    "class NoteListPanel extends JPanel {\n",
    "    private ArrayList<Note> notes;\n",
    "    private NotebookContext appContext;\n",
    "\n",
    "    public NoteListPanel(NotebookContext appContext, ArrayList<Note> notes) {\n",
    "        this.appContext = appContext;\n",
    "        this.notes = notes;\n",
    "\n",
    "        JTable noteList = new JTable(new AbstractTableModel() {\n",
    "            String[] columnNames = { \"Date\", \"Subject\" };\n",
    "            public String getColumnName(int col) {\n",
    "                return columnNames[col];\n",
    "            }\n",
    "            public int getColumnCount() { return 2; }\n",
    "            public int getRowCount() { return notes.size(); }\n",
    "            public Object getValueAt(int row, int col) {\n",
    "                Note note = notes.get(row);\n",
    "                if (col == 0) { return note.getDate(); }\n",
    "                else if (col == 1) { return note.getSubject(); }\n",
    "                else throw new IllegalArgumentException(\"Unknown column\");\n",
    "            }\n",
    "        });\n",
    "        noteList.setFillsViewportHeight(true);\n",
    "        noteList.setSelectionMode(javax.swing.ListSelectionModel.SINGLE_SELECTION);\n",
    "        JScrollPane scrollPane = new JScrollPane(noteList);\n",
    "\n",
    "        JButton newButton = new JButton(\"New\");\n",
    "        newButton.addActionListener(new ActionListener() {\n",
    "            @Override\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                Note newNote = new Note();\n",
    "                notes.add(newNote);\n",
    "                appContext.switchToNoteEntry(newNote);\n",
    "            }\n",
    "        });\n",
    "\n",
    "        JButton editButton = new JButton(\"Edit\");\n",
    "        editButton.addActionListener(new ActionListener() {\n",
    "            @Override\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                if (noteList.getSelectedRow() >= 0) {\n",
    "                    appContext.switchToNoteEntry(notes.get(noteList.getSelectedRow()));\n",
    "                }\n",
    "            }\n",
    "        });\n",
    "\n",
    "        JPanel bottomPanel = new JPanel();\n",
    "        bottomPanel.add(newButton);\n",
    "        bottomPanel.add(editButton);\n",
    "\n",
    "        setLayout(new BorderLayout());\n",
    "        add(new JLabel(\"Note List\", SwingConstants.CENTER), BorderLayout.NORTH);\n",
    "        add(scrollPane, BorderLayout.CENTER);\n",
    "        add(bottomPanel, BorderLayout.SOUTH);\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### NoteBookApp.java"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "package my.notebook.app;\n",
    "\n",
    "import java.util.ArrayList;\n",
    "import javax.swing.JFrame;\n",
    "import javax.swing.JMenuBar;\n",
    "import javax.swing.JMenu;\n",
    "import javax.swing.JMenuItem;\n",
    "import javax.swing.JSeparator;\n",
    "import javax.swing.JOptionPane;\n",
    "import java.awt.CardLayout;\n",
    "import java.awt.event.ActionListener;\n",
    "import java.awt.event.ActionEvent;\n",
    "\n",
    "public class NotebookApp extends JFrame implements NotebookContext {\n",
    "    private ArrayList<Note> notes;\n",
    "    private NoteEntryPanel noteEntryPanel;\n",
    "    private NoteListPanel noteListPanel;\n",
    "    private CardLayout layout;\n",
    "\n",
    "    public NotebookApp() {\n",
    "        super(\"Notebook\");\n",
    "\n",
    "        notes = new ArrayList<>();\n",
    "\n",
    "        layout = new CardLayout();\n",
    "        setLayout(layout);\n",
    "\n",
    "        noteListPanel = new NoteListPanel(this, notes);\n",
    "        noteEntryPanel = new NoteEntryPanel(this, new Note());\n",
    "        add(noteListPanel, \"NoteListPanel\");\n",
    "        add(noteEntryPanel, \"NoteEntryPanel\");\n",
    "\n",
    "        JMenuBar menuBar = new JMenuBar();\n",
    "        JMenu fileMenu = new JMenu(\"File\");\n",
    "        JMenuItem openMenuItem = new JMenuItem(\"Open\");\n",
    "        JMenuItem saveMenuItem = new JMenuItem(\"Save\");\n",
    "        JMenuItem quitMenuItem = new JMenuItem(\"Quit\");\n",
    "        fileMenu.add(openMenuItem);\n",
    "        fileMenu.add(saveMenuItem);\n",
    "        fileMenu.add(new JSeparator());\n",
    "        fileMenu.add(quitMenuItem);\n",
    "        menuBar.add(fileMenu);\n",
    "        setJMenuBar(menuBar);\n",
    "\n",
    "        openMenuItem.addActionListener(new ActionListener() {\n",
    "            @Override\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                JOptionPane.showMessageDialog(NotebookApp.this, \"Open not yet implemented.\");\n",
    "            }\n",
    "        });\n",
    "\n",
    "        saveMenuItem.addActionListener(new ActionListener() {\n",
    "            @Override\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                JOptionPane.showMessageDialog(NotebookApp.this, \"Save not yet implemented.\");\n",
    "            }\n",
    "        });\n",
    "\n",
    "        quitMenuItem.addActionListener(new ActionListener() {\n",
    "            @Override\n",
    "            public void actionPerformed(ActionEvent e) {\n",
    "                System.exit(0);\n",
    "            }\n",
    "        });\n",
    "\n",
    "        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\n",
    "        pack();\n",
    "        setVisible(true);\n",
    "    }\n",
    "\n",
    "    @Override\n",
    "    public void switchToNoteList() {\n",
    "        layout.show(this.getContentPane(), \"NoteListPanel\");\n",
    "    }\n",
    "\n",
    "    @Override\n",
    "    public void switchToNoteEntry(Note note) {\n",
    "        noteEntryPanel.editNote(note);\n",
    "        layout.show(this.getContentPane(), \"NoteEntryPanel\");\n",
    "    }\n",
    "\n",
    "    public static void main(String[] args) {\n",
    "        javax.swing.SwingUtilities.invokeLater(new Runnable() {\n",
    "            public void run() {\n",
    "                new NotebookApp();\n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Java",
   "language": "java",
   "name": "java"
  },
  "language_info": {
   "codemirror_mode": "java",
   "file_extension": ".java",
   "mimetype": "text/x-java-source",
   "name": "Java",
   "pygments_lexer": "java",
   "version": "9.0.4+11"
  },
  "toc": {
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}