Faces Client 範例詳細資料

範例概觀

投資組合範例是模擬一個 Web 型的投資組合管理應用程式。 其目標是讓使用者檢視所有的投資組合、導覽這些投資組合、以圖形顯示它們,並且利 Web 服務傳到該頁的現行股價,定期更新它們。 使用者也可以變更股票數量來進行分析。

Hello World 範例會在網頁中以相當簡單的模型來顯示 MVC(模型視圖控制器)設定,且會用兩個輸入欄位作為控制項,以示範 Faces Client 組織架構的功能。

投資組合應用程式文件

投資組合範例是模擬一個 Web 型的投資組合管理應用程式。 這個應用程式的模型有一個包含使用者集合和股票集合的根物件。 它也包含一個參照,指向用來作為位置保留區以收送範例中之 Web 服務資料的單一股票物件。 之後,便是使用者。 每位使用者可以有零或多個投資組合,每個投資組合都可以有零或多個位置。 每個位置都指向一支股票。

以下是頁面中不同控制項的設定說明。

這個頁面有兩個標籤畫面。 第一個標籤畫面有三個畫面。 樹狀畫面顯示一份連結於根所連接的使用者清單之樹狀視圖,且會顯示每位使用者的投資組合清單。 資料格線畫面顯示一份連結於所選投資組合的位置之資料格線。 完整畫面會顯示樹狀結構和資料格線,含有並列的樹狀畫面和資料格線畫面中的相同設定。
第二個標籤頁面有兩個畫面。 圖形畫面顯示連結於所選投資組合的位置之圖形控制項。 圖形的 X 軸顯示股票代號的清單,Y 軸顯示各股的對應價格和數量。Web 服務畫面顯示一些連結於暫時位置保留區股票內容的輸入和輸出文字欄位。 這個畫面的指令按鈕用來呼叫股票 Web 服務。

以下是控制項的簡要互動摘要

請注意,每個控制項都獨立對映於模型,因此,模型資料中的任何變更都會反映在控制項中。 除了這些隱含的連結之外,控制項之間還有一些明確的連結。 當您在樹狀視圖中強調顯示某項投資組合時,會用這個投資組合物件來更新資料格線和資料圖,它們會重新整理來顯示這個投資組合物件中的位置。 我們在樹狀畫面中的樹狀視圖和資料格線畫面中的資料格線之間,以及在相同畫面中的完整畫面和資料格線及資料圖畫面中的資料圖之間,建立這個種類的事件系統。 我們所建立的第二類事件是在完整畫面中的資料格線和位置保留區股票物件之間。 當強調顯示資料格線中的某特定列時,這個位置的股票物件中的所有欄位都會複製到位置保留區股票物件的對應欄位中。 因此,會重新整理 Web 服務畫面中的輸入和輸出欄位值。

如果要呼叫股票 Web 服務來取得特定股票代號的股票報價,請按一下 Web 服務畫面中的「提取資訊」按鈕。Web 服務畫面中的表單控制項所顯示的值會用從股票 Web 服務收到的值來更新。

您也可以在全螢幕中變更「資料格線」的股票數量。 股票數量的任何變更將會自動更新「資料圖」和「獲利/虧損」直欄。 您也可以點擊全螢幕中的「完成」按鈕,來同步化用戶端和伺服器端上資料的變更。

Hello World 應用程式文件

對於在伺服器端的這個應用程式,我們有一個稱為 Hello 的簡單類別,其中含有一個稱為 text 的 String 類型屬性。 在用戶端,我們在 JavaScript 中匯出了這個相同的模型,在瀏覽器中,我們有兩個輸入文字欄位,我們要將這兩者都連結至 Hello 物件的 text 屬性。 當我們更新某一控制項的值時,會變更 Hello 物件中的 text 欄位,結果這個值又會傳送至其他控制項,但不會返回伺服器。

請嘗試將第一個輸入文字框控制項內的字串值改成 "Hello World!!!"。 這個控制項會發動一項事件來更新基礎資料模型(在用戶端中),如果您移出第一個文字框的環境定(按一下框外或導覽至第二個文字框),第二個文字框的值就會改成 "Hello World!!!", 因為它也連結至第一個控制項的相同物件的相同屬性。