開始之前,您必須先完成練習 2.2:新增伺服器端資料。
在這個練習中,您將學習如何新增用戶端資料,其中包括建立頁面的用戶端資料(以先前建立的伺服器端 Bean 為基礎),以及依照需要來配置資料物件。
如同在「頁面資料」視圖中建立 Bean 一樣,您也將建立一個對等的用戶端資料物件。
這時「用戶端資料」視圖會出現 root
Bean。
Client Data Bean 和 Page Data Bean 的唯一實質差異在於 Users/Portfolios/Positions 區段的 purchaseDate 欄位。
當使用用戶端資料時,會將 Dates 當作類似 Strings 的基本類型來處理。
附註:如果模型有 BigDecimal 類型的內容,用戶端便不支援任意精確度的十進位數,它們會向下強制轉型成 double。 這表示如果您使用 BigDecimal 值,資料可能會失去精準度。
當建立用戶端資料物件時,工具會在您的專案中產生若干檔案和類別。 在您的根來源套件中,如果沒有名稱為 ‘OdysseyBrowserFramework.properties’ 的內容檔,就會建立這個檔案。 在 com.ibm.dynwdo4jsmediators 套件中,會建立兩個檔案,且會修改這個內容檔來登錄專案的這兩個檔案:
com.ibm.dynwdo4jsmediators.root 套件包含特別產生的調解者和 diffhandler 檔:
在這一節中,您將學習如何配置用戶端資料來執行這些動作:
如果要啟動這個練習其餘部分將使用的配置用戶端資料工具,請找出「用戶端資料」視圖。 用滑鼠右鍵按一下根節點,選取配置。這時會出現配置用戶端資料工具。
依預設,當您建立 Bean 時,在將模型匯出至瀏覽器時,會在內部利用 Bean 名稱來代表模型的名稱。 不過,對您的 Web 應用程式而言,這不一定恰當。 在入口網站環境中,尤其如此,您可以指定一個眾所周知的名稱,使多個 Portlet 能夠在瀏覽器中實際共用模型資料。 另一方面,您也可以保證模型只供您的 Portlet 使用,這時您會提供一個您的 Portlet 專用的名稱給它。
請確定模型名稱不是任意的,不論任何情況都是如此。 比方說,將它命名成 Root,就會有些困擾,因為其他開發人員也可能使用相同的名稱。 瀏覽器有個一般名稱空間;因此,兩個同名的模型可能會發生衝突。 因此,使用鏡映 Java 類別名稱的複式名稱,通常都是好的作法。 比方說,com_ibm_myApp_myModel。
在這個指導教學中,您可以保留模型名稱的預設值。
您有時會從伺服器取得太多資料;可能會有您不需要的類別或屬性傳給用戶端。 您可以配置用戶端資料物件,以便刪除不要的類別或屬性。
附註:如果在特定資料結構中重複使用給定的類別,不論您在任何位置自訂它的欄位,都會將這些變更套用在任何使用這個類別的位置。 如果需要試驗,請啟用 root.users.portfolios.user 內容,選取一些勾選框。 這時 Root 之下的 User 類別參照會自動更新相同的欄位。
您可以配置物件身分的辨識方式。如果您按一下類別的某個正規內容,比方說,root 的 name 內容,您會見到已選取稱為「主要」的勾選框。
在給定相同類別的兩個實例之後,您如何得知它們相不相同? 如果您有兩個使用者,您如何得知他們相不相同? 除非您知道 User 的哪些部分(它的主鍵)使實例成為唯一,否則,您無法得知。 進一步瞭解如何設定主鍵。
類別 | 欄位 |
---|---|
Root | Name |
Users | refNum |
Portfolio | user, porfolioName |
Position | refNum |
Stock | Symbol |
您將利用資料格線來顯示給定投資組合的內容(它的位置)。依照資料結構,Position 類別有八個屬性:price(購買價格)、quantity、refNum、symbol、purchaseDate、stock(購買的股票)、portfolio(擁有這個位置的投資組合)以及 user(位置的擁有者)。
遺漏將等於數量乘以股票現行價格的 value
內容。
提供這項資訊的一個方式是變更 Java Bean,在其中計算產品。
不過,這有問題,因為計算的值會是時間中的一個 Snapshot:如果瀏覽器要改變 quantity
,算出來的值無法反映這個變更。
如果要避免這個程序,請使用用戶端屬性,它是一個任意的 JavaScript 表示式,會在已建立它的物件環境定義中執行。
this.eGet('quantity')*this.eGet('stock').eGet('currentPrice')
這個表示式使用瀏覽器的 SDO 物件,利用字串指示要取得的屬性可以呼叫 eGet 方法。 如果屬性是伺服器端資料的清單或陣列,eGet 會在瀏覽器傳回一個 JavaScript 陣列。 因此,這個位置物件的數量欄位會乘以這個位置物件所指向之股票物件的 currentPrice 欄位。 在瀏覽器中,每次要求新屬性時,都會運算這個表示式,因而會與 quantity 和 currentPrice 值同步化。
您可以在表示式文字區中輸入任何有效的 JavaScript。 比方說,您可以有在提供兩個值之後便會傳回百分比的函數。 您也可以併入一個欄位來疊代每個位置和累計總計,以顯示整個投資組合的總值。 您可以呼叫您擁有的任何項目,其中包括您已撰寫的自訂 JavaScript 函數。 需要遵守的規則只有兩條:this
指標指向建立屬性的類別實例。
表示式必須傳回相容於指定屬性類型的值。
雖然這個指導教學不使用「進階」標籤,但進階標籤的多個按鈕可協助您瞭解。 第一個按鈕是載入 EMap 來源,可讓您存取配置了伺服器端資料如何傳給瀏覽器再傳回進行差異處理的系統之中的金鑰檔。 配置器提供一個介面,供您配置這個檔案中的資訊。 您必須是進階使用者,才能改變這個檔案。
請利用第二個按鈕從伺服器端資料重新產生,在伺服器資料變更時,重新整理用戶端資料資訊。 這時用戶端資料物件不會反映伺服器資料來源可能發生的變更;因此,您必須重新產生您的內部資產,比方說,挑選新欄位。
第三個按鈕從專案中移除可讓您移除專案中的所有用戶端資料成品。 當進行測試,或在開發的早期階段,在頁面及其資料尚未完成時,這非常有用。 如果您在「用戶端資料」視圖中選取一個要移除的節點,您只會移除這個頁面的項目,當最初建立用戶端資料元素時所產生的所有成品仍會在專案中。 如果您要將它們全部移除,您必須個別移除它們。
現在您已準備好開始進行練習 2.4:連結資料和自訂顯示畫面。