自定义Spark FormItem外观

Spark Form容器的一个新特性就是支持Layout,因此我们很容易实现整个Form的水平布局,这是MX Form容器无法实现的。但在这种布局下,如果发生验证错误,子容器往往会超出整个表单。

默认下,如果发生验证错误,Flex会在出现问题的组件周围绘制红色线框,当用户移动到其上方时,会显示错误信息。这对MX组件及Spark组件都适用,但有一个例外,Spark Form容器的错误信息会出现在Form容器帮助区域,而不必移到组件的指针。虽然这种体验更好,但如果Spark Form容器的宽度固定,错误字符串又很长的话,会导致布局混乱。怎么解决这一问题呢?

第一种方法给表单添加一个滚动条,另一种更好的方法就是自定义Spark FormItem外观,使用ToolTip风格的错误外观。因为ToolTip是弹出来的,不占用空间。

具体步骤很简单:在Flex SDK的安装目录下找到FormItemSkin.mxml,复制更名后,在源码中设置contentGroup的showErrorTip=”true”,删掉errorTextDisplay和indicatorDisplay外观就行了,请参看源码。

点击此处查看本实例的效果,点击此处下载本实例的源码。

在本实例中,我们既使用了Spark Form容器的新布局,又还原使用了ToolTip风格的错误外观,节约了版面。

发表评论