Home > FLEX > Image + ProgressBar

Image + ProgressBar

Bardzo lubię technologie Adobe Flex gdyż można w niej pisać naprawdę szybko programy. Na przykład – potrzebuję indykatora postępu podczas ładowania obrazka. Mogę to zrobić w następujący sposób. Tworzę klasę pochodną od klasy odpowiedzialnej za wyświetlanie obrazka i definiuję metody przechwytujące zdarzenia postępu ładowania i wgrania całego obrazka. Łączę to z komponentem wyświetlania paska postępu i już. Wygląda to tak:

public class ImageWithProgressbar extends Image
{
  public function ImageWithProgressbar()
  {
    super();
  }
  
  private var _progressBar:ProgressBar;
  
  override protected function createChildren():void {
    super.createChildren();
    addEventListener(ProgressEvent.PROGRESS, progressHandler);
    addEventListener(Event.COMPLETE, completeHandler);
    _progressBar = new ProgressBar();
    _progressBar.mode = ProgressBarMode.MANUAL;
    _progressBar.percentWidth = 100;
    _progressBar.setStyle("horizontalCenter", "0");
    _progressBar.setStyle("verticalCenter", "0");
    addChild(_progressBar);
    _progressBar.visible = false;
    
  }
  
  private function progressHandler(e:ProgressEvent):void {
    _progressBar.setProgress(e.bytesLoaded,e.bytesTotal);
    _progressBar.visible = e.bytesLoaded < e.bytesTotal;
  }
  
  private function completeHandler(e:Event):void {
    _progressBar.visible = false;
  }
}

W efekcie otrzymuję klasę – która umożliwia wstawianie obrazków z paskiem postępu wyświetlanym podczas ładowania.

Categories: FLEX Tags:
  1. January 22nd, 2009 at 21:04 | #1

    Wspanialy komponent, sam bym napisala ale jak juz znalazlem :)

    p.s.
    ScaledCanvas tez super rzecz.

    pochwale sie – napisalem ostatnio RountedBox do definiowania zaookraglen kazdego rogu na boxie :)

  2. January 22nd, 2009 at 21:04 | #2

    *napisal :D

  1. No trackbacks yet.

Subscribe without commenting