RadProgressArea and Facebook Developer Toolkit

[Thomas]

Hi Telerik community!

We faced a problem with the RadProgressArea together with the Open Source Library Facebook Developer Toolkit. This is the scenario:

We are using this Facebook library to develop Websites as Facebook applications. These websites are displayed by Facebook in an IFrame.
The RadProgressArea should be displayed in cases of loading data (not for upload processes). When the RadProgressArea is placed on a usual System.Web.UI.Page, everything is fine (although some steps are skipped in Firefox). But when we are using a CanvasIFrameBasePage from the Facebook Developer Toolkit (inherited from System.Web.UI.Page) instead of a System.Web.UI.Page, the RadProgressArea is shown but not diplaying the progress.

Product versions:
Telerik: 2010.3.1109.35
Facebook Developer Toolkit: 3.1

Does anyone know this behavior or has a solution for it? Thanks in advance!

Here are some example code snippets.

aspx:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />

<asp:Button ID="btnStart" runat="server" Text="Start" OnClick="btnStart_Click" />

<telerik:RadProgressArea ID="RadProgressArea1" runat="server"
    ProgressIndicators="CurrentFileName,FilesCount,FilesCountBar,FilesCountPercent,SelectedFilesCount,TotalProgress,TotalProgressBar,TotalProgressPercent">

</telerik:RadProgressArea>

aspx.cs:

public partial class _Default : System.Web.UI.Page /* this is working fine */


//:Facebook.Web.CanvasIFrameBasePage /* this is not working */


{

/* Inheriting from Facebook.Web.CanvasIFrameBasePage would */

/* produce the error of showing the RadProgressBar but not */

/* displaying the progress                                 */

  

    protected void Page_Load(object sender, EventArgs e) { }

  

    protected void btnStart_Click(object sender, EventArgs args) {

        private const int MAX = 10;

        RadProgressContext context = RadProgressContext.Current;

        context.SecondaryTotal = MAX;

        context.SecondaryValue = 0;

        context.SecondaryPercent = 0;

  

        int num;

        for(int i = 0; i < MAX; i++) {

            num = i + 1;

  

            context.CurrentOperationText = string.Format("step {0}", num);

            context.SecondaryTotal = MAX;

            context.SecondaryValue = num.ToString();

            context.SecondaryPercent = (((double)num) / MAX) * 100;

  

            /* Fake some time eating actions */

            System.Threading.Thread.Sleep(500);

        }

    }

}

[Genady Sergeev]

Hi Thomas,

Using the Facebook SDK and your code I've created a sample project and it seems to work pretty fine, i.e. the progress indicators are being correctly updated. I am attaching my test project to this replay. Can you reproduce the issue on it? The only difference from your code is that I've remove the private modifier on the MAX const declaration, since it is illegal to have access modifiers on a variables declared inside of a method.

Regards,
Genady Sergeev
the Telerik team

[Thomas]

Hi Genady,

thank you for your code sample. Sorry, my last post was a bit misleading. Yes I can reproduce the issue on your code. Please let the Default.aspx inherit from
Facebook.Web.CanvasIFrameBasePage

/* This reproduces the issue */
public partial class _Default : CanvasIFrameBasePage

instead of System.Web.UI

/* This is working fine */
public partial class _Default : Page

Then the RadProgressArea is shown but does not display the progress. The Facebook.Web.CanvasIFrameBasePage itself inherits from System.Web.UI.Page, so I assumed there wouldn't be any problem.

Thank you for your effort,
Thomas

[Genady Sergeev]

Hello Thomas,

After thorough debugging I've managed to find the root of the problem. It is laid in this readonly field, which can be find declared in the CanvasIFrameBasePage:

private readonly Api _api = new Api(new IFrameCanvasSession(null, null));

The problem is that this field is going to be initialized as soon as runtime execution has begun, which in turn will happen somewhere in the beginning of the Global Asax life cycle events, but for sure, before ProcessRequest is called on the handler, that should serve the request. How is that breaking the area? Lets take a look at the IFrameCanvasSession object that is being created. In it's base, base (CanvasSession) class constructor the following method is executed:

LoadFromRequest()

Inside it, the following lines of code can be found:

bool inProfileTab = HttpContext.Current.Request[QueryParameters.InProfileTab] == "1";
            string sessionKeyFromRequest = inProfileTab ? HttpContext.Current.Request[QueryParameters.ProfileSessionKey] : HttpContext.Current.Request[QueryParameters.SessionKey];

Now, what happens here is that Context.Current.Request is being queried extremely early in the application life cycle (remember that the Api field is readonly). This query forces the context to parse (upload) the whole request, effectively leaving RadProgressArea without context to update.

The only workaround I've found for that problem is to navigate to the CanvasIFrameBasePage code, remove the initialization from the Api field, and then initialize it inside the OnInit handled, like this:

protected override void OnInit(EventArgs e)
        {
            _api = new Api(new IFrameCanvasSession(null, null));
            base.OnInit(e);
            // more code

        }

Unfortunately I am not sure what side effects this might cause, therefore I don't recommend that you use that approach. As it turns out, the current implementation of the CanvasIFrameBasePage is incompatible with RadProgressArea.

I hope that this helps.

Best wishes,
Genady Sergeev
the Telerik team

[Thomas]

Hi Genady,

first of all thanks a lot for your huge effort. I agree that it might be better not to change the Api initialization as workaround what leads to the unfortunate incompatiblity.

A bit strange but quite positive is the fact, that the CanvasIFrameBasePage is working fine with the RadProgressArea in Telerik Version 2009.3.1208.35 as some tests pointed out. The last updates of the RadProgressArea seem to contain some changes in the architecture of the RadProgressArea so that it can't be used with the CanvasIFrameBasePage anymore.

Kind regards,
Thomas

[Genady Sergeev]

Hi Thomas,

We will investigate the issue, thank you for reporting it.

Best wishes,
Genady Sergeev
the Telerik team

[Barry]

Hi,
I am also trying to get the RadProgressArea working with the latest FacebookWeb API which allows post/postasync from canvas applications for large image files.

See this post:
http://blog.prabir.me/post/Facebook-CSharp-SDK-Upload-Progress.aspx

While this example is a WinForm example I am trying to use the same technique for ASP.Net.

The fb.UploadProgressChanged method is definitely getting called.but when I assign progress area values within this method the progress area does not display.

Looking at the previous posts it looks like the RadProgressArea is a no goer with Facebook.

Is this still the case?

thanks in advance for your efforts. I have burnt many days on this already.

regards
Baz

[Genady Sergeev]

Hello Barry,

You can use the update client side method of RadProgressArea and pass a progress data defined by the following template:

<script type="text/javascript">
        function pageLoad() {
            var progressData = {
                PrimaryPercent: 10,
                PrimaryTotal: '50kB',
                PrimaryValue: '5kB',
                SecondaryPercent: 50,
                SecondaryTotal: '20kB',
                SecondaryValue: '10kB',
                CurrentOperationText: 'c:\\test.jpg',
                TimeElapsed: '5seconds',
                TimeEstimated: '10seconds',
                TransferSpeed: '100kB/second'
            }

            var area = $find("RadProgressArea1");
            area.update(progressData);
        }

    </script>
    <telerik:RadProgressManager runat="server" ID="RadAjaxManager1">
    </telerik:RadProgressManager>
    <telerik:RadProgressArea runat="server" ID="RadProgressArea1">
    </telerik:RadProgressArea>

So, if you have progress data available on the client, you can use that approach. For example, grab the progress data from the canvas application, craft custom progress object and update the area with it.

Regards,
Genady Sergeev
the Telerik team

[Barry]

Hi Genady,

thanks for the prompt response. Seems like a client side post to FB will be much more efficient in any case. I just need to find out from FB how to assign a Javascript method to an fb.api post to receive update progress stats.

thanks and regards
Baz