CND-ERP_SD_UI绘制规范.doc

C&D ERP ImplementationProjectSD-UI繪製規範_v1.0.4Prepared by： LION TECHOLOGY CO.,LTD.Created Date：2010/02/22SD-UI繪製規範SignatureCompanys NameNameSignatureDate版本修訂記錄版本修訂日期頁數修訂者修訂說明1.0.02010/02/22Uni初版。1.2.12010/4/1Janny依據ProtoType調整。加入頁面風格部份1.0.22010/4/21Janny1. 加入頁面寬度標準設定2. 加入應用MasterPage3. 文件應用調整4. CSS套用規範調整1.0.32010/4/23HellenCSS套用規範補充1.0.42010/4/30Janny加入程式引用Css說明1.0.52010/5/5Hellen將提示資訊對應css樣式引用刪除1.0.62010/5/6Janny加入畫面呈現模式1.0.72010/5/6Hellen新增、查看按鈕統一使用linkbutton。1.0.82010/5/11Janny增加分頁模式1.0.92010/5/13Janny依UI呈現模式會議結論調整GridView顯示方式1.0.102010/5/17Janny根據SA決議調整DevExpress Grid中，”查看、新增”等文字統一調整成顯示和不顯示的模式1.0.112010/5/17Hellen增加開啟表單大小設定說明1.0.122010/5/25Janny增加隱藏欄位說明增加標籤樣式1.0.132010/5/27Hellen調整維護區dropdownlist的預設值1.0.142010/6/7Hellen刪除開啟表單大小設定說明1.0.152010/7/23Hellen查詢功能區塊規範調整1.0.162010/9/3Lucifer規範統一重新調整1.0.172010/9/21Hellen根據雄獅提供的CND-ERP_Prototype 樣式規格書 v 2.1.doc同步更新此文件1.0.182010/9/25Hellen根據雄獅提供的CND-ERP_Prototype 樣式規格書 v 2.1.doc同步更新此文件主要調整: 國家、省州郡、城市的運作方式&顯示方式 及系統自動指派代碼顯示方式,使用者不可編輯的部分(用Label來呈現代碼的部分,並用粗體顯示)1.0.192010/10/7Hellen增加針對欄位長度限制部份,查詢條件也需加入長度限制,並且針對長度限制需在tooltip中說明.及針對查詢區塊查找按鈕,Ui用詞統一使用”查找”1.0.202010/10/11Hellen刪除11.11,根據SA討論會說明,tooltip中不會加入欄位長度說明,但是rp檔的欄位說明中加入長度限制的說明,之前已經加入的程式不用進行反工.目錄1共通規範62頁面寬度標準設定63網頁Page屬性說明64文件引用統一說明64.1Css文件64.2JS文件75CSS樣式套用規範75.1作業功能標題75.2數據群組標題85.3功能按鈕(Button)85.4欄位顯示方式85.5查詢功能區塊85.6查詢結果區塊95.6.1修改按鈕95.6.2刪除按鈕95.6.3清單按鈕統一使用linkbutton，非清單按鈕使用button。95.6.4GridView95.7日曆盒105.8操作狀態105.9標籤106畫面堆疊方式117分頁模式118頁面風格118.1網頁規格118.2網頁版型128.3下方展開128.3.1查詢128.3.2查看138.3.3相關功能138.3.4複制編輯新增158.4彈跳視窗15彈跳視窗Size: 850 x 600。頁面顯示如有表格時，則以100%方式顯示。168.4.1查詢結果168.4.2查看頁面-單檔模式178.4.3查看-單一主從檔模式178.4.4查看-多重主從檔模式188.4.5滑鼠mouse over時顯示的模式208.4.6正式與草稿資料顯示模式正式資料草稿資料彈跳視窗樣式228.5Tree View238.6彈跳視窗快選單圖示238.6.1在查詢欄位輸入代碼，當onblur時，系統自動查詢代碼後，帶回其對應的名稱在所要顯示的位置。238.6.2由使用者自行點選彈跳視窗進行查詢。248.6.3查詢欄位不允許輸入，使用者只能點選彈跳視窗進行查詢。249控制項拖放及使用細則249.1Tabindex的設置249.2TextBox249.3TextArea249.4Button259.5DropDownList259.6GridView259.7隱藏欄位2510頁面排版規則2510.1Table Layout2511其他規範2511.1彈跳視窗圖示2511.2頁面功能名稱2611.3查詢欄位有起迄日期時的顯示模式2611.4國別 & 城市 & 地區 顯示模式(必須要正確帶入城市後才可帶出地區下拉清單)2611.5有資訊分區時的分區模式2611.6多筆列表均使用Grid方式設計2711.7系統變動或產生的欄位2711.8畫面如引用其他共用頁面2711.9時間統一格式為24小時制, 時間區間為00:00-23:59範例如下:2711.10統一規範頁籤內的頁籤須各自提交,無法交由外層的提交共同作業範例如下:271 共通規範畫面語系文字編碼預設為簡體中文2 頁面寬度標準設定系統頁面屏寬設定為1024px，其中左邊Menu寬度為230px(含MenuBar佔用7px)，其餘寬度分配給每支程式。此部份需設定系統目錄下的Default.aspx頁面結構大體如下 1024px230px100另外,在程式開發時需設定外層Table寬度為100%。3 網頁Page屬性說明畫面配置方面，應使用Master Page 方式，用以規畫Layout，其中Master已定義所有畫面的css及js方法。只需在網頁Page屬性中加入下面即可MasterPageFile=/Shared/MasterPage.master程式開發統一套用Master Page後，不需要單獨在每個控制項上應用Css樣式，只需引用Css檔即可。頁面通用樣式：標籤樣式：MasterPage統一引用JavaScript文件，無需在單只引用。通用JavaScript：4 文件引用統一說明4.1 Css文件 系統所有的Css樣式均整理在content.css檔中，程式中不需單獨套用。 系統中所有使用的CSSS檔皆放在 / CSS/ 目錄中。 日曆盒樣式：CalendarNotes.css 自定義通用樣式：content.css DEV控制項樣式：DataBinding.css，Default.css，DefaultYouthful.css， Validation.css，styles.css 頁簽樣式：tabber.css ，ui.tabs.css4.2 JS文件 系統中所有使用的JS檔皆放在 /Scripts/ 目錄中。 畫面所使用的共用JS方法均整理在Common.js檔中(框架中除了有獨立定義的js以外，都定義在此文件中) 畫面所使用的日曆盒方法整理在calendar.js 文件中 ui框架中頁簽相關JS方法均整理在tabber.js，ui.core.js，ui.multiTab.js，ui.tabs.js文件中 JQuery引用JS為jquery-1.3.2.min.js 共用開窗JS為OpenWindow_Utility.js Colorpicker目錄中為拾色器JS DEV控制項JS為menu檔夾下的JS My97DatePicker為日曆盒JS5 CSS樣式套用規範5.1 作業功能標題 每只程式功能的作業功能標題，請套用headline樣式。套用後其外觀樣式應如下圖所示： 不可編輯欄位元設置方式：文字方塊查看或編輯狀態下不可編輯欄位統一使用readOnly進行設置，並套用CSS樣式，底色設置灰色，字體設置黑色。控制項查看或編輯狀態下不可使用時，統一使用Enabled或Disabled設置。5.2 數據群組標題針對每個功能畫面的資料會依其資料意義加以群組，套用樣式按下規則(1) 查詢區，套用search_title樣式。套用後其外觀樣式應如下圖所示：(2) 輸入區，套用input_title樣式。套用後其外觀樣式應如下圖所示：(3) 顯示區，套用display_title。套用後其外觀樣式應如下圖所示：5.3 功能按鈕(Button)每個功能畫面中的功能按鈕(Button)請套用ctrl_btn_white樣式。套用後其外觀樣式應如下圖所示：5.4 欄位顯示方式 必填欄位 不可編輯欄位以readonly 方式+灰色底顯示 5.5 查詢功能區塊因應功能不同，一般維護欄位數較多。故在查看和維護相關頁面 不使用Table方式顯示，請依Prototype顯示欄位元及其位置，頁面標題性文字無須套用樣式，標題後不要加入分號，查看狀態下，需要將對應的輸入控制項設為disable。外觀樣式應如下圖所示：5.6 查詢結果區塊下面的說明均為針對查詢結果使用GridView情形需遵守的規定(是否需做成與DEVGridView同樣樣式？DEVGridView修改，刪除按鈕均為LinkButton)5.6.1 修改按鈕統一使用img控制項，src引用btnEdit.gif5.6.2 刪除按鈕統一使用img控制項，src引用btnDelete.gif，請在其對應的按鈕添加onclick事件，觸發click事件時調用UI框架提供的確認刪除功能。程式碼參考如下5.6.3 清單按鈕統一使用linkbutton，非清單按鈕使用button。5.6.4 GridView GridView請套用tbl_grid樣式 ScrollBar套用grid_bar樣式 固定表頭套用tr_fixedrow樣式 固定單元列套用tr_fixedcell樣式 奇數行套用tr_even樣式 偶數行套用tr_odd樣式 選中行套用tr_selected樣式(此部份亦適用其它選中情形) 滑鼠移入套用tr_onmouse樣式參考樣式如下 5.7 日曆盒img日曆盒，在onclick事件中應用Js方法WdatePicker(isShowWeek:true,dateFmt:yyyy/MM/dd,el:$dp.$(txtTest)畫面樣式如下5.8 操作狀態每支功能所顯示的當前操作狀態資訊，請套用WorkStatus樣式。5.9 標籤標籤套用tab樣式，選中頁簽字體顏色為暗紅色，非選中頁簽字體顏色為藍色，選中頁簽背景與非選中頁簽背景均為白色。套用後的效果如下圖。6 畫面堆疊方式每個功能頁面在流覽器中以頁簽方式呈現，若開啟多個頁面，則相應顯示多個頁簽。同一功能的子頁面不會再以頁簽方式出現，具體依SD說明。7 分頁模式分頁控制項使用用戶自定義控制項，使用後的效果如下圖：8 頁面風格8.1 網頁規格圖 1 網頁規格8.2 網頁版型圖 2- 網頁版型8.3 下方展開單一檔案的操作模式，以下方展開模式處理。點選查詢於顯示區顯示查詢結果(如圖 3 ) 。 點選查看於該筆資料下方顯示其查看的內容(如圖 5)。如有相關功能於查看區右上角顯示按鈕，相關功能則以彈跳視窗顯示(如圖 6)。點選編輯則於該筆資料下方顯示編輯區(如圖 7)。點選新增則於表頭下方顯示新增編輯區(如圖 8)。8.3.1 查詢圖 3-查詢頁面圖 4-查詢結果頁面8.3.2 查看圖 5-查看頁面8.3.3 相關功能以彈跳視窗顯示其相關功能的查看與維護。彈跳視窗則依彈跳視窗UI規範。圖 6-相關功能彈跳視窗頁面8.3.4 複制點選複制功能，則於表頭下方顯示其新增區域，並帶入可複制的資料。請參考3.4新增頁面。 編輯圖 7- 編輯頁面 新增圖 8- 新增頁面8.4 彈跳視窗資料呈現包含多於單一檔案時，以彈跳視窗方式處理。於查詢結果列表中，點選查看，彈出視窗顯示該筆資料(如圖 9、圖 10)。資料包含單一主從檔案，頁面樣式如圖 11。資料包含多重主從檔時，頁面樣式如圖 12。資料有分正式資料與草稿資料，正式資料於作業名稱上以藍色顯示，且正式與草稿按鈕則顯示正式按鈕藍色顯示，草稿按鈕則以灰色顯示 。如為草稿資料，則作業名稱以紅色顯示，且正式與草稿按鈕則顯示正式按鈕灰色顯示，草稿按鈕則以紅色顯示，另變換底色。使用者允許在未提交時，可切換至其他的子頁籤。但編輯中的資料保留在原頁。彈跳視窗在關閉時，系統檢核，如仍有編輯中，未提交之子頁籤，則出警示視窗，通知使用者，仍有未提交之資料，但不提示那一子頁籤。彈跳視窗Size: 850 x 600。頁面顯示如有表格時，則以100%方式顯示。8.4.1 查詢結果圖 9-查詢結果頁面8.4.2 查看頁面-單檔模式圖 10-查看頁面-單一檔案模式8.4.3 查看-單一主從檔模式圖 11-查看頁面-單一主從檔模式8.4.4 查看-多重主從檔模式UI設計上，如需要有多重主從檔，則調整UI設計，減少多重主重的設計。或採用多重主從檔設計，但不採用DEV 控制項。圖 12-查看頁面-多重主從檔案模式8.4.5 滑鼠mouse over時顯示的模式8.4.6 正式與草稿資料顯示模式 正式資料圖 13-正式資料顯示模式 草稿資料圖 14-草稿資料顯示模式 彈跳視窗樣式 彈跳視窗名稱: 功能名稱-CND-ERP。（共用方法待Rebo提供） 彈跳視窗的最大化，不鎖死。 每一頁都會有頁籤顯示。 彈跳視窗因頁籤以iframe方式處理，scrolling bar 請包在iframe中。 如查詢無結果，則alter提示文字 “ 查詢無結果！”8.5 Tree ViewTree View 的查詢結果，對資料的查看、新增、編輯等功能，均以彈跳視窗方式顯示。不以下方展開方式，在Grid中編輯。圖 15 Tree View的圖示8.6 彈跳視窗快選單圖示快選單圖標均已ImageButton套用圖片方式。如編輯時三種方式查詢：8.6.1 在查詢欄位輸入代碼，當onblur時，系統自動查詢代碼後，帶回其對應的名稱在所要顯示的位置。8.6.2 由使用者自行點選彈跳視窗進行查詢。8.6.3 查詢欄位不允許輸入，使用者只能點選彈跳視窗進行查詢。8.6.4 如SA另有特別要求，請參照SA特別方式處理。8.6.5 可输入方案，失焦点时处理方式： 離開焦點時，則把欄位內的值進行查詢。 查詢結果.1 查詢結果有一筆時，則帶回查詢結果的值。.2 查詢結果有多筆時，則不彈跳視窗，也不帶回值。.3 查詢結果為0筆時，則彈跳視窗。9 控制項拖放及使用細則網頁上控制項為.Net控制項，每個控件都需設置ToolTip屬性，填入資料按照SA提供填寫，不得使用Html控制項9.1 Tabindex的設置 若無特別說明，tabindex屬性不需設置9.2 TextBox Width可靈活運用，以頁面美觀為主 資料內容顯示文字居左，數位居右 編輯狀態，數字居左，金額居右 編輯狀態，不做千分位格式轉換，在GridView顯示狀態才需對金額做千分位處理。9.3 TextArea 寬度width = 100% 默認設置五行row = 59.4 Button 寬度設置原則Text的內容要求全部顯示出來 同一行並排的兩個Button之間空2個空格9.5 DropDownList 查詢區提供”全部”選項 維護區若為必輸欄位則提供”請選擇”選項若為非必輸欄位則提供”(空白)選項9.6 GridView 寬度width = 100% 標題列居中顯示9.7 隱藏欄位 畫面中使用的隱藏欄位元使用HiddenField控制項，不允許使用input控制項，並統一放置在Table下方10 頁面排版規則10.1 Table Layoutaspx畫面的外層Table寬度設置為100。畫面排版參考待整理11 其他規範11.1 彈跳視窗圖示點選圖示，進行彈跳的圖示，如右圖顯示 。示意圖如圖 16- 彈跳視窗圖示。圖 16- 彈跳視窗圖示11.2 頁面