2.4 组件案例

【例2-19】实现用户注册页面前端效果。

1.创建文件夹

在UI2目录下新建一个文件夹，命名为“example2-19”。

2.创建文件

在文件夹下创建两个文件，分别是example2-19.w和detail.w。

3.example2-19文件实现步骤

1）添加组件：添加组件，在scrollView组件中添加input组件，select组件下拉专业名称，checkBox组件表示“应届生”，两个radio组件表示性别，button组件表示注册按钮，output组件显示信息，添加toggle组件、messageDialog组件，界面如图2-19所示。

图2-19 未注册页面

2）关联数据：windowDiolag组件的scr属性关联detail.w。

3）注册按钮button组件的js代码。

注册按钮代码，判断表示性别的radio组件的值，赋值给一个变量，数据表新建一条数据，将前台页面填写的信息保存，判断表示应届生的checkBox组件的值，将对应值保存到当前行信息，用widowDialog组件的open()方法打开页面detail.w，并将姓名传送出去。toggle组件onChange事件是用来判断toggle组件的当前选定值，若符合要求，将在output组件中输出信息。用户注册运行结果如图2-20所示。

4.detail.w文件实现步骤

1）添加组件：detail.w页面添加windowReceiver组件接收消息，添加output组件输出信息。

图2-20 用户注册页面

2）windowReceiver组件onReceive事件：

windowReceiver组件的onReceiver()方法接收数据，用output组件输出。运行结果如图2-21所示。

图2-21 注册成功页面