One of the first decisions that you must make when creating custom components is deciding whether to write
them in MXML or in ActionScript. Ultimately, it is the requirements of your application that determine how you
develop your custom component.
Some basic guidelines include the following:

•MXML components and ActionScript components both define new ActionScript classes.
•Almost anything that you can do in a custom ActionScript custom component, you can also do in a custom MXML component. However, for simple components, such as components that modify the behavior of an existing component or add a basic feature to an existing component, it is simpler and faster to create them in MXML.
•When your new component is a composite component that contains other components, and you can express the positions and sizes of those other components using one of the Flex layout containers, you should use MXML to define your component.
•To modify the behavior of the component, such as the way a container lays out its children, use ActionScript.
•To create a visual component by creating a subclass from UIComponent, use ActionScript.
•To create a nonvisual component, such as a formatter, validator, or effect, use ActionScript.
•To add logging support to your control, use ActionScript. For more information, see “Logging” on page 227 in Building and Deploying Adobe Flex 3 Applications.

Flex3 官方文档中如上释疑. 2010年我参加Flex Developer Day时, 有开发者提问国内是否有大型企业应用实例? 未得到正面回答. 倒是群硕的团队还上台张扬了一把, 他们的项目大约是奥运时CCTV直播网站.

其实即便国内有大型的企业应用, 也不一定能获得足够价值的经验.

07年底开始做的教育应用, 大致有120W行代码, 其中有60%+的为AS代码, 除了入口文件及部分复杂UI使用MXML之外, 清一色都是AS代码, 所有的UI都小心谨慎的创建, 销毁. 在10年的DevDay时, 坐在我旁边的某研发他们也是纯AS.

几年过去了, Flex贡献给了Apache, Flex也已经4.6了, 接触的代码多了, 习惯了清纯的AS代码, 当满篇都是MXML标签时, 我不淡定了.

思想斗争良久, 到底孰优孰劣? 在多数common的情况下, 几乎不分上下. 我觉得AS代码更优雅更易读, 可人家说了: 我们可以Design, 不用代码, 一眼就看出来了…:(

如上View, 假如我们只用MXML或只用AS来实现, 似乎看不出明显差异来, 其实相比选择编程方式, 可能对组件/Class的划分可能更加重要.

不论用MXML还是AS, Class设计好更加关键:

1.1.1 可以设计成一个Common的组件;

1.1 可以作为一个组合的UserList

2.1/2.2  作为显示用户基本信息的组件;

这样划分, 不论MXML还是AS都可以很好的降低耦合, 更可重用, 但不论如何, 我还是喜欢干净的AS代码.

----------Post from: @LiGuoliang.com, 欢迎回来~----------

You can check the local storage setting for current domain by right click, or check all setting from Control Panel>FlashPlayer, additionally, you can manage all settings by this: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager07.html

Flashplayer need the user configure this setting manually, but some times we want change the setting automatically, especially for some enterprise application, like E-Learning, Banking, HIS.

Currently, I did not found any API or workaround to change the local storage automatically

I just write a small tool to check the local storage setting directly, >>Link<<
(you may download and upload this swf to your server if needed)

/**
	 * Check local storage setting.
	 */
	protected function checkLocalStorage(event:MouseEvent):void
	{
		var sharedObjectForTest:SharedObject = SharedObject.getLocal("sharedObjectTest", "/");

		sharedObjectForTest.addEventListener(NetStatusEvent.NET_STATUS, onSharedObjectEvent);
		sharedObjectForTest.data.result = "OK";
		try
		{
			var result:String = sharedObjectForTest.flush();
			if(result == SharedObjectFlushStatus.FLUSHED) {
				traceLog("OK, and currect size is: " + sharedObjectForTest.size);
			}else {
				traceLog("Failed, and the Flashplayer security setting panel is shown.");
			}
		}
		catch(error:Error)
		{
			traceLog("Error, and show the seeting panel manually;");
			Security.showSettings(SecurityPanel.LOCAL_STORAGE);
		}
	}

----------Post from: @LiGuoliang.com, 欢迎回来~----------

由于之前采购过不同版本的FB, 具体序列号对应版本早已记不清楚, 于是微博上@了几个专家, 尚未收到任何答复的情况下直接拨打Adobe的客服:

中国10800 744 0438（通过联通），或 10800 440 0421（通过电信）[http://shop.adobe.com/store/adbehcn/Content/pbPage.faq]

报出序列号之后客服耐心回答了版本跟授权的问题.

从4.0升级到4.5大致需要415RMB, 从4.5到4.6是不需要费用的, 明年回来就有4.6可用了….

----------Post from: @LiGuoliang.com, 欢迎回来~----------

<XeSex sexIDElement='MID'> <SexID> M </SexID> <Name> Male </Name> <Active> y </Active> <Code> M </Code> </XeSex>

Attitude:  sexIDElement = ‘MID’;
Element: Name = Male

trace(xmlTest.hasOwnProperty('@sexIDElement')); // check if the attribute exists trace(xmlTest.hasOwnProperty('Name')); // check if the element exists

BTW, About: XML Elements vs. Attributes

----------Post from: @LiGuoliang.com, 欢迎回来~----------

<s:Button enabled=”isDirty() && canSaveNow()” />

在build的时候遇到错误:

org.xml.sax.SAXParseException :The entity name must immediately follow the ‘&’ in the entity reference

Google了一下, XML解析的问题, 解决方法:

&& 替换为:  [&amp;&amp;]

<s:Button enabled=”isDirty() &amp;&amp; canSaveNow()” />

----------Post from: @LiGuoliang.com, 欢迎回来~----------

And this datagrid is editable ,  we can modify username directly, by default, Flex will use TextInput as the item editor.

I want to display some error mesg in a datagrid ItemEditor when use input is invalidate.

Using Alert – not good enough

So I add a listener to the item edit complete Event:

	/**
	 * validate user input, revert the original value if necessary.
	 */
	protected function datagirdTest_itemEditEndHandler(event:DataGridEvent):void {
		if(event.dataField != "Name") { // chech the field;
			return;
		}
		var input:String = (datagirdTest.itemEditorInstance as TextInput).text; // get the user input data.
		if(input == null || input == "") {
			event.preventDefault(); // prevent default behavior
			(datagirdTest.itemEditorInstance as TextInput).text = (event.itemRenderer.data as XML).Name;// Undo: revert the original data by the selected item.
			Alert.show(errorMesg);
			return;
		}
	}

It can work correctly, but our client think we should not change user input directly. so I comment off the undo line:

	/**
	 * validate user input, revert the original value if necessary.
	 */
	protected function datagirdTest_itemEditEndHandler(event:DataGridEvent):void {
		if(event.dataField != "Name") { // chech the field;
			return;
		}
		var input:String = (datagirdTest.itemEditorInstance as TextInput).text; // get the user input data.
		if(input == null || input == "") {
			event.preventDefault(); // prevent default behavior
			//HERE: (datagirdTest.itemEditorInstance as TextInput).text = (event.itemRenderer.data as XML).Name;// Undo: revert the original data by the selected item.
			Alert.show(errorMesg);
			return;
		}
	}

Unfortunately, because of ‘Alert’, itemEditComplete Event will dispatch many times, so there’ll be many alert in the UI.

Using Error message in item editor – can not work correctly

So, I want to display the error message in the item editor , like this:

and here is the handler:

	/**
	 * validate user input.
	 */
	protected function datagirdTest_itemEditEndHandler(event:DataGridEvent):void {
		if(event.dataField != "Name") { // check the field;
			return;
		}

		var editor:TextInput = datagirdTest.itemEditorInstance as TextInput;
		var input:String = editor.text; // get the user input data.
		if(input == null || input == "") {
			// event.preventDefault(); // prevent default behavior
			event.stopImmediatePropagation();
			editor.errorString = "User name cannot be empty!";
			trace("Error");
			// datagirdTest.destroyItemEditor();
		}else {
			editor.errorString = null;
		}
	}

Now I can display the error mesg as the above screen capture, but if the user want to reload the data or sort the column, the editor will stay there until I call datagrid.destroyItemEditor(), but:

“This method closes an item editor currently open on an item renderer. You typically only call this method from within the event listener for the itemEditEnd event, after you have already called the preventDefault() method to prevent the default event listener from executing.” http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/DataGrid.html#destroyItemEditor()

so, How can I display the error message in this way?

----------Post from: @LiGuoliang.com, 欢迎回来~----------

该UIComponent高度一定, 宽度设置为percent(也就是说宽度可以变化), 当Add一个内部组件到该UI上后, UI需要更多高度, 但高度一定, 只好出现右侧滚动条(默认的ScrollPolicy为auto), 假使被增加组件的宽度与外部组件宽度一致, 此时由于滚动条的出现, 外部UI不能直接完整显示该组件, 于是出现水平滚动条,.

Flex API中有关内容: Sizing components http://livedocs.adobe.com/flex/3/html/help.html?content=size_position_3.html

参考: Using Scroll bars一章:

Notice that the addition of the scroll bar doesn’t increase the height of the container from its initial value. Flex considers scroll bars in its sizing calculations only if you explicitly set the scroll policy to

ScrollPolicy.ON. So, if you use an auto scroll policy (the default), the scroll bar overlaps the buttons. To prevent this behavior, you can set the

heightproperty for the HBox container or allow the HBox container to resize by setting a percentage-based width. Remember that changing the height of the HBox container causes other components in your application to move and resize according to their own sizing rules.

解决方案比较清晰, 要么设置ScrollPoliocy为No, 要么调整宽高设置. 为了清晰演示, 写了个小Application:

Flex3TestWeb_ScrollPolicy

----------Post from: @LiGuoliang.com, 欢迎回来~----------

Solution: Handle the ‘itemEditEnd’ Event dispatched by the datagrid.

Codes:

	/**
	 * validate user input, revert the original value if necessary.
	 */
	protected function datagirdTest_itemEditEndHandler(event:DataGridEvent):void {
		if(event.dataField != "Name") { // chech the field;
			return;
		}
		var input:String = (datagirdTest.itemEditorInstance as TextInput).text; // get the user input data.
		if(input == null || input == "") {
			event.preventDefault(); // prevent default behavior
			// var filed:String = (datagirdTest.columns[event.columnIndex] as DataGridColumn).editorDataField;
			// trace(datagirdTest.itemEditorInstance[filed]);
			(datagirdTest.itemEditorInstance as TextInput).text = (event.itemRenderer.data as XML).Name;// Undo: revert the original data by the selected item.
			Alert.show(errorMesg);
			return;
		}
	}

Screen caputre:

User input is empty, we got the Event, prevent the default behavior, and revert the value form the modeling.

Ref:

1. itemEditEnd called multiple times http://forums.adobe.com/message/2459209
2. Using cell editing events  – http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_7.html

----------Post from: @LiGuoliang.com, 欢迎回来~----------

Link: http://liguoliang.com/pub/utils/FlashFontStyleViewer.html

Code:

// handle click, get the info, and generate Labels.
		protected function buttonPreview_clickHandler(event:MouseEvent):void {
			var textFontFamilyRaw:String = textFontFamily.text == null ? "" : StringUtils.trim(textFontFamily.text);
			if(StringUtils.isWhiteSpace(textFontFamilyRaw)) {
				Alert.show("Please input some font-family");
				return;
			}

			var arrayFontFamily:Array = textFontFamilyRaw.split("\n");
			var textDisplay:String = textToView.text;
			if(textDisplay == null || StringUtils.isEmptyString(textDisplay)) {
				textDisplay = "Flex上海用户组";
			}
			var fontSize:int = comboBoxFontSize.selectedItem as int;

			showPreview(arrayFontFamily, fontSize,textDisplay, checkBoxIsBold.selected);

		}

		// For each font-family, create a Label and set style, add all labels on stage.
		private function showPreview(arrayFontFamily:Array, fontSize:int = 12, text:String="Flex上海用户组", isBold:Boolean= false):void {
			vGroupLabels.removeAllElements();
			for each(var fontFamily:String in arrayFontFamily) {
				var label:Label = new Label();
				label.text = text + "[" + fontFamily + " - " + fontSize + "pt]";
				label.setStyle(FlexConstants.STYLE_FONT_FAMILY, fontFamily);
				label.setStyle(FlexConstants.STYLE_FONT_SIZE, fontSize);
				if(isBold) {
					label.setStyle(FlexConstants.STYLE_FONT_WEIGHT, "bold");
					label.text += "  - Bold";
				}
				vGroupLabels.addElement(label);
			}
		}

----------Post from: @LiGuoliang.com, 欢迎回来~----------

Flex Doc Team Blog 推荐: Chrome浏览器下AS文档的搜索插件, ‘as3 + 空格键’ 输入关键字后激发选项, 方便易用.

>>ActionScript 3.0 Search plugin homepage<<

This extension integrates with the Chrome omnibox to bring ActionScript 3.0 standard library API autocompletion right to your fingertips. To use, type “as3″, followed by a space or tab, followed by your query. The first time you use the extension, there may be some delay, as the class index is retrieved and cached. On subsequent uses, however, you should see instantaneous autocompletions. Selecting a completion or fully typing a class name and then pressing enter will take you directly to the relevant documentation. If a completion cannot be found, several search suggestions will be provided, including using the Adobe Community Help search function, using Google Codesearch, and using the Development and Coding Search custom search engine. If you experience any issues with this extension, please use the bug tracker given below.

== Chrome Omnibox Search Extensions for Developers==
If you like this extension, you might also like the other omnibox search extensions given at the following link:
http://code.google.com/p/developer-omniboxes-for-chrome/

----------Post from: @LiGuoliang.com, 欢迎回来~----------