OAF_開發系列23_實現OAF數據格式CSS和CSS庫（案例）

 20150716 Created By BaoXinjian

1、摘要

---

1. 需求

OAF中，若是不使用CSS，有時會遇到一些顯示的問題，好比在一個明細頁面，頁面上半部分顯示頭詳細信息，頁面下半部分顯示行詳細信息，

在顯示頭信息時 若是採用的是messageStyledText組件，就會出現prompt和value的字體不一致的問題，致使prompt的字體明顯比value的 字體小的問題。

因此會常常採用CSS來控制，好比OraDataText的樣式類。

2. 描述

OAF的webBean支持自定義CSS，每一個webBean都有屬性cssClass.經過方法setStyleClass()和getStyleClass()設置或獲取CSS類的名稱。

3. 自定義CSS

OAF中可用的CSS是經過XSS（xml style sheet)來定義，全部的xss文件放在OA_HTML/cabo/styles/目錄下，OA_HTML必定是你項目的目錄下（通常在myhtml) 目錄下。

自定義CSS可放在custom.xss，或是寫成單獨的XSS文件而後在custom.xss中引用。

4. 代碼控制CSS

CSSStyle style = new CSSStyle();

style.setProerty("font-size","'20px");

webBean.findChildRecursive("<輸入框的名字>").setAttributeValue(INLINE_STYLE_ATTR, style);

 

2、CSS控制

---

1. 使用代碼控制對應數據的顏色

//目前待發生 成本(元)

OAMessageTextInputBean touseAmountBean = (OAMessageTextInputBean)webBean.findChildRecursive("TouseAmount");

touseAmountBean.setAttributeValue(STYLE_CLASS_ATTR, new OADataBoundValueViewObject(touseAmountBean, "CssCode", "AdjustViewVO1"));

2. CSS文件的存放位置

 

3、自定義CSS用法

---

案例：薪水大於10000的員工顯示紅色字體

 

 

Thanks and Regards