如何在 Flex 中创建自定义的、可重用的对话框？

Question

我正在努力尝试在 Flex 中实现可重复使用的对话框。

所有对话框大小相同，使用艺术家绘制的图像作为背景。

标题和一些内容应该有一个空格。

所有对话框都将使用相同的嵌入字体作为标题，使用不同的嵌入字体作为内容。

由于某种原因，我无法理解 Flex/MXML/Skins 的处理方式。

这是我想要实现的一个示例： http://i.imgur.com/NaXIOlY.jpg

背景图片、特定字体和位置的标题以及内容位置。

编辑澄清： 对不起，我的问题不是更清楚。我确实知道如何创建弹出窗口和自定义组件。我遇到的麻烦是如何创建具有不同内容的不同对话框，但所有对话框都共享相同的背景，有一个标题位置，一个按钮区域等。我可以创建看起来像我想要的对话框，但是我必须为每个对话框复制代码，如果我想更改某些内容，我必须每隔一个对话框复制它。

Answer 1

您的问题非常笼统，因此这里有一个恢复的答案，可以让您全面了解您需要做什么。 创建一个 mxml 组件并使用 Adob​​e Flash Builder 的 Design View 构建布局。 为动态值添加[Bindable]变量，即：

<mx:Script>
        <![CDATA[
            [Bindable]
            public var title:String;

        ]]>
    </mx:Script>

    <mx:Label id="titleLbl" text="{title}"/>

要显示弹出窗口，请使用下面的 AS 代码：

var popup:YourMXML = YourMXML(PopUpManager.createPopUp(this,YourMXML,true));
popup.title = "Your title";
PopUpManager.centerPopUp(popup);

Answer 2

以下是创建自定义对话框的代码 我使两个标签中的text 都可绑定，这样我就可以将字符串文本分配给标题和消息，而不必担心是否创建了相应的组件。

详细了解data binding 和Bindable metadata tag，了解实际情况。

CustomDialog.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" backgroundImage="@Embed('y3jqqq5x.jpg')" backgroundSize="100%">
<mx:Script>
    <![CDATA[

        [Bindable]private var _title:String;
        [Bindable]private var _message:String;

        public function set title(value:String):void
        {
            _title = value;

        }

        public function set message(value:String):void
        {
            _message = value;
        }

    ]]>
</mx:Script>

    <mx:Label id="lblTitle" horizontalCenter="0" y="10" text="{_title}" fontSize="30"/>
    <mx:Label id="lblMsg" width="250" height="160" horizontalCenter="0" y="100" text="{_message}" fontSize="14"/>
</mx:Canvas>

使用下面的函数在你的 AS3 代码中像这样的地方创建自定义对话框

private function showAlert():void
        {
            var popup:CustomDialog = new CustomDialog();
            popup.title = "Title Goes Here";
            popup.message = "Content goes here."
            PopUpManager.addPopUp(popup, Application.application as DisplayObject, true);
            PopUpManager.centerPopUp(popup);
        }