GNOME3 延伸套件教學

講者

● Yuren Ju <yurenju@gmail.com>● Blog: Yuren's Info Area● 社群：

● Hacking Thursday● KaLUG

Agenda

● GNOME3 架構介紹● Clutter 介紹● GNOME3 延伸套件開發

GNOME3

如何撰寫GNOME 軟體？

C 語言

Language binding for GNOME

Vala

Important!

New language binding for GNOME platform

Javascript!

https://gist.github.com/986247

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 Example (2/2)

https://gist.github.com/984596

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

tweener-example.js

https://gist.github.com/996712

delay/onComplete

https://gist.github.com/996736

transition

http://docs.clutter-project.org/docs/clutter/stable/clutter-Implicit-Animations.html

transition

https://gist.github.com/996839

重閱。

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 gnome-shell ext.

https://gist.github.com/996870

Default extension

Click panel

Show Hello world, and destroy after 3sec

Stylesheet – CSS!

但目前並不了解 CSS 支援程度可參考 /usr/share/gnome-shell/theme/gnome-shell.css

add label to panel

https://gist.github.com/997093

add button to panel

https://gist.github.com/997104

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 裡面

https://gist.github.com/997127

PanelMenu

End