# JavaScript GTK 中的小部件 > 原文： [http://zetcode.com/gui/javascriptgtktutorial/widgets/](http://zetcode.com/gui/javascriptgtktutorial/widgets/) 在 JavaScript GTK 編程教程的這一部分中，我們將介紹一些小部件。 小部件是 GUI 應用的基本構建塊。 多年來，幾個小部件已成為所有 OS 平臺上所有工具包中的標準。 例如，按鈕，復選框或滾動條。 GTK 工具箱的理念是將小部件的數量保持在最低水平。 將創建更多專門的窗口小部件作為自定義 GTK 窗口小部件。 ## `CheckBox` `CheckButton`是具有兩種狀態的窗口小部件：打開和關閉。 接通狀態通過復選標記顯示。 它用來表示一些布爾屬性。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This program toggles the title of the window with the CheckButton widget. author: Jan Bodnar website: www.zetcode.com last modified: January 2014 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(300, 200); w.set_title("Check button"); w.set_position(Gtk.WindowPosition.CENTER); var fix = new Gtk.Fixed(); var cb = new Gtk.CheckButton.with_label("Show title"); cb.set_active(true); cb.signal.clicked.connect(on_clicked); fix.put(cb, 50, 50); w.add(fix); w.show_all(); function on_clicked(w) { if (w.get_active()) { window.set_title("Check Button"); } else { window.set_title(""); } } } } }); var window = new Example(); Gtk.main(); ``` 根據`CheckButton`的狀態，我們將在窗口的標題欄中顯示標題。 ```js var cb = new Gtk.CheckButton.with_label("Show title"); ``` `CheckButton`小部件已創建。 小部件的構造器采用一個參數，即標簽。 標簽顯示在復選框旁邊。 ```js cb.set_active(true); ``` 默認情況下標題是可見的，因此我們默認情況下選中復選按鈕。 ```js cb.signal.clicked.connect(on_clicked); ``` 如果我們單擊復選框小部件，則會發出單擊的信號。 我們將`on_clicked()`方法掛接到信號上。 ```js if (w.get_active()) { window.set_title("Check Button"); } else { window.set_title(""); } ``` 如果選中該按鈕，我們將顯示標題。 `get_active()`方法用于確定檢查按鈕的狀態。 `set_title()`方法用于設置窗口的標題。 為了清除窗口的標題，我們使用一個空字符串。  圖：`CheckButton` ## `Label` `Label`小部件顯示文本。 此小部件不支持用戶交互。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example demonstrates the Label widget. author: Jan Bodnar website: www.zetcode.com last modified: January 2014 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); var lyrics = "Meet you downstairs in the bar and heard\n\ your rolled up sleeves and your skull t-shirt\n\ You say why did you do it with him today?\n\ and sniff me out like I was Tanqueray\n\ \n\ cause you're my fella, my guy\n\ hand me your stella and fly\n\ by the time I'm out the door\n\ you tear men down like Roger Moore\n\ \n\ I cheated myself\n\ like I knew I would\n\ I told ya, I was trouble\n\ you know that I'm no good"; Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function() { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("You know I'm no Good"); w.set_position(Gtk.WindowPosition.CENTER); w.set_border_width(10); var label = new Gtk.Label.c_new(lyrics); w.add(label); w.show_all(); } } }); var window = new Example(); Gtk.main(); ``` 該代碼示例在窗口上顯示了一些歌詞。 ```js var lyrics = "Meet you downstairs in the bar and heard\n\ your rolled up sleeves and your skull t-shirt\n\ ``` 我們創建多行文本。 在 JavaScript 中，多行文本由以換行符和反斜杠結尾的文本行組成。 反斜杠使 JavaScript 中的字符串可以跨越多個源代碼行。 換行符在更多行中顯示字符串。 ```js w.set_border_width(10); ``` `Label`周圍有一些空白。 ```js var label = new Gtk.Label.c_new(lyrics); w.add(label); ``` `Label`小部件已創建并添加到窗口。  圖：`Label`小部件 ## `Entry` `Entry`是單行文本輸入字段。 該小部件用于輸入文本數據。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example demonstrates the Entry widget. author: Jan Bodnar website: www.zetcode.com last modified: January 2014 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function() { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Entry"); w.set_position(Gtk.WindowPosition.CENTER); var fixed = new Gtk.Fixed(); var label = new Gtk.Label.c_new("..."); fixed.put(label, 60, 40); var entry = new Gtk.Entry(); fixed.put(entry, 60, 100); entry.signal.key_release_event.connect(function(sender) { label.set_text(sender.text); return false; }); w.add(fixed); w.show_all(); } } }); var window = new Example(); Gtk.main(); ``` 此示例顯示了條目小部件和標簽。 我們輸入的文本將立即顯示在標簽小部件中。 ```js var entry = new Gtk.Entry(); ``` `Entry`小部件已創建。 ```js entry.signal.key_release_event.connect(function(sender) { label.set_text(sender.text); return false; }); ``` 我們將匿名方法插入`Entry`小部件的`key_release_event`。 我們通過`text`屬性從窗口小部件中獲取文本并將其設置為標簽。  圖：`Entry`小部件 ## `Image` `Image`小部件在窗口上顯示圖像。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example demonstrates the Image widget. author: Jan Bodnar website: www.zetcode.com last modified: January 2014 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function() { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("You know I'm no Good"); w.set_position(Gtk.WindowPosition.CENTER); w.set_border_width(2); var image = new Gtk.Image.from_file("redrock.png"); w.add(image); w.show_all(); } } }); var window = new Example(); Gtk.main(); ``` 在我們的示例中，我們在窗口上顯示圖像。 ```js w.set_border_width(2); ``` 我們在圖像周圍放置了一些空邊框。 ```js var image = new Gtk.Image.from_file("redrock.png"); ``` `Image`小部件已創建。 小部件會自行處理錯誤。 如果無法加載圖像，它將顯示一個損壞的圖標。 ```js w.add(image); ``` 小部件已添加到容器中。  圖：圖像 widget 在 JavaScript GTK 教程的這一章中，我們展示了一些基本的小部件。