Introduction 介紹
元件是構成應用程式的基礎元件,在 BRICKS TOOLS 中被稱為 brick,所用在應用程式畫布上看到的東西都能使用 brick 元件構建出來,了解所有 brick 元件就能實現在畫布上想達成的任何需求。
Section Outline 單元大綱
在這個單元裡,我們將會介紹 18 種不同的元件:
點擊元件連結可觀看元件的詳細教學
Video Streaming 串流 (coming soon)
Grid (coming soon)
Line Chart 折線圖表 (coming soon)
Bar Chart 長條圖表 (coming soon)
Pie Chart 派餅圖表 (coming soon)
Progress Chart 進度圖表 (coming soon)
Zoom Meeting Video (coming soon)
⏱ 此篇教學操作預計花費時間:2~3分鐘
Basic Operations 基本操作
Create a Brick 新增元件
在 APPLICATION 頁籤中,左方的階層清單中有個[ ⊞ ]符號的 Main(Root),這符號代表是 Canvas 畫布的意思,而所有的 Brick 元件都要從Canvas 畫布右方的[ + ]去新增出來。
點擊[ + ]後,右方會出現 Bricks 生成介面,可以從[ Template ]選擇要新增的元件類型,然後在[ Title ]裡替元件命名即可新增。
生成介面其他選項簡介
Link exists?:可選擇將自行製作的 Subspace 或 Brick 包裝成一個 新的Brick
X, Y:設定 Brick 在 Canvas 畫布中的預設位置。
Width, Height:設定 Brick 在 Canvas 畫布中的寬高。
Remove a Brick 刪除元件
每個元件的右側屬性列表中,最下方 Operation 屬性是用來檢測及控制元件的選項,先介紹下方兩塊紅底色的危險功能。
Remove This Brick in the Canvas 刪除畫布上元件
在 Basic 單元的互動行為控制中有教學到如何控制不同 Canvas 之間的動態切換,因此可以得知在不同畫布之間可以存在同一個元件。若是需要讓元件僅僅在其中一個畫布上消失,切換到另一個畫布時出現時,就需要選擇 [ Remove This Brick in the Canvas ] ,這樣就只會在目前選擇的畫布下去刪除元件,不會將所有畫布上的同一元件全部刪除。
Remove This Brick 刪除元件
和 Remove This Brick in the Canvas 不同,選擇 [ Remove This Brick ] 的話,只要是所有和該 Brick 為同一個 ID 的元件都會同時被刪除,使用時請小心。
Copy 複製元件
同樣在元件右側的 Operation 屬性中有個 Copy 的選項,這是用於當需要多個設定好的元件放置在畫布上時,可以不用一個一個重新製作,直接選擇製作好的元件,選擇 Operation 屬性中的[ Copy ]即可複製出一個一模一樣的元件。
Inspect This Brick 檢測元件
從元件右側的 Operation 屬性有個 Inspect This Brick選項,這是用於當元件 Event 事件與 Property Bank, Generator 等各種連結十分複雜時,可透過 Inspect This Brick 就能清楚看出之間的關聯性走向。
Event Routing 事件路徑
顯示這個元件觸發 event / calculation 的流向或是影響了哪些 brick / generator 的 property。
如下圖所示可以看到,Camera元件有三個事件,分別會觸發不同的 Generator 及影響的 Property Bank 變數和 切換 Canvas,接著會看到 Generator 和 Property Bank 變數以及變數連結的 Text 元件,後面還會有 Text 元件的事件都一一被列表出來。
這些將可輔助檢測元件之間的事件關連是否有問題。
Parent Call
顯示這個元件被哪些 brick / generator / property calculation 觸發或連結。和 Event Route 相反是從源頭去檢視,而 Event Route 則是往下向路徑去檢視。
Configuration 設定
每個元件都會有基本的 Configuration 屬性,點擊元件後右側就會是元件的 Configuration。詳細設定細節可至各元件教學中觀看。
Frame 框架
設定元件基本框架,包含位置、大小、進場方式及行為及在畫布外時的處置方式。
Properties 屬性
設定元件的屬性,包含底色、透明度以及各自不同類型元件的基本設定。
Animations 動態事件
設定元件在不同事件下觸發的動態行為,需先設定好動態才可新增至此區事件中。Animation 動態教學連結
Events 事件
設定元件在不同事件下觸發的行為,若需要控制 Generator 或 Property Bank 變數時需先新增設定好才可在這事件中設定。