Your SlideShare is downloading. ×
0
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
GNOME3 延伸套件教學
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

GNOME3 延伸套件教學

4,105

Published on

2011/5/29 到 KaLUG 給的 Tutorial, 活動網址如下 …

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,105
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×