Flex UI组建MinimalComps使用入门

阅读更多

[1] 官方: http://www.minimalcomps.com/

[2] 作者bolg: http://www.bit-101.com/blog/

[3] 下面的例子使用的开发环境为Flex4.5

                var rootUI:UIComponent = new UIComponent;

		var panel:Panel = new Panel(rootUI, 0, 0);
		panel.setSize(width, height);
		panel.showGrid = true;
		panel.gridSize = 3;

                addElement(rootUI);

大体的使用格式为  new 组件(父组件,可选的参数,可选的响应事件);
父组件: 存放该组件
可选的参数: 多为x,y轴的位置
可选的响应事件: 多为点击事件

因为使用Flex4.5,无法直接在场景上addChild(),所以必须要在把组件添加到UIComponent中,再在场景中显示该UIComponent(如上).

[Embed(source="assets/SIMFANG.TTF", embedAsCFF="false", fontName="SIMFANG", mimeType="application/x-font")]
			protected var RootFont:Class;
protected function init(event:FlexEvent):void
			{
				
				//style
				Style.fontSize = 11;
				Style.fontName = "SIMFANG";
				//使用用户段默认字体
				//Style.embedFonts = false;
                                Style.BACKGROUND = 0x123456;
}

MinimalComps提供了一些常用的样式供用户修改,格式为:
Style.样式名 = 值;

另外要说的是MinimalComps自带的字体不支持中文,所以如果要使用中文必须得对默认的样式做下修改.

取消对字体的应用,使用用户段默认字体
Style.embedFonts = false;

或者,使用自定义字体(如上).



[4] 测试的例子: