More Related Content Similar to GNOME3 延伸套件教學 (20) GNOME3 延伸套件教學2. 講者
● Yuren Ju <yurenju@gmail.com>
● Blog: Yuren's Info Area
● 社群:
● Hacking Thursday
● KaLUG
3. Agenda
● GNOME3 架構介紹
● Clutter 介紹
● GNOME3 延伸套件開發
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
23. Basics
● 所有的 Clutter Application 都包含至少一個
Stage 物件
● Object: Clutter.Stage
● Clutter.init()
● Clutter.main()
● Every node on the Clutter scene graph is
an actor.
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
36. 好用指令
● alt + F2, r: 重開 gnome-shell
● alt + F2, lg: 叫出作弊 console
42. 三個問題
● application's...
● name
● description
● uuid
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
52. PanelMenu
● 建立一個 BoxLayout
● 把 PopupMenuItem 放入 Box 裡面