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

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

6. Web Browser extension

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

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

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

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

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

12. Create extension

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

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

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

16. 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

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

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

19. 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

20. Main

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

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

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

24. 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)

25. Step 1: PanelButton

26. _leftBox _centerBox _rightBox

27. Step 2: PopupMenu

28. Step 3: Handle Click

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

30. Animation
Counting down
Shotting
Zoom

31. Step 4: Animation (1/3)

32. Step 4: Animation (2/3)

33. Step 4: Animation (3/3)

34. Step 5: Save screenshot

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

36. Big issue!

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

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

39. We need you!

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