step by step to write a gnome-shell extension

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: Yurens 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 LaunguageGObject Introspection <interface>Gnome-shell widgets Javascript

8. How? Gobject-based library Gnome-shell core Gobject Introspection (GI)overview workspace calendar ... extensiongnome-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 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);}

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

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

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)● Dons 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. AnimationCounting down Shotting Zoom

30. Step 4: Animation (1/3)

33. Step 5: Save screenshot

34. Source Codehttps://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 Downloadhttp://j.mp/gs-ext-slides