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

GNOME3 延伸套件教學

on

  • 4,367 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,367
Views on SlideShare
3,010
Embed Views
1,357

Actions

Likes
0
Downloads
29
Comments
0

14 Embeds 1,357

http://yurinfore.blogspot.com 1129
http://yurinfore.blogspot.tw 152
http://yurenju.info 18
http://feeds.feedburner.com 16
url_unknown 12
http://yurinfore.blogspot.hk 7
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 延伸套件教學 GNOME3 延伸套件教學 Presentation Transcript

    • GNOME3 延伸套件教學
    • 講者● Yuren Ju <yurenju@gmail.com>● Blog: Yurens 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 gnome-shell Desktop 其他 GNOME components 軟體 Javascript C 語言 Shell-Toolkit (ST) GTK+Only availablein gnome-shell Clutter 繼承 GObject
    • 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
    • Properties1.2. texture.filename = <FILENAME>; //write print (texture.reactive); //read/writehttp://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
    • transitionhttp://docs.clutter-project.org/docs/clutter/stable/clutter-Implicit-Animations.html
    • transitionhttps://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 dont care")
    • 還記得怎麼修改 Clutter properties 吧? r(13).rotation_angle_z = 20
    • 建立新的 gnome-shell extension gnome-shell-extension-tool --create-extension
    • 三個問題● applications... ● 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 St.Label● prototype 繼承自 Panel.Button● 宣告要放置於 panel 的物件 set_child() ● 以我們的例子是一個 St.Label● 在 panelButton 內使用 this.actor.set_child() 將上述的物 PanelButton 件嵌入 PanelButton● 最後創建一個新的物件,將此物件 加入 Panel 中 St.Label add() panel
    • PanelButton
    • PanelMenu● 建立一個 BoxLayout● 把 PopupMenuItem 放入 Box 裡面
    • PanelMenuhttps://gist.github.com/997127
    • End