1.
手把手教你寫
Pre GNOME shell
view
擴充套件
tools, hollyladd, by-nc-nd

2.
即時討論
https://convore.com/gnome-taiwan/gnome-shell/
or 短網址
http://j.mp/gs-ext

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

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

5.
Web Browser extension

6.
Important!
You can write gnome-shell extension with
Javascript!

7.
How
Gnome-shell core C Launguage
GObject Introspection <interface>
Gnome-shell widgets Javascript

8.
How?
Gobject-based library Gnome-shell core
Gobject Introspection (GI)
overview workspace calendar ... extension
gnome-shell widgets

9.
GObject Introspection
JS Java Python Perl Ruby PHP?
GI
GTK Clutter VTE notify GStreamer
Native C API

10.
Getting started!
LiveUSB
http://gnome3.org/tryit.html
$ gnome-shell-extension-tool --create-extension

11.
Create extension

12.
Restart gnome-shell
alt+F2 and press "r"

13.
Default extension
Click panel
Show Hello world, and destroy after 5sec

14.
Default extension code
// Sample extension code, makes clicking on the panel show a message
const 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 here
function main() {
Main.panel.actor.reactive = true;
Main.panel.actor.connect('button-release-event', _showHello);
}

15.
Global (1/2)
● Monitor ● Pointer:
● get_monitors() ● get_pointer()
● get_primary_monito ● Window/Screen:
r() ● get_gdk_screen()
● get_primary_monito
r_index()
● get_screen()
● get_focus_monitor()
● get_window_actors()
return MetaRectangle

16.
Global (2/2)
● Properties
● stage
● screen-width/screen-height
● window-group
● settings
● datadir
● userdatadir

17.
Looking glass
alt+F2 and press "lg"

18.
Default extension code
// Sample extension code, makes clicking on the panel show a message
const 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 here
function 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

19.
Main

20.
Main
● Main.panel
● button
● _leftBox, _centerBox, _rightBox
● _dateMenu
● ...
● Main.overview
● Main.runDialog
● Main.uiGroup
● ...

21.
Default extension code
// Sample extension code, makes clicking on the panel show a message
const 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 here
function main() {
Main.panel.actor.reactive = true;
Main.panel.actor.connect('button-release-event', _showHello);
}

22.
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()

23.
Example extension –
fancy screenshot tool
http://www.youtube.com/watch?v=epKssSQpfLQ
$ sudo zypper refresh && sudo zypper install ImageMagick
(Because GdkPixbuf.savev function is broken)

24.
Step 1: PanelButton

25.
_leftBox _centerBox _rightBox

26.
Step 2: PopupMenu

27.
Step 3: Handle Click

28.
Tweener
● transition
● linear, easeInQuad, … (reference python-
clutter)
● onComplete/onCompleteScope
● scale_x, scale_y, opacity

29.
Animation
Counting down
Shotting
Zoom

30.
Step 4: Animation (1/3)

31.
Step 4: Animation (2/3)

32.
Step 4: Animation (3/3)

33.
Step 5: Save screenshot

34.
Source Code
https://gist.github.com/9c29efaa9b00a75db81f

35.
Big issue!

36.
No document
sad...
Sad Zeb, by-nc,sa

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

38.
We need you!

39.
Q&A
Slides Download
http://j.mp/gs-ext-slides