javascript - 是否有 javascript 函数可以将通用文本框添加到 Gnome 扩展小程序？

Question

我正在以 Gnome 扩展的形式为 Ubuntu 创建一个指示器小程序。我正在使用 javascript(我没有太多经验)。

目标是在面板中有一个图标，当点击该图标时，它会弹出一个小窗口(像菜单一样连接到面板)和一个文本框，允许用户输入文本(待办事项列表、随机想法等)。再次单击该图标将删除窗口等。案文需要在两届 session 之间保留。

我的问题(除了在构建 Gnome 小程序时找到的资源很少)是我无法弄清楚创建文本框的功能是什么。

我曾尝试查看各种可用的 St.Widgets，但找不到合适的。

使用下面的代码，我可以生成图标，将其放置在面板中并在单击时创建一个弹出菜单(以及一些测试通知以尝试功能)。但是我无法创建文本输入框。

const Main = imports.ui.main;
const PanelMenu = imports.ui.panelMenu;
const PopupMenu = imports.ui.popupMenu;
const St = imports.gi.St;
const Lang = imports.lang;

const Notes_Indicator = new Lang.Class({
    Name: 'Notes.indicator',
    Extends: PanelMenu.Button   ,

        _init: function(){
            this.parent(0.0);

            let Icon = new St.Icon({icon_name: 'accessories-text-editor-symbolic', style_class: 'system-status-icon'});          

            this.actor.add_child(Icon);

            let menuItem = new PopupMenu.PopupMenuItem('Show a notification?');
            menuItem.actor.connect('button-press-event', function(){ Main.notify('Notification', 'Hello World !') });

            let switchItem = new PopupMenu.PopupSwitchMenuItem("Show another notification?");
            switchItem.connect("toggled", function(){ Main.notify('Notification', 'Hello World !') });

            this.menu.addMenuItem(menuItem);
            this.menu.addMenuItem(switchItem);

        //Create generic text input box.

        }
});

function init() {
    log ('Extension initalized');
};

function enable() {
    log ('Extension enabled');

    let _indicator =  new Notes_Indicator();
    Main.panel._addToPanelBox('Notes', _indicator, 1, Main.panel._rightBox);
};

function disable(){
    log ('Extension disabled');
    indicator.destroy();
};

在确定用于文本框的最佳功能/小部件/代码方面的任何帮助将不胜感激，或者甚至可以帮助回答我的问题的体面文档的一些指导。谢谢!

Answer 1

有点旧，但由于文档非常稀缺，因此仍然值得回答。

您可以像这样使用 St.Label:

// ...
const St = imports.gi.St;

const Notes_Indicator = new Lang.Class({
    Name: 'Notes.indicator',
    Extends: PanelMenu.Button   ,

        _init: function(){
            this.parent(0.0);
            // ...
            this.textBox = St.Label({
                text: 'My Text',
            })
            this.actor.add_actor(this.textBox);

            // You can change the text doing
            this.textBox.set_text('My New Text');
            // ...
        }
});
// ...

请注意，如果您计划同时拥有图标和文本，则需要将它们包装在 BoxLayout 中，我知道这是一种艰难的方式。

// ...
const St = imports.gi.St;

const Notes_Indicator = new Lang.Class({
    Name: 'Notes.indicator',
    Extends: PanelMenu.Button   ,

        _init: function(){
            this.parent(0.0);
            // ...

            // Main layout
            this.box = new St.BoxLayout();
            this.actor.add_actor(this.box);
            // Text box
            this.textBox = St.Label({
                text: 'My Text',
            })
            this.box.add(this.textBox);

            this.icon = new St.Icon({icon_name: 'accessories-text-editor-symbolic', style_class: 'system-status-icon'});
            this.box.add(this.icon);

        }
});
// ...