Toolbar (JavaScript)

Toolbar (JavaScript) Tiffany Antopolski tiffany.antopolski@gmail.com 2012 Nástrojová lišta Toolbar
Nástrojová lišta může obsahovat text nebo standardní ikony. V tomto příkladu používáme standardní ikony. Tento příklad obsahuje funkci pro zobrazení na celou obrazovku.
Tento příklad používá SimpleAction (pro okno i aplikaci). Akce aplikace lze snadno přidat do aplikační nabídky.
#!/usr/bin/gjs

imports.gi.versions.Gdk = '3.0';
imports.gi.versions.Gtk = '3.0';

const Gdk = imports.gi.Gdk;
const Gio = imports.gi.Gio;
const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;

class Application {

    // Vytvoří aplikaci
    constructor() {
        this.application = new Gtk.Application({
            application_id: 'org.example.myapp',
            flags: Gio.ApplicationFlags.FLAGS_NONE
        });

       // Napojí signály "activate" a "startup" k funkcím zpětného volání
       this.application.connect('activate', this._onActivate.bind(this));
       this.application.connect('startup', this._onStartup.bind(this));
    }

    // Vytvoří uživatelské rozhraní (v tomto případě jen ApplicationWindow)
    _buildUI() {
        this._window = new Gtk.ApplicationWindow({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            title: "Toolbar Example",
            default_height: 200,
            default_width: 400
        });

        this._grid = new Gtk.Grid();
        this._window.add(this._grid);
        this._grid.show();

        this._createToolbar();
        this._toolbar.set_hexpand(true);
        this._grid.attach(this._toolbar, 0, 0, 1, 1);

        // Zobrazí nástrojovou lištu a okno
        this._toolbar.show();
        this._window.show();
    }

    // Funkce zpětného volání pro signál "activate"
    _onActivate() {
        this._window.present();
    }

    // Funkce zpětného volání pro signál "startup"
    _onStartup() {
        this._initMenus();
        this._buildUI();
    }

    // Vytvoří nástrojovou lištu, její tlačítka a její akce
    _createToolbar() {

        this._toolbar = new Gtk.Toolbar();
        this._toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);

        // Vytvoří nástrojové tlačítko „New“ a jeho SimpleAction.
        // Použití akce vám umožní přidat jej do aplikační nabídky 
        // bez duplikování kódu.
        let newAction = new Gio.SimpleAction({ name: 'new'});
        newAction.connect('activate', () => { this._newCB(); });
        this.application.add_action(newAction);//note: this action is added to the app

        this._newButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);
        this._newButton.is_important = true;
        this._toolbar.add(this._newButton);
        this._newButton.show();
        this._newButton.action_name = "app.new";

        // Vytvoří nástrojové tlačítko „Open“ a jeho SimpleAction
        let openAction = new Gio.SimpleAction({ name: 'open'});
        openAction.connect('activate', () => { this._openCB(); });
        this.application.add_action(openAction);

        this._openButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);
        this._openButton.is_important = true;
        this._toolbar.add(this._openButton);
        this._openButton.show();
        this._openButton.action_name = "app.open";

        // Vytvoří nástrojové tlačítko „Undo“ a jeho SimpleAction.
        let undoAction = new Gio.SimpleAction({ name: 'undo'});
        undoAction.connect('activate', () => { this._undoCB(); });
        this._window.add_action(undoAction);//note this action is added to the window

        this._undoButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);
        this._undoButton.is_important = true;
        this._toolbar.add(this._undoButton);
        this._undoButton.show();
        this._undoButton.action_name = "win.undo";

        // Vytvoří nástrojové tlačítko „Fullscreen“ a a jeho SimpleAction
        let fullscreenToggleAction = new Gio.SimpleAction ({ name: 'fullscreenToggle' });
        fullscreenToggleAction.connect('activate', () => {
            this._fullscreenToggleCB();
        });
        this._window.add_action(fullscreenToggleAction);

        this._fullscreenButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);
        this._fullscreenButton.is_important = true;
        this._toolbar.add(this._fullscreenButton);
        this._fullscreenButton.show();
        this._fullscreenButton.action_name = "win.fullscreenToggle";

        // Vytvoří nástrojové tlačítko „leaveFullscreen“ a nastaví název akce na „win.fullscreenToggle“
        this._leaveFullscreenButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);
        this._leaveFullscreenButton.is_important = true;
        this._toolbar.add(this._leaveFullscreenButton);
        this._leaveFullscreenButton.action_name = "win.fullscreenToggle";
    }

    _initMenus() {
        let menu = new Gio.Menu();
        menu.append("New", 'app.new');
        menu.append("Open", 'app.open');
        menu.append("Quit", 'app.quit');

        this.application.set_app_menu(menu);

        let quitAction = new Gio.SimpleAction({name: 'quit' });
        quitAction.connect('activate', () => { this._window.destroy(); });
        this.application.add_action(quitAction);
    }

    _newCB() {
        print("You clicked 'New'.");
    }

    _openCB() {
        print("You clicked 'Open'.");
    }

    _undoCB() {
        print ("You clicked 'Undo'.");
    }

    _fullscreenToggleCB() {
        if ((this._window.get_window().get_state() & Gdk.WindowState.FULLSCREEN) != 0 ) {
              this._window.unfullscreen();
              this._leaveFullscreenButton.hide();
              this._fullscreenButton.show();
        } else {
             this._window.fullscreen();
             this._fullscreenButton.hide();
             this._leaveFullscreenButton.show();
        }
    }
};

// Spustí aplikaci
let app = new Application();
app.application.run(ARGV);
V této ukázce se používá následující:
Gtk.Window
Gtk.Toolbar
Gtk.ToolButton
Gtk Stock items
Gdk.WindowState