模板
教程
環境
性能
功能
管理
Windows XP系統登錄界面腳本修改秘籍
若是要作出較富變化的登錄界面,則需對UIFILE腳本手動作些搬移及大弧度的修改,目前較常見的就是仿MAC登錄界面.
有鑒于網絡上認識Logonui腳本數據的缺乏,在此提供個人對該腳本的粗淺經驗,或許其中有些個人誤解,期望有程序代碼寫作經驗的網友不吝指正,所有網友
共同研討糾正錯誤,以免本人部份不正確的理解誤導了網友的觀念.
本篇解說以基本XP登錄腳本為范本,仿MAC登錄界面的腳本則待日后另文實例剖析.
腳本碼概述
整個腳本碼粗淺可分二大區塊:
1.前大半段以 結尾,共有九個小區塊,我暫且稱為組件定義區.
2.后小半段以
腳本碼的基本功能在于指定各區域對應的組件(文字.色塊.圖片.字符串值),并規范該組件動作方式及時機,顯示區域,
因此各組件的數值定義和運行在二大區塊中要互相對應配合,否則運行就會出錯.
下面是常用的一些定義參數,就我的使用經驗提出參考
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
(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=hotaclearcase/" target="_blank" >ccountlistss>
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><!-- / message -->
-- 作者：store88
-- 發布時間：2005-11-10 23:58:17
--
(2)各組件動作時機及顯示設定部份
這一部份就是登錄界面執行動作的腳本碼,以上面各項組件的定義作基礎,設定整個界面運行時的布局分配及事件觸發時機.
以下分為三部解說.
<logonframe...>起始,</logonframe>結尾
這里規范整個動作腳本的畫面布局及分配,以上面定義組件1~5的部份,作動作指定及執行.
<logonaccount...>起始,</logonaccount>結尾
這一段執行腳本碼配合上面定義組件6.7.9部份,對賬戶窗口內的各組件作布局及指定動作.
<element resid=passwordpanel...>起始,</element>結束
這一段執行腳本碼配合上面定義組件8部份,對賬戶密碼及附屬組件作布局及指定動作
下面是這三段腳本碼的個別解說.
<logonframe resid=main id=atom(frame) sheet=styleref(framess) layout=borderlayout()>
<element id=atom(toppanel) sheet=styleref(toppanelss) layout=borderlayout() layoutpos=top height=80rp> #執行時上畫面位于畫面頂端,高度80
<element id=atom(divider) layoutpos=bottom height=2rp/> #執行時上畫面分隔線位于上畫面底部,高度2
</element>
<element id=atom(bottompanel) sheet=styleref(bottompanelss) layout=borderlayout() layoutpos=bottom> #執行時下畫面位于畫面底部,不設高度,由下方組件判斷
<element id=atom(divider) layoutpos=top height=2rp/> #執行時下畫面分隔線位于下畫面頂端,高度2
<element id=atom(options) layout=borderlayout() layoutpos=client> #設定執行下畫面時功能定義的各組件空間距離
<element layout=borderlayout() layoutpos=left> #安排下面的關機按鍵排列在下畫面的左側
<button id=atom(power) 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 id=atom(label) layoutpos=client margin=rect(2rp,0,0,0)/> #關機文字左方設定2pix空間
</button>
<button id=atom(undock) 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 id=atom(label) layoutpos=client margin=rect(2rp,0,0,0)/>
</button>
</element>
<element id=atom(instruct) layoutpos=right content=rcstr(25) width=325rp/> #消息正文,置于右方,由右算起325pix開始顯示
</element>
</element>
<element id=atom(contentcontainer) layout=flowlayout(1,3,2,3) layoutpos=client content=rcbmp(100,0,0,219rp,207rp,1,0)> #設定中畫面圖片,磚塊排列置中,寬高度
<element id=atom(leftpanel) sheet=styleref(leftpanelss) layout=filllayout() layoutpos=left> #左畫面填充模式,置左
<element id=atom(logoarea) layout=verticalflowlayout(0,3,3,2)> #logo組件垂直排列(指下面的product.help)
<element id=atom(product) contentalign=topright padding=rect(0rp,0rp,20rp,20rp) content=rcbmp(123,3,-1,137,86,0,0) background=rgb(90,126,220)/>
<element id=atom(help) contentalign=wrapright width=384rp padding=rect(0rp,0rp,40rp,0rp)/> #登入出訊息由中間算起384開始顯示,并加右方40的空間距離
</element>
<element id=atom(msgarea) layout=verticalflowlayout(0,0,0,2) > #歡迎訊息組件(包括Welcome及陰影)以填充模式(填Welcome文字)垂直排列
<element layout=filllayout() width=384rp> #填充寬度384
<element id=atom(welcomeshadow) content=rcstr(7)/> #填充文字陰影依字符串值7內容顯示(此例為Welcome)
<element id=atom(welcome) content=rcstr(7)/>
</element>
</element>
</element>
<element id=atom(rightpanel) sheet=styleref(rightpanelss) layout=borderlayout() layoutpos=left width=384rp> #右畫面以外框模式置左,寬度384
<element id=atom(divider) layoutpos=left width=1rp/> #中央分隔置于右畫面左側,寬度1
<scrollviewer id=atom(scroller) sheet=styleref(scroller) layoutpos=client xscrollable=false margin=rect(26rp,0rp,0rp,0rp)> #賬戶窗口滑桿不需要時不顯示
<selector id=atom(accountlist) sheet=styleref(accountlistss) layout=verticalflowlayout(0,3,3,2)/> #賬戶名單垂直排列
</scrollviewer>
</element>
</element>
</logonframe>
<logonaccount resid=accountitem id=atom(accountitem) layout=filllayout() accessible=true accRole=43> #設定使用者賬戶為可執行
<element id=atom(userpanelayer) layout=borderlayout() height=80rp> #每個賬戶所占高度80
<element id=atom(userpane) layout=borderlayout() layoutpos=top> #賬戶底圖位置
<element id=atom(pictureframe) layout=flowlayout(0,2,2) layoutpos=left width=58rp height=58rp> #賬戶頭像底圖寬高
<element id=atom(picture) />
</element>
<element id=atom(username) layoutpos=top/> #賬戶名稱位置
<button id=atom(status0) class="status" layoutpos=none/> #使用者系統狀態顯示位置不作設定(依組件定義運行)
<button id=atom(status1) class="status" layoutpos=none/>
</element>
</element>
</logonaccount>
<element resid=passwordpanel id=atom(passwordpanelayer) sheet=styleref(passwordpaness) layout=borderlayout() height=80rp> #賬戶密碼組件高度
<element layout=borderlayout() layoutpos=bottom>
<edit id=atom(password) layoutpos=left width=163rp/> #密碼框寬度
<element id=atom(keyboard) layoutpos=left/> #密碼輸入位置
<button id=atom(go) layoutpos=left accessible=true accRole=43 accName= rcstr(100)/> #進入按鍵設置為可執行,按下時顯示字符串值100
<button id=atom(info) layoutpos=left accessible=true accRole=43 accName= rcstr(13)/> #密碼提示鍵設置為可執行,按下時顯示字符串值13
</element>
<element id=atom(instruct) layoutpos=bottom content=rcstr(6)/> #密碼框上方文字依字符串值6顯示
</element>
結語:
對于這種字多圖少枯燥冗長的教程,我并不期待大家能夠一次就耐心看完,只希望大家把它作為數據庫,當你要自己修改制作XP登錄畫面,
需要對腳本碼有點了解時,能有地方可以參考.當然上面腳本碼其實還有一些是我一直試不出來的,例如關機按鍵rcbmp(107,3,-1,26rp,26rp,0,0),
這個參數-1的含義,所以再次期待有程序代碼寫作經驗的網友給我指教,讓這基礎教程不要傳遞了錯誤的學習.
