Question

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

目标是在面板上有一个图标，单击该图标时会简单地弹出一个带有文本框的小窗口（类似于菜单连接到面板），允许用户输入文本（待办事项列表，随意的想法等）。再次单击该图标将删除窗口，依此类推。该文本需要在两次会话之间保留。

我的问题（除了在构建Gnome小程序中发现很少的资源外）是我无法弄清楚创建文本框的功能是什么。

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

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

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

        }
});
// ...

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

1 个答案: