locked
Invoke function in main page when settings are changed

    Question

  • Hi,

    My main application page retrieves and displays some data from a webservice. In the settings flyout the user can change the url of the webservice.

    When the user updates the webservice url I want to invoke a function on the main application page to update the data. How can I accomplish this ?

    Sunday, November 2, 2014 9:31 PM

Answers

  • Hi,

    Oh ok, makes sense to do the updates when closing the settings flyout. How about attaching a listener to 'onafterhide' or 'onbeforehide' event of SettingsFlyout (http://msdn.microsoft.com/en-us/library/windows/apps/hh701253.aspx) and schedule an update for the page then?

    If using the bindings object approach I described, you could perhaps collect the settings to an intermediate settings object in the SettingsFlyout and then in 'onafterhide'/'onbeforehide' event handler set the updated settings to the actual bound Settings object. That would offer a single point where setting changes are triggered.

    • Marked as answer by RobbyCeyssens Saturday, November 15, 2014 9:02 PM
    Monday, November 10, 2014 8:54 PM

All replies

  • Hi RobbyCeyssens,

    I don't think its a good approach to direct update the webservice once the setting has been changed by user, lets say if you are not on the webservice page, how could you manage the update.

    I would suggest you to save the url data in localsetting or localstorage or update a global variable, and when back to the webservice page, check if the url changed and then update the page content.

    If you really need a static method in WinJS, try this: define function

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, November 3, 2014 1:30 AM
    Moderator
  • I already store the settings in localstorage. Which event can I use on the main page to check if the storage variables are changed ?
    Monday, November 3, 2014 8:46 AM
  • Is it possible to check the window.onblur and window.onfocus event?

            window.onblur = windowonblur;
            window.onfocus = windowonfocus;
    
            function windowonfocus() {
                document.getElementById("text1").innerHTML = "current window focus";
            }
    
            function windowonblur() {
                document.getElementById("text1").innerHTML = "current window onblur";
            }

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, November 5, 2014 7:05 AM
    Moderator
  • Hi,

    One handy way for creating this kind of piece of settings data is to use WinJS bindings (assuming here that you are working on top of WinJS). One suggested bindings-based approach which is quite flexible below.

    The main idea is to have one global Binding object for storing the data and then attaching observers for that object, which can do whatever is needed.

    Define that global object (using WinJS.Namespace as a sample approach here, depends on how you organize components in your app):

    WinJS.Namespace.define("MyApp", { Settings: WinJS.Binding.as({ webServiceUrl: "http://foo.bar"

    // More similar properties could be added whenever needed. And when defining this, you

    // probably want to read the initial values from localSettings or wherever they are stored }) });

    Then, in the settings flyout (or wherever you need to modify the settings), set the values as you wish (one sample approach here):

    webServiceUrlInputElement.addEventListener("change", function(ev) {
      MyApp.Settings.webServiceUrl = webServiceUrlInputElement.value;
    });

    Via use of WinJS.Binding.bind you can attach functions for observing the changes in the Settings object. It allows attaching multiple handler functions for a single value, so you could have one global handler for persisting the values to localSettings and one per each page/UI component for doing something in that context.

    // Initialized globally and kept alive during the app lifetime. The responsibility is only to

    // persist the data somewhere, nothing else. WinJS.Binding.bind(MyApp.Settings, { webServiceUrl: function(newValue, oldValue) { // store to newValue to localSettings/IndexedDB/somewhere else } }); // Wherever one is interested in changes in the Settings object.

    // This could be a single page of the app, or a single individual UI control var bindingsActions = WinJS.Binding.bind(MyApp.Settings, { webServiceUrl: function(newValue) { // use the newValue to refresh data or to do something else } }); // Remember to use bindingsActions.cancel() to unsubcribe the attached functions

    // when the component gets unloaded etc.

    Hope this helps. Bindings allow creating this kind of simple reactive flows of data inside an app quite nicely, without requiring lots of code which becomes hard to maintain. 

      
    Saturday, November 8, 2014 3:42 PM
  • I tried to combine both solutions but it still doesn't work as expected. Using the WinJS.bindings triggers a change after every change to the webserviceUrl and the webservicePassword I have in the settings.

    I only want to refresh the data from the webservice when leaving the settings screen.

    I tried using the onfocus and onblur events like suggested in the first solution but the onfocus event is triggered every time you click on the main page. I can't use the onblur event of the settings page either because I need to update the bindings on the main page and I can't access these from the settings page.

    Sunday, November 9, 2014 11:11 PM
  • Hi,

    Oh ok, makes sense to do the updates when closing the settings flyout. How about attaching a listener to 'onafterhide' or 'onbeforehide' event of SettingsFlyout (http://msdn.microsoft.com/en-us/library/windows/apps/hh701253.aspx) and schedule an update for the page then?

    If using the bindings object approach I described, you could perhaps collect the settings to an intermediate settings object in the SettingsFlyout and then in 'onafterhide'/'onbeforehide' event handler set the updated settings to the actual bound Settings object. That would offer a single point where setting changes are triggered.

    • Marked as answer by RobbyCeyssens Saturday, November 15, 2014 9:02 PM
    Monday, November 10, 2014 8:54 PM