Flash CS4 Kaynakları

Örnek: Dosya yükleme ve indirme



FileIO örneği, Flash Player uygulamasında dosya indirme ve yükleme tekniklerini gösterir. Bu teknikler şunlardır:

  • Kullanıcının bilgisayarına dosyaları indirme

  • Kullanıcının bilgisayarından bir sunucuya dosyaları yükleme

  • Devam etmekte olan bir indirme işlemini iptal etme

  • Devam etmekte olan bir yükleme işlemini iptal etme

Bu örneğin uygulama dosyalarını indirmek için www.adobe.com/go/learn_programmingAS3samples_flash_tr adresini ziyaret edin. FileIO uygulama dosyalarını Samples/FileIO klasöründe bulabilirsiniz. Uygulama aşağıdaki dosyaları içerir:

Dosya

Açıklama

FileIO.fla

veya

FileIO.mxml

Flash (FLA) veya Flex (MXML) içindeki ana uygulama dosyası.

com/example/programmingas3/fileio/FileDownload.as

Sunucudan dosya indirme yöntemlerini içeren bir sınıf.

com/example/programmingas3/fileio/FileUpload.as

Sunucuya dosya yükleme yöntemlerini içeren bir sınıf.

FileIO uygulamasına genel bakış

FileIO uygulaması, kullanıcının Flash Player uygulamasını kullanarak dosya yüklemesine veya indirmesine olanak sağlayan kullanıcı arabirimini içerir. Bu uygulama ilk olarak, com.example.programmingas3.fileio paketinde bulunabilen birkaç özel bileşeni (FileUpload ve FileDownload) tanımlar. Her özel bileşen contentComplete olayını gönderdikten sonra, bileşenin init() yöntemi çağrılır ve bu yöntem, kullanıcıların dosyanın yükleme veya indirme ilerlemesini görmesine ya da devam etmekte olan dosya aktarımını iptal etmesine olanak sağlayan ProgressBar ve Button bileşen örneği başvurularını iletir.

FileIO.mxml dosyasındaki ilgili kod şöyledir (Flash sürümünde, FLA dosyasının sahne alanına yerleştirilen ve adları, bu adımda açıklanan Flex bileşenlerinin adlarıyla eşleşen bileşenleri içerdiğini unutmayın):

<example:FileUpload id="fileUpload" creationComplete="fileUpload.init(uploadProgress, cancelUpload);" /> 
<example:FileDownload id="fileDownload" creationComplete="fileDownload.init(downloadProgress, cancelDownload);" />

Aşağıdaki kod, bir ilerleme çubuğu ve iki düğme içeren Dosya Yükle panelini gösterir. Birinci düğme olan startUpload, FileReference.browse() yöntemini çağıran FileUpload.startUpload() yöntemini çağırır. Aşağıdaki kod parçası, Dosya Yükle panelinin kodunu gösterir:

<mx:Panel title="Upload File" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> 
    <mx:ProgressBar id="uploadProgress" label="" mode="manual" /> 
    <mx:ControlBar horizontalAlign="right"> 
        <mx:Button id="startUpload" label="Upload..." click="fileUpload.startUpload();" /> 
        <mx:Button id="cancelUpload" label="Cancel" click="fileUpload.cancelUpload();" enabled="false" /> 
    </mx:ControlBar> 
</mx:Panel>

Bu kod, Sahne Alanı'na bir ProgressBar bileşeni örneği ve iki Button bileşeni düğme örnekleri yerleştirir. Kullanıcı Yükle düğmesini tıklattığında (startUpload), kullanıcının uzak sunucuya yüklemek üzere bir dosya seçmesine olanak sağlayan bir işletim sistemi iletişim kutusu başlatılır. Kullanıcı dosya yüklemesini başlattığında düğme etkin hale gelip kullanıcının istediği zaman dosya aktarımını durdurmasına olanak sağlasa da, diğer düğme cancelUpload, varsayılan olarak devre dışı bırakılır.

Dosya İndir panelinin kodu şöyledir:

<mx:Panel title="Download File" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> 
    <mx:ProgressBar id="downloadProgress" label="" mode="manual" /> 
    <mx:ControlBar horizontalAlign="right"> 
        <mx:Button id="startDownload" label="Download..." click="fileDownload.startDownload();" /> 
        <mx:Button id="cancelDownload" label="Cancel" click="fileDownload.cancelDownload();" enabled="false" /> 
    </mx:ControlBar> 
</mx:Panel>

Bu kod, dosya yükleme koduna çok benzer. Kullanıcı, İndir düğmesini (startDownload) tıklattığında, FileDownload.DOWNLOAD_URL değişkeninde belirtilen dosyanın indirilmesini başlatan FileDownload.startDownload() yöntemi çağrılır. Dosya indirilirken ilerleme çubuğu güncellenerek dosyanın yüzde kaçının indirilmiş olduğunu gösterir. Kullanıcı, devam etmekte olan dosya indirme işlemini hemen durduran cancelDownload düğmesini tıklatarak herhangi bir noktada indirmeyi iptal edebilir.

Uzak sunucudan dosyaları indirme

Uzak sunucudan dosya indirme işlemi, flash.net.FileReference sınıfı ve özel com.example.programmingas3.fileio.FileDownload sınıfı tarafından işlenir. Kullanıcı, İndir düğmesini tıklattığında, Flash Player uygulaması, FileDownload sınıfının DOWNLOAD_URL değişkeninde belirtilen dosyayı indirmeye başlar.

Aşağıdaki kodun gösterdiği gibi, FileDownload sınıfı, com.example.programmingas3.fileio paketindeki dört değişkeni tanımlayarak işleme başlar:

    /** 
     * Hard-code the URL of file to download to user's computer. 
     */ 
    private const DOWNLOAD_URL:String = "http://www.yourdomain.com/file_to_download.zip"; 
 
    /** 
     * Create a FileReference instance to handle the file download. 
     */ 
    private var fr:FileReference; 
 
    /** 
     * Define reference to the download ProgressBar component. 
     */ 
    private var pb:ProgressBar; 
 
    /** 
     * Define reference to the "Cancel" button which will immediately stop 
     * the current download in progress. 
     */ 
    private var btn:Button;

Birinci değişken olan DOWNLOAD_URL, kullanıcı, ana uygulama dosyasında İndir düğmesini tıklattığında kullanıcının bilgisayarına indirilen dosyanın yolunu içerir.

İkinci değişken olan fr, FileDownload.init() yöntemi içinde başlatılan ve uzak dosyanın kullanıcının bilgisayarına indirilmesini işleyen bir FileReference nesnesidir.

Son iki değişken olan pb ve btn, FileDownload.init() yöntemi tarafından başlatılan, Sahne Alanı'ndaki ProgressBar ve Button bileşen örneklerinin başvurularını içerir.

FileDownload bileşenini başlatma

FileDownload bileşeni, FileDownload sınıfında init() yöntemi çağrılarak başlatılır. Bu yöntem iki parametre alır: sırayla ProgressBar ve Button bileşen örnekleri olan pb ve btn.

init() yönteminin kodu şöyledir:

    /** 
     * Set references to the components, and add listeners for the OPEN,  
     * PROGRESS, and COMPLETE events. 
     */ 
    public function init(pb:ProgressBar, btn:Button):void 
    { 
        // Set up the references to the progress bar and cancel button, 
        // which are passed from the calling script. 
        this.pb = pb; 
        this.btn = btn; 
 
        fr = new FileReference(); 
        fr.addEventListener(Event.OPEN, openHandler); 
        fr.addEventListener(ProgressEvent.PROGRESS, progressHandler); 
        fr.addEventListener(Event.COMPLETE, completeHandler); 
    }

Dosya indirmeyi başlatma

Kullanıcı Sahne Alanı'nda Download Button bileşen örneğini tıklattığında, startDownload() yöntemi dosya indirme işlemini başlatır. Aşağıdaki alıntı, startDownload() yöntemini gösterir:

    /** 
     * Begin downloading the file specified in the DOWNLOAD_URL constant. 
     */ 
    public function startDownload():void 
    { 
        var request:URLRequest = new URLRequest(); 
        request.url = DOWNLOAD_URL; 
        fr.download(request); 
    }

İlk olarak, startDownload() yöntemi yeni bir URLRequest nesnesi oluşturur ve DOWNLOAD_URL değişkeni tarafından belirtilen değere hedef URL'yi ayarlar. Daha sonra, FileReference.download() yöntemi çağrılır ve yeni oluşturulan URLRequest nesnesi parametre olarak iletilir. Bu da, kullanıcının bilgisayarında istenen belgeyi kaydetmesi için bir konum seçmesini isteyen bir iletişim kutusunu işletim sisteminin görüntülemesini sağlar. Kullanıcı bir konum seçtikten sonra, open olayı (Event.OPEN) gönderilir ve openHandler() yöntemi çağrılır.

openHandler() yöntemi, ProgressBar bileşeninin label özelliği için metin formatını ayarlar ve kullanıcının devam etmekte olan indirme işlemini hemen durdurmasına olanak sağlayan İptal düğmesini etkinleştirir. openHandler() yöntemi şöyledir:

    /** 
     * When the OPEN event has dispatched, change the progress bar's label  
     * and enable the "Cancel" button, which allows the user to abort the  
     * download operation. 
     */ 
    private function openHandler(event:Event):void 
    { 
        pb.label = "DOWNLOADING %3%%"; 
        btn.enabled = true; 
    }

Dosyanın indirme ilerlemesini izleme

Uzak sunucudan kullanıcının bilgisayarına bir dosya indirilirken, düzenli aralıklarla progress olayı (ProgressEvent.PROGRESS) gönderilir. progress olayı her gönderildiğinde, progressHandler() yöntemi çağrılır ve Sahne Alanı'nda ProgressBar bileşen örneği güncellenir. progressHandler() yönteminin kodu şöyledir:

    /** 
     * While the file is downloading, update the progress bar's status. 
     */ 
    private function progressHandler(event:ProgressEvent):void 
    { 
        pb.setProgress(event.bytesLoaded, event.bytesTotal); 
    }

İlerleme olayı, Sahne Alanı'nda ProgressBar bileşenini güncellemek için kullanılan bytesLoaded ve bytesTotal adında iki özellik içerir. Bu, dosyanın ne kadarının indirildiğine ve geriye indirilecek ne kadar kısım kaldığına dair kullanıcıya bir fikir verir. Kullanıcı, ilerleme çubuğunun aşağısındaki İptal düğmesini tıklatarak istediği zaman dosya aktarımını durdurabilir.

Dosya başarıyla yüklenirse, complete olayı, kullanıcıya dosya indirme işleminin tamamlandığını bildirip İptal düğmesini devre dışı bırakan (Event.COMPLETE) completeHandler() yöntemini çağırır. completeHandler() yönteminin kodu şöyledir:

    /** 
     * Once the download has completed, change the progress bar's label one  
     * last time and disable the "Cancel" button since the download is  
     * already completed. 
     */ 
    private function completeHandler(event:Event):void 
    { 
        pb.label = "DOWNLOAD COMPLETE"; 
        btn.enabled = false; 
    }

Dosya indirmeyi iptal etme

Kullanıcı, Sahne Alanı'nda İptal düğmesini tıklatarak istediği zaman dosya aktarımını iptal edip daha fazla bayt indirilmesini durdurabilir. Aşağıdaki alıntı, indirme işlemini iptal etme kodunu gösterir:

    /** 
     * Cancel the current file download. 
     */ 
    public function cancelDownload():void 
    { 
        fr.cancel(); 
        pb.label = "DOWNLOAD CANCELLED"; 
        btn.enabled = false; 
    }

İlk olarak, kod hemen dosya aktarımını durdurarak daha fazla verinin indirilmesini önler. Daha sonra, indirme işleminin başarıyla iptal edildiğini kullanıcıya bildirmek için ilerleme çubuğunun etiket özelliği güncellenir. Son olarak, İptal düğmesi devre dışı bırakılır ve bu da kullanıcının tekrar dosyayı indirme girişiminde bulununcaya kadar düğmeyi tıklatmasını önler.

Uzak bir sunucuya dosyalar yükleme

Dosya yükleme işlemi, dosya indirme işlemine çok benzer. Aşağıdaki kodda gösterildiği gibi, FileUpload sınıfı aynı dört değişkeni bildirir:

private const UPLOAD_URL:String = "http://www.yourdomain.com/your_upload_script.cfm"; 
private var fr:FileReference; 
private var pb:ProgressBar; 
private var btn:Button;

UPLOAD_URL değişkeni, FileDownload.DOWNLOAD_URL değişkeninden farklı olarak, kullanıcının bilgisayarından dosyayı yükleyecek sunucu tarafı komut dosyasının URL'sini içerir. Kalan üç değişken, FileDownload sınıfındaki eşleriyle aynı şekilde hareket eder.

FileUpload bileşenini başlatma

FileUpload bileşeni, ana uygulamadan çağrılan init() yöntemini içerir. Bu yöntem, Sahne Alanı'ndaki ProgressBar ve Button bileşen örneklerinin başvuruları olan pb ve btn adında iki parametre alır. Ardından init() yöntemi, daha önce FileUpload sınıfında açıklanmış olan FileReference nesnesini başlatır. Son olarak, FileReference nesnesine dört olay dinleyicisi atar. init() yönteminin kodu şöyledir:

public function init(pb:ProgressBar, btn:Button):void 
{ 
    this.pb = pb; 
    this.btn = btn; 
 
    fr = new FileReference(); 
    fr.addEventListener(Event.SELECT, selectHandler); 
    fr.addEventListener(Event.OPEN, openHandler); 
    fr.addEventListener(ProgressEvent.PROGRESS, progressHandler); 
    fr.addEventListener(Event.COMPLETE, completeHandler); 
}

Dosya yüklemeyi başlatma

Kullanıcı, Sahne Alanı'nda bulunan ve FileUpload.startUpload() yöntemini çağıran Yükle düğmesini tıklattığında dosya yüklemesi başlatılır. Bu yöntem, FileReference sınıfının browse() yöntemini çağırır ve bu yöntem de kullanıcıdan uzak sunucuya yüklemek üzere bir dosya seçmesini isteyen bir sistem iletişim kutusunu işletim sisteminin görüntülemesini sağlar. Aşağıdaki alıntı, startUpload() yönteminin kodunu gösterir:

public function startUpload():void 
{ 
    fr.browse(); 
}

Kullanıcı yüklenecek dosyayı seçtikten sonra, select olayı (Event.SELECT) gönderilerek selectHandler() yönteminin çağrılması sağlanır. selectHandler() yöntemi yeni bir URLRequest nesnesi oluşturur ve URLRequest.url özelliğini kodda daha önce tanımlanmış olan UPLOAD_URL sabitinin değerine ayarlar. Son olarak, FileReference nesnesi, seçilen dosyayı belirtilen sunucu tarafı komut dosyasına yükler. selectHandler() yönteminin kodu şöyledir:

private function selectHandler(event:Event):void 
{ 
    var request:URLRequest = new URLRequest(); 
    request.url = UPLOAD_URL; 
    fr.upload(request); 
}

FileUpload sınıfında kalan kod, FileDownload sınıfında tanımlanan kodla aynıdır Kullanıcı herhangi bir noktada yüklemeyi sonlandırmak isterse, ilerleme çubuğunda etiketi ayarlayan ve hemen dosya aktarımını durduran İptal düğmesini tıklatabilir. progress olayı (ProgressEvent.PROGRESS) her gönderildiğinde, ilerleme çubuğu güncellenir. Aynı şekilde, yükleme tamamlandıktan sonra, dosyanın başarıyla yüklendiğini kullanıcıya bildirmek için ilerleme çubuğu güncellenir. Daha sonra kullanıcı yeni bir dosya aktarımı başlatıncaya kadar İptal düğmesi devre dışı bırakılır.