Coding Grounds

Razor extension method Each

2011-12-31T20:05:00.001-08:00

It is possible to augment razor views with not only helpers, but also razor extension methods.

In this example, an extension method which will take a template and from this template generate a rendered result of a list of the IEnumerable of items passed in for the extension method will be presented. It is named Each and was created by Phil Haack.

I will present the source code quickly to just repeat Phil Haack's code. Let's first add a new class called IndexedItemModel:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestActionMethodSelectorAttribute.Extensions
{
    public class IndexedItem<TModel>
    {
        public IndexedItem(int index, TModel item)
        {
            this.Index = index;
            this.Item = item; 
        }

        public int Index { get; private set; }
        public TModel Item { get; private set; }

    }
}

Let's add the extension method next:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.WebPages;

namespace TestActionMethodSelectorAttribute.Extensions
{

    public static class RazorCollectionExtensions
    {

        public static HelperResult Each(this IEnumerable<TItem> items,
            Func<IndexedItem<TItem>, HelperResult> template)
        {
            return new HelperResult(
                writer =>
                {
                    for (int i = 0; i < items.Count(); i++)
                    {
                        template(new IndexedItem<TItem>(i, items.ElementAt(i))).WriteTo(writer);
                    }
                }
            );
        }

    }

}

An example of its usage is shown next in a view:



@{
    ViewBag.Title = "Home Page";

    var cars = new []
    {
       new { name = "Audi", color = "Blue", make = "A4" },
       new { name = "BMW", color = "Black", make = "M5" },
       new { name = "Volvo", color = "Red", make = "240" },
       new { name = "Renault", color = "Black", make = "19" }     
    }; 
    
}

@cars.Each(@<li>Car is an @item.Item.name @item.Item.make of color @item.Item.color</li>)

Take note of the "magic" @item property in use here. What we see here in effect is a convenient way to iterate over a list of objects, in this case an array of anonymous objects which we call "cars" and we just add in some car objects to this array using a collection initializer. Then we output this list with our new Each method which is a razor extension method and specify our template. You need to prefix the first letter in the parenthesis with the @ sign, then use @item to refer to the object. In our Each method we use IndexedModel type for each item in the list. This got both an index and an Item of type TModel (TItem) passing in our item type, in this case the anonymous type that constitutes the "cars" object.

Thanks to Phil Haack for this nice method! I like this Each method a lot. No need to write that long @foreach razor helper any more. This also should fit nicely into linq expressions like:
@Model.MyList.Where(myItem => myItem.Age > 19).Each(@
<li>@item.Name </li>)
to output a list of the name propery for all people above 19 years old in our Model.MyList property, just to take an example.

This nice method was presented by Phil Haack here:

Note for those viewing this video, not everything went smooth for Phil Haack in this demonstration, however there were lots of "hidden gems" he presented there at the MIX11 conference in Las Vegas.

Disclaimer: I added this blog post to extract the source code from his demo into an easily available sample.

It should be relatively easy now to start creating Razor extension methods as an alternative to HTML helpers and Razor html helpers in MVC by taking a look at this example. Note the use of HelperResult and WriteTo (corresponding Response.Write in ASP.NET).

Analyzing routing in your MVC application

2011-12-30T17:16:00.001-08:00

Routing and ASP.NET MVC woes !!!

So you have created a MVC application and worked on it a bit, and now your Global.asax contains calls to a setup of your RouteCollection that has got complex logic inside it and now you need to understand your routing better and perhaps fix that particular scenario where routing does not seem to work (keep in mind for instance that the first match algorithm is used when using your MVC routing table). How to understand those routes in a better way without staring at your code. How about interpreting it at realtime using a runtime debugger for just that case. First off, download the
ASP.NET MVC Routing Debugger Visualizer tool.

Go to the following url:
http://visualstudiogallery.msdn.microsoft.com/2993e666-4534-49c8-807f-e8bffcaee7e0

Keep in mind that this should be easily installed in Visual Studio 2010 using the Tools => Extension Manager dialog in DevEnv.

Now we need to "patch" your system to allow this tool to work.

First off edit the devenv.exe.config file to allow loading remote sources:
Open the file
C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\devenv.exe.config

Inside the runtime xml element node add the following:
<loadFromRemoteSources enabled="true" />

Just to double check, check that the dll is added to the following folder:
C:\Program Files\Microsoft Visual Studio 10.0\Common7\Packages\Debugger\Visualizers

There should now be a file called MvcRouteVisualizer.dll in this folder, this is the library which constitutes the ASP.NET MVC Route debugger visualizer tool.

Start the MVC application with debugging turned on and add a breakpoint in a MVC controller action, I tested this tool out with the HomeController About action in my basic templated ASP.NET MVC application for instance. Hit Ctrl+D+Q (quickwatch) and add a watch to the System.Web.Routing.RouteTable.Routes object (which is a collection of the routes to monitor for our app) and hit the available magnify icon button to the right of the value column of our watch window in our debugger.

If all now went well, you should have this nifty tool to display the routes in our MVC app. This way, if the routing seem to have gone berserk and you cant understand why your nice routing table is not correctly set up, MVC Route visualizer routing tool comes to your rescue.

Here is a screenshot of this great tool, happy coding!

Creating custom ActionResult

2011-12-28T18:45:00.000-08:00

It is possible to inherit the ActionResult class and create a custom ActionResult.
The following class creates a new kind of ActionResult for spewing out the serialized string of an inputted data contract instance.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Runtime.Serialization;

namespace TestActionMethodSelectorAttribute.ActionResult
{

    public class DataContractSerializedResult : System.Web.Mvc.ActionResult
    {

        private object data;

        public DataContractSerializedResult(object data)
        {
            this.data = data;
        }

        public override void ExecuteResult(ControllerContext context)
        {
            var response = context.HttpContext.Response;
            response.ContentType = "text/xml";
            DataContractSerializer serializer = new   DataContractSerializer(data.GetType());
            serializer.WriteObject(response.OutputStream, data); 
        }
    }

}

You will need to add a reference to the System.Runtime.Serialization assembly and namespace. We use DataContractSerializer to serialize the object to a string value. The stream in use is the context.HttpContext.Response.OutputStream, where context is the ControllerContext (current).

It is required to set the ContentType to "text/xml" to output xml.

Usage, adding a test method to homecontroller (ignore Hungarian notation, this is for demonstration purposes..) :


   public DataContractSerializedResult About2()
        {
            return new DataContractSerializedResult(
                new AgeNameDataContract
                {
                     Age = 93,
                     Name = "Gamla Olga"
                });
        }

Then we get the xml outputted of the data contract passed in:

The morale of the story, to create a new kind of ActionResult:

- inherit from ActionResult
- implement abstract method ExecuteResult

Timing your MVC Actions

2011-12-28T18:00:00.000-08:00

Add the following attribute to your MVC actions to view the timing of your mvc actions using System.Diagnostics.Stopwatch class.

This is another filter attribute example.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Diagnostics;

namespace TestActionMethodSelectorAttribute.Attributes
{
    public class StopwatchAttribute : ActionFilterAttribute
    {
        private Stopwatch _stopWatch;

        public StopwatchAttribute()
        {
            _stopWatch = new Stopwatch(); 
        }

        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            _stopWatch.Start(); 
        }

        public override void OnActionExecuted(ActionExecutedContext filterContext)
        {
            _stopWatch.Stop();
            var response = filterContext.HttpContext.Response;
            response.AddHeader("X-elapsed-milliseconds", _stopWatch.ElapsedMilliseconds.ToString()); 
        }
    }
}

Usage (homecontroller):


        [Stopwatch] 
        public ActionResult About()
        {
            return View();
        }

It is nice to output the elapsed time in millisecond in the http headers, since we then easily can monitor the values outside Visual Studio, in our browser:

Using ActionMethodSelectorAttribute in MVC

2011-12-28T17:27:00.000-08:00

If you want an MVC controller action to be only available for Ajax methods, use theAjaxMethodSelectorAttribute. Inherit this abstract class to create the attribute AjaxOnlyAttribute below and tag this attribute with your method:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TestActionMethodSelectorAttribute.Attributes
{
    public class AjaxOnlyAttribute : ActionMethodSelectorAttribute
    {
        public override bool IsValidForRequest(ControllerContext controllerContext, System.Reflection.MethodInfo methodInfo)
        {
            return controllerContext.HttpContext.Request.IsAjaxRequest(); 
        }
    }
}

Usage (testing the attribute out in HomeController):


        
        [AjaxOnly] 
        public ActionResult About()
        {
            return View();
        }

If the current request is not an AjaxRequest, a Http 404 is returned. The attribute [HttpPost] and [HttpGet]is inherited from the ActionMethodSelectorAttribute. They also implement the abstract method IsValidForRequest.

Asynchronous MVC controllers end to end example

2011-12-25T20:30:00.001-08:00

=== PREAMBLE ===

My intended audience:

1) You are a programmer or articial being understanding code (probably the former)
2) You work with ASP.NET MVC
3) You must take in use asynchronous processing to handle a slow and time consuming
MVC action and want to learn how to implement an AsyncController.

If this is the case, please read on!

== PREAMBLE ===

I guess many of you know how to create an ordinary MVC controller inheriting from System.Web.Mvc.Controller class, but what about creating an Asynchronous MVC controller?

It is possible to opt-in asynchronous controllers in MVC out of the box of the MVC framework. This will be a code sample of how this is possible. The goal of the asynchronous controller will be to provide better scalability, especially for complex calculations that take long which are accessed by many simultaneous users. Beware though, the standard synchronous design is easier to relate to and will be suitable in many standard scenarios. Asynchronous controllers should only be applied where there is a good reason to expect bottlenecks to be present in the code and in a real production environment.

Moving on to the asynchronous controller. Instead of inheriting from the controller class, inherit from the System.Web.Mvc.AsyncController class in MVC. The following code shows how to create an asynchronous controller.

Code sample follows:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Threading;

namespace SubstitutePartInCompositionContainer.Controllers
{
    public class TestAsyncController : AsyncController
    {
     

        [AsyncTimeout(60000)] 
        public ActionResult IndexAsync()
        {
            AsyncManager.OutstandingOperations.Increment();
            ThreadPool.QueueUserWorkItem((s) =>
                {
                    ServiceReference1.NewsServiceClient client =
                     new ServiceReference1.NewsServiceClient();
              
                    TempData["news"] = client.GetSomeNews("Steinkjer"); 
                    AsyncManager.OutstandingOperations.Decrement(); 
                }, null); 

            return View();
        }

        public ActionResult IndexCompleted()
        {
            ViewBag.DateStamp = DateTime.Now;
            ViewBag.News = TempData["news"] as string; 
            return View(); 
        }

    }
}

The class in this example is called TestAsyncController. It inherits from the AsyncController class. The class contains two action methods which is called IndexAsync and IndexCompleted. In general, for every asynchronoous MVC action, there must be two method suffixed with Async and Completed, just like every controller must be suffixed with Controller (part of the design by contract conventions in MVC).

I put the attribute [AsyncTimeout(60000)] here, it is possible to specify in milliseconds how long an async timeout should be allowed to execute before timing out. It is also possible to use the attribute [NoAsynctimeout] instead.

Further on, I use the static method ThreadPool.QueueUserWorkItem to add an asynchronous call in the current Thread Pool. I use the AsyncManager.OutstandingOperations.Increment() and corresponding Decrement() methods to keep track of the pending asynchronous calls. AsyncManager is part of System.Web.Mvc.Async namespace. This book keeping is required for correctly arriving at the Complete method that will receive the asynchronous result. For convenience, I move the result to the TempData dictionary. This will be available for me in the Complete method in my controller. Since the data I get is a string, I just copy it to the ViewBag (dynamic object) and this is then just displayed in the MVC view Index.cshtml in the folder TestAsync.

Here is the service contract for the NewsService used (WCF service):


using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace TestServices
{
 
    [ServiceContract]
    public interface INewsService
    {

        [OperationContract(AsyncPattern=true)]
        IAsyncResult BeginGetSomeNews(string city, AsyncCallback callback, 
         object asyncState);

        string EndGetSomeNews(IAsyncResult result);

    }
    
}

As you can see, the WCF service tags the operation BeginGetSomeNews with the AsyncPattern equals set to true to allow asynchronous execution. Not only will the IIS service not receive a blocking call, the service itself is also run asynchronous in this case. The WCF service also got a pair of methods this time prefixed with Begin and End. Only the Begin method is attributed with [AsyncPattern=true], the end method is not even attributed with OperationItem attribute without any overloads. This is because the end method is just a callback for the Begin method. As in asynchronous programming, the Begin method starts by receiving its parameters, followed by AsyncCallback callback, object asyncState paramteters. The End method returns string in this case and also receives such an object.

The service implementation looks like this:



using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.Threading;

namespace TestServices
{
   
    public class NewsService : INewsService
    {

        public IAsyncResult BeginGetSomeNews(string city, AsyncCallback callback, 
         object asyncState)
        {
            Thread.Sleep(3000); //simulate some sleep 
            return new
              CompletedAsyncResult("Here are some news for " + city); 
        }

        public string EndGetSomeNews(IAsyncResult result)
        {
            var resultFromAsync = result as CompletedAsyncResult; 
            return resultFromAsync.Data; 
        }

    }

}

I use a class called CompletedAsyncResult, this looks like this (MSDN is the source):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;

namespace TestServices
{

public class CompletedAsyncResult : IAsyncResult
{
T data;

public CompletedAsyncResult(T data)
{ this.data = data; }

public T Data
{ get { return data; } }

#region IAsyncResult Members
public object AsyncState
{ get { return (object)data; } }

public WaitHandle AsyncWaitHandle
{ get { throw new Exception("The method or operation is not implemented."); } }

public bool CompletedSynchronously
{ get { return true; } }

public bool IsCompleted
{ get { return true; } }
#endregion
}
}

Then, I just added a Service Reference to the WCF class library containing my service to generate a proxy or service agent to access my WCF service in my controller, as seen in the first code.

Important GOTCHAS about asynchronous MVC controllers:

There is no explicit call between the Async and Completed method in the MVC controller inheriting from AsyncController. This is code by design or contract.

We must "help" MVC keep track of the outstandingoperations for the AsyncManager in our code. When the counter turns to zero again, the async operation decrementing the value last will call its Complete method.. Use AsyncManager throughout.

Google blogger does not handle generic arguments well, but the CompletedAsyncResult object takes string as a generic type argument in my demo code here. It could be a complex type such as a data contract.

There are many more methods of achieving this, this is just one example.

Simple access of embedded resources in DLLs in MVC views

2011-09-16T20:21:00.001-07:00

I was working with embedded views in a DLL in a MVC Razor 3 project today and I had to be able to refer to embedded Javascript .js files, images (jpg and png) and css files in the precompiled views. To make this work I tagged the files as Embedded Resource in my project, compiled the project into a dll and in the other mvc project which used the dll I could get it to fetch the embedded resources easily adding a new MVC controller action.

The mvc controller action looks like this:

The code below goes into the Home controller, ContentFile action method, which
returns a FileStreamResult below.



        public FileStreamResult ContentFile(string id)
        {
            string resourceName = Assembly.GetExecutingAssembly().GetManifestResourceNames().ToList().FirstOrDefault(f => f.EndsWith(id));
            return new FileStreamResult(Assembly.GetExecutingAssembly().GetManifestResourceStream(resourceName), GetMIMEType(id));
        }

        private string GetMIMEType(string fileId)
        {
            if (fileId.EndsWith(".js"))
            {
                return "text/javascript";
            }
            else if (fileId.EndsWith(".css"))
            {
                return "text/stylesheet";
            }
            else if (fileId.EndsWith(".jpg"))
            {
                return "image/jpeg";
            }
            return "text";
        }

To use this in the views, write this:



<script type="text/javascript" src="/Home/ContentFile/test.js">
</script>

<link rel="Stylesheet" href="/Home/ContentFile/blue.css">

<img src="/Home/ContentFile/forest.jpg" />

To load up an embedded resource we look into the executing dll, which instead should perhaps load a specified assembly if necessary, and then GetManifestResourceStream and retrieving the matching resource name passed in. The MIME type must be set and is resolved by looking at the resource name passed in.

So the morale is that if you want to load a content file from a DLL in a MVC view, use a controller action and return a FileStreamResult and then load up the content file by writing the route to the ContentFile action.

Testing out the WatiN unit testing

2011-09-11T15:05:00.000-07:00

WatiN, or "Web application testing in .Net", is based on a similar package for Ruby on Rails called WatiR. This is a browser automation package that gives the ability to run say a MsTest where you open up an url in Internet Explorer 6,7,8 or 9 or Firefox 2 or 3, then locate a gui element in a web page by its id and write in some text, if it is textbox and click a button. This is making it possible easily write GUI tests for web applications running in an IE or FireFox environment, covering most users. WatiN also gives logging options and makes it possible to create screenshots and so on.

Lets start with a equivalent "Hello world" unit test using WatiN.

First off, create a new Mvc 3 Web Application, select Internet Application as the template, choose to add a unit test. Check that you got Nuget insstalled.

Then write in the Nuget console:


 Install-Package WatiN

This will download the necessary DLL files to the unit test project and add to its references. These DLL files are:

Interop.SHDocVw - Mark in the references this DLL and choose Embed Interop Types to false.

WatiN.Core

WatinUnitTest

Now add a unit test or basic unit test and then write the following test method
inside your test class:



        [TestMethod]
        public void TestLogInToMrs()
        {
            string targetServer = "http://mrx.hex.no"; 
            using (var browser = new IE(targetServer))
            {

                LogintoCerebralParese(targetServer, browser);
            }
        }

        private static void LogintoCerebralParese(string targetServer, IE browser)
        {
            browser.ShowWindow(WatiN.Core.Native.Windows.NativeMethods.WindowShowStyle.ShowMaximized);
            browser.Link(l => l.Url == targetServer + "/CerebralPareseRegister").Click();
            browser.TextField(t => t.Name == "ctl00$ContentPlaceHolderMain$RoleComboBox").SetAttributeValue("readonly", "");
            browser.TextField(t => t.Name == "ctl00$ContentPlaceHolderMain$RoleComboBox").TypeText("Registeransvarlig");
            browser.Button("ContentPlaceHolderMain_LoginButton").Click();
        }

In this example, an instance of an IE object is instantiated inside the using block. The url specified in the constructor argument is requested. Then the unit test
maximizes the window, then it will search on the login page for a Link object (basically searching for the A tags) by url matching CerebralPareseRegister.
It will then look for a TextField, again using a lambda overload (Linq is supported in WatIN, which is written in C#), overriding its readonly html property using the SetAttributeValue method and setting readonly to empty string, unlocking the readonly textbox. Then it writes in "Registeransvarlig" (a role in my test scenario) in the textfield, using the TypeText method with the argument passed into the text box. The last line looks for a button, i.e. an input tag element with id equal to the passed in argument and invokes the click method which will click the button.

The test then will check that it is possible to login to this registry. Without giving out to much details to our global audience, we got web registries which there will be about 50 registries later and this single test will test logging into a single registry (CerebralPareseRegistry). We would then probably test all 50 registries and verify that we can log in to the different registries. The Internet Explorer browser is not thread safe and therefore there is a risk that unit tests running in parallel will crash the IE browser. The good thing then, is that when using the IE browser in these parallel tests, they will run in STA (Single thread apartment) and therefore it will avoid the possible crash. An optimization is in the TestInitialize method use the same IE object and then dispose it in the TestComplete method. Instead, use a single IE object per test to keep thread safety. This will increase the test time. The good thing is that these automated web gui tests can be run in automatic mode and for example runned every night in the nightly build. The WatiN framework makes it therefore possible to do full integration unit tests using browser automation so that you can verify that the web application is working for the end user for its core functionality, such as log in to a web application, perform a search and so on.

The WatiN tests should be testing the core end-user functionality. The different parts of your web application, for example a MVC 3 application, should also have unit tests of their own.

As I have suggested in previous posts, the MvcContrib TestHelper should be used when testing Controllers and their actions in MVC 3. Unit tests in javascript can use the helper class of Stephen Walther. The views can also use the Razor Single File Generator to tests their views. Finally testing the DAL layer Entity Framework supports testing POCO objects using the Seed function if you use Entity Framework Objects.

WatiN supports a multitude of functionality and this blogpost just wanted to mention it.

Check out the http://watin.org website to see the documentation of WatiN and download the package, if you do not want to use Nuget. WatiN is open source and therefore fully customizable.

Adventures with the MvcContrib TestHelper

2011-09-06T15:19:00.000-07:00

Unit testing a MVC Controller
When unit testing a MVC controller, stop reinventing the wheel and take a look at the MvcContrib TestHelper. Add a reference to the MvcContrib.TestHelper.dll and unit testing different functionality of your controller and its actions should be a walk in the park. Yes, using Moq to build up a mocked object is possible, but since MvcContrib TestHelper supports much of the needed functionality, why not start using it?

How to start using the MvcContrib TestHelper?
Download the MvcContrib TestHelper with the MvcContrib release package from this location: Mvc Contrib

Install the MVC contrib zipped file. Actually there is no installer, just a bunch of DLL files. It is the file MvcContrib.TestHelper.dll that you are interested in. Add this dll as a reference to the Visual Studio 2010 test project in your solution (remember to add this file to your solution by saying "Copy to output folder" and modify your WiX scripts, if needed), then create a new basic unit test or unit test and at the top add the using statement:


using MvcContrib.TestHelper;

Verify that the view result is returned and view name and model type matches in a unit test for a MVC action

Given that we have modified the Index mvc view to be strongly typed by a class Bird in our Models folder, the following code can verify in a single assertion that the returned ActionResult is a ViewResult, that the rendered view name is "Index" and that the model, that is the strongly type that the view is associated with is a given type as follows:


        [TestMethod]
        public void IndexTestViewResult()
        {
            var controller = new HomeController();
            ActionResult result = controller.Index();
            result.AssertViewRendered().ForView("Index").WithViewData(); 
        }

First off, I just new my controller I want to test, HomeController in this case.
Then using the extension methods in MvcContrib.TestHelper I call AsserViewRendere() which just asserts that ActionResult is of type ViewResult. Further, I check with the ForView extension method (take note of the chaining going on here) that the view name is Index. The third part of this single assert checks that the View data is of type Bird.

In this particular example, make note that my Index method looks like the following in my HomeController:


 public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View("Index", new Bird { SpeciesName = "Crow",
 CanFly = true, WeightInGrams = 400, WingspanInCentimetres = 80 });
        }

       .
       .
       .

    }

Obviously the Bird class is just a simple sample in this case.. The second argument
could be assigned to variable called model and passed in for cleaner code. The point I want to make here is that when you return a ViewResult, specifically specify the View Name explicitly, as this then can be verified with the ForView extension method in a unit test.

For more advanced controller tests there are lots of functionality in MvcTestContrib.TestHelper DLL to help out. Do not reinvent the wheel to get started with unit testing your controllers, use MvcContrib TestHelper!

Towards more complex controller action tests in MVC

Just to get started with a custom HttpContext, I wanted to test out the TestControllerBuilder class in MvcContrib.TestHelper. With this class, I adjust the unit test for the index action method a bit:


       [TestMethod]
        public void IndexTestViewResult()
        {
            TestControllerBuilder builder = new TestControllerBuilder();
            var controller = builder.CreateController(); 
            builder.HttpContext.Cache["test"] = "test1"; 
            builder.InitializeController(controller); 
            ActionResult result = controller.Index();
            result.AssertViewRendered().ForView("Index").WithViewData(); 
        }

Now, I use the TestControllerBuilder class to create a controller of type HomeController. The builder is then tested out with setting the HttpContext.Cache to a test key-value pair. Further on, the line above instantiates the HomeController by using the CreateController static generic factory method by passing in the home controller as a generic type argument. Then the controller is initialized with the TestControllerBuilder. The unit test passes. Obviously, this just show how the HttpContext can be mocked using the TestControllerBuilder.

One important note here is the strange error I got thrown at me when running the test the first time.

Test method TestMvcContribUnitTests.Tests.Controllers.HomeControllerTest.IndexTestViewResult threw exception:
System.InvalidOperationException: Unable to create a factory. Be sure a mocking framework is available.

To avoid this error and get the test to pass, add also a reference to a mocking framework. By glancing into the code at the Mvc Contrib Codeplex page, I see that Rhino Mocks and Moq is the two mocking frameworks with support for TestHelper in MvcContrib. Since I have worked most with Moq, I just added a reference to Moq.dll (copy a reference to the Moq.dll assembly file, copy local set to true), and then the test passed.

This now, shows how to get a HttpContext which can be adjusted (Request, Response, Cache and so on), using Moq and MvcContrib TestHelper. The developer can then focus on the task at hand when it comes to unit test, namely to write efficiently unit tests that are relevant and not reinvent the wheel to get HttpContext up and running in Moq, without using MvcContrib TestHelper.

I will look into additional adventures of using MvcContrib TestHelper. If there are other use-case scenarios that should be presented, it would be nice to know.

Testing a RedirectToAction inside a mvc controller action

To test the redirection of an action inside a mvc controller action, use the
following:

Suppose we have return the following:


..
  return RedirectToAction("About"); 
..

The test can then verify that we are returning a RedirectToActionResult and that
the controller action's name is "About" as follows:


..
result.AssertActionRedirect().ToAction("About");
..

In case we return a RedirectToActionResult with overload:


..
    return RedirectToAction("About", "Home"); 
..

To test this we can write:


..
   result.AssertActionRedirect().ToController("Home").ToAction("About"); 
..

Testing the routing in an MVC application

To test out the routes in your MVC application, the following unit test is served as an example using MvcContrib TestHelper:



        [TestMethod]
        public void RouteTestHomeIndex()
        {
            var routeTable = RouteTable.Routes;
            routeTable.Clear(); 
            routeTable.MapRoute(null, "{controller}/{action}/{id}",
                new { controller= "Home", action= "Index", 
                 id = UrlParameter.Optional    });

            "~/Home/Index".ShouldMapTo(action => action.Index());
            "~/Home/About".ShouldMapTo(action => action.About()); 
        }

First line of the unit tests grabs a reference to the RouteTable.Routes property, defined in the System.Web.Routing namespace. The routetable is then cleared and then
the MapRoute method adds a route definition to test. We set up the default route using the MapRoute method. Then we test the two routes "~/Home/Index" and "~/Home/About". These two values are strings and MvcContrib TestHelper has extension method which will check that the route specified in the string maps to a controller using the ShouldMapTo extension method with a generic argument specifying the controller, and in the parameter the action method of the contorller is specifed. Actually, controller => controller.Index is probably a better lambda argument here.

This shows that testing out routes are simple using MvcContrib TestHelper. Just use the string extension methods to test out which controller and which method a certain route should take.

Additional methods in the unit testing of Javascript

2011-09-05T17:07:00.000-07:00

More methods to the unit testing of javascript
I am building upon the great example of unit testing in javascript by Stephen Walther, and will now present additional methods to the JavascriptUnitTestingFramework.js file he presented.

Let me first list up the new contents:



var assert = {

    areEqual: function (expected, actual, message) {
        if (expected !== actual) {
            throw new Error("Expected value " + expected
                + " is not equal to " + actual + ". " + message);
        }
    },

    areNotEqual: function (expected, actual, message) {
        if (expected === actual) {
            throw new Error("Expected value " + expected
                + " is equal to " + actual + ". " + message);
        }
    },

    isTrue: function (actual, message) {
        if (!actual) {
            throw new Error("The provided actual value" + actual + " is not evaluating to true. " + message);
        }
    },

    isNull: function (actual, message) {
        if (actual != null) {
            throw new Error("The provided actual value " + actual + " must be null. " + message);
        }
    },

    isNotNull: function (actual, message) {
        if (actual == null) {
            throw new Error("The provided actual value " + actual + "must be not null." + message);
        }
    },

    isFalse: function (actual, message) {
        if (actual) {
            throw new Error("The provided actual value " + actual + " must be false.   " + message);
        }
    },

    isInstanceOfType: function (actual, type, message) {
        if ((actual instanceof type) == false) {
            throw new Error("The provided actual value " + actual + " is not an instance of type  " + type + ". " + message);
        }
    },

    referenceEquals: function (actual, expected, message) {
        if (actual !== expected) {
            throw new Error("The provided actual and expected values does not point to the same object. Actual is " + actual + " and expected is " + expected + " " + message); 
        }
    }

};

I have added much of the methods of the Assert class in C#. The Assert class have static methods such as ReferenceEquals, IsTrue, IsFalse, AreNotEqual and so on and these methods have now been added above.

Lets continue with the javascript unit tests using this js file.



//At the start of the file for your javascript unit tests 
//add a reference to the unit testing reference file JavascriptUnitTestingFramework.js
//Use the reference element and three slashes. 

function testAddNumbers() {
    // Act
    var result = addNumbers(1, 3);
    
    // Assert
    assert.areEqual(4, result, "addNumbers did not return right value!");
}

function testFactorial() {
    var result = factorial(5);
    assert.areEqual(120, result, "factorial did not return righ value!");
}

function testIsTrue() {
    assert.isTrue(110 > 0, "This must evaluate to true for the test to pass.");
}

function testIsNull() {
 var city = null; 
 assert.isNull(city, "Must be null");
}

function testIsNotNull() {
    var city =  { name: "London" };
    assert.isNotNull(city, "Must be not null");
}

function testIsFalse() {
   var actual = 4 > 5; 
   assert.isFalse(actual, "The expression must evaluate to false.");

}

function testIsInstanceOfType() {
    assert.isInstanceOfType(new String("mystring"), String, "The provided actual value must be an instance of type String.");
    assert.isInstanceOfType([1, 2, 3, 4], Array, "The provided value must be an
instance of an array.");
}

function testAreNotEqual() {
    assert.areNotEqual("abc", "abbc", "Provided expected value and actual value are not equal");
}

function testAreEqual() {
    assert.areEqual("def", "def", "The two provided values does not agree."); 
}

function testReferenceEquals() {
 var a = { city: "Manchester" };
 // var c = { country: "Ireland" }; 
 var b = a;
 assert.referenceEquals(a, b, "The two objects does not point to the same object."); 
}

The unit tests written in C# then looks like this:



        [TestMethod]
        public void TestFactorial()
        {
            var jsHelper = new JavaScriptTestHelper(this.TestContext);

            jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
            jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
            jsHelper.LoadFile("MathTest.js");

            jsHelper.ExecuteTest("testFactorial");

        }

        [TestMethod]
        public void TestIsTrue()
        {
            var jsHelper = new JavaScriptTestHelper(this.TestContext);

            jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
            jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
            jsHelper.LoadFile("MathTest.js");
            jsHelper.ExecuteTest("testIsTrue");   
        }

        [TestMethod]
        public void TestIsNull()
        {
            var jsHelper = new JavaScriptTestHelper(this.TestContext);
            jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
            jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
            jsHelper.LoadFile("MathTest.js");
            jsHelper.ExecuteTest("testIsNull");
        }


        [TestMethod]
        public void TestIsNotNull()
        {
            var jsHelper = new JavaScriptTestHelper(this.TestContext);
            jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
            jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
            jsHelper.LoadFile("MathTest.js");
            jsHelper.ExecuteTest("testIsNotNull");
        }

        [TestMethod]
        public void TestAreEqual()
        {
            var jsHelper = new JavaScriptTestHelper(this.TestContext);

            jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
            jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
            jsHelper.LoadFile("MathTest.js");
            jsHelper.ExecuteTest("testAreEqual");
        }

        [TestMethod]
        public void TestIsFalse()
        {
            var jsHelper = new JavaScriptTestHelper(this.TestContext);

            jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
            jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
            jsHelper.LoadFile("MathTest.js");
            jsHelper.ExecuteTest("testIsFalse");      
        }

        [TestMethod]
        public void TestIsInstanceOfType()
        {
            var jsHelper = new JavaScriptTestHelper(this.TestContext);
            jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
            jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
            jsHelper.LoadFile("MathTest.js");
            jsHelper.ExecuteTest("testIsInstanceOfType");
        }

        [TestMethod]
        public void TestAreNotEqual()
        {
            var jsHelper = new JavaScriptTestHelper(this.TestContext);
            jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
            jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
            jsHelper.LoadFile("MathTest.js");
            jsHelper.ExecuteTest("testAreNotEqual");

        }

        [TestMethod]
        public void TestReferenceEquals()
        {
            var jsHelper = new JavaScriptTestHelper(this.TestContext);
            jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
            jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
            jsHelper.LoadFile("MathTest.js");
            jsHelper.ExecuteTest("testReferenceEquals");

        }

Ok, so as the methods above show that much of the action should take place in the TestInitialize method. I will leave that to figure out for yourself, basically the methods will have some similar Arrange for the individual unit tests.

So what we now have is a basic way of performing unit tests against javascript using MSTest with methods such as AreNotEqual, AreEqual, IsNull, IsNotNull, ReferenceEquals, IsTrue, IsFalse that are available when doing ordinary C# unit tests.

Using Stephen Walter's solution makes the client code developer focus at the task at hand at writing Javascript code and companion unit test. I would not suggest that you unit test the jQuery based javascript "Gui code", since you need to have a document loaded (with companion DOM tree). Instead, what you should unit test of your javascript code would be your custom logic which is kind of independent of the "GUI" and as such is suitable to doing unit tests and TDD. I find myself now using these unit tests as a quick way of performing TDD with javascript. When developing the factorial function for example, I could verify that the code I was writing by remembering my university days of how a factorial function was indeed spot on by executing a unit test. These unit tests are alsovery convenient to modify and executes very quickly, outside any browser and web server.

I will now include a zipped file that contains a Visual Studio 2010 solution with a test project that shows how the unit tests are for javascript code is running under MSTest. You will need Microsoft Visual Studio 2010 with support for test projects to open up the solution, this is not supported in Visual Studio 2010 Express.. Many thanks to Stephen Walther for making the unit testing in javascript possible!

Download the zipped solution with the javscript unit testing framework and companion unit tests in C¤ / javscript here right here from 2Shared drop location:

Download zipped solution here of this article [zip]

Unit testing in Javascript done the right way!

Unit testing of javascript in MVC 3 application

2011-09-04T15:37:00.000-07:00

Goal: Unit testing the javascript code
In todays modern web applications, unit testing all your layers should be a goal. Often a developer unit tests the C#-code, so why only write unit tests for the server code, when the client code (such as javascript) is just as important? The end user uses both, and if there are custom logic in your javascript the code should definately have its own unit tests. In this article I will explain my own little adventure into looking at the possibilities I have to unit test my javascript code.

Initial spin
I have trying to resolve the issue of how to proper unit test javascript code in a MVC application the latest days. Basically I initially started out with the idea of definining which javascript code I would like to load and which unit test I would like to run. I ended up creating a test solution which was essentially working, but I did not like the end result. The good part was that I was using the QUnit unit testing framework that much of jQuery is based upon. I basically wrote the necessary code to define the javascript and the unit tests to run and I then looped through the list to launch off the browser to display results from QUnit. Yes, this works and yes it uses the elegant QUnit framework - but there are several negative sides of this browser launcher approach. The really negative part is that these browser launched tests needs non-automatic supervision. The tester must inspect the results in the browser and there is really a lot of dependendency going on. We need a working browser and web server, so this is not a general unit test. I was striving to find the solution, and in general I wanted to use MS Test, i.e. I wanted to define ordinary unit tests that were "javascript flavored". Before venturing too deep into this seemingly mess, I discovered that somebody else already had thought of this.

Stephen Walter to the rescue
In his blog article, Stephen Walter explains how to do the proper unit test
with MsTest, which is just what I wanted. Best of all, since we now can use MsTest this will support automatic running of unit tests and fits nicely into MSBuild and the rest of the test infrastructure. Finally the javascript code can be put under control! What I then did was read through Stephen Walter's article and test out his complementary solution. It worked perfectly out of the box, and I do not see much changes that needs to be done to make this suit perfect into MVC 3 as Stephen Walter already shows the solution in such an application.

Summing up the article of Steven Walter
I just want to confirm to the rest of the interested party that Steven Walter's solution to unit tests in javascript is working perfectly. I will present his solution in summary form next. First of all, the unit test project added to the MVC
project that should have tests for javascript must have a reference to the Microsoft Script Control. This is an ActiveX COM component. The addon can be downloaded using the link next: Microsoft Script Control 1.0. Once this DLL has been added to the unit test project, you want to add a unit test. This will not be a basic unit test, as this kind of test does not have a TestContext, which will be needed. Second, add a folder called helpers, and add Stephen Walter's helper class for running the javascript code. The javascript code and javascript unit test will not run in a browser envrironment, but use the ScriptControl class. This will behind the scenes actually use the JScript engine which means that the browser in effect we test is Internet Explorer 8. This will actually suit our needs, since the loading of the additional libraries such as jQuery to support cross browser support should also be needed. The plumbing code to set up the ScriptControl with the correct .js library files I would suggest is set up in the TestInitialize method of your unit test, and it should call a common method, preferably also in Helpers folder to load up the "default" jquery javascript files once javascript code that uses jQueryis to be tested. Beware of the ordering of loading the js files. The js files should be as default be built using build type content (we will load up these files using "loose files"). The path pointing to the js files should point to the javascript files in the Content/Scripts folder. In general, javascript that should be tested and be available for the views should in general reside in the Content/Scripts folder for a MVC application. The tests written in javascript is in Steven Walters example put in a folder called JavascriptTests in the test project. This looks like a good practice. In general, the folder structure under Content/Scripts should somehow match the folder structure under JavascriptTests, once one gets more javascript tests added.

In Steven Walther's article there is a specific step of setting up the test settings for the javascript code to deploy a folder for the javascript code during the execution of the test. This step should be carefully read, since the tests needs to find the javascript files during the testexecution. Basically, a .testsetting file needs to be added to the solution to make this possible, so I just refer to the article.

Let me present the helper class which Steven Walter created for instantiating and initializing the ScriptControl instance.



   public class JavaScriptTestHelper : IDisposable {

        private ScriptControl _sc;
        private TestContext _context;

        /// 
        /// You need to use this helper with Unit Tests and not 
        /// Basic Unit Tests because you need a Test Context
        /// 

        /// Unit Test Test Context
        public JavaScriptTestHelper(TestContext testContext) {
            if (testContext == null) {
                throw new ArgumentNullException("TestContext");
            }
            _context = testContext;

            _sc = new ScriptControl();
            _sc.Language = "JScript";
            _sc.AllowUI = false;
        }

        /// 
        /// Load the contents of a JavaScript file into the 
        /// Script Engine.
        /// 

        /// Path to JavaScript file
        public void LoadFile(string path) {
            var fileContents = File.ReadAllText(path);
            _sc.AddCode(fileContents);
        }

        /// 
        /// Pass the path of the test that you want to execute.
        /// 

        /// JavaScript function name
        public void ExecuteTest(string testMethodName) {
            dynamic result = null;
            try {
                result = _sc.Run(testMethodName, new object[] { });
            } catch {
                var error = ((IScriptControl)_sc).Error;
                if (error != null) {
                    var description = error.Description;
                    var line = error.Line;
                    var column = error.Column;
                    var text = error.Text;
                    var source = error.Source;
                    if (_context != null) {
                        var details = String.Format("{0} \r\nLine: {1} Column: {2}", source, line, column);
                        _context.WriteLine(details);
                    }
                }
                throw new AssertFailedException(error.Description);
            }
        }

        public void Dispose() {
            _sc = null;
        }

The JavascriptTestHelper class of Steven Walter basically news up a ScriptControl class and contains two methods to load a javscript file (.js) and then exceute the test. Of course, several javascript files can be added. Note that the ScriptControl instance which is a COM object needs to be nulled when disposing the object.

Ok, so this is the class that will be used when writing the [TestMethod] in C# for the javascript test. Basically we must arrange the test using this testhelper to load up the .js files, and then use the test helper to execute the javascript test. The test method name must be added also to the ScriptController instance before starting up.

Every javascript unit test will of course in essence be written in Javascript, the C# based unit test is just a wrapper, the really interesting part is as always in Javscript when it comes to the client code. So each javascript class will then refer to a utility library. Steven Walther gives a very simple example of such a library, which is nothing more than providing a AreEqual function. The unit test written in javascript will then refer to this "library", using the ///
syntax. This library will be in the base path of he JavascriptTests folder for now. The path must point to this JavascriptUnitTestLibrary.js file. The AreEqual method is really simple and the addition of more methods to support different errors should be a overcoming task. I will myself try out addind more such methods. The sad part is that this code does not use QUnit to support more function that Steven Walter's AreEqual metod, but this method covers very much of the needed functionality. I will soon add more examples of unit testing functions soon into this file.

Here is the JavascriptUnitTestLibrary.js file:

var assert = {

areEqual: function (expected, actual, message) {
if (expected !== actual) {
throw new Error("Expected value " + expected
+ " is not equal to " + actual + ". " + message);
}
}

};

The little library does nothing more than define an object with a single method areEqual which will throw an error. The script controller will in the helper class
catch this error and then rethrow it into an AssertFailedException, which MSTest will then recognize and we are getting our fancy detection of errors in Javascript that MSTest will see! Elegant!

So the only thing next when it comes to the javascript unit test is to write the test and use this utility library. Lets add a new test for demonstrational purposes to the addTwoNumbers method Steven Walther was presenting in this article, the factorial of a number, let's put this additional code to MathTest.js (the reference line at the top should only be listed once).

MathTest.js:

///
function testFactorial() {
var result = factorial(5);
assert.areEqual(120, result, "factorial did not return righ value!");
}

This test will then assert that the factorial of five is equal to 120 (check with your calculator!). The MathTest.js file is added to the JavascriptTests folder.

Ok, so next up is then writing the unit test, add a new unit test to the test project
and then write the following:

[TestMethod]
public void TestFactorial()
{
var jsHelper = new JavaScriptTestHelper(this.TestContext);
jsHelper.LoadFile("JavaScriptUnitTestFramework.js");
jsHelper.LoadFile(@"..\..\..\MvcApplication1\Scripts\Math.js");
jsHelper.LoadFile("MathTest.js");
jsHelper.ExecuteTest("testFactorial");
}

If you can't understand why the code in the JavascriptTests are references as seemingly being in the same folder as the unit test (which is one folder up), this is handled by the testsettings file added previously. Refer to Steven Walthers article.

The test method in my file, UnitTest1.cs is then newing up the test helper class
and make note, passes in the testcontext of my unit test, which is why a basic unit
test will not suffice in this case. Then the ordering of loading the js files is
important. First the unit test framework js file is added. Then the javascript
code is added which will be tested. Next up the javascript code that contains the
javascript based test is added. If your javascript code uses a lot of jQuery libraries, additional js files should be added before the user provided javascript
code. The ordering is as previously mentioned important, and the paths should be correct. Basically one wants to go up three levels of the current directory and then go into the Scripts or Content/Scripts folder to the target .js file. I really suggest that the Scripts folder should be the place that custom javascript is added and that the .js files that the user creates should be in sub folders here. The base directory of the Scripts folder should only contain the jquery libraries and similar, not the user based code, as this is not very scalable as the web project grows..

Finally the ExecuteTest is called and the parameter provided is the name of the javascript test.

I also of course had to add the factorial function in the Math.js. This code looks like this:

function factorial(n) {
if (n > 1) {
return n * factorial(n - 1);
}
else {
return 1;
}
}

This factorial function uses recursion to return the factorial of a number. The code is almost the same as a C# based function for the factorial.

Then I just ran the unit test with Ctrl+R and Ctrl+T and saw it pass in the test results. Great stuff Steven Walther! I believe this is the correct way to do unit tests in javascript, i.e. not using QUnit.

The next obvious task is to implement more code to Steven Walther's JavascriptUnitTestLibrary.js file. This should be a near future task I will look into.

I have looked at other parts of unit testing MVC applications. Unit testing controllers are actually very good supported, as these are ordinary classes, which requests can be mocked. The unit testing of views is possible using the RazorSingleFileGenerator or RazorGenerator extension (although many means that unit testing a MVC view should be avoided).

One open issue is how to unit test a MVC 3 Razor helper, I will look into this perhaps using RazorSingleFileGenerator extension in the near future..

Automatic DisplayAttribute using PostSharp

2011-08-05T18:04:00.001-07:00

The Problem

I worked with a MVC 3 web application the other day and was asked to translate the properties to Norwegian. The MVC 3 views are written in Razor view engine and the models are set to DataContract classes. These classes consists of multiple properties and each property needs to have a DisplayAttribute where the Name property is set to the text to display. An overload of the DisplayAttribute is to provide the type of a Resource file (public) followed by the Name attribute, which will in this case be the Resource key inside the Resource file.

After translating large DataContract classes with many DataMember properties, I thought this was a very tedious process. Another challenge was that I got runtime
exceptions when opening the MVC 3 view in a browser just to see an exception being
thrown at me because the resource file did not have a matching resource key which
should be tied to a property by given Name in the DisplayAttribute.

Attributes being difficult

The source of this problem is actually that Attributes in C# cannot define the Resource key directly, but by a string literals. The reason for this is limitations in the types supported in the parameters of a attribute. The ResourceType of the DisplayAttribute is set to the Resource file Type (the resx file is actually a class, inspect the designer.cs file to see its structure). The Name attribute is as previously mentioned a string literal, hardly very refactoring friendly.

Finding a solution

In another project at my work we have used PostSharp to aid in such repetitive tasks, where each property or class needs to be tagged with attributes in a certain pattern. I created a test project and implemented a PostSharp attribute / aspect called AutoDisplayAttribute. This attribute is set on the class level and will decorate all properties with a required display attribute and a resource key set to the property name. The client of this aspect can enforce lookup in the Resource File which means an error will be raised if there are no matching Resource key. The default behavior of this aspect is to avoid setting the DisplayAttribute if no matches are found in the Resource File specified (forceLookup).

Download ILSpy and SharpCrafter's PostSharp

I also used ILSpy to inspect the results in the DLL file of my test project, and the properties were all decorated with my desired DisplayAttribute. ILSpy is free software and is similar to Reflector. The tool is very useful to inspect metadata for DLL files and disassemble them to reveal the source code.

ILSpy

If you have not used PostSharp earlier, you need to download the setup from SharpCrafters. The version I used is PostSharp version 2.1 CTP 3. The download page should be available here:

PostSharp 2.1 Community Edition CTP 3

The PostSharp.dll file must be added in the References to your test project to test out the source code I will present next.

The source code for the AutoDisplayAttribute

The source code for the AutoDisplayAttribute follows below.



        // We set up multicast inheritance so  the aspect is automatically added to children types.
        [MulticastAttributeUsage(MulticastTargets.Class, Inheritance = MulticastInheritance.Strict)]
        [Serializable]
        public sealed class AutoDisplayAttribute : TypeLevelAspect, IAspectProvider
        {

            private Type _resourceType;
            private bool _forceLookUp; 

            public AutoDisplayAttribute(Type resourceType, bool forceLookup = false) : base()
            {
                _resourceType = resourceType;
                _forceLookUp = forceLookup; 
            }

            // This method is called at build time and should just provide other aspects.
            public IEnumerable ProvideAspects(object targetElement)
            {
                Type targetType = (Type)targetElement;           
                var targetTypeProperties = GetTargetTypeProperties(targetType).Distinct(); 
                    
                // Add a Display attribute to every relevant property.
                foreach (PropertyInfo property in targetTypeProperties)
                {                    
                    if (!property.IsDefined(typeof(NotAutoDisplayAttribute), false) && 
                        !property.IsDefined(typeof(DisplayAttribute), false))
                    {
                        if ((!_forceLookUp) && (_resourceType.GetProperty(property.Name) == null))
                        {
                            continue;
                        }
                        CustomAttributeIntroductionAspect introduceDisplayAspect = 
CreateDisplayAttributeIntroductionAspect();
                        InitDisplayAttributeForProperty(introduceDisplayAspect, property);
                        yield return new AspectInstance(property, introduceDisplayAspect);
                    }
                }
            }

            private void InitDisplayAttributeForProperty(CustomAttributeIntroductionAspect introduceDisplayAspect, PropertyInfo property)
            {
                introduceDisplayAspect.CustomAttribute.NamedArguments.Add("ResourceType", _resourceType);
                introduceDisplayAspect.CustomAttribute.NamedArguments.Add("Name", property.Name);              
            }

            private static PropertyInfo[] GetTargetTypeProperties(Type targetType)
            {
                return targetType.GetProperties(BindingFlags.Public | BindingFlags.DeclaredOnly | BindingFlags.Instance); 
            }

            private static CustomAttributeIntroductionAspect CreateDisplayAttributeIntroductionAspect()
            {
                CustomAttributeIntroductionAspect introduceDisplayAspect =
                    new CustomAttributeIntroductionAspect(
                        new ObjectConstruction(typeof(DisplayAttribute).GetConstructor(Type.EmptyTypes)));
                return introduceDisplayAspect;
            }
        }

        [AttributeUsage(AttributeTargets.Property)]
        public sealed class NotAutoDisplayAttribute : Attribute
        {

        }

AutoDisplayAttribute code explained

The class above generates the DisplayAttribute for properties inside the
class the AutoDisplayAttribute is applied on, which is the Attribute which is used to lookup the string to display for a given property.

The TypeLevelAspect is the parent class for AutoDisplayAttribute and the class also
implements the IAspectProvider interface. The interface consists of the public method ProvideAspects which will return an IEnumerable of AspectInstance. All these supportive classes and interface is part of the PostSharp API which is used in the code to provide the "magic" post-compilation code executed right during/after the default compilation process.

Talk and embrace

I like this AutoDisplayAttribute a lot. The aspect will definately be a time saver. If you set forceLookup to true on all classes that should have translated properties (usually data contracts), excluding the properties tagged with NotAutoDisplayAttribute, you will get compilation errors when the Resource lookup defined in a Display(Name="MyProperty", ResourceType=typeof(MyResourceType)], which is a huge benefit compared to having run time exceptions thrown at you when the display lookup fails. To fix such an exception, add the resource key and associated resource value in the resource file and build again. If the build went fine, the display attributes are set up. When you refactor a property (i.e. rename), the AutoDisplayAttribute will indirectly require that the resource key is also refactored. To avoid this, it is possible to rather stick to adding the DisplayAttribute manually, but try to keep up this when having DataContract classes with many properties that must be translated and displayed using a resource file. Instead, when having AutoDisplayAttribute on all data contracts and forcing lookup, the compilation errors will guide you to keep the lookup process in a "type-safe" manner, requiring that for each property name there must be a resource key with the same case-sensitive name. In addition, this attribute / aspect is a huge time saver and when the data contracts are tagged with this attribute, it merely consists of adding the [AutoDisplay(typeof(MyResource), forceLookup:true)] tag at the class (instead of lots of [Display(..)] attributes polluting your data contract..

Use-case of this attribute

A minimalistic example follows.

Consider this data contract class. Note the AutoDisplayAttribute at the top of the class.


 [AutoDisplay(typeof(Resource1), forceLookup:true)] 
    public class TestModel
    {

        public DateTime? BirthDate { get; set; }

        public string FirstName { get; set; } 

    }

Lets follow up with a simple razor view sample



@Html.LabelFor(model => model.BirthDate) 
@Html.TextBoxFor(model => model.BirthDate, new { id = "dtpBirthDate" }) 

@Html.LabelFor(model => model.FirstName)
@Html.TextBoxFor(model => model.FirstName, new { id = "tbFirstName" })

Of course, this attribute is very general and can be used in other frameworks
than MVC 3. When running the application, the labels should now use the value from the Resource file by given resource key.

Please note that the forceLookup is set default to false. To enforce lookup and letting the compiler aiding you that the resource file do indeed have the resource key, set the forceLookup to true explicitly.

In the end, a screen shot from ILSpy to show the magic revealed.

Download sample solution here:

Download sample MVC 3 solution with AutoDisplayAttribute implementation

Regards, Tore Aurstad

Slides about Ecmascript 5 arrays

2011-07-17T08:39:00.000-07:00

I am publishing some slides about Ecmascript 5 arrays written in Norwegian in this article.

Histogram equalization

2010-12-30T16:40:00.000-08:00

I have added histogram equalization to the Image Algorithms demo. This method scans through an image, inspecting each pixel and creates a histogram. If a pixel p_q of grayscale intensity g_q is found at location (x,y), the Histogram H is incremented at position g_q for all grayscale levels L = 0 .. G-1, where G = 256 for grayscale images. A cumulative histogram is then calculated and the resulting pixel value is the ratio between the cumulative histogram and the total amounts of pixels in the image multiplied with G - 1.

More formally.

ALGORITHM - Histogram equalization.

1. For an NxM image of G gray levels, create an array H (histogram) of length G initialized with default intensity value 0.

2. Form the image histogram. Scan every pixel and increment relevant position in the histogram H. If pixel p has intensity g_p, perform:
H[g_p] = H[g_p + 1.

3. Form the cumulative image histogram H_c. Set:
H_c[0] = H[0]
H_c[p] = H_c[p-1] + H[p] for all pixel intensities p where p = 0,1,2... G-1

4. Rescan the image and calculate the corrected intensity, which it output.
Let T[p] = round(((G-1)/(N*M)) * H_c[p]. For a pixel of intensity p in the image
at position x,y, use T[p] to find the correct adjusted value.

5. Display image results.

END.

Note about step 4. Use the (double) cast when doing the math.. In general, histogram equalization is all about creating a Histogram of an image, then form a cumulative histogram, and then use the ratio between the total amount of pixels N*M and multiply with the cumulative histogram H_c[p] and then multiply with (G-1), usually 255.. This will set the most luminous pixels in the image near full intensity, will the less luminous pixels towards zero intensity, increasing the dynamic range and contrast in the image.

Note about the demo, I have added also Hough transform (tested some basic images) and
filters for displaying histogram of the histogram equalization. Test them out. Hough transform shown the sinusoidal images in the parameter space and should be considered as not finished code.

A demonstration follows.

This is equalized to:

Download the demo here:
Image algorithms demo [2,7 Mb zip]

To summarize, to understand histogram equalization is to consider the cumulative histogram and scale this with the ratio with the total amount of pixels multiplied with 255 (G-1).. The result is that the brightest pixels are moved towards full intensity 255 and the darkest pixels are moved towards 0, increasing the contras and dynamic range.

Test out iterative optimal treshold algorithm on images?

2010-12-28T19:03:00.000-08:00

Merry Xmas

Image algorithms demo [2,6 MB zip]

Iterative optimal tresholding

2010-12-28T17:04:00.000-08:00

I have tested out and implemented another filter in my image algorithms demo. I follow the Iterative (optimal) treshold selection algorithm from the "Image Processing, Analysis and Machine Vision" book from my Computer Vision course, which I took when studying to my Master of Science (Siv. ing datateknikk) degree at NTNU, Trondheim. It is a simple algorithm, consisting of these steps.

ALGORITHM - Iterative optimal tresholding.

GOAL: Separate an image into two regions, background and foreground.
DEFINITIONS: Background is pixels
which got intensity below the current treshold, calculated in the algorithm's iterations. Foreground pixels got intensity above the current treshold.

STEPS:

1.Calculate the initial average of the current treshold value. Set this value to the

average of the four corner pixels average value.

2. Traverse the image. If a pixel is above the current treshold value, it is added to the sum of object pixels
(foreground pixels). Incremement the count of foreground pixels. Also, vice versa for the background pixels. Add to the sum of background pixels and increment the background pixels if the pixel's intensity is below the treshold value.

3. Calculate the average of the background average and object (foreground average) and set this to the next treshold value.

4. If not the next treshold is the same as current treshold, iterate the image again, but now set current treshold to next treshold. When the next and current treshold is same, the treshold calculated is the optimal treshold value. End iteration or break at 100 iterations.

5. After calculation is complete, display result. Set the object pixels to full pixel intensity (255). Background
pixels are set to 0, creating a binary image showing foreground and background.

It took five iterations to calculate the iterative optimal treshold value for the infamous Lenna image, calculated to be 162 in pixel intensity. For an average picture one would expect the value to be above 140 - 180, if the picture is grayscale image with good contrast.

Result:

IMPLEMENTATION - OptimalTresholdFilter.cs







using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;



namespace ImageAlgorithms.Filters.Treshold

{

  public class OptimalTresholdFilter : ImageFilterBase

  {



      int objectPixelSum = 0;

      int backgroundPixelSum = 0;

      int currentTresholdValue = 0;

      int nextTresholdValue = 0;

      int objectPixelsCount = 0;

      int backgroundPixelCount = 0;



      public OptimalTresholdFilter()

      {

          Header = "Optimal treshold filter";

          FilterType = FilterTypeEnum.TresholdFilter;

      }



      public override void FilterProcessImage(int width, int height)

      {

          //base.FilterProcessImage(width, height);



          //Read first four pixels (edges of image)

          //Calculate the average of object pixels and background pixels

          //Let avg+1 = average of background pixels and object pixels

          //if avg+1 and avg is the same, stop, else continue.    

          CalculateAverage(width, height, 0);

          DisplayTresholdImage(width, height);           

      }



      private void DisplayTresholdImage(int width, int height)

      {

          for (int i = 0; i < width; i++)

          {

              for (int j = 0; j < height; j++)

              {

                  int position = (j*width) + i;

                  if (TemporaryImageData[i, j] > nextTresholdValue)

                  {                  

                      ResultingImageData[position] = 255;

                  }

                  else

                  {

                      ResultingImageData[position] = 0;                                             

                  }

              }

          }

        

      }



      private void CalculateAverage(int width, int height, int iteration)

      {

          InitFilterIteration();

          CheckInitialStep(width, height, iteration);

          TraverseImageBackgroundForeground(width, height, iteration);

          CheckPixelCounts();

          CalculateNextTreshold();

          if (nextTresholdValue != currentTresholdValue && iteration < 100)

          {

              currentTresholdValue = nextTresholdValue;

              CalculateAverage(width, height, iteration + 1);

          }   

      }



      private void CalculateNextTreshold()

      {

          nextTresholdValue = ((objectPixelSum / objectPixelsCount) +

         (backgroundPixelSum / backgroundPixelCount)) / 2;

      }



      private void TraverseImageBackgroundForeground(int width, int height, int iteration)

      {

          for (int i = 0; i < width; i++)

          {

              for (int j = 0; j < height; j++)

              {

                  if (TemporaryImageData[i, j] > currentTresholdValue)

                  {

                      AddToObjectPixels(i, j);

                  }

                  else

                  {

                      if (iteration > 0)

                      {

                          AddToBackgroundPixels(i, j);

                      }

                  }

              }

          }

      }



      private void AddToBackgroundPixels(int i, int j)

      {

          backgroundPixelSum += TemporaryImageData[i, j];

          backgroundPixelCount++;

      }



      private void AddToObjectPixels(int i, int j)

      {

          objectPixelSum += TemporaryImageData[i, j];

          objectPixelsCount++;

      }



      private void CheckInitialStep(int width, int height, int iteration)

      {

          if (iteration == 0)

          {

              backgroundPixelSum = (TemporaryImageData[0, 0] + TemporaryImageData[width - 1, 0] +

                  TemporaryImageData[0, height - 1] +

TemporaryImageData[width - 1, height - 1]);

              backgroundPixelCount = 4;

              currentTresholdValue = backgroundPixelSum / backgroundPixelCount;

          }

      }



      private void CheckPixelCounts()

      {

          objectPixelsCount = Math.Max(1, objectPixelsCount);

          backgroundPixelCount = Math.Max(1, backgroundPixelCount);

      }



      private void InitFilterIteration()

      {

          backgroundPixelCount = 0;

          objectPixelsCount = 0;

          backgroundPixelSum = 0;

          objectPixelSum = 0;

      }

  }

}

Download the latest version of the algorithms demo (v1.1.) to test out the optimal treshold filter. As you can see in the code above, the class inherits from ImageFilterBase, which handles some of the "logistics" around the image filter (loading the filter and showing the result).

Image filter algorithms demo is updated!

2010-12-27T19:46:00.000-08:00

Download the newest source code?

Image algorithms demo

2010-12-25T19:22:00.000-08:00

At last an update to my blog! This has been a busy year for me with my work, I am now a developer in Helse Midt-Norge IT since May, earlier this year I worked as an independent consultant for Artsdatabanken (NTNU). I work with WPF and C# mainly presently.

I will now present a new hobby project of mine.

This WPF application demo of image algorithms demonstrates different techniques towards
blur, sharpen, edge detection and other filtering techniques, all relying on the general concept of Convolution in image processing. 8-bits level grayscale images (256 levels, 1 bpp) are supported.

I have worked with an image algorithms demo the last days. The
demo is a small WPF application that demonstrates image algorithms used in
edge detection. See the link below to download the zip file that contains
the Microsoft Visual Studio 2010 project with source code.

Examples of edge operators are sobel edge operator and Prewitt, Laplacian, Roberts and
Horizontal and Vertical Sobel, blur difference operator, shown above. There are additional
filters included.

The resulting images can be inverted. The application works with 8-bit grayscale images (256 levels). The BitmapSource class must be able to import the image (BMP or GIF should work).

Right now the demo is in v1.1. I will add more features soon. There are a few issues with double-edges, noise and normalization in the demo, but I hope I will complete the demo in a more stable version later. Feel free to unzip the zip file linked below and provide comments of the code. Perhaps you can add new features to my code and discuss optimizations, corrections?

I will state that already there is very little code to make a new filter, so this source code could be used as a basis for developing filters for applications needing to provide basic blur, sharpen and edge detection capabilities.

Sobel operator, horisontal komponent (3x3 convolution kernel).

Comment:

Download newest version of ImageAlgorithmsDemo WPF Application here [v1.1.]

Image algorithms v1.1 (Zip-fil, ca. 2,4 MB compressed)

Last update 28th of December 2010.

Future stuff:

improve the speed of the filtering
support greater than 8 bpp (e.g. RGB)
support more operators. Canny edge and more advanced filters are desired
improve code, add tests to the test project
even friendlier GUI, more feedback and information
document code
share code with the community when v2.0 is done.

The goal is that this demo should be a good starter demo of edge analysis in digital image algorithms, that can be used in courses at universities and the likes. The demo demonstrates pixel manipulation in WPF-application and filtering also with up to date .NET 4.0 code. Often one only finds C or C++ code when looking for these kinds of algorithms..

Comments?

ASP.NET MVC og jQuery Grid

2010-02-13T20:11:00.000-08:00

Jeg har testet ASP.NET MVC i Visual Web Developer Express og jQuery Grid. Det er kraftig teknologi som gir gode muligheter for å jobbe strukturert med utvikling i ASP.NET MVC (et rammeverk og paradigme som oppfordrer til strukturert og modularisert webutvikling, optimert mot TDD, test-drevet utvikling), samtidig som man vha. jQuery og jQuery grid kan vise data i en grid.

Jeg vil begynne med å vise et skjermbilde av hva som testløsningen min inneholder.

- ASP.NET MVC er en ny teknologi som ASP.NET kan benytte for å tilby en mer strukturert måte å jobbe på. Man går vekk fra code-behind og rammeverket er meget
datasentrisk. Man har en oppkobling, gjerne til Sql Server (.mdf filer og tilsvarende), altså MS-SQL, hvor man definerer raskt en datamodell. Man bruker så Linq-to-sql for å generere klasser for datalag for å jobbe mot dataene. Videre har man både Model og Model-View klasser etter behov, samt .aspx filer er "View". Partielle view er av typen MVC Web User control (.ascx filer).

For de som har jobbet lenge i ASP.NET vet man farene ved store prosjekter. Det blir fort spaghettikode og monolittisk kode. MVC tvinger en til å jobbe strukturert og modulrisert, samt unngår spaghetti på en mye mer streng måte enn standard ASP.NET.

En stor ulempe med MVC i ASP.NET er mangelen på en skikkelig grid-kontroll m.m., da vanlige ASP.NET kontroller ikke nødvendigvis vil virke i MVC..

Jeg har derfor testet ut jQuery Grid som er en meget bra måte å erstatte ASP.NET GridView. Best av alt, denne javascript baserte kontrollen kan benyttes i MVC-baserte løsninger!

Bortsett fra å tilby interesserte en nedlasting kan jeg kort si hva jQuery Grid er for noe. Det er en javascript plugin til jQuery og en klientbasert kontroll som er lik ASP.NET GridView, men har innebygd støtte for Ajax m.m.

Det tar en tid til å venne seg til å implementer en jQuery Grid. Man har ikke drag and drop på denne komponenten. Men det går temmelig raskt å få opp en løsning. I mitt demoprosjekt har jeg benyttet meg at Dynamisk Linq, som Scott Guthrie (en av de prinsipielle arkitektene bak ASP.NET) har laget. Dere finner implementasjonen i klassen Dynamic.cs. Jeg har i mitt testprosjekt laget en servermetode som spør en tabell i en .mdf fil om innholdet i tabellen Countries, som har alle hovedsteder og land i verden. Videre har jeg laget en Country dataklasse automagisk med Linq-To-Sql. I min HomeController (Controller er C-en i MVC) har jeg en Index funksjon som henter opp tabelldataene vha. Ajax og Json. Testfunksjonen min håndterer både paginering og sortering av databasen og json-dataene overføres tilbake til klienten, som viser dem i jQuery Griden. Denne kontrollen abonnerer på data fra server-side funksjonen som returnerer et ActionResult av type JsonResult.

MVC har en læringskurve og det er noe vanskelig å forstå hva alt dette er vits i å sette seg inn i. Men det vil spare en utvikler i ASP.NETfor mye arbeid, da det støtter TDD og unit testing på en mye bedre måte enn ASP.NET. Endelig går det an å utvikle nettsider profesjonelt og dele opp oppgaver til testere og verifisere at det man lager faktisk virker. Dette har vært enklere i applikasjonsutvikling enn i webutvikling, men med ASP.NET MVC så er det like enkelt å lage unit tester som for f.eks. WPF og WCF..

Ulempen med MVC er som sagt at vanlige ASP.NET serverkontroller ikke er vanligvis støttet. Men jQuery og jQuery Grid er sentral i MVC. Man har kontroller som er mer klient-orienterte enn de klassiske ASP.NET server-kontrollene. Med Json som kommunikasjon er det minimalt med data som går mellom klienten og serveren. Serveren leverer selvsagt data fortsatt ut til klient, men klienten "drar" dataene fra serveren oftere. Dermed blir det oftere requests, men disse er mindre i størrelse..

Dette gjør det mulig å utvikle webapplikasjoner som er repsonsive og tillater et vell av interaksjon. MVC i ASP.NET er en alternativ modell til Silverlight og den lekre jQuery Grid viser at dette er absolutt tilfelle.

I mitt demoprosjekt så er paginering og sortering støttet. Jeg har ikke testet enda hvordan man får til redigering i jQuery Grid eller har templates for celler, column reordering og annen avansert funksjonalitet, men dette er altså støttet i jQuery Grid. Dere finner jQuery Grid lett med et kjapt søkt med Google. Jeg anbefaler å sjekke ut vedlagte .zip fil for å se hele koden..

Til slutt før lenken til nedlastingen, så legger jeg ved koden for server-funksjonen i ASP.NET MVC som gir paginering og sortering. Den benytter som sagt Scott Guthrie sin Dynamic Linq klasse, som gir noen tilleggsfunksjoner som spytter inn SQL i linq-spørringer og gir det man trenger for akkurat dette..


  public ActionResult DynamicGridData
    (string sidx, string sord, int page, int rows)
        {
            var context = new GeografiTestDbDataContext();
            int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;
            int totalRecords = context.Countries.Count();
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

            var countries = context.Countries.OrderBy(sidx + " " + sord)
              .Skip(pageIndex * pageSize)
              .Take(pageSize);

            var jsonData = new
            {
                total = totalPages,
                page = page,
                records = totalRecords,
                rows = (
                  from c in countries
                  select new
                  {
                      i = c.Id,
                      cell = new string[] {
          c.Id.ToString(), c.Capital, c.Country1 
        }
                  }).ToArray()
            };
            return Json(jsonData);
        }

Linq-spørringene over virker ikke uten at man har Dynamics.cs filen som Scott Guthrie har laget, 81 kB stor. Her er det masse extension methods som gjør det mulig å spørre databasen inne i Linq-spørringer.. Dynamic Linq er helt vilt bra for de som tenker på hvordan det faktisk virker..

Til slutt, slik ser .aspx filen ut hvor man lager et jQuery Grid objekt:



        jQuery(document).ready(function() {

            jQuery("#list").jqGrid({
                url: '/Home/DynamicGridData/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Uniktnummer', 'Hovedstad', 'Land'],
                colModel: [
             { name: 'Id', index: 'Id', width: 120, align: 'left' },
             { name: 'Capital', index: 'Capital', width: 120, align: 'left' },
             { name: 'Country1', index: 'Country1', width: 220, align: 'left' }
             ],
                pager: jQuery('#gridpager'),
                pgtext: "Side {0} av {1}",
                pginput: true,
                recordpos: 'left',
                rowNum: 20,
                width: 900,
                multiSelect:true,
                hidegrid: false,
                rowList: [5, 10, 20, 50],
                sortname: 'Id',
                sortorder: "asc",
                viewrecords: true,
                imgpath: '/scripts/themes/redmond/images',
                caption: 'Hovedsteder i ulike land. Demotest.'
            });
        });

Man ser i json-egenskapen url hvordan jQuery Griden kobles mot server metoden
Index i HomeController.cs, som er tilgjengelig i route /Home/Index. MVC er litt
spesielt for ASP.NET utviklere, men etter å ha brukt det kun noen få dager ser
jeg vesentlige fordeler med det. En ulempe er at det kan bli litt vanskeligere på
klienten siden, men implementasjonen på server siden blir mye mer strukturert. Utfordringene ligger i at ferdige komponenter som ASP.NET GridView ikke er tilgjengelig. Skal man bruke MVC må man lære seg javascript godt og benytte jQuery
og nye komponenter. Dette er noe av den mest spennende teknologien, sammen med Linq, som Microsoft har laget på år og dag.

Visual Studio 2008 løsning:
Last ned prosjekt [Zip-fil, 711 kB] her.

Framgangsmåte for å kjøre mitt demoprosjekt:
1. Lagre zip fil på C:\minmappe
2. Pakk ut zip fil fra pkt 1.
3. Dobbeltklikk på .sln fil og se at Visual Studio laster..
4. Når pkt 3. er ferdig, trykk på knappen F5 på tastaturet ditt.
5. Be amazed.

:o)

Godbiten Javascript

2010-02-06T17:29:00.000-08:00

Javascript er et fantastisk herlig programmeringsspråk.

Her er grunnene til at jeg liker javascript:
- Ingen klasser! Alt er objekter.
- Dynamisk tolket språk som ikke er strengt typet, full fleksibilitet mht utvidelse.
- Intet behov for generics eller innviklede mønstre for å oppnå det javascript
greier på en elegant måte.
- Det programmeringsspråket i verden flest mennesker har tilgang til, nemlig som
en tolker i en nettleser.
- Innebygd støtte for lambda-uttrykk og avansert funksjonalitet som Javascript har
arvet fra Scheme.
- Det herligste, mest elegante språket i verden!

Jeg håper Ecmascript 5 ikke lager en stor bloatware ut av Javascript, men at språket
sin nette eleganse og enkelhet bevares som i dag. Det er nettopp enkelheten og
fleksibiliteten som gjør Javascript så kraftig.

Jeg anbefaler å se videoene av Douglas Crockford på Yahoo! sin video side.

Spesielt følgende video anbefales!

JavaScript: The Good Parts.

Javascript har selvsagt sine "flaws" også og Douglas Crockford går gjennom disse på en hysterisk morsom måte. (Man må være innvidd i denne bransjen for å sette pris på slike ting da..).

Mvh Tore A

Raskere Javascript med document-fragments?

2010-02-06T15:49:00.000-08:00

Jeg har undersøkt litt om man får kjøre raskere Javascript vha. document-fragments. Sentralt i denne teknikken er å benytte document.createDocumentFragment(). Dette er en "construct" eller byggekloss som tillater en å klargjøre store modifikasjoner i HTML DOM treet i en operasjon. Dermed slipper man "reflow", dvs. at nettleseren forsøker å tegne opp html dom treet, hver gang man setter inn et nytt element.

Jeg har testet teknikken ved å lage en Javascript kode som regner ut tiden det tar i antall millisekunder å sette inn 1000 elementer i et HTML nedtrekksliste, etter først å ha slettet 1000 elementer, hvis nødvendig, i samme nedtrekksliste. Enten ved å bruke document-fragments, eller ved å direkte manipulere HTML dom treet for hver iterasjon. Resultatene viser seg at effekten er mindre enn mange andre tester har vist, men det er størst effekt i Internet Explorer. IE er helt klart også den nettleseren med dårligst Javascript-ytelse for akkurat dette.

Resultatene ble som følger (målt i antall millisekunder, mindre er bedre=raskere!):
With Fragment Without Fragment
IE 8.0 608 1070
Firefox 3.6 77 100
Safari 4.0 69 74
Opera 10.5 77 76
Chrome 4.0 87 92

Resultatene er etter kjøring av Javascript som setter inn 1000 elementer og sletter hvis nødvendig de 1000 elementene først og hvert case er kjørt 10 ganger og tatt gjennomsnitt av. IE 8.0 er nesten dobbelt så rask med document-fragment teknikken som uten. Likevel er IE 8.0 i sin egen liga i å være tregere enn de andre nettleserne. Som man ser av tallene over er Safari 4.0 9x-10x raskere med fragment teknikken. Safari 4.0 er mer enn 12x raskere enn IE 8.0 uten fragment teknikken. Safari er forøvrig den raskeste browseren, både med og uten document-fragment. Opera, Safari og Chrome viser små hastighetendringer med document-fragment. Opera 10.5 er faktisk litt raskere uten.. Chrome og Safari har små bedringer, ca. 5-10% raskere. Etter Safari er Opera raskest, Chrome og Firefox er ganske jevne. Chrome er tregere enn Firefox med document-fragment, men kjøringen uten document-fragment viser at Chrome er raskere enn Firefox 3.6. Firefox har ca. 30% raskere utførelse med document-fragment.

Konklusjonen må derfor være at document-fragment må absolutt brukes. IE 8.0 er meget treg i sin Javascript-ytelse og doblingen i hastighet (100% raskere) er nødvendig å utføre. Er du opptatt av hastigheten til webapplikasjonene dine i IE 8.0 er document-fragment meget viktig å bemerke seg med andre ord. For de andre nettleserne er det Firefox 3.6som er mest følsom for document-fragment, med 30% raskere utførelse. De andre browserne har 10-5% økning i raskere utførelse, men for dette caset hadde Opera 10.5 Alpha -1 til -5% økning i hastighet.. Safari er forøvrig den aller raskeste nettleseren. Det at Safari 4.0 skal med en slik enkel test med HTML DOM manipulasjon i javascript være mellom 9x-12x raskere enn IE 8.0: Dette er for dårlig Microsoft! Hvis IE 9 skal bli tatt seriøst som en nettleser og tatt i betraktning Microsoft sine enorme finansielle muskler, må de seriøst fikse Javascript hastigheten sin. Er du på utkikk etter den aller raskeste browseren gir denne testen en klar indikasjon på at JS-ytelsen i Safari er best. Opera og Chrome er hakk i hæl, Firefox sist av disse fire, men langt foran IE 8.0. Det skal nevnes at Opera 10.5 Alpha er en Alpha-versjon og kanskje kan nå opp til Safari 4.0.4 sine høyder i nær framtid..

Jeg har i Google Docs Spreadsheet laget et diagram på ytelsen:

Legg merke til den dramatisk raskere utførelsen i IE 8.0 med document-fragment. Ikke alle nettlesere har spesiell stor ytelsesforbedring, ca. 5-30%, med Firefox som den nettleseren som nyter best av å benytte document-fragment.

Her er testen vist under kjøring i Google Chrome 4.0:

Jeg vil nå oppsummere resultatene fra denne testen:
- Kjører man IE 8.0 må nesten document.createDocumentFragment() benyttes når store
HTML DOM manipulasjoner kjører i nettleseren, pga IE 8.0 sin dårlige hastighet.
- IE 8.0 er 9x-12x tregere enn Safari 4.0.4 i JS-ytelse. Dette er ikke bra Microsoft..
- For de andre nettleserne er det også bra å bruke document.createDocumentFragment(), forbedringen er 5-30%, men Opera hadde ikke noen ytelsesforbedring..
- Generelt sett, benytt document-fragment likevel, evt. unngå det for Opera med
oppdaging av klientens nettleser..
- Testen viser at Safari 4.0.4. er aller raskest, Opera 10.5 og Chrome 4.0 er hakk i hæl. Firefox 3.6 er nest tregest, men milevis foran IE 8.0 i JS-ytelse.

For de som ønsker å teste ut selv, kan de laste ned en zippet versjon av løsningen som jeg laget i Visual Web Developer Express 2008 her:
Document Fragment Demo Test Solution.

For å teste gjør følgende:
1. Pakk ut .zip filen
2. Åpne .sln filen
3. Når Visual Studio er startet, trykk F5 for å starte.

Klikk på de to knappene for å kjøre tester med document-fragment i ulike nettlesere.

Da skulle vel Microsoft-utviklere der ute ha noen pekepinner om hvor skoen trykker i
JS-ytelse for neste versjon av IE 9.x! De øvrige nettleserne er mindre følsomme for document.createFragment() men man bør unngå reflow inne i iterasjoner i javascript, eller spesifisere det enklere på en måte som er optimert for hastighet. Problemet ligger her i at nettleseren ønsker å holde GUI-visuelt oppdatert hele tiden. I en iterasjon er ikke det nødvendigvis en god teknikk for en nettleser. Klienten vil jo helst ha innholdet sitt og starte å jobbe videre, nettlesere er jo som kjent single-threaded miljø når det kommer til GUI. Da bør nettlesere unngå reflow inne i iterasjonen og først starte med en reflow rett etter en slik for-loop slik at man slipper å gjøre rene hacks for å få nettleseren til å være rask og responsiv.

Jeg limer inn javascript-koden her til slutt:



///Runs a desired function, returns amount of millisecond the function took to perform before completing.
function timedFunction(func) {
if (typeof func == 'function') {
var startTime = (new Date()).getTime();
func();
var endTime = (new Date()).getTime();
return (endTime - startTime);
} //if
return 0;
}

function generate_thousand_option_elements_in_dropdown_with_document_fragment() {
var optionsFragment = document.createDocumentFragment();
var ddltest = document.getElementById("ddlTest");
var len = 0;
while (len = ddltest.options.length) {
ddltest.options[len-1] = null;
} 
for (var i = 1; i <= 1000; i++) { var optiontoadd = document.createElement("option"); optiontoadd.value = i; optiontoadd.appendChild(document.createTextNode("Option " + i)); optionsFragment.appendChild(optiontoadd); } ddltest.appendChild(optionsFragment); } var withoutFragmentTest = 0; function generate_thousand_option_elements_in_dropdown_without_document_fragment() { withoutFragmentTest++; var ddltest = document.getElementById("ddlTest"); var len = 0; while (len = ddltest.options.length) { ddltest.options[len-1] = null; } 
for (var i = 1; i <= 1000; i++) { var optiontoadd = document.createElement("option"); optiontoadd.value = i; optiontoadd.appendChild(document.createTextNode("Option " + i)); ddltest.appendChild(optiontoadd); } }generate_thousand_option_elements_in_dropdown_without_document_fragment var withFragmentTest = 0; function testDocumentFragment() { withFragmentTest++; var resultRun = timedFunction(generate_thousand_option_elements_in_dropdown_with_document_fragment); if (resultRun != 'undefined') { var resultParagraphNode = document.createElement("p"); var resultParagraphTextNode = document.createTextNode("Ran test #"+ withFragmentTest + " with document fragment. Test took: " + resultRun + " milliseconds."); resultParagraphNode.appendChild(resultParagraphTextNode); document.getElementById("resultList").appendChild(resultParagraphNode); } //if }
testDocumentFragment () function testWithoutDocumentFragment() { var resultRun = timedFunction(generate_thousand_option_elements_in_dropdown_without_document_fragment); if (resultRun != 'undefined') { var resultParagraphNode = document.createElement("p"); var resultParagraphTextNode = document.createTextNode("Ran test #" + withoutFragmentTest + " without document fragment. Test took: " + resultRun + " milliseconds."); resultParagraphNode.appendChild(resultParagraphTextNode); document.getElementById("resultList").appendChild(resultParagraphNode); } } testWithoutDocumentFragment

Mvh Tore Aurstad

Slider-kontroll på web

2010-01-27T17:18:00.000-08:00

Jeg har testet ut Scriptaculous, som er et javascript bibliotek myntet på gui og effekter i gui. Det har blant annet en slider kontroll, som jeg har laget et testprosjekt for. Slideren ser meget elegant ut og er vel så god som den som
Silverlight kan tilby. Best av alt er at man har tilgang til HTML DOM-treet og lett kan lese ut og sette verdier til Slideren.

For å laste ned testprosjektet, last ned her [ZIP-fil,101kB].

Start prosjektet på følgende måte:
* Pakk ut Zip-filen TestSliderScriptaculous.zip i en midlertidig mappe.
* Åpne denne mappen og dobbeltklikk på .sln filen.
* Når Visual Studio er lastet (Jeg har anvendt Visual Web Developer 2008 Express):
* Trykk på F5 for å snurre film.
* Standard nettleser skal så åpne og man presenteres siden Default.aspx hvor jeg har
implementert testprosjektet.

Øverst i denne artikkelen ser du et skjermbilde hvordan slideren ser ut. Like elegant som den du ser i Mac OS X, eller hva? Slideren er selvsagt interaktiv. Klikk og dra på slider handelen (håndtaket) og slipp for å sette en verdi for slideren. For dette testprosjektet har jeg satt 0 og 100 som verdiintervallet og alle titallsverdier som diskrete verdier. Hvis man ikke setter noen verdier her vil man med slideren spesifisere en verdi mellom 0 og 1 som et flyttall.

Dette er en meget kraftig måte å presentere en slider på i web. Man benytte denne kontrollen i for eksempel en Ajax-aktivert Web 2.0. applikasjon, for eksempel for å sette en tallverdi, e.g. 0 til 100 prosent gjennomsiktighet i en bilde-applikasjon eller parametere inn til et filter i en bilde-applikasjon.

Script.aculo.us inneholder nok mange andre godbiter, jeg har ikke fått testet ut rammeverket noe mye enda. Sliderkontrollen var meget lett å få til å virke, det tok meg kun 2-3 timer å få ferdigstilt testprosjektet. Om noen kjenner andre gode demoer av Script.aculo.us, si i fra. Litt kjapt nettsøk viser at det er tonnevis av demoer der ute.

Dette testprosjektet inneholder Script.aculo.us i Script mappen, som er rett og slett noen få .js filer.

Script.aculo.us nettside (inkluderer nedlasting):

Stor suksess med tidligere prosjekt hos NOIS!

2010-01-07T16:41:00.000-08:00

Jeg søkte nettopp på nettet etter 'NOIS' og 'WORM' som er et akronym for 'Web Office Resource Management'. Jeg kom over en artikkel skrevet av Thor Hestnes i InnoDesign med tittel "Hull i veien? Klag på nettet!". Den tar for seg Samferdselsetaten i Oslo sin webløsning WORM, som er skrevet av meg når jeg jobbet som konsulent i NOIS i 10 måneder. Nå viser det seg at Samferdselsetaten har hatt stor glede av denne webløsningen! Ikke verst!

Løsningen er publisert her:
http://melding.samferdselsetaten.oslo.kommune.no/

Artikkelen er så rosende og full av lovord om webapplikasjonen jeg laget at jeg nesten datt av stolen :-)

Løsningen er laget med ASP.NET, programmert i VB.NET og Javascript er anvendt en god del.

Litt skryt kan man bare se her!

"Hull i veien? Klag på nettet!
Thor Hestnes
02.09.2009 20:11

Noe i veien der du ferdes i Oslo?
Meld fra til samferdselsetaten på nettet!

Samferdsels-etaten i Oslos satsing på en tettere kommunikasjon med byens borgere, er online. Etatens kundetorg på nettet er i ferd med å bli en suksess etter bare noen måneders drift.

Ved hjelp av Norconsult Informasjonssystemers WinMap-baserte, skreddersydde meldingssystem kan Oslos innbyggere nå på en enkel måte gå inn på nettet og melde fra om kommunale samferdselsproblemer som opptar dem.

Ekstraservice, det er samferdselsetaten det

Men ikke bare det, forteller etatens prosjektleder Stein Arild Sandnes: ― Folk kan også følge med om noe fysisk blir gjort med «klagen». Det være seg reparasjoner av hull i veien, gatelys, signalanlegg, eller brøyting, strøing, salting osv. Denne ekstraservicen er vi ganske alene om på kommunalt plan. Selvbetjeningen innfører en mye tettere brukerdialog og fremmer bedre tilfredshet med kommunens tjenester.

Ambisiøs orm

WORM heter programnyvinningen. Web Office Resource Management står det for og beskriver egentlig godt ambisjonen med kommunens satsing. Systemet er nemlig ment å være mye mer enn bare et meldingssystem. I WORM ligger også moduler for planlegging av graving, asfaltering, mindre byggearbeider osv. Det er med andre ord et oppfølgings-, kontroll- og beslutningsstøttesystem for kommunen. Et system som de kan bruke til å styre og utnytte ressursene bedre med.

Kartbasert nettløsning

― Det hele startet i 2005, forteller Sandnes. ― Etaten ønsket et nytt meldingssystem for å kunne forbedre kommunikasjonen med publikum og entreprenørene som utfører arbeidet på vegne av kommunen. Etaten bestemte seg for å bruke et kartsystem som informasjonsbærer for å gjøre brukerdialogen og oppfølgingen enklest mulig.

Valget falt på NOIS (Norconsult Informasjonssystemer) som utviklingspartner og WinMap som kartmotor i løsningen.

― Ved å klikke deg inn på den veiviserbaserte kartapplikasjonen på etatens nettside velger du først meldingstypen fra en meny, forklarer Sandnes og prøver å tegne et bilde av hvordan systemet fungerer. ― Dernest spesifiserer du nøyaktig hvor på kartet problemet ligger, gir en kort beskrivelse av hva saken dreier seg om, og klikker til slutt meldingen direkte til etatens kundetorg. Her blir de løpende behandlet i henhold til gitte behandlingsregler og formidlet til rette ansvarlige i etaten, som til slutt utsteder arbeidsordre til avtalefestet entreprenør som utfører oppdraget. Alt er helt dynamisk.

Genialt enkelt, helt enkelt

― Når jobben så er gjort er det entreprenørens plikt å gå inn på det samme systemet og endre status slik at det røde merket på kartet endres til grønn, som beskriver at jobben er utført. Noe også publikum kan se, poengterer Sandnes.

Og alle hjerter gleder seg… Ja, for dette har i følge Sandnes ført til mange konstruktive tilbakemeldinger fra publikum i løpet av vinteren og våren. Og samtidig positive erfaringer for samferdselsetaten.

Synliggjør arbeidet

Nesten 2800 meldinger ble registrert i løpet av 3 ½ måned i vinter. Mye snøfall voldte selvsagt mange henvendelser. Nesten 1800 dreide seg om brøyting, ca 600 rapporterte om hull i veien…

― Systemet gir oss mye mer korrekt innrapportering og det synliggjør jobben som gjøres av entreprenørene, fortsetter Stein Arild Sandnes. ― Med oversiktlig statistikk kan vi enkelt sammenstille og kontrollere arbeidsområder og tiltak.

Lønnsom pionervirksomhet

― Systemet er ganske komplisert med avansert filtreringslogikk, fortsetter han. ― Det ligger en stor applikasjon rundt kartmotoren. Systemet er unikt. Det er rett og slett pionervirksomhet det vi gjør.

― Men det fungerer utmerket. Vi har nesten ikke hatt nedetid siden oppstarten. Og publikumstilbakemeldingen er veldig bra. De er imponert over ekstraservicen vi gir dem.

― For kommunens del får vi nå en mye bedre totaloversikt og sparer ressurser både på den ene og andre måten, mener Sandnes. ― Effektiviteten og kontrollen er bedret betraktelig. Ikke minst ved enkel gjenfinning av informasjon og gjennom verdifull statistikk. For kontrollseksjonen, som er en hyppig bruker av systemet, er det betydelig enklere å følge opp og kontrollere at tingene utføres i henhold til kontrakt.

Enklere hverdag

― Kundetorget som til daglig jobber mest med meldingssystemet, har for øvrig fått fordelen av kun én applikasjon å forholde seg til. Et stort pluss og en drastisk bedring av situasjonen, slutter Stein Arild Sandnes og ser frem til å tilfredsstille enda flere, nye behov som underveis har dukket opp.

Mandatet er nemlig utviklet ytterligere etter de gode resultatene. Oslos ansatte og borgere kan forhåpentlig vente seg en stadig enklere hverdag…"

Må si meg fornøyd med en slik omtale.

Og det er visst mer skryt i vente, les bare Aftenposten...

http://www.aftenposten.no/nyheter/oslo/article3317321.ece

Det har visst blitt bedre veger i Oslo, blant annet pga. meg.

Sol Måne : Windows Vista Sidebar gadget

2009-12-28T07:42:00.000-08:00

v1.3 tilgjengelig.

Versjon 1.3:
Hei, da er fiks laget hvor tallet 0 paddes foran dager og måneder med verdi mindre enn 10 mot SunRise metoden. Fikset også en feil i switch for visning av ikon for månefase, case "Waning gibbous".

Sol Måne gadget v 1.3.
Last ned versjon 1.3 nå over. Samme installasjonsmetode som for v1.2.

Versjon 1.2:
Hei, da er fiks laget for automatisk oppdatering av data for gadget og ny versjon laget.
Gadget vil hente nye data fra Yr.no sin Sunrise web service metode en gang i timen!
Last ned versjon 1.2 nå.

Installasjonen er på samme måte som for versjon 1.1., velg 'Erstatt' eller 'Oppgrader' når installasjonen av gadget spør deg om du vil oppgradere, i tilfelle du har lastet ned v1.1. tidligere.

Last ned Sol Måne v1.2. gadget for Windows Vista Sidebar!

Sol Måne gadget v 1.2.

Last ned Sol Måne v1.1. gadget for Windows Vista Sidebar!

Sol Måne gadget v 1.1.

Installasjonsprosedyre:

Last ned filen over ved å høyreklikke og velge 'Lagre mål som...'
Åpne mappen til filen du nettopp lastet ned (SunMoonGadgetv11.zip)
Endre filnavnet til å et etternavn (file extension) som ender på .gadget
Dobbeltklikk på filen i Windows Explorer for å starte installasjonsprogrammet
for å legge til gadget.
I Windows Vista / Windows 7 Sidebar, klikk på pluss symbolet.
Velg den nylig installerte gadget blant øvrige gadgets med teksten 'Sol Måne' .

Etter installasjonen har gjort seg ferdig er filene installert som en undermappe til mappen:
%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets

Gadget skal nå være valgbar i gadget-utvalgssiden:

Det første man må gjøre etter å ha installert, er å sette opp lokalisering for å få vist riktig informasjon. Klikk på skiftenøkkel symbolet for å åpne innstillingene og skriv så inn lokaliseringen du befinner deg på og ønsker å vise informasjon for. Dette vil se slik ut på siden for innstillinger av gadget (settings.html):

I eksempelet vist på bildet over er Oslo satt opp som lokalisering for gadget. Breddegrad og lengdegrad hentes med web service kall mot Google Maps, som søker opp stedsnavnet og viser samtidig i et kart lokalisering som er skrevet inn.

Måten dette hentes ut på i Javascript vises i følgende javascript-kode:
function geoCodeAddress(address) { var geocoder = new GClientGeocoder(); geocoder.getLatLng(address, function(point) { if (!point) { alert("Lokaliseringsøk returnerte tomt resultat!"); } else { map.setCenter(point, 10, G_NORMAL_MAP); lblLatitude.innerHTML = map.getCenter().lat().toFixed(2); lblLongitude.innerHTML = map.getCenter().lng().toFixed(2); return point; } //if-else }); }
(Syntax coloring: Google Prettify http://code.google.com/p/google-code-prettify/downloads/list).

I koden over anvendes metoden getLatLng i klassen GClientGeocoder i Google Maps
API-et og address parameteret til funksjonen er en enkel tekststreng som er den
teksten man skriver inn i tekstboksen. Man søker så opp lokaliseringen vha. getLatLng kallet og setter point objektet i den anonyme delegatfunksjonen til sentrum av Google Maps kartet (GMap2) objekt. Dette er en meget brukervennlig funksjonalitet for en bruker for å skrive inn sin lokalisering og samtidig se kjapt at programmet har oppfattet hvor man befinner seg. I tillegg slipper man spesialtilfeller hvor man setter en beliggenhet som ikke har et unikt stedsnavn, ved at man ser at kartet tar feil, da anbefaler jeg å skrive inn et annet stedsnavn som er rett i nærheten som er unikt. Det som gjøres i innstillingssiden for gadget er å sette lengdegrad og breddegrad for denne gadgeten. Klokkeslettet som gadget benytter er alltid satt til nå (new Date() i Javascript med andre ord).

I versjon 1.2. vil en fix komme som setter opp en timeout på en time s.a. man får oppdatert gadgeten en gang i timen.

Jeg har implementert gadget så den benytter data basert på web services fra Yr.no og Google Maps. Gadgeten heter Sol Måne og viser et ikon for månefase for gjeldende dag for en gitt beliggenhet, som brukeren setter opp ved å gå på innstillingene for gadgeten.
I tillegg vises klokkeslettet for tiden månen og solen går opp og ned. Programmet håndterer midnattsol og mørketid for soloppgang og solnedgang. Man kan når man vil endre sin beliggenhet s.a. man får oppdaterte klokkeslett tider for sol opp og ned og måne opp og ned. Dette er en nyttig gadget som alltid gir deg tilgang til disse tidene. Det kan godt hende jeg legger inn enda mer informasjon som Sunrise metoden tilbyr i versjon 1.3 og evt. fixer som trengs.

Google Maps API nøkkel - justering trengs?
I tillegg så er det satt en fast Google Maps API nøkkel i gadget (for localhost). Opplever du at du ikke får satt beliggenheten riktig pga. feil Google Maps, så må duendre API-nøkkel ved å gå til installasjonsmappen (Astropage.gadget for meg):

%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Astropage.gadget

Endre så api nøkkelen i settings.html, søk etter 'key' i denne filen. Google Maps API nøkkel får du tak i her:

http://code.google.com/intl/no/apis/maps/signup.html

Merk dog at testing har vist at dette ikke er nødvendig å gjøre dog, utvikling og testing er gjort i Windows Vista.

ActiveX teknologi i gadget

1. Når man lager gadget i Windows sidebar må man ofte ta i bruk ActiveX. XmlHttpRequest kall benytter ActiveX objektet MsXml2.XMLHTTP. Dette lar en gadget foreta Ajax kall.

2. Når man lagrer en fil for gadget i Windows sidebar benyttes ADODB.Stream som også er et ActiveX objekt .

3. Når man skal parse Xml filen som resultatet SunRise metoden returnerer er lagret i benyttes ActiveX objektet Microsoft.XMLDOM.

Følgende javascript kode i gadgeten viser alle disse tre ActiveX objektene i bruk:



function displayWeatherDataSunrise(selectedLatitude, selectedLongitude) {
var xmlhttp = false;
var now = new Date();
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
var dateString = now.getFullYear().toString() + "-" + (now.getMonth() + 1).toString() + "-" +
now.getDate().toString();

var url =
"http://api.yr.no/weatherapi/sunrise/1.0/?lat=" + selectedLatitude + ";lon=" +
selectedLongitude + ";date=" + dateString;

//lblMoonphase.innerHTML = dateString;

//xmlhttp.setRequestHeader("Content-type", "image/gif");
xmlhttp.open("GET", url, true);
now.setFullYear(2009, 1, 1);
xmlhttp.setRequestHeader("If-Modified-Since", now);
var ret;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//Display the results.
ret = xmlhttp.responseText;
//document.body.style.backgroundColor = 'yellow';
try {
var path = "astrodata.xml";
var stream = new ActiveXObject("ADODB.Stream");
stream.type = 1; //Binary
stream.open();
stream.write(xmlhttp.responseBody);
//Create if needed and overwrite if necessary
stream.SaveToFile(System.Gadget.path + "\\" + path, 2);
stream.close();
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.onreadystatechange = readAstroData;
xmlDoc.load(System.Gadget.path + "\\" + path);
} catch (e) {
// Handle error here
document.write("Error occurred: " + e);
}
//document.body.style.backgroundColor = 'green';
} //if
}
}
xmlhttp.send(null);

}

Værradar-gadget for Vista og Windows 7

2009-12-26T15:52:00.000-08:00

Siste oppdatering:
Fant endelig ut hvordan man får unngått at IE 8 cacher s.a. XmlHttpRequest ikke oppdateres for GET-kall, med følgende triks:


xmlhttp.open("GET", url, true);
now.setFullYear(2009, 1, 1);
xmlhttp.setRequestHeader("If-Modified-Since", now);

Dette sørger for at caching nå endelig unngås i gadgeten. Nå er det kun to bilder som stadig overskrives med nyeste data fra Yr.no og man får alltid nyeste tilgjengelige data pga caching endelig er slått av! Trikset over sender en request header i XmlHttpRequest kallet. Kravet til verdien for If-Modified-Since er at det er en dato som er tidligere enn nå. Jeg har satt denne til 1. januar 2009 (litt random, så lenge den er historisk så fungerer cachingen med at den endelig SLÅS AV.

Dermed får man oppdaterte værradar-data, slik som ungdommen liker..

Jeg har oppdatert gadgeten WeatherGadgetYr til versjon 1.2 som dere nå kan laste ned
under. Dermed så er gadgeten ferdig laget, men er det ønsker om videreutvikling av den, si i fra!

Mvh Tore Aurstad

Last ned WeatherGadgetYr som jeg har laget fra direkte link her:

Værradar gadget versjon 1.2..

Installasjonsprosedyre:

Last ned filen fra lenken over (høyreklikk og lagre mål som i IE8).
Gå til mappen du lastet ned filen, som er en zip fil.
Døp om filen til en fil som har filetternavn .gadget
Dobbeltklikk på .gadget filen for å starte installasjonsprosedyren av gadget.

Et alternativ er å heller gjør dette:

Last ned filen fra lenken over (høyreklikk og lagre mål som i IE8).
Gå til mappen du lastet ned filen, som er en zip fil.
Pakk ut innholdet til mappen: %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\WeatherRadarYr.gadget

Etter å ha installert, klikk på "+"-knappen i Windows Sidebar i Vista (Windows 7 har en annen måte å gjøre dette på, men støtter også gadgets!) og velg så gadgeten.

Gadgeten kan lett velges blant alle gadgeter på systemet. Dette er testet i Windows Vista.
For å legge den til, velg Værradar Yr.no gadgeten. Ikonet som vises er av radardomen
til værradaren Radar Rissa i Midt-Norge.

Værradardata vises som i Gadget i Windows Vista Sidebar. Flyout vises til venstre,
som aktiveres når man klikker på Gadgeten. Klikker man på flyout igjen så lukkes
flyout. For å redigere innstillinger klikker man på skiftenøkkel ikonet som for alle
andre Gadgets.

Det er mulig å velge blant mange værradarstasjoner og om man
vil hente en animasjon eller et stillbilde som viser nyeste værradardata.

Gadgeten docker inn i sidebar sømløst.

Last ned WeatherGadgetYr som jeg har laget fra direkte link her:

Værradar gadget versjon 1.1..
Lisensen er GPL Open Source. Gi meg gjerne
beskjed om når du bruker Gadgeten og tilbakemeldinger om evt. feil og forslag
til forbedringer. Filen .gadget i lenken over er rett og slett en .zip fil
med et spesielt fil etternavn og inneholder all HTML og Javascript som inngår.
Du kan gjerne se innholdet til gadgeten hvis du går til filmappen:

%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\WeatherRadarYr.gadget\radarImages

Jeg har benyttet Visual Web Developer 2008 Express til å utvikle. Det er mulig å hente ned templates for å utvikle gadgets, men jeg utviklet gadgeten stegvis. Det er sikkert slik at når man har laget en gadget så blir den neste mye enklere å lage. Det er lite som må til av kode for å lage en HTML/Javascript gadget og eneste kravet er at man er noenlunde stø i Javascript og forstår litt om HTML og HTML Document Object Model (DOM).

Jeg har laget en Gadget som kan benyttes i Windows Sidebar som viser værradar data fra web-servicen The Weather API som benyttes på http://www.yr.no/ . Gadgeten er testet i Windows Vista, men skal også virke i Windows 7. Med denne gadgeten kan man på en enkel måte få vist værradar data fra Yr.no i Windows Sidebar.

Du kan lese om The Weather API sin dokumentasjon av funksjonaliteten for å hente ut
bilde eller animert bilde av nyeste værradardata fra DNMI og NRK her:
WeatherAPI Radar 1.2

Gadget.xml, manifestfilen ser slik ut:


<?xml version="1.0" encoding="utf-8" ?>

<gadget>

<name>Værradar Yr.no</name>

<namespace>tore.aurstad.net</namespace>

<version>1.1.0.0</version>

<author name="Tore Aurstad">

<info url="http://tore.aurstad.net" />

</author>

<copyright>© 2007</copyright>

<description>Viser værradar-data for alle regioner av Norge som dekkes helt eller delvis

av vær-radarer. Klikk på minatyrbildet for å vise siste oppdaterte værbilde for din

region i Norge. Det er også mulig å vise animasjoner og værradar for hele Norden.

</description>

<hosts>

<host name="sidebar">

<base type="HTML" apiVersion="1.0.0" src="weatherradar_yr.html" />

<platform minPlatformVersion="1.0" />

<permissions>Full</permissions>

</host>

</hosts>

<icons>

<icon width="32" height="32" src="weatherradar.jpg" />

</icons>

<defaultImage src="weatherradar.jpg" />

</gadget>

I manifest filen over spesifiserer man en host av type HTML i sidebar (name) og
setter src lik en hmtl fil weathergadget_yr.html. Dette er hoved html-filen i gadgeten. Denne filen vil
sette opp gadgeten vha. Javascript og linke opp til to html filer settings.html og
flyout.html. En settings fil viser GUI-et for å konfigurere gadgeten, altså det som vises når man velger skiftenøkkelen på en gadget. En flyout fil vises når man klikker på et element i gadgeten.

Dette settes altså opp i javascript slik:


System.Gadget.settingsUI = "settings.html";
System.Gadget.Flyout.file = "flyout.html";

Denne koden skal inn i en script blokk for javascript og kalles når hoved html-filen
er lastet.

I denne gadgeten oppstod det et behov for å lagre bildefilene som returneres fra web services. Det er to bildefiler som lagres, en som viser et stillbilde som vises i sidebar og et bilde som viser et stillbilde eller et animert bilde i større størrelse i flyout visningen når man klikker på gadgeten. Opplever du at gadgeten ikke oppdaterer likevel værradardataene, må du tømme cachen for nettleseren. Dette skal nå dog være håndtert.

For å skrive data i samme mappe som gadgeten, dvs. lagre bildene benyttes ADODB.Stream ActiveXObject. I tillegg benyttes et annet ActiveXObject, XmlHttpRequest eller Ajax om du vil. Funksjonen som henter opp værdataene er skrevet helt i Javascript og ser slik ut:


function displayWeatherRadarData() {
         var xmlhttp = false;
         var now = new Date();
         try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
         catch (e) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
         var url =
         "http://api.yr.no/weatherapi/radar/1.2/?radarsite=" + selectedRadarSite + ";type=" +"Image" + ";width=174";
         //xmlhttp.setRequestHeader("Content-type", "image/gif");
         xmlhttp.open("GET", url, true);
         var ret;
         xmlhttp.onreadystatechange = function() {
             if (xmlhttp.readyState == 4) {
                 if (xmlhttp.status == 200) {
                     try {
                        var path = "radarData_small.gif";
                        var stream = new ActiveXObject("ADODB.Stream");
                        stream.type = 1; //Binary
                        stream.open();
                        stream.write(xmlhttp.responseBody);
                         //Create if needed and overwrite if necessary

                        stream.SaveToFile(System.Gadget.path + "\\" + path, 2);
                        stream.close();
                     } catch (e) {
                         // Handle error here
                         document.write("Error occurred: " + e);
                     }
                     radarImg.src = "radarData_small.gif";
                 } //if
             }
         }
         xmlhttp.send(null);
     }
 </script>

Javascript koden over demonstrerer både hvordan man skriver til fil i mappen til en gadget vha. ADODB.Stream objektet og hvordan man gjør et grunnleggende XmlHttpRequest
for å hente asynkront data over internett. Dette kan nok benyttes til mer generelt å hente opp data asynkront fra ulike REST-baserte providere. Best av alt det virker.

Oppdatert informasjon:
Cachingen ser ut som den ikke er mulig å slå av for bildene i gadget, uten at
man lagrer hvert minutt et nytt navn på radarbildet til flyouten. Alle bilder
blir nå lagret i undermappen radarImages hver gang man aksesserer den for å se
radardata. Hvis man ofte bruker gadgeten kan man med andre ord slette bildene i mappen:

%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\WeatherRadarYr.gadget\radarImages

Hvert bilde tar litt plass, er det en animasjon tar et bilde rundt ca. 1 MB. Dermed kan man greit slette radarbildene etterhvert. Jeg skal legge inn funksjonalitet for å slette cachen (alle .gif filene som er i radarImages mappen) etterhvert i innstillingene for gadgeten.

NKSilverlight - Mashup

2009-12-20T19:44:00.000-08:00

NKSilverlight er en mashup som kombinerer Google Maps, Statens kartverkdata, Silverlight og Javascript for å presentere kartdata for Norge med flere lag samtidig i en nettleser.

NKSilverlight står for Norgeskart Silverlight. Mashupen over er dog ikke bare en Silverlight applikasjon, til venstre ser man et tradisjonell HTML Div element som viser Google Maps. Google Maps er her en viewer for Statens Kartverk sine data. Man kunne forsåvidt bruke Microsoft Virtual Earth også for samme effekt. Vha. IsWindowLess satt til true i silverlight og css absolutt posisjonering klarer man å vise HTML og Silverlight side ved side. Kommunikasjonen mellom de to gjøres med standard HTML Bridge i Silverlight, HtmlWindow.Page.Invoke.

Jeg har laget en mashup som baserer seg på data fra Statens Kartverk og har en kort omtale
av tilgjengelige data her: http://www.statkart.no/?module=Articles;action=Article.publicShow;ID=14165 module=Articles;action=Article.publicShow;ID=14165
Mashupen bruker Google Maps på web som Viewer og kartdataene fra Statens Kartverk lastes inn i Mashupen som GTileLayerOverlay objekter i GMap2 objektet, mye av koden er i Javascript og kan leses hvis man velger View Source i Mashupen. Jeg anbefaler for teknisk interesserte å lese om GTileLayerOverlay her: http://code.google.com/intl/no/apis/maps/documentation/overlays.html#Tile_Layer_Overlays
I tillegg har Mashupen brukt Silverlight 3 for å gi et interessant GUI som lar en mikse de ulike lagene som Statens Kartverk tilbyr for de ulike Cache-tjenestene sine. Man kan med en Slider kontroll styre opacity, altså gjennomsiktighet fra 0 til 100 prosent for de ulike lagene. Ønsker man å vise f.eks. to lag så kan man slå på 50 prosent på begge. Dermed er det mulig å kombinere
sjøkart og topografiske kart for Norge i Google Maps. Dette er mye bedre kart enn standardkartet til Google Maps som man fort vil synes er nakent i forhold. Statens kartverk dekker kun Norge, med unntak av det siste laget som er et europakartlag. Bruk avkrysningsboksene for kjapt å sette opacity til 0 eller 100 (skru lag av og på). Jeg har zippet hele prosjektet, som jeg har laget i Visual Web Developer Express 2008 som et Silverlight Application 3 prosjekt for de av dere som vil se på koden. Dette er en mashup som kun er et demoprosjekt, det er ikke optimert eller testet ut nøye. Det er morsomt å se at man kan slå sammen kartdata fra Statens Kartverk på en så grei måte, det tok meg kun noen få timers arbeid å lage Mashupen. Jeg vil også gjerne kombinere mashupen med data fra andre leverandører som Yr.no, f.eks. snødybde m.m. Er du interessert i disse temaene som meg er det kjempefint å få litt tilbakemelding, kanskje vi kan samarbeide om mashuper og mulige prosjekter rundt dette?

Til slutt er det kanskje interessant å laste ned prosjektet også som en zippet fil for Visual Studio 2008 Express Silverlight application prosjektet og se en live demo av mashupen.

Nedlasting av NKSilverlight prosjektet [ZIP, 253 kb]:

http://tore.aurstad.net/NKSilverMashup/NKSilverMashup.zip

Instruksjoner: Pakk ut filene, åpne NKSilverMashup.sln Solution filen, høyreklikk på NKSilverMashupTestpage.html filen i NKSilverMashup.web og velg Set as Start Page.
Trykk så på F5 for å snurre film. Du vil få opp NKSilverMashup omtrent som i skjermbildet over, man starter på lokalisering Steinkjer og viser 50% Topografisk Norgeskart 2 WMS og
50% Sjøkart Hoveserien 2 WMS data i Google maps utsnittet man ser.

Har du ønsker om å videreutvikle prosjektet er det fint om du kan kreditere meg i tillegg. Jeg vil også gjerne ha beskjed om dette først. Hvis du ønsker å stille spørsmål om prosjektet, gi gjerne tilbakemelding, gjerne nedenfor eller en e-post til: tore.aurstad@ntebb.no .

En genial ting med denne mashupen er at den består kun av en .HTML fil og en .XAP fil for Silverlight prosjektet, altså kun to filer. Data hentes som sagt av Statens Kartverk og vieweren er Google maps. Dermed er dette prosjektet en mashup, altså benytter seg av eksterne tjenester. Det blir spennende å se om det går an å teste og videreutvikle mashupen til også vise andre ting. Google maps har en spennende og rik API som er interessant å eksperimentere med.

Til slutt og ikke minst, LIVE DEMO! Klikk på lenken nedenfor:
http://tore.aurstad.net/NKSilverMashup/NKSilverMashupTestPage.html

Hva skal bloggen inneholde?

2009-12-20T19:42:00.001-08:00

Bloggen vil inneholde informasjon primært om teknologi, mer spesifikt .NET prosjekter og web-teknologi som jeg har gjennomført og gjerne ønsker diskusjon rundt. I tillegg kan det bli litt personlig informasjon om meg selv og noen bilder, men fokus på bloggen er primært teknologi.

Litt informasjon om bloggen

2009-12-20T19:28:00.000-08:00

Hensikten med denne bloggen er å spesielt presentere mine interesser og dele dem med andre globalt sett. Det vil være en god del innlegg på engelsk etterhvert, men de innleggene som kun nok vil interesse nordmenn vil foregå på norsk.

Jeg er en 31 år gammel programmerer som jobber i Trondheim. Jeg er født og oppvokst i Steinkjer i Nord-Trøndelag og har studert allmenne fag her. I ungdommen (er jeg ikke ung enda da?) drev jeg mye med fotball og svømming. Jeg studerte tre år på Lade ulike emner i realfag, mye matematikk og informatikk. Også emner i fysikk og noe i statistikk. Jeg måtte avtjene min førstegangstjeneste i 2000 og hadde et interessant år i HMK Garden i Rekognoseringstroppen. Jeg brukte så kun fire år på å få tatt min grad Sivilingeniør i datateknikk, sommeren 2005. Videre jobbet jeg etter studiene med ulike prosjekter for ulike og tok også en del etterutdanning innenfor fag i Linux og systemadministrasjon. Jeg fikk min første jobb i Kongsberg Spacetec i Tromsø mai 2006 og jobbet her et halvt år. En arbeidsgiver med mange spennende prosjekter og jeg jobbet med NASA og ESA. Etterhvert gikk det dog opp for meg at jeg ville fortsette og jobbe og bo i Trøndelag og jeg fikk så jobb i Norconsult IS i Trondheim. Her jobbet jeg for første gang med .NET teknologi og etter å ha jobbet med mye Linux-systemer og åpen programvare så var det egentlig en grei retur til .NET teknologi og Visual Studio. Jeg jobbet her i 10 måneder som konsulent på oppdrag og drev mye med ASP.NET, Javascript og Geomedia WebMap, samt Oracle. Etterpå fikk jeg jobb hos Lydia AS i Trondheim og har jobbet der i 2 år. Her har jeg jobbet med .NET teknologi igjen, Windows Presentation Foundation (WPF) og ASP.NET, Javascript og WCF, all .NET programmering i hovedsaklig C#.NET. Jeg kjenner også VB.NET men liker helst å bruke C#.NET. For tiden så er jeg formelt ansatt i Lydia AS fram til 31. mars 2010 og jeg er på utkikk etter en ny arbeidsgiver, helst i Trondheim og som kan tilby stilling til meg. Jeg håper at jeg med min gode formelle utdanning og etterhvert varierte bakgrunn kan være interessant for en ny arbeidsgiver i Trondheim til nyåret 2010.

Bloggen opprettet

2009-12-20T19:27:00.000-08:00

Dette er en test.