2011/5/29 到 KaLUG 給的 Tutorial, 活動網址如下 http://www.openfoundry.org/tw/workshop/details/148-kalug--gnome3- 主要講解如何開發 GNOME3 的 extension

1. GNOME3 延伸套件教學

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

3. Agenda
● GNOME3 架構介紹
● Clutter 介紹
● GNOME3 延伸套件開發

5. GNOME3

6. 如何撰寫
GNOME 軟體？

7. C 語言

8. Language binding for GNOME
Vala

9. Important!
New language binding for GNOME platform
Javascript!

10. https://gist.github.com/986247

11. Javascript 很酷，但？

12. GNOME3 的 UI 部分全部採用 Javascript 撰寫

13. 很像 Firefox 吧？

14. GNOME3 extension
● 採用 Javascript 撰寫
● 可在 runtime 存取 GNOME 原有 UI 元件
● 刪除、隱藏、變更等

15. Shell Toolkit - ST

16. GNOME3 主要使用的 UI Toolkit
let label = new St.Label({ text: _("Activities") });

17. Architecture
gnome-shell
Desktop 其他 GNOME
components 軟體
Javascript
C 語言
Shell-Toolkit (ST) GTK+
Only available
in gnome-shell
Clutter
繼承
GObject

18. Clutter

19. 比較
GTK+
Backend

20. Clutter Example (1/2)

21. Clutter Example (2/2)
https://gist.github.com/984596

22. Clutter/GObject
● Introduction
● Properties
● Event handler
● Tweener

23. Basics
● 所有的 Clutter Application 都包含至少一個
Stage 物件
● Object: Clutter.Stage
● Clutter.init()
● Clutter.main()
● Every node on the Clutter scene graph is
an actor.

24. Basic

25. Properties
1.
2.
texture.filename = '<FILENAME>'; //write
print (texture.reactive); //read/write
http://docs.clutter-project.org/docs/clutter/stable/ClutterActor.html

26. Event handler
actor.connect('signal-name', callback);
http://docs.clutter-project.org/docs/clutter/stable/ClutterActor.html

27. Tweener

28. effect properties
● x, y
● scale_x, scale_y
● rotation_angle_
● x, y, z
● opacity

29. tweener-example.js
https://gist.github.com/996712

30. delay/onComplete
https://gist.github.com/996736

31. transition
http://docs.clutter-project.org/docs/clutter/stable/clutter-Implicit-Animations.html

32. transition
https://gist.github.com/996839

33. 重閱。

34. gnome-shell

35. +
GNOME3 Ui 均採用 Javascript 撰寫

36. 好用指令
● alt + F2, r: 重開 gnome-shell
● alt + F2, lg: 叫出作弊 console

37. 作弊 console 之 inspector
之後可以用 r(13)
呼叫此物件

38. 作弊之一：觀看 object method

39. 當然，可以看就可以執行 ...
比如： r(13).set_text("I don't care")

40. 還記得怎麼修改 Clutter properties 吧？
r(13).rotation_angle_z = 20

41. 建立新的 gnome-shell extension
gnome-shell-extension-tool --create-extension

42. 三個問題
● application's...
● name
● description
● uuid

43. default gnome-shell ext.
https://gist.github.com/996870

44. Default extension
Click panel
Show Hello world, and destroy after 3sec

45. Stylesheet – CSS!
但目前並不了解 CSS 支援程度
可參考 /usr/share/gnome-shell/theme/gnome-shell.css

46. add label to panel
https://gist.github.com/997093

47. add button to panel
https://gist.github.com/997104

48. PanelButton/PanelMenu

49. 注意！
● PanelButton, PanelMenu 並不是 Clutter
Actor
● 而是包裝了 actor 的 button/menu 物件

50. PanelButton
St.Label
● prototype 繼承自 Panel.Button
● 宣告要放置於 panel 的物件
set_child()
● 以我們的例子是一個 St.Label
● 在 panelButton 內使用
this.actor.set_child() 將上述的物 PanelButton
件嵌入 PanelButton
● 最後創建一個新的物件，將此物件
加入 Panel 中
St.Label
add()
panel

51. PanelButton

52. PanelMenu
● 建立一個 BoxLayout
● 把 PopupMenuItem 放入 Box 裡面

53. PanelMenu
https://gist.github.com/997127

54. End