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

I am creating an indicator applet for Ubuntu in the form of a Gnome extension. I’m using javascript (which I don’t have very much experience with).

The goal is to have an icon in the panel which when clicked simply pops up a small window (connected to the panel like a menu) with a text box that allows the user to input text (todo list, random thoughts etc). Clicking the icon again removes the window and so on. The text would need to be retained in between sessions.

My problem (apart from finding very few resources in constructing Gnome applets) is that I can’t figure out what the function for creating a text box would be.

I have tried looking at the various St.Widgets available but cannot find an appropriate one.

Using the below code I can generate the icon, place it in the panel and create a pop up menu on click (along with some test notifications to try out functions). However I cannot create a text input box.

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

Any help in identifying the best function/widget/code to use for a text box would be really appreciated, or even some direction to decent documentation that could help answer my questions. Thanks!

Answer

Kind of old but since the documentation is so scarce it’s still worth answering.

You can use an St.Label like this:

// ...
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');
            // ...
        }
});
// ...

Note that if you are planning to have both the icon and text you will need to wrap them in a BoxLayout, I learned that the hard way.

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

        }
});
// ...