Shadows in a Windows 8 App

This week I receive a question related to XAML and a Modern UI Windows 8 application (Metro Apps).  They need a method to draw shadows in a XAML application.

When the design team port an application from iPad to Windows 8, they try to reuse a lot of things that were used on iPad. Because of this elements like shadow can appear very easily in the design of a Windows 8 application. In theory, a Windows 8 application should not contains shadows. Because an app for Windows 8 should have a clean and simple design, shadow is saw like an element that will only load the UI.

Also, people that worked with UI effect already know that the shadow effect is one of the effects that use a lot of resources – especially video or processor resource. Having this kind of effects on a tablet could drain our battery very easily.  

This is why the XAML don’t contains any kind of support for shadow. You can make some hacks, using lines with different bluer levels and thing like this, but it will be only a hack. By default we don’t have support for this kind of effect.

The first thing that we should do when we receive a request like this is to send back the design and explain that a Modern UI Windows 8 App should not contains shadows.

If you really want the shadow effect you should try using DirectX in combination with C++. Using DirectX from C++ you can make any kind of effect you want. Yes, the implementation is not so trivial, but you will obtain the perfect shadow effect. Because you are using DirectX the performance will be pretty good.

If you don’t want to use C++ and DirectX directly, I recommend http://sharpdx.org/ . This is an open source project that offer support for DirectX from C#. They have a version of the frameworks that works pretty good on Win RT. The only thing that you should remember about Sharpdx is the performance. Because is only a wrapper over DirectX and C++, if you have any kind of problems you should fallback to C++ and write your own code.   

Read More

Mobile Service on Windows Azure (part 2)

This week I continue the presentations for MSP team from Cluj-Napoca. We talked about how you can store data of your mobile device (Windows Store App – Windows 8, Windows Phone and iOs) using Mobile Services of Windows Azure.

Mobile services on windows azure (part2) from Radu Vunvulea

Next week will talk about authentication.

Read More

How many fingers point can be tracked by Windows 8

Windows 8 brought to us a native support for touch screens. This is a great feature that opens the tablets world for us.
For touch support, we have a lot of gestures that are built in. We need only to subscribe to the event that we want to listen. This can be very useful, because we don’t need any more to implement our custom gestures.

• Tap - one finger touches the screen and lifts up.
• Press and hold - one finger touches the screen and stays in place.
• Slide - one or more fingers touch the screen and move in the same direction.
• Swipe - one or more fingers touch the screen and move a short distance in the same direction.
• Turn - two or more fingers touch the screen and move in a clockwise or counter-clockwise arc.
• Pinch - two or more fingers touch the screen and move closer together.
• Stretch - two or more fingers touch the screen and move farther apart.

If we need a custom gesture we can implement it without any kind of problem. This is not recommended because the user will need to learn new gestures for each application.
I received some question about how many fingers can be tracked in the same time by Windows 8. It seems that this is direct dependent to the hardware. WinRT API gives as the possibility to track each touch point separately with a unique id when the track point enters in our component. We can store these items in a collection (dictionary with the pointer ID as key). When a new pointer appears in our component we can add it to our collection and when the pointer exits our control we will need to remove it from our collection. In this way we will know how many finger points are in our controller.
The event that we need to use to track these actions is PointerMoved event of a container. The event will contains a method named “GetCurrentPoint”, that will return the current point that was moved. Each object of this type contains two properties that are very useful for us:

• PointerId – The unique id of the pointer (each time when we touch the screen a new point with a new id will be generated).
• IsInContact – Will tell us if the current pointer is still in contact (eq. when you remove the finger from the screen this method will be called with this property set to false – at this step we need to remove the pointer id from the collection).

Our code should look like something like this:

private void container_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    PointerPoint currentPointerPoint = e.GetCurrentPoint(myContainer);
    var pointerId = currentPointerPoint.PointerId;
    if (!currentPointerPoint.IsInContact 
           && collection.Contains(pointerId))
    {
      collection.Remove(pointerId);
        return;
    }
    if (currentPointerPoint.IsInContact) 
    {
  // Check the pointer location - Position.X and Position.X properties
  collection[pointerId] = ...;
    }
}

It seems that the number of maxim fingers that are supported by Windows 8 is directly dependent by the hardware.

Read More

What should I do when I receive "4.1 Your app must comply with the following privacy-related requirements"

The most of us are developer; we are technical persons, which do their stuff better than anyone. But besides this, when we are developing a Windows Client application for Windows 8 (Metro App) we don’t need to forget about the legal stuff and similar things. We don’t like them, but we need to resolve them also.
If you have an application that use internet connection, access a backend server, share data with another 3th party like Facebook, Twitter or another system than we should have a simple privacy policy in our application.
From now one this is a MUST, even if in the past was optional. If you try to submit your application without privacy policy that you will receive a big reject with the following message:
"Your app doesn't meet requirement 4.1" (Privacy)
What I recommend, is to add a privacy policy even if you don’t thing that you store, share the user data. Why? Is safest for you and you don’t need to submit the application again if you will have this problem.
What should the privacy policy should contain? Depends, internet is full with a lot of privacy policy text. You can inspire from them, but I recommend to double check the text with someone from legal department or a lawyer.
After you have the privacy policy content, all that you have to do is to publish on your website. If your application don’t have a website, that you can create a blog and publish there the privacy policy. The good part with this is that: you can make anytime an update if the privacy policy without the need to create an update for your application.
When you create your application you will need to add a link in the setting page that will open a browser with the privacy policy. This can be done in different ways. If you have a base class for your pages, that you can override the “OnNavigateTo” method. The code should look something like this:

protected override void OnNavigatedTo(NavigationEventArgs e)
{

    SettingsPane.GetForCurrentView().CommandsRequested += (SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) =>  
      {
        IList<SettingsCommand> commands = requestEventArgs.Request.ApplicationCommands;
        if (commands.FirstOrDefault(x => x.Id.ToString().Equals("privacyPolicyCommand",StringComparison.CurrentCultureIgnoreCase)) != null)
        {
          return;
        }

        SettingsCommand privacyPref = new SettingsCommand("privacyPolicyCommand", "Privacy Policy", (uiCommand) =>
          {
            Windows.System.Launcher.LaunchUriAsync("http://mywebsite.com/privacypolicy.html");
          });
        requestEventArgs.Request.ApplicationCommands.Add(privacyPref);
      });

}

Cool, now we have in our Settings page of each page of our application a link to our privacy policy.
Next step is to add the link to our privacy policy page in the moment when we want to want to submit our applicant. There is a small input with “Privacy policy” label at the end of the page.
I hope that you will not have any kind of problems with 4.1 requirements. Good luck.

Read More

Mixing UI controllers in a Windows Store App (Metro App) for Windows 8

More and more people (especially developer) are very excited about Windows 8 and the new features that come with him. As you already know we have free native languages that can be used to write Windows Store Applications (Metro Apps):

• C++ using DirectX or XAML
• C# using XAML
• JavaScript using HTML5

Also we can use Visual Basic and XAML.
One interesting feature is the mixing components support. We can use components written in C# or C++ and use them in project written in JavaScript, C++ or C#. This is what WinMD and WinRT offer to us.
Because of this we can imagine a lot of scenarios developing a part of the application in C# and the UI part in JavaScript for example. Sounds great and this is possible and also recommended. We can develop great application in this way.
Also, WinRT API is not 100% available in any language. Even if JavaScript, C# and C++ are native languages and WinRT is native for all of them, there are things that can be done only from a specific language. For example if we want to write Windows events from our Windows Store App, this can be done only from C++. But this wills not a problem from us. We can very easily develop a component written in C++ that do this thing and use it from a JavaScript or C# project.
But what about mixing UI controllers and components. I can imagine a lot of scenarios where we could develop UI controller in C# and XAML and use it in JavaScript. Or to have a HTML and JavaScript component that can be used easily from XAML.
I will describe each scenario in part and see what is possible to accomplish.

UI controller written in HTML 5 and JavaScript for a C#/C++ and XAML application

Even if all the languages are native we will not be able to use the full power of a Page Control written in JavaScript from XAML. Even if we have a UI controller in XAML that can render HTML, this has some limitations. Because of this from this JavaScript files we will not able to call WinRT API and also to use the UI features that are supported in a HTML 5/CSS + JavaScript application for Windows Store.
Also, the output of a project written in JavaScript and HTML is not a WinMD component. It is a collection of files (HTML, JS and CSS). Because of this we cannot add a reference to a component written in JS - it doesn’t exist.

UI controller written in XAML and C#/C++ for a HTML 5/CSS and JavaScript application

Like in the previous case this is not possible in this moment. Even if we will have a WinMD component that contains our custom controller written in XAML and we will be able to add a reference to our HTML5/JS project to our WinMD component. The problem will be with the XAML UI libraries, that don’t exist in a HTML5/JS project. Even if the UI controllers written for HTML5 and XAML looks the same and have the same features, their implementation is not 100% the same. One need to be able to be rendered in a XAML and the other one will be displayed using Chakra and Trident. Because of this a HTML5/JS project will not contain the library that need is able to render the XAML controller.
Another problem is related to the tags. We don’t have a tag that can host and render an XAML component.

UI controller written in XAML and C++ for a XAML application written in C#

This is full supported and we will not have any kind of problems. Both projects type will generate a WinMD controller that can be reused without any kind of problems. Both of them use the same WinMD component to render the XAML.

UI controller written in XAML and C# for a C++ application written in C++ that uses DirectX support

Like the previous case this is full supported. An example that I like to use for this case is when we develop a game in C++ and use DirectX. For this case, the menu of the game can be written is XAML and C# because is more easily. Without any problem we will be able to overlap the XAML controller over our application.

As you can see we can have a lot of combination and a part of them all full supported. Before starting an application we should know exactly what UI components we would like to reuse and in what type of applications. The most important thing that we need to remember is: “We cannot use XAML controllers in a HTML5/JS project – in this moment”.

Read More

ListView - make selected item visible don't work in all cases

Did you ever try to use the ListView for Windows 8 Applications? If you had a more complicated scenario where you need to ensure that the selected item from your code is visible maybe you had the following problem… How can I make the selected item visible? If I have a lot of items in my scroll list than the selected item will not be visible when we select it.

listView.set(i).done();

In this way we select the ‘i’ element of the list. Also the set() method unselect the rest of the items that were selected already. To be able to show it in the visible part of the list we need to call the ensureVisible() method after we set it.

listView.set(i).done();
listView.ensureVisible(i);

But in more complicated cased you will notify that this will not work. Even if the ensureVisible() method is called nothing will happen. Usually this case appears when the method is called in a “callback” or in a complete, error or progress of a promise. Even if you try o the ensureVisible in a msSetImmediate it will not work:

listView.set(i).done();
msSetImmediate(function(){ listView.ensureVisible(i); });

A fix for this problem is using the indexOfFirstVisible. This property of the list view gives us the possibility to set the index of the first visible element. The working code would look like this:

listView.set(i).done();
msSetImmediate(function(){ listView.indexOfFirtsElement = i; });

I hope that I could help you.

Read More

updateLayout method of WinJS.Page – what we should be aware of

If you already created a Windows 8 Application in HTML 5 and JavaScript maybe you already used a page control. Every page control has a Java Script file behind this, like in ASPX and WinForms. In this blog post I want to talk about some methods that we can define in this page control – especially one.
If we create a page control from Visual Studio (Add New) you will observe that 3 defaults method are automatically added:

• ready
• unload
• load
• init
• processed
• render
• error
• updateLayout

The “ready” method is called after all the controllers were loaded to the page and the DOM element was created. In this moment the element was already rendered to the screen. The “unload” method is used when we have some resources that we want to free (for example some binding).
“updateLayout” method is called when the page layout is change. A case when this method is called by the system is when the layout is changed from landscape to portrait. What we should know about this method is what happens before and after this call.
Let imagine a scenario when the landscape is active. All the content was rendered on the screen. In the moment when the user rotates the device to portrait the next steps will happen:
all the content is re-rendered once again (all the content that is displayed dynamic is scaled
“updateLayout” function is called and our custom UI is apply.
Because of this step is aware w if you really need to do some actions in this method. If you change some UI, the user will see how the UI is rendered twice (the described steps above create this behavior). There are cased when we don’t need this method. For example if we want to apply different or to hide/show different controllers we don’t need to write Java Script. We can use CSS Media Query and specify when this CSS is applying.

body {

        background-color: white;

}

@media screen and (-ms-view-state:snapped) {

    body {

        background-color: black;

    }

}

@media screen and (-ms-view-state:fill) {

    body {

        background-color: red;

    }

}

In this way the user will not see strange behaviors when the view state is changed. The CSS is applied before “updateLayout” method is called. In the same time, calling this method can have affected our performance because the content is rendered twice. We should try to use this method only in the cases where we absolute need it.
In conclusion, we should try to use the HTML 5 and CSS3 as much as possible. If there are thing that can be done form HTML or CSS don’t do it from Java Script because any UI change from Java Script will trigger also a render event on the UI.

Read More

Where we can add resjson files in a Metro Application

In one of my latest post I wrote a short introduction about how we can support localization in a Metro Application for Windows 8. The current framework for Metro Application makes a great job. Today I want to discuss about resjson files.
This new extension was introduce with Metro Applications and help us to store all the strings that are localized in a very simple format (key, value) using json. In this case json is better than XML (when json is not better).
By default, when we create a Metro Application, a folder named strings is created in the root of our project. Under this folder we can create us many folders we want with a name convention [cultureName]-[regionName].

string
    en-US
        Resources.resjson
        Error. resjson
        payPage. resjson
    en
        Resources. resjson
        Error. resjson
        payPage. resjson
    fe-BE
        Resources. resjson
        Error. resjson
        payPage. resjson

I have the following question for you: How many strings folders can we have in an application? Does the resjson files need to be under the strings directory?
Basically, the strings folder is only a convention; we can have the resjson files under any directory structure. To be able to load the content from these files, the framework needs two important things:
Each resjson file need to have the “Content type” property set to “Resource”. This property can be accessed from the “Properties” tab of Visual Studio.
Each resjson file need to be under a folder that specifies the culture and/or region with the following format

 [cultureName]-[regionName]

If we respect these conventions, the framework will be able to load all this resources without any problem. Because of this we can end with a custom folder structure like this:

myProject
    payment   
        pages
            payPage
                payPage.html
                payPage.css
                payPage.js
            …
        …
        resources
            en-US
                pages.resjson
                errors.resjson

What we need to remember: We can have resjson file under any directory in our project. The only thing that we need to have is the parent directory of the resjson file in the custom format to specify the culture and/or region.

Read More

Promises and Asynchron calls in Metro Application and JavaScript

After I wrote this post I realize that I should write a post about promises in general. Because of this I wrote the following post.
The new Windows brought a new type of applications that are called Metro Applications. These applications are design to use fewer resources as possible and to be used very easily on tablets. Metro Applications can be written not only in XAML and C# but also in HTML5 and JavaScript. This is something new for Microsoft world; we can develop native application in JavaScript. Now JavaScript is a first-class citizen in Metro world.
Of course we cannot talk about Metro Applications without talking about asynchrony methods. We need this type of methods as we need water. When we make a call to a service or we want to write something to the disk we need these calls to be asynchronous.
The most used patterns for asynchronous calls in JavaScript is the callback pattern, where we specify as parameter the callbacks functions that will be called when the given actions ends. This pattern is very used in jQuery worlds.
Microsoft decides to use another well know standard for asynchron calls. The guys from Common/JS propose another standard that was adopted by Microsoft. The name of this standards is Promises/A and is very similar with how asynchronous task work on .NET 4.5. Also this standard is based on fluent pattern, because of this we can read and understand any code written more easily. If you already worked with Node.js, Ruby or jQuery 1.5 maybe you already used this standard without knowing.
Basically a promise represents a value that will be fulfilled in the future. The exact moment cannot be defined. In a Metro Application written in JavaScript any promise return an object that have two methods that are very important and similar – then and done.

promise.then(onComplete, onError, onProgress)

The then method have three parameters where we can specify the functions (handlers) that will be called when:

• onComplete - the call end with success
• onError – is called when during the execution of a code an error appeared
• onProgress - a function that is called when the promise reports progress.

Of course we can omit any of the 2th a 3th parameter. The only one that is mandatory is the first one. The done function has the same signature as the then, the difference is the error handling. This function will throw any error that appeared in the call execution, in comparison with then function that will only return an error state.
Using these promises we don’t need to rely on anonymous functions that are defined inline. We can define functions in our code that can be specified in the then or done. When an error is thrown is more easily to detect the original location of the exceptions.
In Metro Applications all the Windows Runtime and Windows Library for JavaScript is defined using this standard. Because of this this knowing this standard is a have to and is not a nice to have (know).

fooWebService.get("http://www.microsoft.com")
    .then(function(result) {
    // process result
        return fooWebService.get("http://windows.azure.com/")
    })
    .then(function(result) {
    // process result
    }

We can have as many then appended one after another. The condition is to have in each onComplete function to return another promise. If we don’t do this, the onComplete of the second then will be immediately called, without waiting the response of the first call.
The WinJS.Promise object defined by the framework came with some helper methods. Besides then and done functions the most important functions are:

• join – create a promise that permits us to specify a list of promises and only when all this promises are fulfilled the onComplete is called.
• any – create a promise that is fulfilled when one of the promises is fullfilled
• wrap – wrap a non-promise function into a promise. It is very useful when we have a chain of promises.

For example we can use any to wait any specified promises from the list to be fullfiled. When one of them is fullfiled the callback is automatically caled.

WinJS.Promise.any([someMethod1Async(), someMethod2Async("someParam")])
    .then(function() { console.log("done");});

Promises are not only defined by the system, we can also defined promises very easily. When we create a promise we need to create and return a WinJS.Promise object. The constructor accepts a function that has three parameters (the onComplete, onError, onProgress parameters). In the next example we defined a promise that wait for 10 seconds and call the complete function (this a one of the classic examples):

   function wait10SecondsAsync() {
        return new WinJS.Promise(function (onComplete, onError, onProgress) {
            var seconds = 10;
            var intervalId = window.setInterval(function () {
                seconds--;
                onProgress(seconds);
                if (seconds < 1) {
                    window.clearInterval(intervalId);
                    onComplete();
                }
            }, 1000);
        });
    }

In the end some small hints when working with promises:

• always name suffix an asynchrone method with “Async”
• when more than one promise are bound don’t forget to return the promises on each onComplete function
• for the last call of an asynchrone chain call is recommended to use done and not then (done throws any exceptions to the upper code)
• use WinJS.Promise.any and WinJs.Promise.wait when you need to wait for one or more promises

In conclusion promises are very powerful when we are talking about asynchrone calls in JavaScript language. When are used clevered, promises can help us not only to write beautiful cod but the code it almost writes by himself.

Read More

Metro Apps on Window 8 - What to use? XAML/HTML? JavaScript, C#, C++?

Windows 8 is almost released, a lot of companies started already to develop application for Windows 8 – Metro Applications.
In a Metro Application we have three technologies to render the UI:

• JavaScript
• C#
• C++

And yes, VB, but is on the same level with C#. With this three languages we can use HTML and CSS, DirectX and XAML but not in any combination.
On the first level we have DirectX for the UI. This can be used only from C++. Of course we can define libraries that can be consumed by C# and JavaScript code.
The second way to create UI is using XAML. We can use XAML in C# (VB) and C++. The big difference in comparison with DirectX is that we cannot use an XAML controller in a JavaScript application. In this moment we don’t have a JavaScript component that permits us to display a XAML (and I don’t think that we will see soon).
On the same level as XAML we have HTML5 and CSS. This can use only JavaScript and don’t permit to create WinMD libraries that can be consumed by C# and C++. We don’t have any kind of support of JavaScript in C++/C#.
What nice things we can do? We can have a DirectX library and over it an XAML as overlay. This is a very powerful for game industry that can use XAML for data binding and interface and in the same time to use DirectX for the game UI.
After 4 months working with JavaScript and C# on Metro Application on Windows 8 I can say:

• XAML can bind to everything (we have in JavaScript and HTML – but the performance is not the best)
• Dependency property – we can bind 10.000 properties to the UI without any problem (I saw a HTML/JS implementation and it took over 20 seconds to bind and render all the data)
• OOP – is nice to work with a functional programming language (but I miss OOP)
• MVVM – in this moment this pattern is well defined for XAML solutions and a lot of MVVM frameworks already support it
• Debugging – full debugging support as intellisense, code analysis and symbolic refactoring
• Vectors – can be done in HTML5, but I prefer to work with them from XAML
• Resolution independence – don’t need to say more

In conclusion I don’t want to say that XAML is better than HTML5. No, this is not the idea of the blog post. But be aware when you want to use XAML or HTML about what limitation can bring with them. For example in XAML/C# we cannot load dynamically WinMD libraries. But we can load and execute JavaScript at runtime.

Read More

Windows 8 Metro App - How to debug JS that was loaded at runtime

In the last period of time I had to work a lot with JavaScript and not for the UI, but for an entire Metro application on Windows 8. One of the nice features of JavaScript is the ability to access any kind of function and defining or overriding functions at runtime.
This feature is very powerful but also can create a lot of mess. In this moment if we would try to write a C# Metro Application we would not have the ability to load at runtime any kind of assembly or code. The “reflection” part on the .NET framework for Metro Application is not the one that we know from the normal .NET.
In JavaScript if we have a script like this:

(function(){
    “use strict”
    WinJS.Namespace.define(“MyClass”,{
    doSomeAction: function(){
        console.warn(“doSomeAction was called”);
}
});
})();

we could evaluate the script at runtime and call or instanced the object and functions that were defined.
The first step is to evaluate the script. Let assume that the definition of this script can be found in a string field named “source”. All we need to do to load this script is to call the “window.execScript” method.

var source = “ our code “;
window.execScript(source);

After this step we can call our classes and functions from our code like this:

MyClass.DoSomeAction();

Wow, very simple. In C# this would not be some simple, but the true is that I would never want to do something like this in C#. Maybe loading an assembly at runtime but this is all that I would like to do.
One big question for you now. How we can debug the code that is loaded dynamically?
You would say that it is not possible. We cannot put a breakpoint in the code that is loaded dynamically. In C# we have a method that stops the code and popup a message to the user to attach a debugger. In JavaScript this is possible using “debugger”. In every place where framework finds a debugger, the execution of code will stop like we would have a breakpoint.
We saw how we can load dynamic code at runtime how we can debug it. This is a powerful feature but be aware. Loading code at runtime is not the best thing do to when we talk about performance. Also a lot of security issues can appear. This can be the tool of devil :-).

Read More

Solution - A challenge with Promises from Java Script

Some days ago I had a challenge for you about a code that had a bug.

var bingUrl = new Windows.Foundation.Uri("http://www.bing.com");
Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync("myFile.txt")
   .then(function (myFile) {  
       var backgroundDownloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
       var currentDownload = backgroundDownloader.createDownload(bingUrl, myFile);
       currentDownload.startAsync();
   })
   .then(    
       function (result) {
           return displayOkayStatus(result);
       });
    
...
function displayOkayStatus(result){
   return "Complete" + result.toString();
}

In the following code the result parameter from displayOkayStatus is undefined all the time.
The cause of this problem is related to how we use promises. If we use a promise in another promise we should return the promise all the time. In this way we can create a chain. Without this, the JavaScript will not wait our async code to end execute and will call our callback. It is recommended to use then when we have intermediate stage of operation and done for the final call (we cannot have something like .done().done()).
To have a more readable code it is recommended to have calls to functions in a done or in a then and not a definition of a method. In this way any person will be able to read our code more easily.

var bingUrl = new Windows.Foundation.Uri("http://www.bing.com");
Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync("myFile.txt")
   .then(function (myFile) {  
       var backgroundDownloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
       var currentDownload = backgroundDownloader.createDownload(bingUrl, myFile);
       return currentDownload.startAsync();
   })
   .then(    
       function (result) {
           return displayOkayStatus(result);
       });
    
...
function displayOkayStatus(result){
   return "Complete" + result.toString();
}

Read More

A challenge with Promises from Java Script

In one of my posts I tacked about promises from Java Script that Windows 8 introduce. For today I have a challenge for you.

var bingUrl = new Windows.Foundation.Uri("http://www.bing.com");
Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync("myFile.txt")
    .then(function (myFile) {    
        var backgroundDownloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
        var currentDownload = backgroundDownloader.createDownload(bingUrl, myFile);
        currentDownload.startAsync();
    })
    .then(      
        function (result) {
            return displayOkayStatus(result);
        });
       
...
function displayOkayStatus(result){
    return "Complete" + result.toString();
}

The problem is that all the time the displayOkayStatus and result parameter is underfined. Can you identify why?
Solution

Read More

How to define promises on Metro App for Windows 8 using JavaScript

Metro application from Windows 8 can be written not only in C# with XAML but also in Java Script and HTML5. As we all know we can do a lot of thinks with asynchronous programming.
In this post I want to describe how we can define asynchronous methods in Java Script. The name that is used for this kind of actions is "Promises". This can be used for operations that take a long time to complete.
A common pattern for this kind of actions is the callback pattern. Basically, when you call a method asynchron, one parameter is the callback action that is called when the action finish executing.
The definition of promises was not made my Microsoft. The CommonJS were the first one that introduces this pattern. Microsoft only adopted this pattern that is very similar to asynchronous calls of .NET library.
This pattern tries to define a common way to make asynchronous calls, in a predictable way (manner).
In a metro application, WinJS define three types of callbacks that we can use:

• complete callback
• failure callback
• progress callback

When we call an asynchronous action that support promises we can specify these three types of callbacks.

foo.someMethod().then(
 function(response){...}, // Success
 function(response){...}, // Fail
 function(status){...}) // Progress

or

foo.someMethod().then(
 successMethod, // Success
 failMethod, // Fail
 progressMethod) // Progress

Many places from WinJS library use promises, from control library to animation or binding. As you can see it is very easy to use promises, but let see what we can define our own promises. In the next example we use the timeout function:

WinJS.Promise.timeout(3000).then(
    function(){console.log("done")},
    function(){console.log("fail")},
    function(){console.log("progress change")}
);

To be able to create our own promises we need to create our own instance of a Promise object
The constructor of a WinJS.Promise class accepts our three callbacks: success, fail and progress. In our implementation we need only to call our functions.

function someMethod() {
        return new WinJS.Promise(function (complete, error, progress) {
            // Some async calls
     progress(1);
     ...
            complete("okay");
        });
    }

In our case, the call to our class could look something like this:

var request = sommeMethod()
  .then(
   function() { console.log("done"); },
   function() { console.log("failed"); },
   function() { console.log("progress change");
});

For cancelation action we don't need any kind of custom think. We only need to call the cancel method. Automatically the error method will be called.

request.cancel();

When we are using promises we define a list of promises that we want to wait before the complete action is called. This action can be done using WinJS.Promise.join method. As the first parameter we need to define our promises. After that we can use then and define our callbacks.

WinJS.Promise.join([someMethod(), someMethod1("someParam")])
 .then(function() { console.log("done");});

If we want to end the call when one of the methods finish we would need to use WinJS.Promise.any.

WinJS.Promise.any([someMethod(), someMethod1("someParam")])
 .then(function() { console.log("done");});

When one of the calls finished, our complete method is automatically called, even if only one called is complete.
In this post we saw not only how we can use promises but how we can define them. The definition process of a promise is very simple and strait.
A post about Promises in JavaScript in a Metro Application: http://vunvulearadu.blogspot.com/2012/08/promises-and-asynchron-calls-in-metro.html

Read More

Metro App - Call a Java Script method by name and send the list of params

In a Metro App that I writing in Java Script I wanted to call a function based on the method name that is send as a string. In C# we would need to use reflection but Java Script doesn’t require this think. We can very easily iterate through all the method like in an array and call our method.

obj[“”methodName ]();
obj[“”methodName ](param1, param2, …);

The above example get our method using “[…]” and after that calls our method. This is quite simple and a powerful feature.
But how we should rewrite this code if the parameters list are specified as an array. We want to be able to dynamically call any method and give a list of parameters as an array. If we try something like this:

var params = [param1 , param2];
obj[“”methodName ](params);

we will see that is not working, actually we set only the first parameter as an array, and the rest of parameters will be ‘undefined’. What should we do in this case is to use the apply method. Basically this method permits to specify the list of parameters as an array.

var params = [param1 , param2];
obj[“methodName”].apply(obj, params);

The first parameter need to be object of which the function is called. The second parameter is our array list. We can find another similar method named “call” that do the same think but without specifying the list of parameters (the function don’t have any parameter), but each parameter separately . The next 3 examples are equivalent for a function that doesn’t have any parameters:

obj[“methodName”].apply(obj);
obj[“methodName”].call(obj);
obj[“methodName”].();

or

obj[“methodName”].apply(obj, [param1]);
obj[“methodName”].call(obj, param1);
obj[“methodName”].(param1);

What we achieved? We are able to call dynamically any Java Script method based on a string name and an array of parameters.

Read More

Metro App - Binding error on field "id"

After Visual Studio 2012 was launched one of the first things that I tried was to write a Metro App in Java Script. I started to write an application that get an Azure Table content and display it in a grid. Of course to be able to display data from a source we need to define a data structure.
So, I started to define a list with some items that I binding to the UI.

var myItems = [
 { id: 1, name: "Tom", age: 20},
 { id: 2, name: "Jack", age: 23},
 { id: 3, name: "Maria", age: 19},
];

After I bounded the data to the UI I hit F5 and surprise. Visual Studio hit me with an error that doesn’t give you any kind of information about the cause of the error.

{
  "exception":null,
  "error":
  {
    "description":"Null item"
  },
  "promise":
  {
    "_value":
    {
      "description":"Null item"
    },
    "_isException":false,
    "_errorId":3
   },
   "id":3
}

This error is thrown by terminate application handler function. Because of this we cannot see any information about the exact line of the error. In the first moment I checked to see if the id field is null or if I bounded correctly, but everything seems to be okay.
The next thing that I tried was to rename the id field to something else. In my case I replaced with a field named “key”. When I hit F5 I was surprised that everything was up and running.
In conclusion, when you are using data that are binding to the UI, don’t use reserved names for the fields like “id”.

Read More