GNOME3 延伸套件教學
54
GNOME3 延伸套件教學
-
Upload
yuren-ju -
Category
Technology
-
view
4.114 -
download
0
description
2011/5/29 到 KaLUG 給的 Tutorial, 活動網址如下 http://www.openfoundry.org/tw/workshop/details/148-kalug--gnome3- 主要講解如何開發 GNOME3 的 extension
Transcript of GNOME3 延伸套件教學
GNOME3 延伸套件教學
Agenda
● GNOME3 架構介紹● Clutter 介紹● GNOME3 延伸套件開發
GNOME3
如何撰寫GNOME 軟體？
C 語言
Language binding for GNOME
Vala
Important!
New language binding for GNOME platform
Javascript!
Javascript 很酷，但？
GNOME3 的 UI 部分全部採用 Javascript 撰寫
很像 Firefox 吧？
GNOME3 extension
● 採用 Javascript 撰寫● 可在 runtime 存取 GNOME 原有 UI 元件
● 刪除、隱藏、變更等
Shell Toolkit - ST
GNOME3 主要使用的 UI Toolkit
let label = new St.Label({ text: _("Activities") });
Architecture
Desktopcomponents
Shell-Toolkit (ST)
GObject
C 語言
Javascript
gnome-shell
Only availablein gnome-shell
GTK+
繼承
Clutter
其他 GNOME軟體
Clutter
比較
GTK+
Backend
Clutter Example (1/2)
Clutter/GObject
● Introduction● Properties● Event handler● Tweener
Basics
● 所有的 Clutter Application 都包含至少一個Stage 物件● Object: Clutter.Stage
● Clutter.init()● Clutter.main()● Every node on the Clutter scene graph is
an actor.
Basic
Properties
texture.filename = '<FILENAME>'; //writeprint (texture.reactive); //read/write
1.
2.
http://docs.clutter-project.org/docs/clutter/stable/ClutterActor.html
Event handler
actor.connect('signal-name', callback);
http://docs.clutter-project.org/docs/clutter/stable/ClutterActor.html
Tweener
effect properties
● x, y● scale_x, scale_y● rotation_angle_
● x, y, z
● opacity
transition
http://docs.clutter-project.org/docs/clutter/stable/clutter-Implicit-Animations.html
重閱。
gnome-shell
+
GNOME3 Ui 均採用 Javascript 撰寫
好用指令
● alt + F2, r: 重開 gnome-shell● alt + F2, lg: 叫出作弊 console
作弊 console 之 inspector
之後可以用 r(13)呼叫此物件
作弊之一：觀看 object method
當然，可以看就可以執行 ...比如： r(13).set_text("I don't care")
還記得怎麼修改 Clutter properties 吧？r(13).rotation_angle_z = 20
建立新的 gnome-shell extension
gnome-shell-extension-tool --create-extension
三個問題
● application's...● name● description● uuid
Default extension
Click panel
Show Hello world, and destroy after 3sec
Stylesheet – CSS!
但目前並不了解 CSS 支援程度可參考 /usr/share/gnome-shell/theme/gnome-shell.css
PanelButton/PanelMenu
注意！
● PanelButton, PanelMenu 並不是 Clutter Actor
● 而是包裝了 actor 的 button/menu 物件
PanelButton
● prototype 繼承自 Panel.Button
● 宣告要放置於 panel 的物件● 以我們的例子是一個 St.Label
● 在 panelButton 內使用this.actor.set_child() 將上述的物件嵌入 PanelButton
● 最後創建一個新的物件，將此物件加入 Panel 中
St.Label
PanelButton
panel
St.Label
set_child()
add()
PanelButton
PanelMenu
● 建立一個 BoxLayout● 把 PopupMenuItem 放入 Box 裡面
End
