locked
How to binding data use the progress control? RRS feed

  • Question

  • Hello everyone!

    I'm using HTML/JavaScript coding a metro app. I now facing a problem:

    I need to download some data from server use BackgroundDownloader , there is downloadOperation I can use to record the progress of a download operation.I want to binding this progress data to the control Progress.

    Here is the code : 

     <progress class ="DownloadPage_Progressbar" value ="0" max="100" data-win-bind = "value:downloader.progress.bytesReceived downloadProgressConvertor"/>

    But it seems I can't bind data to "value" attribute.

    So can I still use Progress control to present my download progress? Or how to solve this problem?

    Thanks!

    Monday, October 22, 2012 6:55 AM

Answers

  • Hi nbPengPeng,

    In case you still want a data binding approach, here is the modified sample code for your reference. The key point is that you need to construct a bindingSource object (wrap the raw data source object you want to bind to UI elements). And you need to call WinJS.Binding.processAll to process the certain UI elements that need to initialize the data binding.

    html code:

    <body>
            <h1>This is the network page!</h1>
            <div id="divMessage" ></div>
            <hr />
            <div>
                <h2>BackgroundDownloader section</h2>
                Url: <input type="text" id="txtDownloadUrl" value="http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples/file/60707/20/Windows%208%20app%20samples.zip" />
                <br /><button id="btnDownloadAsync" >Download Async</button>
    
                <br />
                <div id="downloadProgressPanel">
                    <span data-win-bind="innerText:bytes"></span> of <span data-win-bind="innerText:totalBytes"></span> bytes(<span data-win-bind="innerText:percent"></span>%) have been received.
                    <br /><progress id="dlAsyncProgressBar"  style="width:60%"
                            max="100" value="0" data-win-bind="value:percent"></progress>
                </div>
            </div>
            <hr />
    
        </body>

    javascript code (I use the Navigation Application project template, if you use Blank App template, you need to put the initialize code to the proper place):

    (function () {
        "use strict";
    
    
        var progressData = { bytes: 0, totalBytes: 0, percent: 0.0 };
        var progressDataBindingSource = WinJS.Binding.as(progressData);
        WinJS.Namespace.define("UIData",
            { downloadProgress: progressDataBindingSource }
            );
    
    
    
        function downloadAsyncButtonClickHandler() {
    
            var url = document.getElementById('txtDownloadUrl').value;
            var fileName = "async_download.zip";
    
            try{
    
                Windows.Storage.KnownFolders.picturesLibrary.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.generateUniqueName).done(function (newFile) {
    
                    var uri = new Windows.Foundation.Uri(url);
                    var downloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
    
                    var dl = downloader.createDownload(uri, newFile);
    
                    var dlPromise = dl.startAsync().then(
                        function () {
                            NetworkPageUtils.logMessage("download complete...");
                        },
                        function () {
                            NetworkPageUtils.logMessage("download failed...");
                        },
                        function () {
                            UIData.downloadProgress.bytes = dl.progress.bytesReceived;
                            UIData.downloadProgress.totalBytes = dl.progress.totalBytesToReceive;
                            UIData.downloadProgress.percent = (UIData.downloadProgress.bytes*100 / UIData.downloadProgress.totalBytes).toPrecision(3);
       
    
                            //NetworkPageUtils.logMessage("download in progress...  " + UIData.downloadProgress.percent + "%");
                        }
                        );
    
    
                });
    
    
    
            } catch (err) {
                NetworkPageUtils.logMessage(err.message);
            }
    
        }
    
    
    
        WinJS.Namespace.define("NetworkPageUtils",
            {
      
                    logMessage: function (msg) {
                
                        MSApp.execUnsafeLocalFunction(function () {
                            var div = document.getElementById('divMessage');
                            div.innerHTML += "<br/>" + msg;
                        });
                    }
            }
            );
    
    
        WinJS.UI.Pages.define("/pages/network/network.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
    
    
                // Bind download button handler
                var btn = document.getElementById('btnDownloadAsync');
                btn.addEventListener("click", downloadAsyncButtonClickHandler);
    
    
    
                // Bind progressbar data binding options
                var panel = document.getElementById('downloadProgressPanel');
                WinJS.Binding.processAll(panel, UIData.downloadProgress);
    
    
            }
        });
    })();

     

    for more information about javascript based windows store app databinding, you can refer to the following pages:

    #Quickstart: binding data and styles (Windows Store apps using JavaScript and HTML)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!


    Thursday, October 25, 2012 2:35 AM
    Moderator

All replies

  • Hi, nbPengPeng

    Maybe in this case, you should declare the value in .js

    like this
    Windows.Networking.BackgroundTransfer.BackgroundUploader.getCurrentUploadsAsync().

    please check ont this page
    http://code.msdn.microsoft.com/windowsapps/Background-Transfer-Sample-d7833f61/sourcecode?fileId=43575&pathId=698809060

    hope, this help

    kind regard

    • Proposed as answer by r aditya gumay Monday, October 22, 2012 7:47 AM
    Monday, October 22, 2012 7:47 AM
  • Hi nbPengPeng,

    As other member suggested, you can simply calculate the progress value and update the progress control in code (via the "progress" callback function of downloadoperation object. e.g.

    function downloadAsyncButtonClickHandler() {
                    var url = document.getElementById('txtDownloadUrl').value;
            var fileName = "async_download.zip";
    
            try{
    
                Windows.Storage.KnownFolders.picturesLibrary.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.generateUniqueName).done(function (newFile) {
    
                    var uri = new Windows.Foundation.Uri(url);
                    var downloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
    
                    var dl = downloader.createDownload(uri, newFile);
    
                    var dlPromise = dl.startAsync().then(
                        function () {
                            console.log("download complete...");
                        },
                        function () {
                            console.log("download failed...");
                        },
                        function () {
                            var bytes = dl.progress.bytesReceived*100;
                            var totalBytes = dl.progress.totalBytesToReceive;
                            var percent = (bytes / totalBytes).toPrecision(2);
    
                            var progressBar = document.getElementById('dlAsyncProgressBar');
                            progressBar.value = percent;
    
                            console.log("download in progress...  " + percent + "%");
                        }
                        );
    
    
                });
    
    
    
            } catch (err) {
                // log error
            }
    
        }
    


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    Wednesday, October 24, 2012 11:01 AM
    Moderator
  • Hi nbPengPeng,

    In case you still want a data binding approach, here is the modified sample code for your reference. The key point is that you need to construct a bindingSource object (wrap the raw data source object you want to bind to UI elements). And you need to call WinJS.Binding.processAll to process the certain UI elements that need to initialize the data binding.

    html code:

    <body>
            <h1>This is the network page!</h1>
            <div id="divMessage" ></div>
            <hr />
            <div>
                <h2>BackgroundDownloader section</h2>
                Url: <input type="text" id="txtDownloadUrl" value="http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples/file/60707/20/Windows%208%20app%20samples.zip" />
                <br /><button id="btnDownloadAsync" >Download Async</button>
    
                <br />
                <div id="downloadProgressPanel">
                    <span data-win-bind="innerText:bytes"></span> of <span data-win-bind="innerText:totalBytes"></span> bytes(<span data-win-bind="innerText:percent"></span>%) have been received.
                    <br /><progress id="dlAsyncProgressBar"  style="width:60%"
                            max="100" value="0" data-win-bind="value:percent"></progress>
                </div>
            </div>
            <hr />
    
        </body>

    javascript code (I use the Navigation Application project template, if you use Blank App template, you need to put the initialize code to the proper place):

    (function () {
        "use strict";
    
    
        var progressData = { bytes: 0, totalBytes: 0, percent: 0.0 };
        var progressDataBindingSource = WinJS.Binding.as(progressData);
        WinJS.Namespace.define("UIData",
            { downloadProgress: progressDataBindingSource }
            );
    
    
    
        function downloadAsyncButtonClickHandler() {
    
            var url = document.getElementById('txtDownloadUrl').value;
            var fileName = "async_download.zip";
    
            try{
    
                Windows.Storage.KnownFolders.picturesLibrary.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.generateUniqueName).done(function (newFile) {
    
                    var uri = new Windows.Foundation.Uri(url);
                    var downloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
    
                    var dl = downloader.createDownload(uri, newFile);
    
                    var dlPromise = dl.startAsync().then(
                        function () {
                            NetworkPageUtils.logMessage("download complete...");
                        },
                        function () {
                            NetworkPageUtils.logMessage("download failed...");
                        },
                        function () {
                            UIData.downloadProgress.bytes = dl.progress.bytesReceived;
                            UIData.downloadProgress.totalBytes = dl.progress.totalBytesToReceive;
                            UIData.downloadProgress.percent = (UIData.downloadProgress.bytes*100 / UIData.downloadProgress.totalBytes).toPrecision(3);
       
    
                            //NetworkPageUtils.logMessage("download in progress...  " + UIData.downloadProgress.percent + "%");
                        }
                        );
    
    
                });
    
    
    
            } catch (err) {
                NetworkPageUtils.logMessage(err.message);
            }
    
        }
    
    
    
        WinJS.Namespace.define("NetworkPageUtils",
            {
      
                    logMessage: function (msg) {
                
                        MSApp.execUnsafeLocalFunction(function () {
                            var div = document.getElementById('divMessage');
                            div.innerHTML += "<br/>" + msg;
                        });
                    }
            }
            );
    
    
        WinJS.UI.Pages.define("/pages/network/network.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
    
    
                // Bind download button handler
                var btn = document.getElementById('btnDownloadAsync');
                btn.addEventListener("click", downloadAsyncButtonClickHandler);
    
    
    
                // Bind progressbar data binding options
                var panel = document.getElementById('downloadProgressPanel');
                WinJS.Binding.processAll(panel, UIData.downloadProgress);
    
    
            }
        });
    })();

     

    for more information about javascript based windows store app databinding, you can refer to the following pages:

    #Quickstart: binding data and styles (Windows Store apps using JavaScript and HTML)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!


    Thursday, October 25, 2012 2:35 AM
    Moderator