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