# aardio 范例: 带显示密码按钮的复合密码框

```aardio
import fonts.fontAwesome
import win.ui;
/*DSG{{*/
var winform = win.form(text="带显示密码按钮的复合密码框";right=757;bottom=467)
winform.add(
revealablePassword={cls="plus";text="密码";left=54;top=216;right=247;bottom=242;align="right";border={bottom=1;color=0xFF808080};db=1;dl=1;editable=1;notify=1;paddingTop=5;password=1;textPadding={right=24;bottom=1};z=1}
)
/*}}*/

//初始化可切换显隐状态的密码框
var setupPasswordReveal = function(editPlus){
	
	//在 editPlus 控件内部动态添加图标按钮。addCtrl 方法的参数表如果直接包含 cls 字段则创建并返回单个控件
	var btnReveal = editPlus.addCtrl(
		cls="plus";
		width=24;marginRight=0;marginBottom=2; 
		iconText = '\uF023'/*锁图标*/; //'\uF070'/*带斜杠的眼睛图标*/; 
		iconStyle={
			align="right";font=LOGFONT(h=-15;name='FontAwesome');padding={top=3}
		}
	)
	
	//配置图标样式	
	btnReveal.skin({
		color = {
			default = 0xC0000000;
			hover = 0xFFFF0000;
			active = 0xFF00FF00;
		};
		checked = {
			iconText = '\uF06E'; // 切换为眼睛图标，Unicode 转义字符必须放在单引号内。
		}
	})
	
	btnReveal.onMouseClick = function(){
    	editPlus.passwordChar = !owner.checked ? "*" : null;
	}	
	
	return editPlus;
}

setupPasswordReveal( winform.revealablePassword );

winform.show() 
win.loopMessage();
```