LMJ's Blog...

很多人製作登入畫面都使用Logon Studio或是ChameleonXP這類的軟體製作
但是這類的軟體只是換換圖片 顏色 與文字而已

要做出更多變化的登入畫面 就必須修改UIFILE
但是UIFILE並不像一般程式一樣好懂
並須要有人"開導"

以下將原版的 Windows XP 登入畫面
來當例子解析

---

一般登入畫面大部分都分為兩部份
一部分為<style resid=......>開頭與</style>結尾 大部分的元件 都是在這些地方控制
另一部分為<logonframe...>開頭與</element>結束 負責整體畫面與一些基本物件(例如:關機按鈕)

大部分的登入畫面在製作時 會先分區 原版的Windows XP登入畫面也不例外



上圖中 總共分為四區
第一區為toppanelss 就是登入畫面上面那塊藍的
在過來是中間的區塊 "統稱"framess
下面那塊為bottompanelss

其中framess中分為兩個 一個為leftpanelss 另一個是rightpanelss
分別放置不同的物件 顧名思義 將這兩個的東西交換 登入的元件 就會左右顛倒 Windows XP圖會在右邊

至於程式中的background:rcbmp(127,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=映射

---

UIFILE解說

1.toppanelss

<style resid=toppanelss>
element
{
background: argb(0,0,0,0);
}
element [id=atom(toppanel)]
{
background: rgb(0,48,156); #指定toppanelss內容為RGB色碼0,48,156的顏色
}
element [id=atom(divider)]
{
background: rcbmp(125,6,#FF00FF,0,0,1,0); #指定toppanelss與framess中間的分隔線 中間的圖片為編號125
}
</style>

2.framess

<style resid=framess>
element
{
background: argb(0,0,0,0);
}
element [id=atom(contentcontainer)]
{
background: rgb(90,126,220); #指定中間背景顏色為90,126,220
}
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>

3.leftpanelss

<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>

4.rightpanelss

<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>

5.hotaccountlistss 使用者登入區塊(當滑鼠移過)

<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>

6.accountlistss 使用者登入區塊(當鍵盤操作時)

<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>

7.passwordpaness 登入帳戶密碼

<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>

---

logonframe...解說

分為三部分如下...

<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>