locked
can we update UI from windows runtime component? RRS feed

  • Question

  • hi all.

    i can write a component dll using c#(.winmd library) and able to access it from java script. now what is my requirement is...

    if i have a function to add two numbers and return  sum of those in component dll like..

     public static async void addNumber(int a,int b)

    {

    return a+b;

    }

    now can i update the result on UI directly from component dll?

    example 

    in my UI to show the result i have a div element.

    <div id="result"></div>

    can i update the div element directly from component dll with result by passing its ID as a parameter to that adding function?

    Wednesday, February 13, 2013 12:38 PM

Answers

  • No, you can't share drawing surfaces or UI between JavaScript and WinRT components. C#, for its part, doesn't have a way to understand or work with DOM elements, which is what it would get if passed an ID or element object from JS. On the flip side, a JS app can't get at a DirectX drawing surface or anything else that C# would understand. The bottom line is thus that all UI has to be handled in the HTML/JS side of the relationship.

    In your case you'll be returning data/values from the component and updating your UI accordingly.

    That said, it is possible to do data-binding to data sources within a component, e.g. if it returns an object with observable properties, then you can use WinJS data-binding syntax to wire up your UI declaratively.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    • Marked as answer by NagendraVivek Monday, February 18, 2013 4:14 AM
    Wednesday, February 13, 2013 11:50 PM

All replies

  • No, you can't share drawing surfaces or UI between JavaScript and WinRT components. C#, for its part, doesn't have a way to understand or work with DOM elements, which is what it would get if passed an ID or element object from JS. On the flip side, a JS app can't get at a DirectX drawing surface or anything else that C# would understand. The bottom line is thus that all UI has to be handled in the HTML/JS side of the relationship.

    In your case you'll be returning data/values from the component and updating your UI accordingly.

    That said, it is possible to do data-binding to data sources within a component, e.g. if it returns an object with observable properties, then you can use WinJS data-binding syntax to wire up your UI declaratively.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    • Marked as answer by NagendraVivek Monday, February 18, 2013 4:14 AM
    Wednesday, February 13, 2013 11:50 PM
  • I can't seems to get databinding to work between my WinJS View code and my Windows Runtime Compoent ViewModel code.  Any suggestions or pointers to sites where this is talked about?

    I'm coming from a Xaml/C# background, but needing to make my UI (aka Views) HTML/WinJS.  So I'm treating the HTML/WinJS as a View similar to the Xaml/C#.  But I want everything else to be written using C# code.  Therefore, I'm making my ViewModels from a Windows Runtime Component project and setting a local variable in the WinJS to represent an instance of the ViewModel.  However, when I try to bind to a simple string property on the ViewModel, I get the following javascript exception:

    Exception is about to be caught by JavaScript library code at line 8652, column 17 in ms-appx://microsoft.winjs.1.0/js/base.js
    0x800a13d5 - JavaScript runtime error: Cannot define property '_getObservable': object is not extensible
    File: base.js, Line: 8652, Column: 17

    Here is the code in my home.js file that gets the ViewModel instance and processes the bindings:

    (function () {
        "use strict";

        var _viewModel;

        WinJS.UI.Pages.define("/pages/home/home.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.
                _viewModel = ViewModels.ViewModelLocator.viewModelTest;

                WinJS.Namespace.define("Application.Pages.Home", { "ViewModel": _viewModel });
                WinJS.Binding.processAll(null, Application.Pages.Home.ViewModel);
            }
        });
    })();

    And here is the simple home.html code with the data-win-bind attribute:

            <section aria-label="Main content" role="main" data-win-bindsource="Application.Pages.Home">
                <h2 data-win-bind="innerText: ViewModel.testString"></h2>
                <h3>Test String Property: <span data-win-bind="innerText: testString"></span></h3>
                <button id="changeTestStringButton">Change testString value</button>
            </section>


    bob

    Monday, April 22, 2013 4:37 PM
  • Because you're introducing a new question that's not entirely related to the original post here, please create a new question on this forum. That way it'll be seen by more people, and the right people.
    Monday, April 22, 2013 5:24 PM
  • Monday, April 22, 2013 7:41 PM