手把手教你寫GNOME shell

擴充套件tools, hollyladd, by-nc-nd

Preview

即時討論https://convore.com/gnome-taiwan/gnome-shell/

or 短網址http://j.mp/gs-ext

簡報作者

● Yuren Ju <yurenju@gmail.com>● Blog: Yuren's Info Area● 社群： Hacking Thursday

gnome-shell include...● GNOME3 user experience desktop● Shell Tookit (similar GTK+)● More...

Web Browser extension

Important!

You can write gnome-shell extension with

Javascript!

How

Gnome-shell core

GObject Introspection

Gnome-shell widgets

C Launguage

Javascript

<interface>

How?

Gnome-shell core

Gobject Introspection (GI)

Gobject-based library

overview workspace calendar extension...

gnome-shell widgets

GObject Introspection

Native C API

GI

JS Java Python Perl Ruby PHP?

GStreamerVTE notifyGTK Clutter

Getting started!

$ gnome-shell-extension-tool --create-extension

LiveUSBhttp://gnome3.org/tryit.html

Create extension

Restart gnome-shell

alt+F2 and press "r"

Default extensionClick panel

Show Hello world, and destroy after 5sec

Default extension code// Sample extension code, makes clicking on the panel show a messageconst St = imports.gi.St;const Mainloop = imports.mainloop;

const Main = imports.ui.main;

function _showHello() { let text = new St.Label({ style_class: 'helloworld-label', text: "Hello, world!" }); let monitor = global.get_primary_monitor(); global.stage.add_actor(text); text.set_position(Math.floor (monitor.width / 2 - text.width / 2), Math.floor(monitor.height / 2 - text.height / 2)); Mainloop.timeout_add(3000, function () { text.destroy(); });}

// Put your extension initialization code herefunction main() { Main.panel.actor.reactive = true; Main.panel.actor.connect('button-release-event', _showHello);}

Global (1/2)● Monitor

● get_monitors()● get_primary_monito

r()● get_primary_monito

r_index()● get_focus_monitor()

● Pointer:● get_pointer()

● Window/Screen:● get_gdk_screen()● get_screen()● get_window_actors()

return MetaRectangle

Global (2/2)● Properties

● stage● screen-width/screen-height● window-group● settings● datadir● userdatadir

Looking glass

alt+F2 and press "lg"

Default extension code// Sample extension code, makes clicking on the panel show a messageconst St = imports.gi.St;const Mainloop = imports.mainloop;

const Main = imports.ui.main;

function _showHello() { let text = new St.Label({ style_class: 'helloworld-label', text: "Hello, world!" }); let monitor = global.get_primary_monitor(); global.stage.add_actor(text); text.set_position(Math.floor (monitor.width / 2 - text.width / 2), Math.floor(monitor.height / 2 - text.height / 2)); Mainloop.timeout_add(3000, function () { text.destroy(); });}

// Put your extension initialization code herefunction main() { Main.panel.actor.reactive = true; Main.panel.actor.connect('button-release-event', _showHello);}

http://library.gnome.org/devel/glib/unstable/glib-The-Main-Event-Loop.html

Main

Main● Main.panel

● button● _leftBox, _centerBox, _rightBox● _dateMenu● ...

● Main.overview● Main.runDialog● Main.uiGroup● ...

Default extension code// Sample extension code, makes clicking on the panel show a messageconst St = imports.gi.St;const Mainloop = imports.mainloop;

const Main = imports.ui.main;

function _showHello() { let text = new St.Label({ style_class: 'helloworld-label', text: "Hello, world!" }); let monitor = global.get_primary_monitor(); global.stage.add_actor(text); text.set_position(Math.floor (monitor.width / 2 - text.width / 2), Math.floor(monitor.height / 2 - text.height / 2)); Mainloop.timeout_add(3000, function () { text.destroy(); });}

// Put your extension initialization code herefunction main() { Main.panel.actor.reactive = true; Main.panel.actor.connect('button-release-event', _showHello);}

Try it● Main.panel._dateMenu.menu.actor.set_opacity(100)● Main.panel._dateMenu.actor.set_scale(1.5, 1.5)● Main.panel._dateMenu.menu.actor.set_z_rotation_from_

gravity(45.0, Clutter.Gravity.CENTER)● Don's you like status-menu?

● Main.panel._statusmenu.actor.hide()

Example extension – fancy screenshot tool

$ sudo zypper refresh && sudo zypper install ImageMagick(Because GdkPixbuf.savev function is broken)

http://www.youtube.com/watch?v=epKssSQpfLQ

Step 1: PanelButton

_leftBox _centerBox _rightBox

Step 2: PopupMenu

Step 3: Handle Click

Tweener● transition

● linear, easeInQuad, … (reference python-clutter)

● onComplete/onCompleteScope● scale_x, scale_y, opacity

Animation

Counting down

Shotting

Zoom

Step 4: Animation (1/3)

Step 4: Animation (2/3)

Step 4: Animation (3/3)

Step 5: Save screenshot

https://gist.github.com/9c29efaa9b00a75db81f

Source Code

Big issue!

No documentsad...

Sad Zeb, by-nc,sa

Reference● gnome-shell source code● mutter source code● http://git.gnome.org/browse/● ZZzzzz

We need you!

Q & ASlides Download

http://j.mp/gs-ext-slides