RadProgressArea and Facebook Developer Toolkit

Thread is closed for posting
9 posts, 0 answers
  1. Thomas
    Thomas avatar
    3 posts
    Member since:
    Aug 2008

    Posted 10 Dec 2010 Link to this post

    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);
            }
        }
    }



  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 15 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thomas
    Thomas avatar
    3 posts
    Member since:
    Aug 2008

    Posted 16 Dec 2010 Link to this post

    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
  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 22 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Thomas
    Thomas avatar
    3 posts
    Member since:
    Aug 2008

    Posted 22 Dec 2010 Link to this post

    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
  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 28 Dec 2010 Link to this post

    Hi Thomas,

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

    Best wishes,
    Genady Sergeev
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. Barry
    Barry avatar
    11 posts
    Member since:
    Dec 2008

    Posted 17 Oct 2011 Link to this post

    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

  9. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 19 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  10. Barry
    Barry avatar
    11 posts
    Member since:
    Dec 2008

    Posted 19 Oct 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017