# 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](img/2a33c244aebef73186864bbed4967b23.jpg)

图：`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 Widget](img/8b0770e9828f29341634bf74229fa553.jpg)

图：`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 Widget](img/d4d1a74d2185ce386f03ec72a19fdaed.jpg)

图：`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); 

```

小部件已添加到容器中。

![Image widget](img/0bf09669a32e68b3ee395fac42083c64.jpg)

图：图像 widget

在 JavaScript GTK 教程的这一章中，我们展示了一些基本的小部件。