0

画像をローカル ファイル システムから TileList にロードする Flex Air (デスクトップ) アプリケーションを開発しています。ユーザーは、これらの画像をリストから別のコントロールにドラッグ (コピー) できます。

最終的に画像が正しく表示されるようになりました (TileList をスクロールしても消えません) が、ドラッグ操作の開始時に TileList から消えるようです。

私は .NET のバックグラウンドを持っており、AS3/Flex を学んでいるところです。ここで私がアンチパターンを使用しているのを見たら、遠慮なく指摘してください。

サンプル コードは次のとおりです (これをできるだけ最小限にしようとしました)。


テスト.mxml:

<?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">
    <fx:Script>
        <![CDATA[

            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            protected var _pics:ArrayCollection = new ArrayCollection();

            protected function picsList_creationCompleteHandler(event:FlexEvent):void
            {
                const imageFolderPath:String = "c:\\users\\bbrooks\\Pictures";

                var imageDir:File = new File(imageFolderPath);
                var imageFiles:Array = imageDir.getDirectoryListing();
                for each(var imageFile:File in imageFiles)
                {
                    _pics.addItem(new PictureObject(imageFile.nativePath));
                }

                // give images a chance to load
                var timer:Timer = new Timer(1000);
                timer.addEventListener(TimerEvent.TIMER, onTimerExpired);
                timer.start();
            }

            protected function onTimerExpired(event:TimerEvent):void
            {
                picsList.dataProvider = _pics;
            }

        ]]>
    </fx:Script>

    <mx:TileList id="picsList" x="0" y="0" width="100%" height="100%" dragEnabled="true" dragMoveEnabled="false"
                 creationComplete="picsList_creationCompleteHandler(event)" >
        <mx:itemRenderer>
            <fx:Component>
                <mx:Image width="75" height="75" source="{data.image}" />
            </fx:Component>
        </mx:itemRenderer>
    </mx:TileList>

</s:WindowedApplication>


PictureObject.as:

package
{
    import flash.display.Loader;
    import flash.display.LoaderInfo;
    import flash.events.Event;
    import flash.net.URLRequest;

    import mx.controls.Image;

    [Bindable]
    [RemoteClass]
    public class PictureObject extends Object
    {
        protected var _image:Image = null;
        public function get image():Image { return _image; }
        public function set image(newValue:Image):void { _image = newValue; }

        public function PictureObject(path:String)
        {
            var imageLoader:Loader = new Loader();
            imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
            imageLoader.load(new URLRequest(path));
        }

        protected function onImageLoaded(e:Event):void
        {
            var imageLoader:Loader = LoaderInfo(e.target).loader;
            var bmp:Bitmap = Bitmap(imageLoader.content);

            _image = new Image();           
            _image.smoothBitmapContent = true;
            _image.source = new Bitmap(bmp.bitmapData);
            _image.width = imageLoader.width;
            _image.height = imageLoader.height;
        }
    }
}
4

2 に答える 2

1

私は主にあなたの二次的な質問に答えます（一挙に主要なものを解決すると思います）：アンチパターンが進むにつれて、これは悪い例ではありません;）

  1. Imageクラスに読み込みが組み込まれている間に、手動で画像を読み込みます。プロパティに URL を指定するだけで、source自動的に読み込まれます。
  2. インスタンスを別のインスタンスImageのソースとして設定しています。プロパティは URL または ByteArrays を想定Imageしています。sourceエラーが発生しないことに驚いています。Image クラスはおそらくsource、他の Image インスタンスの を抽出するのに十分スマートです。
  3. はTimer冗長です。前述のように、 はImageそのコンテンツのロードを自動的に処理します。
  4. s:Imageタグは でラップされItemRendererていないため、プロパティにアクセスできません。dataこのコードはコンパイルすることさえできません。
  5. プロパティをバインドする予定がなければ、Bindableプロパティを持っていても意味がありません。_pics
  6. mx TileList を使用します。より「最新の」Spark バージョンを使用しないのはなぜですか? (これは mx クラスが Spark アプリケーションで動作しないという意味ではありません)。

そのため、やるべきことがたくさんあります。PictureObject クラスを完全に廃棄することができます。タイマー コードを削除します。URL 文字列を_picsコレクションに追加するだけです。プラスとして、mx TileList を TileLayout の Spark List に置き換えることもできます。このようなもの：

<s:List id="picsList">
    <s:layout>
        <s:TileLayout />
    </s:layout>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                <s:Image source="{data}" />
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

ActionScript 部分は次のように縮小できます。

const imageFolderPath:String = "c:\\users\\bbrooks\\Pictures";

var imageDir:File = new File(imageFolderPath);
var imageFiles:Array = imageDir.getDirectoryListing();
picsList.dataProvider = new ArrayCollection(imageFiles);
于 2012-05-11T22:35:53.073 に答える