2008年5月19日 星期一

ProgressBar設計

說真的,當初在使用PB6.5的時候,常常覺得視覺控制項太少(可能是被VB養成的壞習慣),但是因為PB真的有其獨到MIS快速開發的物件導向功能,所以在設計MIS系統的時候,VB只好被我給秉棄不用了;可是說正格的,有時候視覺控制項卻是在UI的分數中占蠻高的比重的。而今天要設計的ProgressBar也是PB6.5缺少的控制項之一,雖然PB7以上的版本已經有這樣的控制項,不過目前朋友還是在使用PB6.5,所以我還是將它設計出來造福一下人群吧。

要設計ProgressBar並不是什麼難事,包括許多DIY的視覺物件也是,但是難就難在要做好一個完整的物件控制項,考驗設計師對使用者(其它設計師)的操作上手速度(這個應該稱作設計介面):物件功能分明度(A功能與B功能好像類似)、可控制精細度(控制項裡面的物件)、封裝一體性(對控制項裡面的物件控制要如同直接對控制項設定控制般簡單)等等,這部份就會造成程式設計師的極大差異。

好了,廢話結束,進入正題吧。
ProgressBar中文的話應該叫做"處理進度條",既然是處理進度,所以有進度百分比來顯示會比較好一點,如此可以稍微整合一下,設計好的物件控制項,別人在使用時就不需要再去加東加西的了。然而條狀要如何產生呢,簡單的可以用Line這個物件就好了,但是Line的特性太少,表現起來太單調,所以我改用了Rectangle(別說你不知道這叫矩形)來設計,因為Rectagle具有FillPattern的樣式,可以創造較為美觀的ProgressBar,所以初步規劃如下:另外考慮到的一點是當Progress為100%時,rectangle是填滿的狀態,但是若Progress為0%時,則rectangle則為一片空白,這樣設計在某些畫面上會有"空一塊"的感覺,並不是很美觀:

因此我們希望對rectangle保留外框,而在適當的進度下改變FillPattern的範圍:

可是,若是注意看rectangle物件的屬性,是無法這樣操作的,也就是說FillPattern只會全部塗滿,但是無法依照指定範圍塗滿,所以我們必須另外想辦法處理這樣的問題。其實可以用很簡單的方法解決這個問題。
對,你想到了嗎?就是用兩個rectangle,一個當底僅顯示外框,另一個當BAR;當BAR的rectangle需在當底的rectangle上方位置,而當BAR的rectangle,預先設定好fillpattern樣式,也可以依照進度動態調整寬度,就可以做到這樣的效果囉。

再來就是封裝,將上面3向物件設計在一個visual的customer的UserObject上即可完成視覺部分的設計了:實際設計樣式:
接下來就是要設計其使用的方式以及函式了。
因為progressbar主要是顯示工作進度,因此針對他人使用這個物件時僅主要有2個動作需要做:
一、初始化
主要是設定 minimized position(最小位置)、maximized position(最大位置)以及position(最初位置)。
可是有人說:進度只有100%,那麼最小設為1,最大設為100就好了,為什麼還需要設定這些資訊呢?
雖然這樣的說法是沒有錯,但是相對的使用這個物件的程式設計師必須在自己的程式碼加上換算百分比的Script,再將換算出來的百分比數拿來設定progressbar,如此每次使用到這個Progressbar就得加上一段"換算百分比"的script,這樣看來是多麼沒效率,多麼不好用啊!
所以這個初始化函式其意義就在此,當你設定好 minimized 與 maximized 位置時,只要填入目前的position,這個Progressbar就會幫你計算百分比,無須設計師操心。

二、設定ProgressBar位置
設定處理進度的position,這裡的position(位置)指的是在(一)初始化時設定minimized與maximized之間的值,並非實際的百分比值,因為物件會自行換算minimized與maximized與position之間的百分比,並調整bar的寬度。

因此主要函式便有以下幾種:
(a)初始化
@of_initial(minimized position , maximized position , initial position)
@of_initial(minimized position , maximized position)
minimized position(Long) 最小位置
maximized position(Long)最大位置
initial position(long)最初位置,若是不含此參數,則預設為0。

(b)設定位置
@of_SetPosition(Current Position)
Current Position(Long)目前位置,並非百分比位置,而是介於minimized position與maximized position之間的位置。

針對主要函式可以在發展延伸的函式:
(c)重置
@of_reset()
將所有設定清除,回歸預設值。

(d)取得目前設定對小位置
@ minimized position = of_minposition()
minimized position(Long)

(e)取得目前設定對大位置
@maximized position = of_maxposition()
maximized position(Long)

(f)取得目前位置
@current position = of_position()
current position(Long)

(g)取得目前進度百分比值
@percent number = of_percent()
percent number(Integer) 介於0~100之間的數值。

延伸使用
當這個物件設計好了可以使用的時候,你會應用在哪裡呢?我的範例中,將它設計成popup window的 使用或是設計到window上貼合,都是相當不錯的用法喔。

當我設計在展示畫面上時,其背景顏色也會跟著主視窗進行替換,主要是在progressbar中有一些可以變更的instant變數可以當作屬性來設定:

Boolean ib_border = true
Long il_color = 8421376
Long il_bkcolor = 81324524
fillpattern i_fillpattern = vertical!

這些屬性可以變更成不同樣式的ProgressBar,增加ProgressBar的細項設定以及實用性,你可以發現,這些設定並非直接讓使用者(設計師)設定這個ProgressBar內的rectangle屬性,而是透過對外的public instant變數,加上initial的過程才去進行屬性變更,因此使用此物件設計師不需要太深入了解物件內部的東西就可以進行設計了。

範例程式下載

0 個回應: