GNOME3 延伸套件教學
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

GNOME3 延伸套件教學

on

  • 4,471 views

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

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

主要講解如何開發 GNOME3 的 extension

Statistics

Views

Total Views
4,471
Views on SlideShare
3,109
Embed Views
1,362

Actions

Likes
0
Downloads
29
Comments
0

14 Embeds 1,362

http://yurinfore.blogspot.com 1129
http://yurinfore.blogspot.tw 155
http://yurenju.info 18
http://feeds.feedburner.com 16
url_unknown 12
http://yurinfore.blogspot.hk 9
http://translate.googleusercontent.com 6
http://yurinfore.blogspot.de 4
http://localhost 4
http://paper.li 3
http://webcache.googleusercontent.com 2
http://yurinfore.blogspot.fr 2
http://www.slideshare.net 1
http://yurinfore.blogspot.ca 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

GNOME3 延伸套件教學 Presentation 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