GNOME3 延伸套件教學
- 2. 講者 ● Yuren Ju <yurenju@gmail.com> ● Blog: Yuren's Info Area ● 社群： ● Hacking Thursday ● KaLUG
- 3. Agenda ● GNOME3 架構介紹 ● Clutter 介紹 ● GNOME3 延伸套件開發
- 5. GNOME3
- 7. C 語言
- 8. Language binding for GNOME Vala
- 9. Important! New language binding for GNOME platform Javascript!
- 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
- 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
- 33. 重阅。
- 34. gnome-shell
- 35. + GNOME3 Ui 均採用 Javascript 撰寫
- 36. 好用指令 ● alt + F2, r: 重開 gnome-shell ● alt + F2, lg: 叫出作弊 console
- 37. 作弊 console 之 inspector 之後可以用 r(13) 呼叫此物件
- 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
- 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 裡面
- 54. End