28、自定义代码与用户体验优化

自定义代码与用户体验优化

1. 自定义登录表单组件与自定义事件

1.1 自定义登录表单组件现状

自定义的 LoginForm 组件在当前状态下表现良好，它可以创建表单、验证提交的数据，还允许对验证进行一定程度的自定义，并且会设置公共的电子邮件和密码变量，以便通过组件实例作为属性使用。然而，目前的操作需要两步：
1. 用户点击登录按钮。
2. 必须点击另一个按钮来检索验证后的数据。

1.2 自定义事件的引入

为了让登录按钮的操作直接反映在主应用窗口中，同时避免封装性差的问题，我们可以使用自定义事件。自定义事件的原理是自定义组件创建自己的事件，并在适当的时候触发。主应用文件可以在自定义组件的实例上监听和处理这些自定义事件。

1.3 自定义事件的实现步骤

1. 在自定义组件的 MXML 文件中添加元数据块，声明自定义事件：

<fx:Metadata>
[Event(name="loginButtonClick", type="flash.events.Event")]
</fx:Metadata>

2. 在 handleLogin() 函数中，在为电子邮件和密码变量赋值后，触发事件：

dispatchEvent(new Event('loginB