11 Komponen Gui

  • 3,496 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,496
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
209
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Antara Muka Bergrafik (Graphical User Interface – GUI) Marini Abu Bakar, Sufian Idris Jabatan Sains Komputer
  • 2. Abstract Window Toolkit (AWT)
    • AWT adalah toolkit awal yang disediakan dalam JDK 1.0 dan JDK 1.1
    • AWT menyediakan:
      • komponen grafik asas
        • seperti label, butang, palang skrol dsb
      • infrastruktur untuk komponen grafik
        • seperti model deligasi peristiwa, pengurusan bentangan dan sokongan bagi pertukaran data serta komponen ringan
  • 3. Java Foundation Classes (JFC)
    • JFC mula diperkenalkan dalam JDK 1.2
    • JFC terdiri daripada pelbagai API (Antara muka Pengaturcara Aplikasi), antaranya:
      • AWT
      • Swing GUI toolkit
      • Java 2D graphics & imaging
      • Java Image I/O
      • Java Print Service
    • Tajuk ini hanya akan membincangkan mengenai API Swing & AWT
  • 4. Komponen Antara Muka
    • Setiap komponen GUI mempunyai :
      • atribut
        • cth: status (ditekan atau tidak) bagi butang
        • cth: kandungan teks pada medan teks
      • rupa / visual
        • spt: warna, saiz
      • perlakuan
        • iaitu tindakbalasnya pada suatu peristiwa
  • 5.
    • Setiap komponen GUI Java merupakan suatu objek Component
    • Objek Component lazimnya dimasukkan ke dalam suatu bekas (objek Container )
  • 6.
    • Objek Container juga adalah suatu objek Component . Implikasinya, suatu bekas boleh mempunyai bekas lain
  • 7.
    • Setiap bekas (objek Container ) disekutukan dengan suatu pengurus bentangan (objek LayoutManager ). Tugas objek LayoutManager ini adalah untuk menyusun objek-objek Component dalam objek Container
    BorderLayout BorderLayout GridLayout
  • 8. Hirarki Swing
    • Komponen Swing berada dalam pakej javax.swing
    • Kelas Swing mewarisi kelas dalam pakej java.awt
    komponen GUI asas Swing mewaris kelas JComponent
  • 9. JComponent kita hanya akan bincangkan mengenai beberapa komponen asas GUI Swing dalam tajuk ini
  • 10. AWT Tidak digalakkan untuk menggabungkan komponen asas AWT dengan Swing dalam satu bekas kita akan menggunakan kelas LayoutManager dan AWTEvent dari pakej AWT
  • 11. Langkah membina antara muka GUI
    • Tentukan komponen GUI
      • JButton , JLabel , JTextField , JCheckbox dll
    • Tentukan bekas
      • JApplet , JPanel , JFrame
    • Tentukan pengurus bentangan komponen ( Layout Manager )
      • FlowLayout , GridLayout , BorderLayout
    • Tentukan bagaimana peristiwa harus dikendalikan ( Event-Driven Programming )
      • Event Source, Listener, Listener Interface
      • Peristiwa akan dibincangkan dalam tajuk berikut.
  • 12.
    • Beberapa komponen kawalan GUI Swing akan dibincangkan (tanpa mengambilkira pengendalian peristiwa), antaranya:
      • butang JButton
      • label JLabel
      • medan teks JTextField
      • medan katakunci JPasswordField
      • kotak pilihan JCheckBox
      • butang radio JRadioButton
      • senarai JList
      • kotak kombo JCombobox
      • kawasan teks JTextArea
      • penggelungsur JSlider
    Komponen Kawalan Swing
  • 13. Butang JButton Pembina: JButton(String s)
      • cth:
        • JButton butangMerah;
        • butangMerah = new JButton(“Merah”);
    label pada butang
  • 14. import javax.swing.*; import java.awt.*; public class ApletButang extends JApplet { public void init() { Container pane = getContentPane(); pane.setBackground(Color.white); pane.setLayout(new FlowLayout()); pane.add(new JButton(“Merah”)); pane.add(new JButton(“Biru”)); pane.add(new JButton(“Hijau”)); pane.add(new JButton(“Putih”)); } } run ApletButang Capai bekas pane Set warna latar bekas Set pengurus bentangan bagi bekas Muatkan komponen JButton dalam bekas Cipta objek JButton berlabel “Merah”
  • 15. Label JLabel Pembina: JLabel() JLabel(String s) JLabel(String s, int j) Metod ahli: setText(String s)
    • jajaran:
      • SwingConstants.LEFT
      • SwingConstants.CENTER
      • SwingConstants.RIGHT
    teks pada label setkan teks label kepada s
  • 16. Medan Teks JTextField Pembina: JTextField(int lj) JTextField(String s, int lj) bina objek medan teks 30 lajur dengan teks awalnya rentetan nol new JTextField(30); saiz lajur medan teks teks awal pada medan teks
  • 17.
    • Metod Ahli:
    • setText(String s)
      • untuk mensetkan teks kepada s .
    • getText()
      • mengembalikan teks objek penerima.
    • setColumns(int lj)
      • untuk mensetkan saiz kepada lj .
    • setEditable(boolean editable)
      • Setkan sama ada medan teks boleh diedit atau tidak. Secara lalainya, editable bernilai true.
  • 18. Medan Kata Laluan JPasswordField
    • Pembina:
    • JPasswordField(int lj)
    bina objek medan kata laluan 15 lajur dengan teks awalnya rentetan nol new JTextPasswordField(15); Medan katalaluan akan memaparkan jujukan ‘*’ apabila input dimasukkan saiz lajur medan kata laluan
  • 19.  
  • 20. import java.awt.*; import javax.swing.*; public class ApletInputTeks extends JApplet { private JLabel nama, matrik; private JTextField teksNama; private JPasswordField teksMatrik; public void init() { Container pane = getContentPane(); pane.setBackground(Color.white); pane.setLayout(new FlowLayout()); nama = new JLabel("Nama"); teksNama = new JTextField(30); matrik = new JLabel("Nombor Matrik"); teksMatrik = new JPasswordField(10); pane.add(nama); pane.add(teksNama); pane.add(matrik); pane.add(teksMatrik); } } run ApletInputTeks objek label objek medan teks 30 lajur objek medan teks kata laluan muatkan objek pada bekas aplet satu demi satu
  • 21. Kotak Pilihan JCheckBox Pembina: JCheckBox(String s) bina kotak pilihan berlabel “Java” dengan status awalnya false new JCheckBox(“Java”); JCheckbox(String s, boolean status)
    • Metod Ahli:
    • isSelected()
      • mengembalikan status objek penerima iaitu true (jika dipilih) atau false (jika sebaliknya)
    new JCheckBox(“Java”, true); label pada kotak pilihan status awal bagi kotak pilihan
  • 22. import java.awt.*; import javax.swing.*; public class ApletKotakPilihan extends JApplet { public void init() { Container pane = getContentPane(); pane.setBackground(Color.white); pane.setLayout(new FlowLayout()); pane.add(new JCheckBox("Java", true)); pane.add(new JCheckBox("C")); pane.add(new JCheckBox("Cobol")); pane.add(new JCheckBox("VBscript")); pane.add(new JCheckBox("ASP", true)); } } run ApletKotakPilihan mencipta dan muatkan objek kotak pilihan ke dalam bekas
  • 23. Butang radio JRadioButton Pembina: JRadioButton(String s) run ApletButangRadio bina butang radio berlabel “Java” dengan status awalnya false new JRadioButton(“Java”); JRadioButton(String s, boolean status) new JCheckBox(“Java”, true);
    • Metod Ahli:
    • isSelected()
      • kembalikan status objek penerima iaitu true (jika dipilih) atau false (jika tidak dipilih).
    label pada butang radio status awal bagi kotak pilihan
  • 24.  
  • 25. Senarai JList Pembina: JList(Object[ ] sen)
    • Metod Ahli:
    • setVisibleCount(int c)
      • set bilangan baris pada senarai yang boleh dipaparkan tanpa palang skrol
    tatasusunan yang mengandungi senarai item objek JList
  • 26.
    • private String[] item = {
      • "Garis", "Segiempat", "Bulatan",
      • "Segitiga", “Segienam", "Segilapan” };
    • public void init() {
        • :
      • JList sen = new JList(item);
      • sen.setVisibleRowCount(4);
      • sen.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
      • pane.add(new JScrollPane(sen));
    • }
    run ApletSenaraiPilihan menakrifkan tatasusunan senarai item
    • mencipta objek senarai dgn:
    • 4 baris item yang nampak
    • mod pilihan : tunggal
    memuatkan senarai dalam tetingkap skrol dan paparkan
  • 27.
    • Metod Ahli:
    • setSelectionMode
      • setkan mod pilihan
        • ListSelectionModel.SINGLE_SELECTION
        • ListSelectionModel.SINGLE_INTERVAL_SELECTION
        • ListSelectionModel.MULTIPLE_INTERVAL_SELECTION
  • 28. Kotak kombo JComboBox
    • Pembina:
    • JComboBox(Object[ ] sen)
      • membina objek JComboBox yang mewakilkan suatu komponen kotak kombo yang itemnya terdiri daripada objek dalam tatasusunan sen .
    run ApletKotakKombo
  • 29. Ruang teks JTextArea Pembina: JTextArea(int br, int lj) run ApletRuangTeks bina objek medan teks 5 baris dan 20 lajur dengan teks awalnya rentetan nol new JTextArea(5, 20); JTextArea(String tks, int br, int lj) bil baris dan lajur ruang teks teks awal pada ruang teks
  • 30. Penggelungsur JSlider Pembina: JSlider()
    • membina objek JSlider lalai :
      • mendatar
      • julat 0..100
      • nilai awal 50.
    JSlider(int arah) new JSlider(); JSlider.HORIZONTAL - mendatar JSlider.VERTICAL - membujur
  • 31. run ApletSlider
    • JSlider(int arah, int min, int maks, int n)
      • membina objek JSlider dengan julat min .. maks dan nilai awalnya n .
    new JSlider(JSlider.HORIZONTAL, -100, 100, 0);
  • 32.
    • Metod ahli:
    • void setMajorTickSpacing(int)
      • setkan tokokan penanda utama
    • void setMinorTickSpacing(int)
      • setkan tokokan penanda minor
    • void setPaintTicks(boolean)
      • true – untuk memaparkan penanda tokokan utama dan minor
    • void setPaintLabels(boolean)
      • true – untuk memaparkan label bagi nilai tokokan utama dan r
  • 33.
    • Bahagian ini akan membincangkan
      • bekas paras tertinggi JApplet dan JFrame
      • bekas kegunaan umum JPanel
    Komponen Bekas
  • 34. JApplet
    • Kita boleh menghasilkan aplet dengan menulis kelas yang mewarisi JApplet
    • Aplet yang mewarisi JApplet boleh memuatkan komponen GUI Swing
    • Setiap bekas paras tertinggi spt JApplet mempunyai bekas contentPane sebagai bekas utama pada tetingkap aplet
    • Semua komponen Swing dimuatkan dalam bekas contentPane ini.
    • Ingat kembali ApletButang ...
  • 35. import javax.swing.*; import java.awt.*; public class ApletButang extends JApplet { public void init() { Container pane = getContentPane(); pane .setBackground(Color.white); pane .setLayout(new FlowLayout()); pane .add(new JButton(“Merah”)); pane .add(new JButton(“Biru”)); pane .add(new JButton(“Hijau”)); pane .add(new JButton(“Putih”)); } } run ApletButang Capai bekas pane Set warna latar bekas Set pengurus bentangan bagi bekas Muatkan komponen JButton dalam bekas pane
  • 36. JFrame
    • JFrame adalah sejenis bekas (objek Container ) yang mempunyai tetingkap dan framenya sendiri
    • JFrame boleh menjadi bekas asas untuk aplikasi
    • :
    • class FrameLalai {
      • public static void main(String [] args) {
        • JFrame frame = new JFrame();
        • frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        • frame.setTitle("Aplikasi Frame Lalai");
        • frame.setSize(300, 200);
        • frame.setVisible(true);
      • }
    • }
    cipta objek JFrame setkan tajuk frame setkan saiz frame tampakkan frame operasi bila frame di”tutup”
  • 37.
    • JFrame juga mempunyai bekas ContentPane yang menjadi bekas utama pada tetingkap frame
    • Semua komponen Swing dimuatkan dalam bekas ContentPane ini.
  • 38.
    • import javax.swing.*;
    • class FrameButang extends JFrame {
      • public FrameButang() {
        • Container pane = getContentPane();
        • pane.setBackground(Color.white);
        • pane.setLayout(new FlowLayout());
        • pane.add(new JButton(“Merah”));
    • pane.add(new JButton(“Biru”));
    • pane.add(new JButton(“Hijau”));
    • pane.add(new JButton(“Putih”));
      • }
      • public static void main(String [] args) {
        • FrameButang frame = new FrameButang();
        • frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        • frame.setTitle(“Aplikasi Frame Butang”);
        • frame.setSize(300, 200);
        • frame. setVisible(true);
      • }
    • }
    Kelas FrameButang mewarisi JFrame Capai bekas pane Set warna latar bekas Set pengurus bentangan bagi bekas Muatkan komponen JButton dalam bekas pane run FrameButang Cipta objek FrameButang, setkan tajuk dan saiz, kemudian “tunjukkannya”
  • 39. JPanel
    • Kelas JPanel merupakan suatu bekas kegunaan umum
    • Kita boleh menyusun komponen Swing dalam panel dan memuatkan panel dalam bekas paras tertinggi seperti JApplet dan JFrame .
    • Kita juga boleh memuatkan panel dalam panel.
  • 40. Pengurus Bentangan
    • Setiap bekas (objek Container ) disekutukan dengan satu pengurus bentangan (objek LayoutManager ) .
    • Pengurus bentangan menentukan saiz dan penyusunan komponen dalam bekas tersebut
      • jika tetingkap aplet diubah saiz, komponen di dalamnya mungkin perlu disusun semula dengan saiz yang bersesuaian
  • 41.
    • Beberapa pengurus bentangan yang disediakan dalam pakej java.awt
      • BorderLayout
      • FlowLayout
      • GridLayout
      • CardLayout
      • GridBagLayout
      • BoxLayout
    • Kursus ini hanya akan membincangkan pengurus bentangan FlowLayout , BorderLayout dan GridLayout sahaja
  • 42. FlowLayout
    • Bentangan yang paling ringkas tetapi agak sukar dikawal kedudukan komponennya.
    • Komponen disusun dalam bekas daripada kiri ke kanan, baris demi baris berdasarkan urutan komponen ditambah dalam bekas tersebut.
  • 43.
    • Merupakan pengurus bentangan lalai bagi objek JPanel
    • Komponen boleh disusun secara jajar (align)
      • kiri
      • kanan
      • tengah
    • Pembina
      • FlowLayout()
        • jajar lalai : jajar tengah
    pane.setLayout(new FlowLayout()); run
  • 44. ShowFlowLayout.java Run pane.setLayout(new FlowLayout(FlowLayout.LEFT)); FlowLayout(int align) run LEFT run RIGHT FlowLayout(int align , int hgap, int vgap) pane.setLayout(new FlowLayout(FlowLayout.RIGHT)); pane.setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20)); FlowLayout.LEFT, FlowLayout.CENTER, FlowLayout.RIGHT jarak mendatar & menegak antara dua komponen bersebelahan
  • 45. BorderLayout
    • Membahagikan bekas kepada lima bahagian: North, South, East, West, Center
    • Setiap kawasan boleh menampung satu komponen sahaja.
    • Komponen dalam suatu kawasan akan disesuaikan saiznya supaya meliputi keseluruhan kawasan
  • 46.
    • Merupakan pengurus bentangan lalai bagi bekas JApplet
    • Untuk menambah komponen dalam bekas, kita gunakan metod ahli Container berikut:
      • add(Component component, Object constraint)
    Run pane.setLayout(new BorderLayout()); pane.add(new JButton(“North”), “North”); pane.add(new JButton(“Center”), “Center”); : objek Component yang ingin dimuatkan dalam bekas mewakili kekangan yang perlu dipatuhi dalam meletakkan komponen tersebut
  • 47.
    • Sekiranya terdapat kawasan yang tidak mengandungi komponen, pengurus bentangan akan menyesuaikan saiz komponen yang bersebelahan
  • 48.
    • Bagaimana jika kita ingin memasukkan lebih dari satu komponen dalam suatu kawasan?
      • Guna komponen JPanel sebagai bekas untuk menampung komponen tersebut dan masukkan bekas tersebut dalam kawasan itu.
    run ApletBekasPanel.java
  • 49. GridLayout
    • Ruang paparan objek bekas dibahagikan kepada sel-sel yang sama saiznya. Komponen ditambah dengan memuatkannya dalam sel daripada baris teratas ke baris terbawah, daripada kiri ke kanan
  • 50. Run run aplet Kalkulator pane.setLayout(new GridLayout(4, 3, 5, 5)); for (int i = 1; i <= 10; i++) pane.add(new JButton(&quot;Component &quot; + i));
    • Pembina
      • GridLayout(int brs, int ljr)
      • GridLayout(int brs, int ljr, int hgap, int vgap)
  • 51. Latihan Tuliskan aplet untuk memaparkan susun atur komponen bagi antaramuka ketuhar gelombang mikro berikut: Run
  • 52. Aplet <--> Aplikasi
    • Bagaimana cara yang mudah untuk menulis aturcara java supaya boleh diubah perlaksanaannya daripada aplet kepada aplikasi, dan juga sebaliknya??
    • Kita gunakan contoh aplet Kalkulator
    aplet mengunakan bentangan BorderLayout ruang north : medan teks dengan nilai awal o ruang center : dimuatkan dengan panel yang mengandungi 16 butang butang disusun secara GridLayout
  • 53.
    • Muatkan semua komponen ini dalam panel.
      • Lihat kelas PanelKalkulator.java
    • Untuk menghasilkan aplet, cipta kelas ApletKalkulator yang memuatkan objek PanelKalkulator dalam bekas ContentPane nya.
    import java.applet.*; import javax.swing.*; import java.awt.*; public class ApletKalkulator extends JApplet { public void init() { Container pane = getContentPane(); pane.setBackground(Color.white); pane.setLayout(new BorderLayout()); PanelKalkulator panelKalk = new PanelKalkulator(); pane.add(panelKalk); } }
  • 54.
    • Dengan cara yang sama, untuk menghasilkan aplikasi, cipta kelas AplikasiKalkulator yang memuatkan objek PanelKalkulator dalam bekas ContentPane nya.
    • :
    • public class AplikasiKalkulator extends JFrame {
      • public AplikasiKalkulator() {
    • Container pane = getContentPane();
    • pane.setBackground(Color.white);
    • pane.setLayout(new BorderLayout());
    • PanelKalkulator panelKalk = new PanelKalkulator();
    • pane.add(panelKalk);
      • }
      • public static void main(String [] args) {
    • AplikasiKalkulator frame = new AplikasiKalkulator();
    • frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    • frame.setTitle(&quot;Aplikasi Frame Butang&quot;);
    • frame.setSize(300, 200);
    • frame. setVisible(true);
      • }
    • }
  • 55. Kelas JComponent
    • Disenaraikan beberapa metod ahli yang diwarisi dari kelas JComponent sebagai rujukan
    getY () Returns the current y coordinate of the component's origin.   int getX () Returns the current x coordinate of the component's origin.   int getWidth () Returns the current width of this component.   int getSize ( Dimension  rv) Stores the width/height of this component into &quot;return value&quot; rv and returns rv .   Dimension getLocation ( Point  rv) Stores the x,y origin of this component into &quot;return value&quot; rv and returns rv .   Point getHeight () Returns the current height of this component.   int getGraphics () Returns this component's graphics context, which lets you draw on a component.   Graphics getBounds ( Rectangle  rv) Stores the bounds of this component into &quot;return value&quot; rv and returns rv .   Rectangle
  • 56. paintComponent ( Graphics  g) Calls the UI delegate's paint method, if the UI delegate is non- null . protected  void paint ( Graphics  g) Invoked by Swing to draw components.   void update ( Graphics  g) Calls paint .   void setVisible (boolean aFlag) Makes the component visible or invisible.   void setForeground ( Color  fg) Sets the foreground color of this component.   void setFont ( Font  font) Sets the font for this component.   void setBorder ( Border  border) Sets the border of this component.   void setBackground ( Color  bg) Sets the background color of this component.   void reshape (int x, int y, int w, int h) Moves and resizes this component. void
  • 57. Kelas Container
    • Disenaraikan beberapa metod ahli yang diwarisi dari kelas Container sebagai rujukan
    getComponents () Gets all the components in this container.   Component [] getComponentCount () Gets the number of components in this panel.   int getComponentAt (int x, int y) Locates the component that contains the x,y position.   Component getComponent (int n) Gets the nth component in this container.   Component add ( String  name, Component  comp) Adds the specified component to this container.   Component add ( Component  comp, Object  constraints) Adds the specified component to the end of this container.   void add ( Component  comp, int index) Adds the specified component to this container at the given position.   Component add ( Component  comp) Appends the specified component to the end of this container.   Component
  • 58. setLayout ( LayoutManager  mgr) Sets the layout manager for this container.   void removeAll () Removes all the components from this container.   void remove (int index) Removes the component, specified by index , from this container.   void remove ( Component  comp) Removes the specified component from this container.   void paintComponents ( Graphics  g) Paints each of the components in this container.   void paint ( Graphics  g) Paints the container.   void getLayout () Gets the layout manager for this container.   LayoutManager