Изображения искр в списке искр с TileLayout исчезают при прокрутке и перетаскиваются в приложении Flex - PullRequest
0 голосов
/ 01 июля 2011

У меня есть средство визуализации, которое выглядит следующим образом:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true">
    <s:Group width="160" toolTip="{data.toolTip}" doubleClickEnabled="true">
        <s:layout>
            <s:VerticalLayout gap="5" horizontalAlign="center"
                              paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2"/>
        </s:layout>
        <mx:Canvas width="156" height="156" borderStyle="solid" borderColor="#AAAAAA"
                   verticalScrollPolicy="off" horizontalScrollPolicy="off">
            <mx:Image id="image" source="{data.thumbnail}" width="{data.thumbwidth}" height="{data.thumbheight}"
                      horizontalCenter="0" verticalCenter="0"/>
        </mx:Canvas>
        <s:Label text="{data.data.name}" maxDisplayedLines="2" textAlign="center" 
                 width="100%"/>
    </s:Group>
</s:ItemRenderer>

В списке, который выглядит следующим образом

<s:List id="fileIconView"
    dataProvider="{files}"
    width="100%" height="100%"
    borderVisible="false"
    dragEnabled="true" 
    allowMultipleSelection="true" 
    doubleClickEnabled="true"
    mouseDown="fileIconViewMouseDown(event)"
    mouseMove="fileIconViewMouseMove(event)"
    mouseUp="clearSelectionRectangle()"
    change="fileSelectionChanged()"
    itemRenderer="view.ThumbnailRenderer">
    <s:layout>
        <s:TileLayout clipAndEnableScrolling="true" />
    </s:layout>
</s:List>

При прокрутке изображения в моем списке исчезают.Как я могу это исправить?

То же самое происходит, когда я перетаскиваю один из них, но я исправил это (частично), воссоздав список после завершения или отмены перетаскивания.11 июля 2011 г., 14:02 EST Объект данных, отправляемый в средство визуализации, выглядит следующим образом

[Bindable]
public class FileWrapper
{
    /** file that wrapper holds, File, OnlineDocument and SymbolicLinks */
    public var data:*;

    /** file size */
    public var size:String;

    /** file's author */
    public var author:String;

    /** file's created date */
    public var date:String;

    /** tooltip for the file  */
    public var toolTip:String;

    /** image */
    public var img:String;

    /** thumbnail source */
    public var thumbnail:Object;

    /** width of thumbnail image */
    public var thumbwidth:int;

    /** height of thumbnail image */
    public var thumbheight:int;

    /** folder with mime type icons */
    public const MIME_ICONS_FOLDER:String = "fileexplorer/mimeTypeIcons/";

    public function FileWrapper(file:*, controller:FileExplorerController)
    {
        this.data = file;

        if (file is File) {
            var f:File = file as File;
            this.size = NumberUtils.humanReadableBytes(f.latestRevision.sizeOnDisk);
            this.author = f.latestRevision.author.displayName;
            this.date = NumberUtils.formatDate(f.latestRevision.timeUploaded);
            this.toolTip = f.name + "\n" +"Size: " + this.size
                + "\n" + "Type: " + f.latestRevision.mimeType;
            this.img = MIME_ICONS_FOLDER+getMimeTypeIcon(f.latestRevision.mimeType);

            var self:FileWrapper = this;
            controller.getThumbnail(f.latestRevision,
                function (tumbnailBitmap:Object):void
                {
                    self.thumbnail = tumbnailBitmap;
                    self.thumbwidth = tumbnailBitmap.width;
                    self.thumbheight = tumbnailBitmap.height;
                });
        }
        else if(file is OnlineDocument) {
            this.toolTip = file.name + "\nOnline Document";
            this.img = MIME_ICONS_FOLDER+"OnlineDocument.png";
        }
        else if(file is SymbolicFileLink) {
            this.toolTip = file.name + "\nShortcut";
            this.img = MIME_ICONS_FOLDER+"System-Shortcut-icon.png";
        }
        else {
            this.size = "";
            this.author = "";
            this.date = "";
            this.toolTip = "Unknown File Type";
            this.img = MIME_ICONS_FOLDER+"Unknown.png";
        }
        this.thumbnail = this.img;
        this.thumbwidth = 32;
        this.thumbheight = 32;
    }

    /**
     * Gets the icon image for the given mime type
     * 
     * @param mime type string
     * @return image name string
     */
    protected static function getMimeTypeIcon(mimeType:String):String
    {
        switch (mimeType) {
            case "application/msword":
                return "File-doc.png";
            case "application/octet-stream":
                return "System-binary.png";
            case "application/ogg":
                return "Audio-ogg.png";
            case "application/pdf":
                return "File-pdf.png";
            case "application/vnd.ms-excel":
                return "File-xls.png";
            case "application/vnd.ms-powerpoint":
                return "File-ppt.png";
            case "application/x-bzip2":
                return "Archive-zip.png";
            case "application/x-gtar":
                return "Archive-tar.png";
            case "application/x-gzip":
                return "Archive-gzip.png";
            case "application/x-tar":
                return "Archive-tar.png";
            case "application/xhtml+xml":
                return "File-html.png";
            case "application/zip":
                return "Archive-zip.png";
            case "audio/x-mpegurl":
                return "Audio-mp3.png";
            case "audio/mpeg":
                return "Audio-mp3.png";
            case "audio/x-aiff":
                return "Audio-aiff.png";
            case "audio/x-wav":
                return "Audio-wav.png";
            case "image/bmp":
                return "Image-bmp.png";
            case "image/gif":
                return "Image-gif.png";
            case "image/jpeg":
                return "Image-jpg.png";
            case "image/png":
                return "Image-png.png";
            case "image/tiff":
                return "Image-bmp.png";
            case "text/html":
                return "File-html.png";
            case "text/plain":
                return "File-txt.png";
            case "application/vnd.oasis.opendocument.presentation":
                return "Presentation.png";
            case "application/vnd.oasis.opendocument.spreadsheet":
                return "Spreadsheet.png";
            case "application/vnd.oasis.opendocument.text":
            case "text/richtext":
                return "Text.png";
            case "text/xml":
                return "Text.png";
            case "video/mpeg":
                return "Video-mpeg.png";
            case "video/quicktime":
                return "Video-movie.png";
            case "video/vnd.mpegurl":
                return "Video-mpeg.png";
            case "video/x-msvideo":
                return "Video-avi.png";
            case "video/x-sgi-movie":
                return "Video-movie.png";
            default:
                return "System-default.png";
        }
    }
}

Метод controller.getThumbnail просто вызывает этот метод модели

public function getThumbnail(revision:Revision, callBack:Function):void
{
    // only for image revisions
    if (revision.mimeType.indexOf("image") > -1) {
        var loader:Loader = new Loader();
        // create request
        var urlVars:URLVariables = new URLVariables();
        urlVars.authToken = userAccountModel.token;
        urlVars.id = revision.id;
        var req:URLRequest = new URLRequest(THUMBNAIL_URL);
        req.data = urlVars;

        var context:LoaderContext = new LoaderContext(true);
        loader.load(req, context);
        // set load handler
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
            function(event:Event):void
            {
                callBack(event.currentTarget.content);
            });
    }
}

Загрузка миниатюр с использованием этого метода работает отлично.Проблема возникает при прокрутке списка.

1 Ответ

1 голос
/ 11 июля 2011

Мое первое подозрение, когда я вижу что-то подобное, это проблема "useVirtualLayout".Подводя итог, можно использовать повторно средство визуализации, когда значение useVirtualLayout установлено в значение по умолчанию.Когда средство визуализации повторно используется, оно может решить, что данные на самом деле не изменились, и будет неправильно отображать такие вещи, как изображения.

Два решения, которые я использовал для обеспечения точного рендеринга: Во-первых, поверните useVirtualLayout в false,Это предотвращает повторное использование рендерера.Во-вторых, переопределите функцию set data и создайте собственные закрытые переменные для хранения отображаемых данных.Это также позволит вам легче отлаживать настройку данных и обеспечивать правильную настройку данных при каждом использовании / повторном использовании средства визуализации.

Одна последняя заметка.Это может быть совершенно не связано, но я заметил, что эта проблема возникала реже после обновления до Flash Player 10.3.

...