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

Question

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

目标是在面板中有一个图标，单击它时会弹出一个小 window（像菜单一样连接到面板）和一个允许用户输入文本（待办事项）的文本框列表、随机想法等）。再次单击该图标会删除 window 等。文本需要在会议之间保留。

我的问题（除了在构建 Gnome applet 时发现的资源很少）是我不知道创建文本框的函数是什么。

我尝试查看各种可用的 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();
};

如果能帮助我确定最好的 function/widget/code 用于文本框，我们将不胜感激，或者甚至是一些可以帮助回答我的问题的体面文档的指导。谢谢！

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);

        }
});
// ...

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

Is there a javascript function to add a generic text box to Gnome extension applets?

javascript

linux

applet

gnome