chapter 4 thiết kế gioa diện người dùng lập trình java
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.19 MB, 158 trang )
<span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">
<b>GIỚI THIỆU</b>
</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4"><b>Giao diện</b>
◂<b>Giao diện nghĩa là điểm giao tiếp giữa hai đối tượng.</b>
◂<b>Giao diện </b>là tất cả những gì xuất hiện trên phần mềm bao gồm hình ảnh, thơng tin, video, các điều hướng người dùng trên website, liên kết trên web... hay đơn giản là tất cả những gì người dùng nhìn thấy, tương tác khi vào trong ứng dụng.
</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5"><b>Giao diện</b>
quan. Người dùng tương tác với đối tượng này thông qua con trỏ chuột hay bàn phím. Các thành phần như là button, label v.v… có thể được nhìn thấy trên màn hình.
Interface (GUI)
<b>5</b>
</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6"><b>TỔNG QUAN GUI</b>
</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7"><b>Tổng quan GUI</b>
➢AWT:cung cấp các gói cơ bản để lập trình giao diện, được sử dụng trong các phiên bản trước jdk1.2 (java2) ➢Swing: có nhiều chức năng hơn AWT, xây dựng chương
trình dễ dàng mềm dẻo hơn. Được đưa vào từ jdk1.2
➢<i>Swing Components</i>thường có tên bắt đầu với 'J'
</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8"><b>Tổng quan GUI</b>
➢Thư viện hỗ trợ lập trình giao diện trong Java: tập hợp các lớp java cung cấp hỗ trợ thiết kế, xây dựng GUI
◂<b>AWT (Abstract Windows Toolkits) importjava.awt.*;</b>
◂<b>Swing (Java Foundation Classes Package) importjavax.swing.*;</b>
<b>import java.awt.*;</b>
<b>import java.awt.event.*;</b>
</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9"><b>Swing API</b>
➢<i>Java Foundation Classes</i>(JFC) cung cấp một tập các chức năng giúp xây dựng các ứng dụng GUI.
oCung cấp thêm các đối tượng mới để xây dựng giao diện đồ họa
<i>o look-and-feel: tùy biến để các thành phần giao diện của </i>
Swing nhìn giống như các thành phần giao diện của HĐH
oHỗ trợ các thao tác sử dụng bàn phím thay chuột oSử dụng tài nguyên hiệu quả hơn
<b>9</b>
</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10"><b>Java GUI hierarchy </b>
</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12"><b>Swing Components</b>
o<i>frame, còn gọi main window (JFrame)</i>
o<i>panel, hoặc pane (JPanel)</i>
o<i>button (JButton)</i>
o<i>label (JLabel)</i>
dụng GUI kết hợp với nhau.
</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13"><b>Kháiniệm container</b>
vẽ và tô màu.
oFrame/JFrame, Panel/JPanel, Dialog/JDialog, ScrollPane/JScrollPane, …
oobjectName.get…( );
oobjectName.set…( );
<b>13</b>
</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14"><b>Nguyên tắc xây dựng GUI</b>
Dialog/JDialog, …
➢Tạo các điều khiển(control): (buttons, text areas, list, choice, checkbox..)
</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15"><b>15Containment </b>
<b>Hierarchy</b>
</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16"><b>Frame: Top-level container:</b>JFrame, JDialog, JApplet
<b>Containment Hierarchy</b>
</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19"><b>Containment Hierarchy</b>
➢<b>Top Level Containers</b>
▪JFrame: sử dụng cho các cửa sổ chính của chương trình
▪JDialog: cửa sổ thơng báo
▪JApplet: sử dụng trên trình duyệt
<b>19</b>
</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20"><b>Containment Hierarchy (tt)</b>
➢<b>Top Level Containers: JFrame</b>
oLà cửa sổ chính, dùng để chứa các thành phần giao diện khác. Đóng vai trị là một container
oHàm khởi tạo
•JFrame(String title)
oCác thành phần đồ họa được đưa vào content pane, không đưa trực tiếp vào JFrame. Ví dụ:
oJFrame cung cấp 2 phương thức:
</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21"><b>VíDụ JFrame</b>
<b>import javax.swing.*;</b>
<b>class Frame1 extends JFrame{/* Construction of the frame */</b>
<b>public class AppFrame1 {</b>
<b>public static void main(String[ ] args) {Frame1 frame =new Frame1(); </b>
</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22"><b>Containment Hierarchy (tt)</b>
➢<b>Intermediate Containers</b>
</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23"><b>Containment Hierarchy (tt)</b>
➢<b>Intermediate Containers: JPanel</b>
oLà container trung gian để chứa các Atomic
</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24"><b>Containment Hierarchy (tt)</b>
➢<b>Atomic Components</b>
</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">JFrame frame = new JFrame(...); JPanel pane = new JPanel(); frame.getContentPane().add(pane);
<b>25</b>
</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26"><b>LAYOUT </b>
<b>MANAGER </b>
</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27"><b>Layout Manager</b>
➢<b>Khái niệm: được dùng điều khiển cách trình bày vật lý </b>
của các phần tử GUI như làbutton, textbox, option button➢Các loại layout khác nhau:
</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28"><b>Layout Manager: FlowLayout</b>
➢Là trình quản lý layout mặc định cho các panel
trái trên đến góc phải dưới của màn hình.
➢Các hàm khởi tạo - constructor:
⚫<b>align: có các giá trị </b>FlowLayout.LEFT, FlowLayout.CENTER,
</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29"><b>FlowLayout (tt)</b>
Flow Layout – Left and Right Aligned
<b>29</b>
</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30"><b>Layout Manager: BorderLayout</b>
EAST, SOUTH, WEST và CENTER của container
JButton b1= new JButton(“North Button”); setLayout(new BorderLayout( ));
add(b1, BorderLayout.NORTH);
</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31"><b>BorderLayout (tt)</b>
public voidshowBorderLayout(){
JFrame frame =new JFrame("Border Layout Demo"); frame.setSize(400,400);
JPanel panel =new JPanel(newBorderLayout());
panel.add(newJButton("North Button"),BorderLayout.NORTH); panel.add(newJButton("South Button"),BorderLayout.SOUTH); panel.add(newJButton("West Button"),BorderLayout.WEST); panel.add(newJButton("East Button"),BorderLayout.EAST);
panel.add(newJButton("Center Button"),BorderLayout.CENTER);
</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32"><b>BorderLayout (tt)</b>
</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33"><b>Layout Manager: GridLayout</b>
➢Hỗ trợ việc chia container thành một lưới
có cùng kích thước
GridLayout layout = new GridLayout(no. of rows, no. of columns);
containerObj.setLayout(layout);
</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">public void showGridLayout(){
JFrame frame =newJFrame("Border Layout Demo"); frame.setSize(400,400);
JPanel panel = newJPanel();
GridLayout gridLayout =newGridLayout(2,2); panel.setLayout(gridLayout);
panel.add(newJButton("Button 1"));panel.add(new JButton("Button 2"));panel.add(new JButton("Button 3"));panel.add(new JButton("Button 4"));//frame.getContentPane().add(panel);
</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35"><b>Layout Manager: GridBagLayout</b>
GridBagLayout gb = new GridBagLayout( );
➢LớpGridBagLayoutConstraintslưu trữ tất cả các thôngtin mà lớp GridLayout yêu cầu: Vị trí và kích thuớc mỗithành phần
</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36"><b>GridBagLayout</b>
</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37"><b>Layout Manager: NullLayout</b>
</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38"><b>COMPONENTS</b>
</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39"><b>Swing Components</b>
được gọi là component.
Choice, List, Scrollbars,…
<b>39</b>
</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40"><b>Swing Components</b>
</div><span class="text_page_counter">Trang 41</span><div class="page_container" data-page="41"><b>Sử Dụng Swing Component</b>
<b>41</b>
</div><span class="text_page_counter">Trang 42</span><div class="page_container" data-page="42">➢Có các phương thức add, set, get
</div><span class="text_page_counter">Trang 43</span><div class="page_container" data-page="43">➢<i>Label dùng để hiển thị một chuỗi văn bản, hình ảnh </i>
nhằm mơ tả thêm thông tin cho các đối tượng khác.
JLabel()
JLabel(String text)
JLabel(String text,int hAlignment) JLabel(Icon icon)
JLabel(Icon icon, int hAlignment)
JLabel(String text,Icon icon,int hAlignment)
<b>hAlignment: có các giá trị</b>LEFT,CENTER,RIGHT,LEADING, hoặc
TRAILING
</div><span class="text_page_counter">Trang 45</span><div class="page_container" data-page="45"><b>VíDụ </b>
<b>45</b>
</div><span class="text_page_counter">Trang 46</span><div class="page_container" data-page="46">Đây là lớp cha của tất cả các lớp hiển thị văn bản trong Swing
<b>JTextComponent</b>
</div><span class="text_page_counter">Trang 47</span><div class="page_container" data-page="47">➢<i>Textfield là ô nhập dữ liệu dạng văn bản trên 1 dòng.</i>
oTạo một text field với văn bản có sẵn và số cột xác định.
JTextField(String text, int columns)
</div><span class="text_page_counter">Trang 50</span><div class="page_container" data-page="50">JTextArea(int rows, int columns)
JTextArea(String s, int rows, int columns)
</div><span class="text_page_counter">Trang 53</span><div class="page_container" data-page="53"><b>Swing Button Classes</b>
</div><span class="text_page_counter">Trang 54</span><div class="page_container" data-page="54">➢<i>Button là một thành phần gây ra một sự kiện hành động </i>
khi được kích chuột.
JButton()
JButton(String text)
JButton(String text, Icon icon) JButton(Icon icon)
</div><span class="text_page_counter">Trang 56</span><div class="page_container" data-page="56">➢Các nút lệnh thay đổi trạng thái
o<b>Nhận các giá trị on/off hoặc true/false</b>
oSwing hỗ trợ các kiểu:
•<b>JRadioButton</b>
</div><span class="text_page_counter">Trang 57</span><div class="page_container" data-page="57">o Object getItem():trả về mục được chọn
o int getStateChange():trả về trạng thái trạng thái của mục chọn (DESELECTED/SELECTED)
</div><span class="text_page_counter">Trang 58</span><div class="page_container" data-page="58">o void itemStateChanged(ItemEvent e):được gọi thi hành khi người dùng chọn hoặc bỏ chọn 1 mục.
<b>Item Listener</b>
</div><span class="text_page_counter">Trang 59</span><div class="page_container" data-page="59">JCheckBox(String text, boolean selected) JCheckBox(String text, Icon icon)
JCheckBox(String text, Icon icon, boolean selected)
JCheckBox(Action a)
</div><span class="text_page_counter">Trang 60</span><div class="page_container" data-page="60"><b>JCheckBox (tt)</b>
</div><span class="text_page_counter">Trang 61</span><div class="page_container" data-page="61"><b>// set up GUI</b>
<b>publicCheckBoxTest(){</b>
<b>super("JCheckBox Test");</b>
<b>// get content pane and set its layout Container container = getContentPane(); </b>
<b>// set up JTextField and set its font field =</b>
<b>); container.add( field );// create checkbox objects</b>
<b>11public classCheckBoxTestextendsJFrame {12private JTextField field;</b>
<b>13privateJCheckBox bold, italic;</b>
<b>Declare two JCheckBox instances</b>
<b>Set JTextField font</b>
to Serif, 14-point plain
<b>Instantiate JCheckBoxs for bolding and italicizing JTextField text, respectively</b>
<b>61</b>
</div><span class="text_page_counter">Trang 62</span><div class="page_container" data-page="62"><b>// register listeners for JCheckBoxes </b>
<b>// private inner class for ItemListener event handling</b>
<b>private classCheckBoxHandlerimplements ItemListener{</b>
<b>private int valBold = Font.PLAIN; </b>
<b>private intvalItalic = Font.PLAIN;// respond to checkbox events</b>
<b>public voiditemStateChanged( ItemEvent event )</b>
<b>Register JCheckBoxs to receiveevents from CheckBoxHandler</b>
<b>When user selects JCheckBox,</b>
<b>CheckBoxHandler invokes</b>
<b>method itemStateChanges of all</b>
registered listeners
</div><span class="text_page_counter">Trang 63</span><div class="page_container" data-page="63"><b>// process italic checkbox events </b>
<b>// set text field font </b>
<b>Change JTextField font, depending on which JCheckBox was selected</b>
<b>63</b>
</div><span class="text_page_counter">Trang 65</span><div class="page_container" data-page="65"><b>JRadioButton (tt)</b>
<b>65</b>
</div><span class="text_page_counter">Trang 66</span><div class="page_container" data-page="66"><b>privateFont plainFont, boldFont, italicFont,</b>
<b>boldButton, italicButton,boldItalicButton;</b>
<b>privateButtonGroup radioGroup;// create GUI and fonts </b>
<b>publicRadioButtonTest(){</b>
<b>super("RadioButton Test");</b>
<b>// get content pane and set its layout Container container = getContentPane(); </b>
<b>11public classRadioButtonTestextendsJFrame {12privateJTextField field;</b>
</div><span class="text_page_counter">Trang 67</span><div class="page_container" data-page="67"><b>boldButton = newJRadioButton("Bold",</b>
<b>false); container.add( boldButton );</b>
<b>); container.add( italicButton );</b>
<b>container.add( boldItalicButton );// register events for JRadioButtons </b>
<b>RadioButtonHandler(); plainButton.addItemListener(handler ); boldButton.addItemListener( handler ); italicButton.addItemListener( handler ); </b>
<b>boldItalicButton.addItemListener( handler );// create logical relationship between</b>
<b>JRadioButtons radioGroup =newButtonGroup();// create font objects</b>
<b>Instantiate JRadioButtons for manipulating JTextField text font</b>
</div><span class="text_page_counter">Trang 68</span><div class="page_container" data-page="68"><b>// private inner class to handle radio button events </b>
<b>private classRadioButtonHandlerimplementsItemListener{</b>
<b>// handle radio button events</b>
<b>public voiditemStateChanged( ItemEvent event ){</b>
<b>// user clicked plainButton</b>
<b>field.setFont( plainFont );// user clicked boldButton</b>
<b>else if(event.getItem() == boldButton) field.setFont( boldFont );</b>
<b>// user clicked italicButton</b>
<b>else if(event.getItem() == italicButton) field.setFont( italicFont );</b>
<b>// user clicked boldItalicButton</b>
<b>else if(event.getItem() == boldItalicButton</b>
</div><span class="text_page_counter">Trang 69</span><div class="page_container" data-page="69">oDùng để liệt kê danh sách các mục mà người dùng có thể chọn
o<i>Cịn được gọi là drop-down list</i>
oPhát sinh sự kiện ItemEvent khi người sử dụng chọn 1 mục
</div><span class="text_page_counter">Trang 70</span><div class="page_container" data-page="70"><b>JComboBox (tt)</b>
</div><span class="text_page_counter">Trang 71</span><div class="page_container" data-page="71"><b>privateString names[] =</b>
<b>{"bug1.gif","bug2.gif","travelbug.gif","buganim.gif"}; </b>
<b>privateIcon icons[] = { newImageIcon( names[0] ),</b>
<b>// set up GUI</b>
<b>publicComboBoxTest(){</b>
<b>super("Testing JComboBox");</b>
<b>// get content pane and set its layout Container container = getContentPane(); </b>
<b>// set up JComboBox and register its event</b>
<b>handler imagesComboBox = newJComboBox( names ); </b>
<b>11public classComboBoxTestextendsJFrame {12privateJComboBox imagesComboBox;13privateJLabel label;</b>
<b>Register JComboBox to receive events from anonymous ItemListener</b>
<b>Instantiate JComboBox to show three Strings from </b>
<b>names array at a time</b>
2002 Prentice Hall, Inc. All rights reserved.
<b>71</b>
</div><span class="text_page_counter">Trang 72</span><div class="page_container" data-page="72"><b>// anonymous inner class to handle JComboBoxevents newItemListener() {</b>
<b>ItemEvent event )// handle JComboBox event </b>
<b>public void itemStateChanged({</b>
<b>// determine whether check box selected</b>
<b>label.setIcon( icons[ </b>
<b>imagesComboBox.getSelectedIndex() ] );}</b>
<b>}// end anonymous inner class);// end call to addItemListenercontainer.add( imagesComboBox );</b>
<b>// set up JLabel to display ImageIcons </b>
<b>When user selects item in JComboBox, </b>
<b>ItemListener invokes method itemStateChanged of all registered listeners</b>
<b>Set appropriate Icon</b>
depending on user selection
</div><span class="text_page_counter">Trang 73</span><div class="page_container" data-page="73">oDanh sách các mục chọn
oCó thể chọn 1 hoặc nhiều mục
oCho phép sắp xếp dữ liệu hiển thị, phân nhóm
oCó thể hiển thị chuỗi và icon
oKhông hỗ trợ doublclik chuột
oPhát sinh ListSelectionEvent khi người dùng chọn
</div><span class="text_page_counter">Trang 74</span><div class="page_container" data-page="74">➢<b>ListSelectionListener</b>
</div><span class="text_page_counter">Trang 75</span><div class="page_container" data-page="75"><b>Jlist Demo</b>
<b>75</b>
</div><span class="text_page_counter">Trang 76</span><div class="page_container" data-page="76"><b>privateString colorNames[] = {"Black","Blue","Cyan", </b>
<b>"Dark Gray","Gray","Green","Light Gray",</b>
<b>privateColor colors[] = { Color.black, Color.blue, </b>
<b>// set up GUI </b>
<b>publicListTest(){</b>
<b>super("List Test" );</b>
<b>// get content pane and set its layout </b>
<b>11public classListTestextendsJFrame {12private JList colorList;</b>
<b>13private Container container;</b>
</div><span class="text_page_counter">Trang 77</span><div class="page_container" data-page="77"><b>// do not allow multiple selections colorList.setSelectionMode(</b>
<b>ListSelectionModel.SINGLE_SELECTION );</b>
<b>// add a JScrollPane containing JList to contentpane container.add(new JScrollPane( colorList ) );// set up event handler // handle list selection events</b>
<b>public voidvalueChanged( ListSelectionEvent{</b>
<b>colors[ colorList.getSelectedIndex() ] );}</b>
<b>}// end anonymous inner class</b>
<b>);// end call to addListSelectionListener</b>
<b>JList allows single selections</b>
<b>Register JList to receive events from </b>
Set appropriate background depending on user selection
2002 Prentice Hall, Inc. All rights reserved.
<b>77</b>
</div><span class="text_page_counter">Trang 79</span><div class="page_container" data-page="79"><b>Multiple-Selection Lists</b>
➢<b>Multiple-selection list</b>
<b>o Chọn nhiều mục trên Jlist</b>
<b>79</b>
</div><span class="text_page_counter">Trang 80</span><div class="page_container" data-page="80"><b>privateString colorNames[] = {"Black","Blue",</b>
<b>"Cyan", "Dark Gray","Gray","Green","Light Gray",</b>
<b>// set up GUI</b>
<b>publicMultipleSelection(){</b>
<b>super("Multiple Selection Lists");// get content pane and set its layout Container container = getContentPane(); </b>
<b>// set up JList colorList</b>
<b>11public classMultipleSelectionextendsJFrame {12privateJList colorList, copyList;</b>
<b>13private JButton copyButton;</b>
</div><span class="text_page_counter">Trang 81</span><div class="page_container" data-page="81"><b>// create copy button and register its</b>
<b>listener copyButton = newJButton("Copy >>>"</b>
<b>// anonymous inner class for buttonevent newActionListener() {</b>
<b>ActionEvent event )// handle button event </b>
<b>public voidactionPerformed(</b>
<b>}// end anonymous inner class);// end call to addActionListenercontainer.add( copyButton );</b>
<b>// set up JList copyList </b>
