視覺原件(Visual Element)

出自OpenISEE

視覺元件（Visual Element, VE）是電視畫面中可重複使用之元件，它由許多HTML物件、CSS以及Javascript組成。在View Page中以JSP Tag來標示VE，這代表使用VE時，View Page需為JSP。

VE必須嚴格遵守「分割內容、外觀及行為」原則，為了讓VE能重複使用，又將編排架構(Structure, 例如<ul>, <p>, <table> ) 由Content抽離

• Content部分可由VE Tag之參數帶入，或由view page以非同步方式向伺服器取得服務資料，並透過VE的API將它設定至VE
  
• Structure部分則分為靜態與動態，靜態的由VE Tag 負責產生，動態的則由VE Controller負責產生。
• Presentation部分放都在Skin File內，Skin Name指定要使用Skin File內的那個VE Skin，至於目前應使用那個Skin File，目前的STB類別、布景主題等判斷因素決定。所有VE的Behavior部分都放在ISCL內，並封裝為VE Controller 物件，物件導向的封裝方式讓同一View Page可同時放置多個功能相同但用途不同的VE。
  
  

VE Tag 範例
VE Tag 是一個JSP Tag，當使用VE時，View Page 必須為JSP網頁。JSP 網頁被執行時，VE Tag會產生VE Structure，他們通常包含 <ul>, <li>, <table>等HTML Tag。服務設計者使用skin屬性指定skin 名稱，VE Tag根據這屬性內容，可順利將Skin file 內的某個VE Skin 的CSS 引入View Page。服務設計者使用name 屬性指定VE Controller 實例(Instnace) 名稱。VE Controller負責VE的操作行為控制，VE Tag會產生 Create new VE Controller實例的Javascript 程式碼，並將這個實例的變數名稱設為name 屬性指定之內容，服務設計者可透過此變數喚起(Invoke)物件的功能。Items 屬性用來指定匯入VE的內容，VE Tag通常會根據這些內容產生適當的 VE Structure或設定至VE Controller實例。onClick 屬性用來指定VE發生 Click 事件時的處理函式，服務設計者可在這函式裡執行適當的處理工作。