好久没有写点东西了,最近接到 Flex4 研发任务,flex 自带组件功能比较弱,都要自己扩展,不像 ext ,都是定义好的组件,90% 以上需要用到的组件都不需要自己动手,直接可以使用,但这样也有个好处,把发挥的空间留给研发和美工,现成的东西再好看多了也会有审美疲劳的,而且千遍一律,未必是好现象,也不利于自身的提高,我想这也是一部分人宁愿用类似 jquery 之类的轻量级的框架也不用 ext 的原因,当然也有加载速度等原因。
不扯了,写了个类似 fieldset 的小东西,希望可以给需要的一点帮助。
package test
{
import flash.geom.Point;
import mx.core.IVisualElement;
import spark.components.Label;
import spark.components.VGroup;
public class MyVGroup extends VGroup
{
public function MyVGroup()
{
super();
}
private var vgtitle:Label; // 标题控件
private var _title:String; // 设置标题变量
private var _pad:int; // 设置自定义容器中添加的子控件与边框的距离,上边距*2
private var _pos:int; // 设置标题相对容器的 x 坐标
override protected function createChildren():void {
super.createChildren();
if (!vgtitle) {
vgtitle = new Label();
vgtitle.text = title;
addElement(vgtitle);
}
}
override protected function measure():void {
super.measure();
pad = pad <= 0 ? 10 : pad;
// 增加容器的大小
measuredWidth += pad * 2;
measuredHeight += pad;
// 设置子控件距离边框的距离
paddingLeft = pad;
paddingTop = pad * 2;
paddingRight = pad;
paddingBottom = pad;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
// 清除自定义边框重画
graphics.clear();
super.updateDisplayList(unscaledWidth, unscaledHeight);
// 移动标题至目标位置
pos = pos <= 0 ? 18 : pos;
vgtitle.move(pos, 0);
//根据标题位置画出边框位置
graphics.lineStyle(1, 0x000000, 1.0);
graphics.moveTo(vgtitle.x - 2, vgtitle.height/2);
graphics.lineTo(0, vgtitle.height/2);
graphics.lineTo(0, unscaledHeight);
graphics.lineTo(unscaledWidth, unscaledHeight);
graphics.lineTo(unscaledWidth, vgtitle.height/2);
graphics.lineTo(vgtitle.x + vgtitle.width + 2, vgtitle.height/2);
}
public function get title():String {
return _title;
}
public function set title(value:String):void {
_title = value;
}
public function get pad():int {
return _pad;
}
public function set pad(value:int):void {
_pad = value;
}
public function get pos():int {
return _pos;
}
public function set pos(value:int):void {
_pos = value;
}
}
}
调用如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
xmlns:customgroup="test.*">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:VGroup>
<customgroup:MyVGroup title="文化程度">
<s:HGroup>
<s:CheckBox label="高中"/>
<s:CheckBox label="初中"/>
</s:HGroup>
<s:HGroup>
<s:CheckBox label="本科"/>
<s:CheckBox label="大专"/>
</s:HGroup>
<s:HGroup>
<s:CheckBox label="硕士"/>
<s:CheckBox label="博士"/>
</s:HGroup>
</customgroup:MyVGroup>
</s:VGroup>
</s:Application>
最后看看结果,大家觉得有什么要改进的可以一起讨论讨论:
- 大小: 10.2 KB
分享到:
相关推荐
Flex3自定义组件类似于Fieldset
用Ext自定义一个类似于Fieldset的组件,还有数据绑定昂,跟json数据的交互,和后台交互使用了URLLoader,很强大,之前在网上找了很多,没有找到,后来我师傅给我源码,这里跟大家分享一下,有用到的童鞋们可以参考...
MyJsp(html的fieldset使用 MyJsp(html的fieldset使用MyJsp(html的fieldset使用MyJsp(html的fieldset使用
Extjs fieldset两行两列布局
具体思路就不说了,比较常规,...用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think /*reset css*/ body{font-size:0.8em;letter-spacing:1px;font-family:\5fae\8f6f\96c5\9ed1;line-height:1.8em} div,h2,p,fieldset
jquery fieldset和legend标签代码是一款基于jQuery实现的简单的样式代码。
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5表单的应用 例4-6 fieldset
<fieldset id="annex1" style="width:800px"> <legend>SubTable 1 SubTable List Field1 Field2 Field3 ...
FieldSetView是一个Android自定义视图,它模仿HTML中的“ fieldset”标签。 下载 Gradle: 将以下内容添加到您的项目级别build.gradle中: allprojects { repositories { maven { url "https://jitpack.io" } }...
cmxform-fieldset
HTML中fieldset如何把界面上需要在一块的内容放到一个容器,即分组
可收放的HTML fieldset。 模仿MSDN的可收放Fieldset 。
JavaScript设置FieldSet展开与收缩实现代码。
fieldset标签定义说明.docx
js控制fieldset高度的代码
几乎被设计师遗忘了的标签fieldset legend
之前HTML没有好好学,导致以前看到控件组样式感觉很新奇,fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段,接下来对HTML中fieldset标签的使用进行详细解读,感兴趣的朋友可以了解下,或许对你有所帮助
ExtJS的FieldSet的column列布局,需要的朋友可以参考下。
Fieldset使用React Contex,这会影响性能,因此请确保您的数据和字段树确实如此复杂,以至于需要<Fieldset> 。 无论如何,一开始不要尝试使用它。 :check_mark_button: 如果满足以下条件,则可能需要它: 您确实...