locked
Custom control with LightSwitch HTML Client using easelJs RRS feed

  • Question

  • Dear LightSwitch Aficionados,

    I am using a package called easelJs to create animations inside a LightSwitch custom control.

    Inside my _render event, I create a canvas for it:

                var itemTemplate = $("<canvas id='casterCanvas' width='" + wid + "' height='800'></canvas>");
    
                //    Set .css for the Canvas
                itemTemplate.css({
                    "backgroundColor": "lightblue"
                });
    
                //    Append the Canvas to the element
                itemTemplate.appendTo($(element));
    

    And then create an EaselJs 'Stage' that references this canvas:

    myOverview.casterCanvas = $("#casterCanvas")[0];

    myOverview.stage = new createjs.Stage(myOverview.casterCanvas);

    Now, everything works fine when I am bouncing back and forth on my tabs, but when I go to another screen and come back, the custom control displays nothing. I do cache some state information in the myapp object.

    I think the problem lies with my lack of understanding of what exactly "myapp" is, and what is its lifetime? Is it good practice to use it to hold private state information? Any ideas or links would be very much appreciated.

    Thanks!

    Monday, April 28, 2014 2:28 PM

Answers

  • Nothing like talking to myself, but...

    The main problem is resolved. It appears that if you create a div tag in a custom control, navigate to another screen, and come back, the div tag is still there (this can be seen in the _render event). Thus, if you create and append another one, there are problems. Better to delete the old one and re-create it. Note that this is different than the behavior seen when I refresh my browser (IE 11, in this case, but I suspect all would be the same), where apparently everything is wiped out, so creating (appending) the div was the right thing to do.

    My other question still stands, though. What it the proper usage of myapp? Can I tack my own objects onto it as a place to cache data that I want to survive between screens? Is this proper? Anyone have links to myapp documentation?

    Thanks.


    • Edited by batpox Monday, April 28, 2014 4:08 PM
    • Marked as answer by Angie Xu Friday, May 9, 2014 1:33 AM
    Monday, April 28, 2014 4:07 PM
  • In this article I pass an instance of "Clippy" from page to page:

    Using The Clippy Agent in the Visual Studio LightSwitch HTML Client

    myapp.SurveyList.AddSurvey_Tap_execute = function (screen) {
        // Stop Clippy
        Clippy.stop();
    
        // Open the New Survey
        myapp.showNewSurvey(null, {
            beforeShown: function (newSurveyScreen) {
                // Pass Clippy to the new screen
                newSurveyScreen.Clippy = Clippy;
                // Create new Survey here
                var newSurvey = new myapp.Survey();
                newSurveyScreen.Survey = newSurvey;
            }
        });
    };
    


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    • Marked as answer by Angie Xu Friday, May 9, 2014 1:33 AM
    Monday, April 28, 2014 4:22 PM

All replies

  • Nothing like talking to myself, but...

    The main problem is resolved. It appears that if you create a div tag in a custom control, navigate to another screen, and come back, the div tag is still there (this can be seen in the _render event). Thus, if you create and append another one, there are problems. Better to delete the old one and re-create it. Note that this is different than the behavior seen when I refresh my browser (IE 11, in this case, but I suspect all would be the same), where apparently everything is wiped out, so creating (appending) the div was the right thing to do.

    My other question still stands, though. What it the proper usage of myapp? Can I tack my own objects onto it as a place to cache data that I want to survive between screens? Is this proper? Anyone have links to myapp documentation?

    Thanks.


    • Edited by batpox Monday, April 28, 2014 4:08 PM
    • Marked as answer by Angie Xu Friday, May 9, 2014 1:33 AM
    Monday, April 28, 2014 4:07 PM
  • In this article I pass an instance of "Clippy" from page to page:

    Using The Clippy Agent in the Visual Studio LightSwitch HTML Client

    myapp.SurveyList.AddSurvey_Tap_execute = function (screen) {
        // Stop Clippy
        Clippy.stop();
    
        // Open the New Survey
        myapp.showNewSurvey(null, {
            beforeShown: function (newSurveyScreen) {
                // Pass Clippy to the new screen
                newSurveyScreen.Clippy = Clippy;
                // Create new Survey here
                var newSurvey = new myapp.Survey();
                newSurveyScreen.Survey = newSurvey;
            }
        });
    };
    


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    • Marked as answer by Angie Xu Friday, May 9, 2014 1:33 AM
    Monday, April 28, 2014 4:22 PM
  • Thanks Michael, your article (and wonderful books) is what got me started with EaseJS (it works really well, too). You might want to update your example to remove the div tag and then re-create it as well.

    As for your Clippy example. Good idea, and I'll file that away, but in this case I have dozens of screens all coming back to my main screen and I thought I'd employ myapp to cache some stuff, but I'm hoping I'm not running afoul of some conventions.

    Cheers,

    Dan

    Monday, April 28, 2014 4:30 PM