mzh/blog

[Gnome-Shell扩展制作指北]第二篇:文字显示

文字显示在各种面板类插件几乎是必有的项目,比如默认在Gnome-shell的面板正中央就是一个文字类的时间显示器。 废话不说,直接上实现效果: 代码如下,或者去GITHUB上下载

const St = imports.gi.St;
const Main = imports.ui.main;
const PanelMenu = imports.ui.panelMenu;

let metadata,indicator = null;

function ExampleIndicator(){
    this._init();
}

ExampleIndicator.prototype = {

    __proto__: PanelMenu.Button.prototype,

    _init: function (){
        global.log('EXAMPLE:Enabled');
        PanelMenu.Button.prototype._init.call(this, St.Align.END);

        this.label = new St.Label({text:"This is Example"});
        this.actor.add_actor(this.label);

        Main.panel._rightBox.add_actor(this.actor);
    },
    destroy: function(){
        global.log('EXAMPLE:Disabled');
        Main.panel._rightBox.remove_actor(this.actor);
    }
}

function enable() {
    indicator = new ExampleIndicator();
}
function disable() {
    indicator.destroy();
}
function init(metadata) {
    global.log('EXAMPLE:%s Initialized '.format(metadata.uuid));
}

你可能会惊呼怎么比第一篇多了这么多代码,简直就反人类嘛! 其实,还是差不多的。看看上次我们说的enable函数,里面是不是变成了

indicator = new ExampleIndicator();

至于为什么这么构造,可以看具体文章「ECMAScript 定义类或对象」 借助这种方法我们调用了PanelMenu.Button.prototype这一原型,然后把它放入这一原型的actor中。Actor是clutter中的概念,具体可以看其参考文档「ClutterActor」,不过我个人理解成「要显示的东西都往这塞吧」的容器。 我们这次要放一个文本显示框进去,所以以下代码来构造一个新的St.Label(和GTK里面的很像吧:)

this.label = new St.Label({text:“This is Example”});

这样就好了,是不是很简单呢~

小小的扩展—-CSS控制

用GJS显示文字这么简单,但是这和python到底有什么不同?这就是接下来的部分要讲的啦~用CSS控制其样式! 把上面的创建St.Label实例的代码改成

this.label = new St.Label({text:"This is Example"}); this.label.add_style_class_name('example');

是不是很眼熟?对,就是web前端经常干的事,给DOM添加类。 然后你也猜到了—-修改stylesheet.css呗

.example{color:red;}

Alt+F2后,输入「rt」就可以重载css,不需要重载整个G.S是不是更方便了呢! Vala~!

总结

本章我们学习了文字显示,大家还可以用上篇的LookingGlass来调查这个St.Label实例里还有什么可以玩的,下篇是「图像和图标显示」哦~