簡介
RAD 6.0 的 Web 開發環境提供一套完整的工具來快速建置 Web 使用者介面。 其中包括網站設計師和網頁設計師及許多精靈,可以將複雜網頁的建立工作簡化。
本文提供準則,描述開發方法、指出支援的網頁類型及強調網頁建立的輔助功能,指導如何有效地運用這些工具來建置 Web 使用者介面。
開發方法
雖然您可以立刻使用網頁設計師來建置使用者介面的每一個網頁, 但 RAD 6.0 建議以網站設計師為起點的由上而下的開發方法。 導覽編輯器可讓您:
-
定義網站的導覽結構:
首先,建置階層圖來代表網站的結構。選用區視圖上有站台抽屜可用,可讓您將新的或現有的網頁和專案拖放到圖解中,再組織為群組。 編輯器可讓您透過視覺化方式,輕鬆地新增、刪除及重新排列網頁。
建立導覽圖可讓 Web Site Designer 自動辨識和追蹤網頁之間的導覽鏈結,並產生網站地圖。 稍後,以 Page Designer
來設計網頁時,您可以加入導覽元素,例如導覽列或功能表, 還可以根據站台結構,自訂為只顯示適當的鏈結(例如,只顯示頂層、母項、同層及第一個子項的鏈結)。
-
套用網頁範本:
網頁範本定義所有網頁通用的視覺化元素和版面配置,可讓您在網站上採用一致的外觀和操作方式。 您可以在建立 Web 專案時利用精靈建立一個範本,或之後再另外建立。
導覽編輯器可讓您輕鬆地將範本套用到圖解中選取的或全部的網頁上。 建議最好將導覽元素併入範本中,再套用到所有網頁,讓整個網站有一致的導覽控制項。
-
選取每一個網頁使用的網頁類型:
按兩下網頁來啟動建立網頁精靈。您可以選擇其中一個支援的網頁類型(請參閱「網頁類型選擇」), 指定起始網頁內容,並在 Page Designer
編輯器中開啟。現在,您可以開始設計和編輯網頁內容。 請注意,選用區視圖會自動提供網站導覽抽屜,可讓您將導覽元素拖放到網頁上。
網頁類型選擇
RAD 6.0 支援以 HTML、JSP 及 Faces JSP 技術來建置 Web 使用者介面。 每一項技術代表一種實作選項,可解決各種 Web 應用程式的需求。 每一項技術也定義支援不同 Web 使用者介面特性的網頁類型。
因此,在建置 Web 使用者介面時,必須瞭解每一種網頁類型支援的特性,必須知道是否適用於正在開發的 Web 應用程式類型。 下列各節指出 RAD 6.0 中不同網頁類型所支援的 Web
使用者介面特性,也指定哪些網頁類型適用於靜態、動態、Struts 及 JavaServer Faces (JSF) 架構的 Web 應用程式。
支援的使用者介面特性
RAD 6.0 提供的各種可實作 Web 使用者介面的網頁類型,可以分為三類:HTML、JSP 及 Faces JSP。 JSP 網頁類型進一步區分為簡單 JSP 檔和 Struts JSP 網頁。 同樣地,Faces JSP
網頁類型也分為基本 Faces JSP 或具有用戶端快取的 Faces JSP。 以下說明不同的網頁類型。
HTML
此網頁類型可讓您建置基本的 HTML 網頁,也支援其他標記語言(請參閱「表 1 - 網頁類型特性)。 也支援一般的 HTML 特性,例如頁框組、階式樣式表及 JavaScript Scripting。
此外,這個工具還可以定義和使用網頁範本,支援在全部網頁上建立一致的外觀和操作方式。
JSP
JSP 網頁類型的目的是支援以 JSP 技術實作的使用者介面(RAD 6.0 支援 JSP 2.0 標準)。 JSP Scripting (Java Scriptlet) 和動作(自訂標示)技術提供和補充基本 HTML 網頁的所有特性。
這個工具可以定義「JSP 片段」,可將網頁中的共用部分抽出放到獨立的檔案中,再適當地併入其他 JSP 網頁中。 另外也支援以「服務資料物件 (SDO)」技術來存取後端資料(如需 SDO 的說明,請參閱概念:Web 應用程式架構)。
Struts JSP
Struts JSP 網頁可自動納入 Struts 專用元素的支援來延伸簡單的 JSP(如需 Structs 的說明,請參閱「概念:Web 應用程式架構」)。 目的是針對以 Structs 架構實作的應用程式來開發 Web 使用者介面。
尤其,此工具會自動包含 Struts HTML (struts-html.tld) 和 Bean (struts-bean.tld) 標示庫的存取,可以將 ActionForm Bean 的欄位直接併入網頁中。 也可讓您選擇新增其他
Struts 程式庫。
Faces JSP
Faces JSP 網頁類型是針對以 JSF 技術實作的 Web 使用者介面所設計的 JSP 網頁(如需 JSF 的說明,請參閱概念:Web 應用程式架構)。可以存取 JSF 核心標示庫和預先定義的使用者介面元件(Faces 元件),並拖放至網頁上。 此外,Faces JSP 支援使用 Java
片段的 Scripting,例如,指定如何處理使用者介面元件事件。
具有用戶端快取的 Faces JSP
這種網頁提供可在用戶端快取資料的使用者介面元件來延伸 Faces JSP。 尤其,用戶端快取可讓您將元件連結至 JavaScript 變數,而非伺服器端資料。 由於用戶端和伺服器之間的來回轉換次數減少,您可以建置效能更高的網頁。 提供的
Faces 用戶端元件包括:
-
資料方格:在表格中顯示關聯式資料來源的記錄或 JavaBean 陣列的元素。
-
圖形:以長條圖、圓餅圖或線圖來呈現資料。瀏覽器必須安裝 Macromedia Flash 外掛程式,才能使用圖形。
-
樹狀檢視畫面:以樹狀結構顯示階層式資料。
-
Web 服務:可讓 Faces 網頁從現有的 Web 服務擷取資料,不必重新整理網頁。
下表彙總每一個網頁類型支援的特性,可以做為指南來決定最符合 Web 應用程式使用者介面需求的類型。
網頁類型
|
標記語言
|
階式樣式表支援
|
網頁範本支援
|
XML 樣式語法
|
ScriptingSupport
|
SDO 資料存取 (*)
|
HTML
|
HTML 4.01
HTML 4.01 頁框組
精簡 HTML 1.0
XHTML 1.0 或 1.1
XHTML 1.0 頁框組
WML 1.3
|
是
是
否
是
是
否
|
是
否
否
是
否
否
|
N/A
|
JavaScript
|
N/A
|
JSP
|
HTML 4.01
HTML 4.01 頁框組
精簡 HTML 1.0
XHTML 1.0 或 1.1
XHTML 1.0 頁框組
WML 1.3
|
是
是
否
是
是
否
|
是
否
否
是
否
否
|
否
否
否
是
是
是
|
JavaScript
Java Scriptlet
自訂標示
|
是
|
Struts JSP
|
HTML 4.01
HTML 4.01 頁框組
XHTML 1.0 或 1.1
XHTML 1.0 頁框組
|
是
是
是
是
|
是
否
是
否
|
否
否
是
是
|
JavaScript
Java Scriptlet
自訂標示
|
是
|
Faces JSP
|
HTML 4.01
XHTML 1.0 或 1.1
|
是
是
|
是
是
|
否
是
|
JavaScript
Java Scriptlet
自訂標示
Java 片段
|
是
|
具有用戶端快取的 Faces JSP
|
HTML 4.01
XHTML 1.0 或 1.1
|
是
是
|
是
是
|
否
是
|
JavaScript
Java Scriptlet
自訂標示
Java 片段
Macromedia Flash
|
是(具有用戶端資料快取)
|
* SDO 資料存取必須以 WAS 5.1 版做為部署目標
表 1 - 網頁類型特性
Web 應用程式適用性
用來實作 Web 使用者介面的網頁類型,主要取決於開發的 Web 應用程式類型。 若為靜態 Web 應用程式,則選擇很簡單,HTML 網頁類型是唯一的選項。 若為動態 Web 應用程式,可以採用 HTML 和 JSP 網頁。此外,如果以
Structs 或 JSF 架構來開發動態 Web 應用程式,您可以利用這些技術專用的使用者介面網頁類型。 如此可以利用工具提供的特殊支援,輕鬆地建構使用者介面。 表 2 顯示靜態 Web 應用程式、動態 Web 應用程式及採用
Structs 和 JSF 架構的 Web 應用程式的每一個網頁類型的適用性。
網頁類型
|
靜態 Web 應用程式
|
動態 Web 應用程式(非基礎架構)
|
Struts Web 應用程式
|
JSF Web 應用程式
|
HTML
|
是
|
是
|
是
|
是
|
JSP
|
否
|
是
|
是
|
是
|
Struts JSP
|
否
|
否
|
是(建議)
|
否
|
Faces JSP
|
否
|
否
|
是(具有整合程式庫)
|
是(建議)
|
具有用戶端快取的 Faces JSP
|
否
|
否
|
是(具有整合程式庫)
|
是(建議)
|
表 2 - 網頁類型適用性
網頁編輯
Page Designer 是 RAD 6.0 中用來編輯網頁的工具。提供中央編輯器視圖,可讓您以視覺化 WYSIWYG 或文字程式碼的方式建立網頁。
此工具搭配其他視圖,支援開發不同的網頁類型。尤其,下列視圖非常有助於網頁編輯:
選用區視圖
「選用區」視圖提供豐富的現成 UI 元件,可以放在網頁上。 以抽屜來組織,將功能相關的元件放在一起。 例如,標準的 HTML 表單元素,像是按鈕、文字欄位及下拉方框,就集中放在表單標示抽屜中。
「選用區」視圖中顯示的抽屜清單隨著編輯的網頁類型而定。 表 3 列出每一種支援的網頁類型所顯示的預設抽屜。 經由新增、刪除、隱藏或取消隱藏抽屜和元件,您可以自訂「選用區」及大多數的抽屜。 如需每一個抽屜及預設內容的說明,請參閱產品文件。
選用區抽屜
|
HTML
|
JSP
|
Struts JSP
|
Faces JSP
|
具有用戶端快取的 Faces JSP
|
HTML 標示
|
X
|
X
|
X
|
X
|
X
|
表單標示
|
X
|
X
|
X
|
|
|
網頁範本
|
X
|
X
|
X
|
X
|
X
|
網站導覽
|
X
|
X
|
X
|
X
|
X
|
入口網站
|
X
|
X
|
X
|
X
|
X
|
JSP 標示
|
|
X
|
X
|
X
|
X
|
資料
|
|
X
|
X
|
X
|
X
|
Faces 元件
|
|
|
|
X
|
X
|
Faces 用戶端元件
|
|
|
|
|
X
|
Struts HTML 標示
|
|
|
X
|
|
|
Struts Bean 標示
|
|
|
X
|
|
|
Struts 邏輯標示
|
|
|
X
|
|
|
Struts 巢狀標示
|
|
|
隱藏
|
|
|
Struts 並列標示
|
|
|
隱藏
|
|
|
表 3 - 各網頁類型的預設選用區抽屜
快速編輯視圖
這個視圖可讓您快速在網頁中加入 JavaScript 程式碼片段。 在網頁上選取元件時,「快速編輯」視圖的左窗格會顯示可能適用的事件清單。 然後,您可以選取事件,並利用下列方式新增 Script:
-
直接在右窗格的 Script 編輯器中輸入 Script。
-
用滑鼠右鍵按一下 Script 編輯器,選取插入片段,再從顯示的快速清單中選擇片段。
資源
如需 Web Site Designer 和 Page Designer 的詳細資訊,請參閱產品文件:
-
啟動 Rational Application Developer 6.0 版。
-
在功能表列,選取說明 > 說明內容。
-
展開開發 Web 應用程式。
-
瀏覽網站設計或網頁設計。
|