转自:[THEMEX.NET :: 极限主题] 会员odbo

前言:
Windows XP的登錄畫面製作軟件,較常見的有Logon Studio及ChameleonXP,但其製作功能僅在於XP基本登錄界面的顏色.圖片.文字的更換,
若是要作出較富變化的登錄界面,則需對UIFILE腳本手動作些搬移及大弧度的修改,目前較常見的就是仿MAC登錄界面.
有鑒於網路上認識Logonui腳本資料的缺乏,在此提供個人對該腳本的粗淺經驗,或許其中有些個人誤解,期望有程式碼寫作經驗的網友不吝指正,所有網友
共同研討糾正錯誤,以免本人部份不正確的理解誤導了網友的觀念.
本篇解說以基本XP登錄腳本為範本,仿MAC登錄界面的腳本則待日後另文實例剖析.

(一)腳本碼概述
整個腳本碼粗淺可分二大區塊:
1.前大半段以<style resid=......>起頭,</style>結尾,共有九個小區塊,我暫且稱為元件定義區.
2.後小半段以<logonframe...>起始,到腳本碼最後以</element>結束,其中再細分三個區塊,我暫且稱為腳本運行區.

腳本碼的基本功能在於指定各區域對應的元件(文字.色塊.圖片.字串值),並規範該元件動作方式及時機,顯示區域,
因此各元件的數值定義和運行在二大區塊中要互相對應配合,否則運行就會出錯.

下面是常用的一些定義參數,就我的使用經驗提出參考
background:rcbmp(125,6,#ff00ff,0,0,1,0)
1. 125 -> 圖片編號
2. 6 -> 圖片顯示方式 -> 0(磚塊排列),1(按你指定的長寬),6(擴展),7(32bit bmp圖片)
3. #ff00ff -> 指定要透明的顏色
4. 0 -> 指定圖片長度
5. 0 -> 指定圖片寬度
6. 1 -> 0=使用指定長寬,1=使用圖片長寬
7. 0 -> 0=不作變化,1=映射

腳本碼中對於元件位置的指定和對齊,常用的就是中(client)上(top)下(bottom)左(left)右(right)上右(topright)下左(bottomleft)...,還有下面的九宮格參數.
大方向位置搞定後再輔以padding: rect(0rp,0rp,22rp,0)左,上,右,下,這類填空指令作偏移設定,取得想要的精確佈局.
位置九宮格代號參數
6 4 7
1 0 2
5 3 8

附圖是XP登錄畫面的各主要元件分佈圖

----------------------------------------------------------------------------------------------------------

(二)XP登錄腳本碼逐項解說

(1)各元件之定義
在腳本文件的上半部,以<style resid= ...>起頭,</style>結尾

此元件定義區共分以下九個小區塊

1.中間畫面
此段腳本碼指定了全局底色,中間畫面顏色及USER(各帳戶)按鍵共用底圖等三個元件

<style resid=framess>
element
{
background: argb(0,0,0,0); #定義全畫面背景為帶透明通道的黑色rgb色塊(此argb定義讓覆蓋在上面的圖片可指定透明色)
}
element [id=atom(contentcontainer)]
{
background: rgb(90,126,220); #指定中間畫面為水藍色rgb色塊(覆蓋於上面定義的黑色背景之上)
}
button
{
background: rcbmp(112,6,#FF00FF,0,0,1,0); #指定USER按鍵底圖為編號112的bmp圖片,擴展排列,透明色為桃紅色,使用圖片的長寬度
borderthickness: rect(8,8,0,8); #設定該按鍵底圖加外框,左8上8右0下8(pix)
}
</style>


2.上畫面
此段腳本碼指定了上畫面顏色及上分隔線圖片二個元件

<style resid=toppanelss>
element
{
background: argb(0,0,0,0); #定義上畫面背景為帶透明通道的黑色rgb色塊
}
element [id=atom(toppanel)]
{
background: rgb(0,48,156); #指定上畫面為深藍色rgb色塊
}
element [id=atom(divider)]
{
background: rcbmp(125,6,#FF00FF,0,0,1,0); #指定上分隔線為編號125的bmp圖片
}
</style>



3.下畫面
此段腳本碼指定了下畫面顏色.下分隔線圖片.關機按鍵.退出按鍵.文字訊息等元件

<style resid=bottompanelss>
element
{
background: argb(0,0,0,0); #定義下畫面背景為帶透明通道的黑色rgb色塊
}
element [id=atom(bottompanel)]
{
background: gradient(argb(0,57,52,173), argb(0,0,48,156), 0); #指定下畫面為由argb紫色?向漸層至argb深藍色
fontface: rcstr(2); #指定下畫面使用的字體依String Table(字串值)資源編號2所設定之字串值,本例為tahoma字體
}
element [id=atom(divider)]
{
background: rcbmp(126,6,#FF00FF,0,0,1,0); #指定下分隔線為編號126的bmp圖片
}
element [id=atom(options)]
{
padding: rect(25rp, 20rp, 25rp, 20rp); #指定對下畫面中的元件填入距離空間左25上20右25下20
} 此功能作用的元件包恬power按鍵.unduck按鍵.instruct訊息
button
{
fontsize: rcint(42) pt; #指定上列按鍵上文字大小依String Table(字串值)資源編號42設定顯示
foreground: white; 顏色白.及鼠標在按鍵上時以手狀顯示
cursor: hand;
}
button [mousefocused]
{
fontstyle: underline; #鼠標移到關機.退出按鍵時按鍵訊息文字加下橫線顯示
}
button [keyfocused]
{
fontstyle: underline; #以鍵盤快捷移到關機.退出按鍵時按鍵訊息文字加下橫線顯示
}
element [id=atom(instruct)]
{
contentalign: wrapleft; #右下角的訊息文字智能向左對齊
padding: rect(18rp,0,0,0); #該訊息文字左方增加18pix的空間
fontsize: rcint(43) pt; #指定訊息文字大小依String Table(字串值)資源編號43設定顯示
foreground: white; #指定訊息文字為白色
}
</style>


4.左畫面
左畫面覆蓋在中間畫面的左半部,包括Windows Logo,歡迎字樣及其陰影,登入登出時的系統訊息(help)

<style resid=leftpanelss>
element
{
background: argb(0,0,0,0);
fontface: rcstr(1); #指定左畫面使用的字體依字串值資源編號1設定顯示,此例為arial字體
}
element [id=atom(product)]
{
animation: alpha | s | mediumslow; #指定Logo圖片以透明動畫顯示,速度為中慢
}
element [id=atom(leftpanel)]
{
foreground: rgb(239,247,255);
}
element [id=atom(welcome)]
{
fontstyle: italic; #指定歡迎文字樣式為斜體
fontsize: rcint(44) pt;
fontweight: bold; #增加指定文字樣式為粗體
padding: rect(0rp,0rp,22rp,0); #向右增加22pix空間
contentalign: topright; #指定文字置於右上(此例左畫面指定位置為中間,因此實際為中間右上)
}
element [id=atom(welcomeshadow)]
{
foreground: rgb(49,81,181);
fontstyle: italic;
fontsize: rcint(44) pt;
fontweight: bold;
padding: rect(2rp,3rp,20rp,0); #指定歡迎文字陰影增加空間為左2上3右20下0
contentalign: topright; 顯示出來的效果為向右2向下3偏移的陰影
}
element[id=atom(help)]
{
fontsize: rcint(45) pt;
padding: rect(81rp,81rp,0,0);
contentalign: wrapright; #設置登入登出訊息顯示位置為智能向右靠齊
}
</style>



5.右畫面
右畫面覆蓋在中間畫面的右半部,包括中間分隔線.使用者顯示窗口及其控制滑桿.

<style resid=rightpanelss>
element
{
background: argb(0,0,0,0);
}
element [id=atom(divider)]
{
background: rcbmp(124,6,#FF00FF,0,0,1,0); #設置中間分隔線圖片
}
scrollbar [vertical] #設置窗口滑桿為垂直顯示
{
layoutpos: nineright; #設置窗口滑桿位置在右畫面以九宮格配置的右邊
background: rgb(115,146,231);
}
viewer
{
layoutpos: nineclient; #設置窗口位置在右畫面以九宮格配置的中央
}
thumb
{
background: rcbmp(111,6,#FF00FF,0,0,1,0);
borderthickness: rect(3,3,3,3); #設置窗口滑桿有3pix細框
}
repeatbutton [id=atom(lineup)]
{
content: rcbmp(110,3,-1,sysmetric(20),sysmetric(20),0,0); #設置滑桿向上圖片
}
repeatbutton [id=atom(linedown)]
{
content: rcbmp(109,3,-1,sysmetric(20),sysmetric(20),0,0); #設置滑桿向下圖片
}
</style>



6.使用者顯示窗口(以鼠標操作時)
使用者顯示窗口在鼠標進入窗口熱區時,各元件顯示設置,包括使用者帳戶.名稱.頭像及其系統目前運行狀態


<style resid=hotaccountlistss>
element
{
background: argb(0,0,0,0);
fontface: rcstr(3);
}
selector
{
padding: rect(0rp,26rp,5rp,26rp); #設置鼠標進入熱區時,使用者窗口增加上26右2下26pix的空間
}
logonaccount
{
cursor: hand;
foreground: rgb(239,247,255);
background: rgb(90,126,220);
animation: alpha | log | fast; #鼠標進入熱區時使用者帳戶呈現快速透明動畫效果
alpha:96; #鼠標進入熱區後各使用者帳戶以透明度96顯示(0~255)
}
logonaccount [logonstate=1] #帳戶人登入時的動畫顯示設定
{
animation: rectangle | s | mediumfast;
cursor: arrow;
alpha:255;
}
logonaccount [mousewithin] #鼠標指向個別帳戶時的狀態
{
cursor: hand;

alpha:255;
}
logonaccount [selected] #鼠標選取個別帳戶時的狀態
{
cursor: hand;

alpha:255;
}
element [id=atom(userpane)] #帳戶背景
{
padding: rect(2rp,2rp,14rp,2rp);
borderthickness: rect(5,5,0,5); #指定帳戶背景外框粗細
bordercolor: rgb(90,126,220); #指定帳戶背景外框顏色
fontsize: rcint(45) pt;
}
element [id=atom(userpane)][selected]
{
background: rcbmp(112,6,#FF00FF,0,0,1,0); #帳戶背景在鼠標選取時顯示圖片112
}

logonaccount [selected]
{
alpha: 255;
}
element [id=atom(pictureframe)] #設置帳戶頭像底圖
{
background: rcbmp(113,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0, 7rp,0); #設置帳戶頭像底圖右側距離帳戶名及密碼7pix
}
element [id=atom(pictureframe)] [mousefocused] #設置鼠標指向帳戶頭像時的效果
{
background: rcbmp(119,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
alpha: 255;
}
element [id=atom(pictureframe)] [selected] #設置鼠標按下帳戶頭像時的效果
{
background: rcbmp(119,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
alpha: 255;
}
element [id=atom(username)]
{
foreground: rgb(239,247,255);
contentalign: endellipsis; #設置帳戶名向左對齊,帳戶名後加空白直到最後,以讓密碼從下一行開始顯示
}
button [class="status"] #以下為使用者系統狀態(例如:有幾個程式正在運行)各項顯示設置
{
background: argb(0,0,0,0);
foreground: rgb(0,48,156);
fontsize: rcint(46) pt;
fontweight: bold;
}
button [class="status"][mousefocused]
{
fontstyle: underline;
}
button [class="status"][keyfocused]
{
fontstyle: underline;
}
button [class="status"][selected]
{
foreground: rgb(239,247,255);
fontsize: rcint(46) pt;
fontweight: bold;
}

</style>



7.使用者顯示窗口(以鍵盤操作時)
本處設置和6相同,只是少了一些鼠標效果,不再贅述.

<style resid=accountlistss>
element
{
background: argb(0,0,0,0);
fontface: rcstr(3);
}
selector
{
padding: rect(0rp,26rp,5rp,26rp);
}
logonaccount
{
cursor: hand;
animation: alpha | log | fast;
background: rgb(90,126,220);
}
logonaccount [logonstate=1]
{
animation: rectangle | s | mediumfast;
cursor: arrow;
}
element [id=atom(userpane)]
{
padding: rect(2rp,2rp,14rp,2rp);
borderthickness: rect(5,5,0,5);
bordercolor: rgb(90,126,220);
fontsize: rcint(45) pt;
}
element [id=atom(userpane)][selected]
{
background: rcbmp(112,6,#FF00FF,0,0,1,0);
}
element [id=atom(pictureframe)]
{
background: rcbmp(113,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
}
element [id=atom(username)]
{
foreground: rgb(239,247,255);
contentalign: endellipsis;
}
button [class="status"]
{
background: argb(0,0,0,0);
foreground: rgb(0,48,156);
fontsize: rcint(46) pt;
fontweight: bold;
contentalign: wrapleft;
}
button [class="status"][mousefocused]
{
fontstyle: underline;
}
button [class="status"][keyfocused]
{
fontstyle: underline;
}
button [class="status"][selected]
{
foreground: rgb(239,247,255);
fontsize: rcint(46) pt;
fontweight: bold;
}
</style>



8.帳戶密碼區
此段腳本碼定義了密碼輸入框,輸入框訊息,進入及密碼提示按鍵

<style resid=passwordpaness>
element
{
background: argb(0,0,0,0);
}
element [id=atom(passwordpanelayer)]
{
padding: rect(71rp,0,0,0); #設置密碼區左方71pix空白,避免和帳戶頭像重疊
}
element [id=atom(instruct)] #設置密碼輸入框上面的文字(此例為Type Your Password)
{
fontface: rcstr(48);
fontsize: rcint(47) pt;
foreground: white;
padding: rect(3rp,0,0,3rp);
}
edit [id=atom(password)] #輸入密碼框的各項設置
{
background: rcbmp(102,6,#FF00FF,0,0,1,0);
borderthickness: rect(3,3,5,5);
passwordcharacter: 9679; #輸入密碼時顯示出來的字元代號
fontface: "arial";
fontsize: 16pt;
}
button [id=atom(go)] #設置密碼右方的進入按鍵
{
margin: rect(5rp,0,0,0);
content: rcbmp(103,3,-1,26rp,26rp,0,0);
padding: rect(0rp,1rp,0,1rp);
}
button [id=atom(go)][keyfocused] #按下進入按鍵時
{
content: rcbmp(104,3,-1,26rp,26rp,0,0);
}
button [id=atom(info)] #設置密碼提示按鍵
{
margin: rect(5rp,0,0,0);
content: rcbmp(105,3,-1,28rp,28rp,0,0);
}
button [id=atom(info)][keyfocused] #設置密碼提示按鍵按下時圖片
{
content: rcbmp(106,3,-1,28rp,28rp,0,0);
}
element [id=atom(keyboard)] #設置輸入密碼時的顯示
{
cursor: arrow;
margin: rect(5rp,0,0,0);
}
</style>



9.窗口滑桿
此段腳本碼以5.右畫面的滑桿為基礎,加入了定義滑桿的各項動作參數(避免更動)

<style resid=scroller>

scrollbar
{
layoutpos: ninebottom;
}

scrollbar [vertical]
{
layoutpos: nineright;
}

viewer
{
layoutpos: nineclient;
}

thumb
{
background: dtb(handlemap(1), 3, 1);
content: dtb(handlemap(1), 9, 1);
contentalign: middlecenter;
}

thumb [mousefocused]
{
background: dtb(handlemap(1), 3, 2);
content: dtb(handlemap(1), 9, 2);
}

thumb [captured]
{
background: dtb(handlemap(1), 3, 3);
content: dtb(handlemap(1), 9, 3);
}

repeatbutton [id=atom(lineup)]
{
background: dtb(handlemap(1), 1, 1);
width: sysmetric(2);
height: sysmetric(20);
}

repeatbutton [id=atom(lineup)][mousefocused]
{
background: dtb(handlemap(1), 1, 2);
}

repeatbutton [id=atom(lineup)][pressed]
{
background: dtb(handlemap(1), 1, 3);
}

repeatbutton [id=atom(linedown)]
{
background: dtb(handlemap(1), 1, 5);
width: sysmetric(2);
height: sysmetric(20);
}

repeatbutton [id=atom(linedown)][mousefocused]
{
background: dtb(handlemap(1), 1, 6);
}

repeatbutton [id=atom(linedown)][pressed]
{
background: dtb(handlemap(1), 1, 7);
}

repeatbutton [id=atom(pageup)]
{
background: dtb(handlemap(1), 7, 1);
}

repeatbutton [id=atom(pageup)][mousefocused]
{
background: dtb(handlemap(1), 7, 2);
}

repeatbutton [id=atom(pageup)][pressed]
{
background: dtb(handlemap(1), 7, 3);
}

repeatbutton [id=atom(pagedown)]
{
background: dtb(handlemap(1), 6, 1);
}

repeatbutton [id=atom(pagedown)][mousefocused]
{
background: dtb(handlemap(1), 6, 2);
}

repeatbutton [id=atom(pagedown)][pressed]
{
background: dtb(handlemap(1), 6, 3);
}

</style>

----------------------------------------------------------------------------------------------

(2)各元件動作時機及顯示設定部份
這一部份就是登錄界面執行動作的腳本碼,以上面各項元件的定義作基礎,設定整個界面運行時的佈局分配及事件觸發時機.

以下分為三部解說.

<logonframe...>起始,</logonframe>結尾
這裡規範整個動作腳本的畫面佈局及分配,以上面定義元件1~5的部份,作動作指定及執行.

<logonaccount...>起始,</logonaccount>結尾
這一段執行腳本碼配合上面定義元件6.7.9部份,對帳戶窗口內的各元件作佈局及指定動作.

<element resid=passwordpanel...>起始,</element>結束
這一段執行腳本碼配合上面定義元件8部份,對帳戶密碼及附屬元件作佈局及指定動作



下面是這三段腳本碼的個別解說.

<logonframe resid=main sheet=styleref(framess) layout=borderlayout()>

<element sheet=styleref(toppanelss) layout=borderlayout() layoutpos=top height=80rp> #執行時上畫面位於畫面頂端,高度80
<element layoutpos=bottom height=2rp/> #執行時上畫面分隔線位於上畫面底部,高度2
</element>

<element sheet=styleref(bottompanelss) layout=borderlayout() layoutpos=bottom> #執行時下畫面位於畫面底部,不設高度,由下方元件判斷
<element layoutpos=top height=2rp/> #執行時下畫面分隔線位於下畫面頂端,高度2
<element layout=borderlayout() layoutpos=client> #設定執行下畫面時功能定義的各元件空間距離
<element layout=borderlayout() layoutpos=left> #安排下面的關機按鍵排列在下畫面的左側
<button layout=borderlayout() layoutpos=top accessible=true accRole=43 accName=rcstr(11)> #設定關機按鍵為可執行,位在上方,顯示文字
<element layoutpos=left content=rcbmp(107,3,-1,26rp,26rp,0,0) /> #指定關機按鍵圖片及寬26高26
<element layoutpos=client margin=rect(2rp,0,0,0)/> #關機文字左方設定2pix空間
</button>
<button layout=borderlayout() layoutpos=top margin=rect(0,2rp,0,0) accessible=true accRole=43 accName=rcstr(14)> #退出鍵同關機鍵
<element layoutpos=left content=rcbmp(108,3,-1,26rp,26rp,0,0)/>
<element layoutpos=client margin=rect(2rp,0,0,0)/>
</button>
</element>
<element layoutpos=right content=rcstr(25) width=325rp/> #訊息文字,置於右方,由右算起325pix開始顯示
</element>
</element>

<element layout=flowlayout(1,3,2,3) layoutpos=client content=rcbmp(100,0,0,219rp,207rp,1,0)> #設定中畫面圖片,磚塊排列置中,寬高度
<element sheet=styleref(leftpanelss) layout=filllayout() layoutpos=left> #左畫面填充模式,置左
<element layout=verticalflowlayout(0,3,3,2)> #logo組件垂直排列(指下面的product.help)
<element contentalign=topright padding=rect(0rp,0rp,20rp,20rp) content=rcbmp(123,3,-1,137,86,0,0) background=rgb(90,126,220)/>
<element contentalign=wrapright width=384rp padding=rect(0rp,0rp,40rp,0rp)/> #登入出訊息由中間算起384開始顯示,並加右方40的空間距離
</element>
<element layout=verticalflowlayout(0,0,0,2) > #歡迎訊息組件(包括Welcome及陰影)以填充模式(填Welcome文字)垂直排列
<element layout=filllayout() width=384rp> #填充寬度384
<element content=rcstr(7)/> #填充文字陰影依字串值7內容顯示(此例為Welcome)
<element content=rcstr(7)/>
</element>
</element>
</element>

<element sheet=styleref(rightpanelss) layout=borderlayout() layoutpos=left width=384rp> #右畫面以外框模式置左,寬度384
<element layoutpos=left width=1rp/> #中央分隔置於右畫面左側,寬度1
<scrollviewer sheet=styleref(scroller) layoutpos=client xscrollable=false margin=rect(26rp,0rp,0rp,0rp)> #帳戶視窗滑桿不需要時不顯示
<selector sheet=styleref(accountlistss) layout=verticalflowlayout(0,3,3,2)/> #帳戶名單垂直排列
</scrollviewer>
</element>

</element>

</logonframe>



<logonaccount resid=accountitem layout=filllayout() accessible=true accRole=43> #設定使用者帳戶為可執行
<element layout=borderlayout() height=80rp> #每個帳戶所佔高度80
<element layout=borderlayout() layoutpos=top> #帳戶底圖位置
<element layout=flowlayout(0,2,2) layoutpos=left width=58rp height=58rp> #帳戶頭像底圖寬高
<element />
</element>
<element layoutpos=top/> #帳戶名稱位置
<button layoutpos=none/> #使用者系統狀態顯示位置不作設定(依元件定義運行)
<button layoutpos=none/>
</element>
</element>
</logonaccount>


<element resid=passwordpanel sheet=styleref(passwordpaness) layout=borderlayout() height=80rp> #帳戶密碼組件高度
<element layout=borderlayout() layoutpos=bottom>
<edit layoutpos=left width=163rp/> #密碼框寬度
<element layoutpos=left/> #密碼輸入位置
<button layoutpos=left accessible=true accRole=43 accName= rcstr(100)/> #進入按鍵設置為可執行,按下時顯示字串值100
<button layoutpos=left accessible=true accRole=43 accName= rcstr(13)/> #密碼提示鍵設置為可執行,按下時顯示字串值13
</element>
<element layoutpos=bottom content=rcstr(6)/> #密碼框上方文字依字串值6顯示
</element>



結語:
對於這種字多圖少枯燥冗長的教程,我並不期待大家能夠一次就耐心看完,只希望大家把它作為資料庫,當你要自己修改製作XP登錄畫面,
需要對腳本碼有點瞭解時,能有地方可以參考.當然上面腳本碼其實還有一些是我一直試不出來的,例如關機按鍵rcbmp(107,3,-1,26rp,26rp,0,0),
這個參數-1的含義,所以再次期待有程式碼寫作經驗的網友給我指教,讓這基礎教程不要傳遞了錯誤的學習.