添加自定义 UI 组件作为面板标题图标(应该很容易,我是个新手)

发布于 08-16 23:29 字数 2869 浏览 4 评论 0原文

这个概念看起来很简单,但我很难正确理解它,并且找不到任何可以帮助我的东西。

我有一个面板需要执行拖放操作,但我只想在用户将鼠标放在面板的特定区域上时执行该操作。我可以通过这样做向面板添加一个图标:

[Embed("/img/icon.png")]
[Bindable]
public var dragIcon:Class;

newPanel.titleIcon = dragIcon;

但我真正想要添加的是一个框,然后我可以将侦听器添加到其中以进行拖动和鼠标按下,就像我在 ActionScript 中创建的一些画布上所做的那样,那么又

var tempBox:Box = new Box;
tempBox.x=0;
tempBox.y=0;
tempBox.width = 20;
tempBox.height = 44;
tempBox.setStyle("horizontalAlign","center");
tempBox.setStyle("verticalAlign","middle");
tempBox.addEventListener(MouseEvent.ROLL_OVER,over);
tempBox.addEventListener(MouseEvent.ROLL_OUT,out);
tempBox.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownAnswer);
var tempImg:Image = new Image();
tempImg.source = grabbableItem;
tempBox.addChild(tempImg);
myCanvas.addChild(tempBox);

怎样呢?我需要做什么才能使用该 tempBox 并将其转换为一个类以用作我的面板标题图标?

编辑 2009 年 12 月 29 日: 因此,我想出了一些扩展面板类(如下所示)的方法,但实际上所做的只是用我可以公开访问的内容覆盖图标。我确信有更好的出路,对吗?

package custClass
{
    import mx.containers.Box;
    import mx.containers.Panel;
    import mx.controls.Image;

    public class DragPanel extends Panel
    {
        [Bindable] public var iconBox:Box = new Box();

        [Embed("../img/doc_page.png")] [Bindable] public var grabbableItem:Class;

        public function DragPanel()
        {
            super();
        }
        override protected function createChildren():void{
            super.createChildren();

            iconBox.x = 10
            iconBox.y = 4
            iconBox.width = 20;
            iconBox.height = 20;
            iconBox.setStyle("horizontalAlign","center");
            iconBox.setStyle("verticalAlign","middle");
            iconBox.setStyle("borderStyle","solid");
            iconBox.setStyle("backgroundColor",0x000000);
            var tempImg:Image = new Image();
            tempImg.source = grabbableItem;
            iconBox.addChild(tempImg);
            this.rawChildren.addChild(iconBox);
        }
    }
}

编辑 1/7/10(或根据我的 Windows 手机短信为 16): 使用下面的 Chaims 帮助是我的新答案。

像 Chaim 所说的那样创建一个 box mxml 组件,但还要向其中添加以下脚本块。

<mx:Script>
        <![CDATA[
            import mx.core.Application;
            [Embed("/img/doc_page.png")]
            [Bindable]
            public var grabbableItem:Class;

            public function init():void{
                this.addEventListener(MouseEvent.MOUSE_DOWN,Application.application.mouseDownSection);
                this.addEventListener(MouseEvent.ROLL_OVER,Application.application.over);
                this.addEventListener(MouseEvent.ROLL_OUT,Application.application.out);
            }
        ]]>
    </mx:Script>

这会在将用作我的图标的 Box 上添加我想要的所有事件侦听器。现在只需将框添加为图标即可。

panel.titleIcon = DraggableBox;

我想因为它是一个单独的 mxml 组件,所以它现在是一个类,尽管我认为我不明白为什么。

The concept of this seems easy, but I'm having trouble getting it right and can't find anything to help me on this.

I have a panel I need to perform a drag and drop operation on, but I only want to perform that if the user mouses down on a particular area of the panel. I can add an Icon to the panel by doing this:

[Embed("/img/icon.png")]
[Bindable]
public var dragIcon:Class;

newPanel.titleIcon = dragIcon;

But what I really want to add is a box, which I can then add my listeners to for the drag and mouse down like I do on some canvases created in actionscript like so

var tempBox:Box = new Box;
tempBox.x=0;
tempBox.y=0;
tempBox.width = 20;
tempBox.height = 44;
tempBox.setStyle("horizontalAlign","center");
tempBox.setStyle("verticalAlign","middle");
tempBox.addEventListener(MouseEvent.ROLL_OVER,over);
tempBox.addEventListener(MouseEvent.ROLL_OUT,out);
tempBox.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownAnswer);
var tempImg:Image = new Image();
tempImg.source = grabbableItem;
tempBox.addChild(tempImg);
myCanvas.addChild(tempBox);

So what do I need to do to use that tempBox and turn it into a class to be used as my panels titleIcon?

Edit 12/29/09:
So I came up with something where I'm extending the panel class (shown below) but all this is really doing is covering up the icon with something I can access publicly. I'm sure there's a better way out there right?

package custClass
{
    import mx.containers.Box;
    import mx.containers.Panel;
    import mx.controls.Image;

    public class DragPanel extends Panel
    {
        [Bindable] public var iconBox:Box = new Box();

        [Embed("../img/doc_page.png")] [Bindable] public var grabbableItem:Class;

        public function DragPanel()
        {
            super();
        }
        override protected function createChildren():void{
            super.createChildren();

            iconBox.x = 10
            iconBox.y = 4
            iconBox.width = 20;
            iconBox.height = 20;
            iconBox.setStyle("horizontalAlign","center");
            iconBox.setStyle("verticalAlign","middle");
            iconBox.setStyle("borderStyle","solid");
            iconBox.setStyle("backgroundColor",0x000000);
            var tempImg:Image = new Image();
            tempImg.source = grabbableItem;
            iconBox.addChild(tempImg);
            this.rawChildren.addChild(iconBox);
        }
    }
}

EDIT 1/7/10 (or 16 according to my windows mobile phones text messages):
Using Chaims help from below here is my new answer.

Create a box mxml component like Chaim says but also add the following script block to it.

<mx:Script>
        <![CDATA[
            import mx.core.Application;
            [Embed("/img/doc_page.png")]
            [Bindable]
            public var grabbableItem:Class;

            public function init():void{
                this.addEventListener(MouseEvent.MOUSE_DOWN,Application.application.mouseDownSection);
                this.addEventListener(MouseEvent.ROLL_OVER,Application.application.over);
                this.addEventListener(MouseEvent.ROLL_OUT,Application.application.out);
            }
        ]]>
    </mx:Script>

This adds in all the event listeners I want on the Box that will be used as my icon. Now just add the box as an Icon and it's good to go.

panel.titleIcon = DraggableBox;

I guess since it's a separate mxml component it is now a class, though I don't think I understand why.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

云胡2024-08-23 23:29:53

Panel期望titleIcon属性值是一个IFactory并自己创建一个实例。

将您的框设为一个组件(将其命名为 DraggableBox.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml"
    x="0" y="0" width="20" height="44"
    horizontalAlign="center" verticalAlign="middle">
    <mx:Image source="{grabbableItem}"/>
</mx:Box>

并将其分配给 titleIcon:

<mx:Panel titleIcon="{DraggableBox}" >
...
</mx:Panel>

如果您想在 ActionScript 中执行此操作,请使用 ClassFactory:

panel.titleIcon = new ClassFactory(DraggableBox);

The Panel expecting titleIcon property value to be a IFactory and create an instance by himself.

Make your box a component (lets name it DraggableBox.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml"
    x="0" y="0" width="20" height="44"
    horizontalAlign="center" verticalAlign="middle">
    <mx:Image source="{grabbableItem}"/>
</mx:Box>

And assign it to titleIcon:

<mx:Panel titleIcon="{DraggableBox}" >
...
</mx:Panel>

If you want do it in ActionScript use ClassFactory:

panel.titleIcon = new ClassFactory(DraggableBox);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文