GNOME3 延伸套件教學

4,471 views

Published on

2011/5/29 到 KaLUG 給的 Tutorial, 活動網址如下
http://www.openfoundry.org/tw/workshop/details/148-kalug--gnome3-

主要講解如何開發 GNOME3 的 extension

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,471
On SlideShare
0
From Embeds
0
Number of Embeds
1,383
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GNOME3 延伸套件教學

  1. 1. GNOME3 延伸套件教學
  2. 2. 講者● Yuren Ju <yurenju@gmail.com>● Blog: Yurens Info Area● 社群: ● Hacking Thursday ● KaLUG
  3. 3. Agenda● GNOME3 架構介紹● Clutter 介紹● GNOME3 延伸套件開發
  4. 4. GNOME3
  5. 5. 如何撰寫GNOME 軟體?
  6. 6. C 語言
  7. 7. Language binding for GNOME Vala
  8. 8. Important!New language binding for GNOME platform Javascript!
  9. 9. https://gist.github.com/986247
  10. 10. Javascript 很酷,但?
  11. 11. GNOME3 的 UI 部分全部採用 Javascript 撰寫
  12. 12. 很像 Firefox 吧?
  13. 13. GNOME3 extension● 採用 Javascript 撰寫● 可在 runtime 存取 GNOME 原有 UI 元件 ● 刪除、隱藏、變更等
  14. 14. Shell Toolkit - ST
  15. 15. GNOME3 主要使用的 UI Toolkit let label = new St.Label({ text: _("Activities") });
  16. 16. Architecture gnome-shell Desktop 其他 GNOME components 軟體 Javascript C 語言 Shell-Toolkit (ST) GTK+Only availablein gnome-shell Clutter 繼承 GObject
  17. 17. Clutter
  18. 18. 比較 GTK+Backend
  19. 19. Clutter Example (1/2)
  20. 20. Clutter Example (2/2) https://gist.github.com/984596
  21. 21. Clutter/GObject● Introduction● Properties● Event handler● Tweener
  22. 22. Basics● 所有的 Clutter Application 都包含至少一個 Stage 物件 ● Object: Clutter.Stage● Clutter.init()● Clutter.main()● Every node on the Clutter scene graph is an actor.
  23. 23. Basic
  24. 24. Properties1.2. texture.filename = <FILENAME>; //write print (texture.reactive); //read/writehttp://docs.clutter-project.org/docs/clutter/stable/ClutterActor.html
  25. 25. Event handler actor.connect(signal-name, callback);http://docs.clutter-project.org/docs/clutter/stable/ClutterActor.html
  26. 26. Tweener
  27. 27. effect properties● x, y● scale_x, scale_y● rotation_angle_ ● x, y, z● opacity
  28. 28. tweener-example.js https://gist.github.com/996712
  29. 29. delay/onComplete https://gist.github.com/996736
  30. 30. transitionhttp://docs.clutter-project.org/docs/clutter/stable/clutter-Implicit-Animations.html
  31. 31. transitionhttps://gist.github.com/996839
  32. 32. 重閱。
  33. 33. gnome-shell
  34. 34. +GNOME3 Ui 均採用 Javascript 撰寫
  35. 35. 好用指令● alt + F2, r: 重開 gnome-shell● alt + F2, lg: 叫出作弊 console
  36. 36. 作弊 console 之 inspector之後可以用 r(13)呼叫此物件
  37. 37. 作弊之一:觀看 object method
  38. 38. 當然,可以看就可以執行 ... 比如: r(13).set_text("I dont care")
  39. 39. 還記得怎麼修改 Clutter properties 吧? r(13).rotation_angle_z = 20
  40. 40. 建立新的 gnome-shell extension gnome-shell-extension-tool --create-extension
  41. 41. 三個問題● applications... ● name ● description ● uuid
  42. 42. default gnome-shell ext. https://gist.github.com/996870
  43. 43. Default extension Click panel Show Hello world, and destroy after 3sec
  44. 44. Stylesheet – CSS!但目前並不了解 CSS 支援程度可參考 /usr/share/gnome-shell/theme/gnome-shell.css
  45. 45. add label to panel https://gist.github.com/997093
  46. 46. add button to panel https://gist.github.com/997104
  47. 47. PanelButton/PanelMenu
  48. 48. 注意!● PanelButton, PanelMenu 並不是 Clutter Actor● 而是包裝了 actor 的 button/menu 物件
  49. 49. PanelButton St.Label● prototype 繼承自 Panel.Button● 宣告要放置於 panel 的物件 set_child() ● 以我們的例子是一個 St.Label● 在 panelButton 內使用 this.actor.set_child() 將上述的物 PanelButton 件嵌入 PanelButton● 最後創建一個新的物件,將此物件 加入 Panel 中 St.Label add() panel
  50. 50. PanelButton
  51. 51. PanelMenu● 建立一個 BoxLayout● 把 PopupMenuItem 放入 Box 裡面
  52. 52. PanelMenuhttps://gist.github.com/997127
  53. 53. End

×