登录/注册后可看大图

整个脚本码粗浅可分二大区块:

1.前大半段以<style resid=......>起头,</style>结尾,共有九个小区块,我暂且称为组件定义区.

2.后小半段以<logonframe...>起始,到脚本码最后以</element>结束,其中再细分三个区块,我暂且称为脚本运行区.

脚本码的基本功能在于指定各区域对应的组件(文字.色块.图片.字符串值),并规范该组件动作方式及时机,显示区域,

因此各组件的数值定义和运行在二大区块中要互相对应配合,否则运行就会出错

一，常用修改部分

1. 修改背景颜色如见argb(0,0,0,0)可改为argb(99,118,149)等等;（rgb可用PS等软件查）

2. 修改图片参数如见rcbmp(128,7,#FF00FF,643rp,588rp,0,0)等等

①. 128 -> 图片编号

②. 7 -> 图片显示方式 -> 0(砖块排列),1(按你指定的长宽),6(扩展),7(32bit bmp图片)

③. #ff00ff -> 指定要透明的颜色

④. 643rp  -> 指定图片长度（rp一定要有）

⑤. 588rp  -> 指定图片宽度（rp一定要有）

⑥. 0 -> 0=使用指定长宽,1=使用图片长宽

⑦. 0 -> 0=不作变化,1=映射

还有下面的九宫格参数.大方向位置搞定后再辅以padding: rect(0rp,0rp,22rp,0)左,上,右,下,这类填空指令作偏移设定,取得想要的精确布局.位置九宫格代号参数脚本码中对于组件位置的指定和对齐,常   用的就是中(client)上(top)下(bottom)左(left)右(right)上右(topright)下左(bottomleft)...,

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>

element [id=atom(contentcontainer)]

{

background: rgb(90,126,220);

}

element [id=atom(contentcontainer)]

{

background: rcbmp(100,6,#FF00FF,0,0,1,0);

}

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所设定之字串值

}

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); <指定对下画面中的元件位置

}

此功能作用的元件包恬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设定显示

}

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); <这就是登陆按钮的位置设定，上下左右自己调节吧(第7部分对应也要修改成一样的，否则会出现按纽易位的现象)

}

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 <跟第6部分的一样，也是修改登陆按钮位置，务必2个位置偏移量保持一样

{

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

}

(二)各元件动作时机及显示设定部份

这一部份就是登录界面执行动作的脚本码,以上面各项元件的定义作基础,设定整个界面运行时的佈局分配及事件触发时机.

以下分為三部解说.

<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)> <设定中画面图片,砖块排列置中,宽高度（那个219rp,207rp其实就是背景图宽高，可以改为屏幕分辩率大小）

<element id=atom(leftpanel) sheet=styleref(leftpanelss) layout=filllayout() layoutpos=left> <左画面填充模式,置左

<element id=atom(logoarea) layout=verticalflowlayout(0,3,3,2)>

<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)/> [color=Orange#帐户名单垂直排列

</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显示