Flex 学习之路之十八 panel面板对话框的使用

原创于 2017-10-13 16:42:07 发布 · 543 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何使用Adobe Flex创建自定义弹窗组件。通过两个实例展示了如何配置弹窗的样式、尺寸及位置，并提供了代码实现细节。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkSkinnablePopUpContainerInlineReuse.mxml -->
<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">
	<fx:Declarations>
		<s:SkinnablePopUpContainer id="alert">
			<s:Panel title="My Alert Panel">
				<s:VGroup width="100%" horizontalAlign="center"
						  paddingTop="20" gap="20">
					<s:Label text="Your custom alert box"/>
					<s:Button label="OK" click="alert.close();"/>
				</s:VGroup>
			</s:Panel>
		</s:SkinnablePopUpContainer>
	</fx:Declarations>
	<s:Button label="Open Alert" click="alert.open(this, false);"/>
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkSkinnablePopUpContainerMoveResize.mxml -->
<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">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.managers.PopUpManager;
			protected function button1_clickHandler(event:MouseEvent):void {
				// Create an instance of MyAlert.
				var alert:MyAlert = new MyAlert();
				alert.open(this, true);
				// Increase the width and height.
				alert.width += 100;
				alert.height += 100;
				// Center the pop-up in the parent container.
				PopUpManager.centerPopUp(alert);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:Component className="MyAlert">
			<s:SkinnablePopUpContainer>
				<s:Panel title="My Alert Panel" width="100%" height="100%">
					<s:VGroup width="100%" horizontalAlign="center"
							  paddingTop="20" gap="20">
						<s:Label text="Your custom alert box"/>
						<s:Button label="OK" click="close();"/>
					</s:VGroup>
				</s:Panel>
			</s:SkinnablePopUpContainer>
		</fx:Component>
	</fx:Declarations>
	<s:Button label="Open Alert SMG" click="button1_clickHandler(event);"/>
</s:Application>

标签