Skip to main content

Posts

Showing posts with the label java script

JavaScript, Unit Test, Visual Studio and Build Machine Integration

Today I will write a short post about JavaScript and unit testing. I heard a lot of .NET developers that they didn’t wrote code for JavaScript because is not supported by Visual Studio, is complicated to run it on the build machine or they don’t have time. Guys, I have news for you, Visual Studio 2012 supports unit tests for JavaScript, even Visual Studio 2010. You can run them almost like a normal unit test for C# without needing to install anything. The JavaScript unit tests are so smart that are integrated in a way that you don’t need to change/install anything on your build machine – you even receive the standard message notification when a unit test fail. You don’t have time for them – I will not comment this, definition of DONE is wrong for those developers. When I need to write unit tests for JavaScript code I usually prefer qunit. Why? Because in combination with a small NuGet package called NQunit you can make magic. qunit give you the possibility to write and run Java...

Java Script code refactoring - hands on code

Let's see how we can create a mechanism that based on some flags; it will able to determine the status of some objects. The first version of code would look like this: ItemStatus = { Status1: "Status1", Status2: "Status2", Status3: "Status3" }(); ItemTypes = { Item1: "Item1", Item2: "Item2", Item3: "Item 3" }(); var ItemConfiguration = function () { function ItemConfiguration() { } ItemConfiguration.prototype = function () { getItemConfiguration: function (itemTypes, flag1, flag2, flag3, flag4) { switch (itemTypes) { case ItemTypes.Item1: if (flag1 && flag2) { return ItemStatus.Status1; } else if (flag3 || flag4) { return ItemStatus.Status2; } break; case ItemTypes.Item2: if (...

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 e...

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 foun...

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 w...

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

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:...

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 param...

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...

How to use Bing Maps v7

In ziua de azi, de la o poza sau un document pana la un colet trimis prin curier sau localul la care ai iesit aseara poate sa fie track-uita pe harta. Aceste harti sunt oferite gratis (Bing, Maps, Google Maps etc), iar singurul lucru pe care trebuie sa il cunoastem sunt coordonate GPS. Un utilizator poate sa foloseasca aceste harti fara nici o problema, iar cea mai mare parte din persoanele care iti acceseaza web situl nu o sa aibe probleme cu folosirea unei harti. Mai jos o sa discutam despre cum putem sa integram si sa folosim Bing Maps in web situl nostru. Exista mai multe versiuni de API pentru Bing Maps, ultima versiune (vs 7.0) a fost regandita de la 0 si a devenit extrem de usor de folosit. O sa ne uitam peste versiunea 7.0, care este integrata in totalitate cu ajax. Tot setup-ul se face din java script. Primul pas este sa ne cream un obiect de tip Map si sa specificam zona de pe pagina unde sa apara: <head> ... <script type="text/javascript" src="h...

HTML 5 - efecte vizuale uimitoare

Se pare ca zilele in care se folosea Photoshop la greu pentru a crea efecte pe paginile HTML incep sa apuna. Java Script impreuna cu HTML 5 ofera posibilitatea de a face efecte vizuale pe care acu 2-3 ani doar le puteam visa. Hai sa va dau si un exemplu: http://www.nevermindthebullets.com/ Este un site de benzi desenate. Nimic deosebit pana acuma. Dar daca ne uitam in codul HTML o sa observam ca foarte multe efecte vizuale la imagini sunt facute prin intermediul la Java Script. Cum s-a ajuns la aceasta performanta? S-a inceput de la niste imagini in format PNG, care pot sa fie transparente sau "decupate". Prin acest mecanism se permite suprapunerea de imagini ca si in Photoshop( layer). Fiecare element din imagine este o imagine separata. Dar pe langa atributele normale care le putem gasi pentru tagurile HTML precum img sau p o sa observat niste atribute noi precum: cp:x , cp:ballon sau cp:text . Aceste atribute custom, prefixate cu cp pe care le-a introdus creatorul situ...