Flex UI组建MinimalComps使用入门

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

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

[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] 测试的例子:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init(event)"
					   width="800" height="600">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>



	<fx:Script>
		<![CDATA[
			import com.bit101.charts.*;
			import com.bit101.components.*;
			import com.bit101.utils.MinimalConfigurator;

			import mx.controls.Alert;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;

			[Embed(source="assets/SIMFANG.TTF", embedAsCFF="false", fontName="SIMFANG", mimeType="application/x-font")]
			protected var RootFont:Class;

			protected function init(event:FlexEvent):void
			{
				var rootUI:UIComponent = new UIComponent;

				//style
				Style.fontSize = 11;
				Style.fontName = "SIMFANG";
				//使用用户段默认字体
				//Style.embedFonts = false;
				Style.BACKGROUND = 0x123456;


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

				//label / nputText
				new Label(panel, 20, 10, "1. 登入操作");
				new InputText(panel, 20, 30, "username");
				new InputText(panel, 20, 50, "password").password = true;

				//CheckBox
				new Label(panel, 20, 80, "2. 选择你喜欢的食物");
				new CheckBox(panel, 20, 100, "苹果!");
				new CheckBox(panel, 20, 120 ,"西瓜!");

				//ColorChooser
				new Label(panel, 20, 150, "3. 选择一种你喜欢的颜色");
				new ColorChooser(panel, 20, 170,0xeeeeee);

				//Text
				new Label(panel, 20, 200, "4. 个人简介:");
				new Text(panel, 20 ,220).height = 70;

				//RadioButton
				new Label(panel, 20, 310, "3. 是否同意上述规定?");
				new RadioButton(panel, 20, 330, "同意", false);
				new RadioButton(panel, 20, 350, "不同意", true);

				//PushButton
				new PushButton(panel, 20, 370, "提  交!", onButtonClickEvent);

				//Accordion
				new Accordion(panel, 300, 10);

				var calendar:Calendar = new Calendar(panel, 300, 150);
				calendar.setYearMonthDay(2011, 11, 11);
				Alert.show(calendar.selectedDate.toDateString());


				//charts
				new LineChart(panel, 300, 320, new Array(2, 8, 7, 9, 4));



				//HScrollBar
				new Knob(panel, 600, 10).value = 70;


				//window
				var w:Window = new Window(panel, 600, 100);
				new Label(w, 10, 10, "hello world");



				addElement(rootUI);
			}

			private function onButtonClickEvent(event:Event):void{
				trace("submit now");
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
</s:WindowedApplication>