The Coding Bug

Better URLs for Scandinavian letters in N2CMS

Sun, 04 Mar 2012 17:25:29 GMT

In N2CMS the default behavior when creating a page containing ‘Å’ or ‘Ö’ in the URL is to replace it with ‘Ae’ and ‘Oe’. I find this makes less readable URLs, and I believe people are more used to read URLs where you replace it with a single letter, e.g. ‘Å’ to ‘A’.

Example for page title “Räksmörgås”:
Default: raeksmoergas/
Wanted: raksmorgas/

To change this default behavior in N2CMS you need to add this configuration to Web.config:

<n2>
  <edit>
    <nameEditor>
      <replacements>
        <remove name="smallAE"/>
        <remove name="capitalAE"/>
        <remove name="smallOE"/>
        <remove name="capitalOE"/>
        <remove name="theRest"/>
 
        <add name="smallAE-new" pattern="[æä]" value="a" />
        <add name="capitalAE-new" pattern="[ÆÄ]" value="A" />
        <add name="smallOE-new" pattern="[ö]" value="o" />
        <add name="capitalOE-new" pattern="[Ö]" value="O" />
        <add name="theRest-new" pattern="[^. a-zA-Z0-9_-]" value="" />
      </replacements>
    </nameEditor>
  </edit>
</n2>

Error when trying to Add-Migration in EF Code First Migrations–Alpha 3

Mon, 26 Sep 2011 20:57:47 GMT

Getting an exception like the below one when trying to add a migration with the shiny new Alpha 3 of migrations?

Add-Migration : Could not load type 'System.Data.Entity.Infrastructure.DbContextInfo' 
	from assembly 'EntityFramework, Version=4.1.0.0, 
	Culture=neutral, PublicKeyToken=b77a5c561934e089'.

At line:1 char:16

+ add-migration <<<<
   + CategoryInfo          : NotSpecified: (:) [Add-Migration], TypeLoadException
   + FullyQualifiedErrorId : System.TypeLoadException,System.Data.Entity.Migrations.AddMigrationCommand

The solution is to uninstall Microsoft ADO.NET Entity Framework 4.1 RC. To be on safe side, restart Visual Studio after the uninstallation.

Late to the Github Party and How I Got There

Mon, 01 Aug 2011 07:30:00 GMT

Right, so I was late but I am there now – in Github. I spent a few hours yesterday to setup everything and while it took a bit longer than with Subversion I still think it was easier than expected.

This post is for other Windows users who want a short overview of what you need to do to become a Githubber.

Get an account at Github.
The reason we do this first is because Github have a really good guide for beginners.
Download Git for Windows.
Follow the guide at Github (read both “Set Up Git” and “Create A Repo”).
You should now have submitted your first commit to your repo through the command line or the Git GUI. Congratulations!
If you’re like me, you don’t like the cmd-way (I really tried to!) and want something visually appealing instead. I found the Git Extensions project which suited me well. Besides giving you a complete overview of the repo, it also integrates with VS2010 by adding a “Git” menu. Handy!

That’s actually all I had to do. The only problem I had was with Git Extensions because it used PuTTY for SSH while the guide used OpenSSH. To fix it I had to generate a new SSH key (public and private) in PuTTY and add the public key to my Github account. Apparently PuTTY is more suited for Windows than OpenSSH is.

Git tips for Visual Studio

README
Name the README file with the “.markdown” file extension and use VS extension “Markdown Mode” to edit it.

.gitignore
Create a new file called “.gitignore” in the root of the repository and fill it will directories/files that you don’t want to stay in the repository. Following is a .gitignore file which filters Visual Studio and ReSharper files:

bin 
obj 
*.suo 
*.user 
*.csproj.user 
*.cache 
*.resharper.user 
_ReSharper* 
*.sln.docstates*

Summary

After all, Git wasn’t as scary as I had believed and the Github website makes it a really nice experience with its beautiful UI and social features.

So what are you waiting for? Go follow me on Github (or watch some interesting projects)!

Displaying Assembly Version in Windows Explorer

Fri, 26 Nov 2010 14:30:39 GMT

I have been working a lot with upgrading assemblies to newer versions and debugging why things does not work. When doing this you often have to check which version you currently have in your “bin” folder. This takes quite a lot of time as you have to check properties of each file (or hover of the file and wait for the tooltip) to see the assembly version. It is hard to get a quick glance over all your dll versions.

What I did was to add a new column to Windows Explorer which shows the file version. Follow the steps below to show file version in Windows 7:

In the bin folder, right click on the column row and select “More…”.
Search for and mark the item called “File version” and click OK.
You should now see a column with the version number!

Notes from Øredev 2010

Tue, 16 Nov 2010 08:00:00 GMT

Time flies – the Øredev week is already over and I’m back at the office. The conference was really great. Reaching above my expectations. It was of course great to learn a lot of new stuff, but what I think was the best part about the conference is that it gives you a lot of inspiration to create applications, try out new things and walk that extra mile to make your application more maintainable and tested.

The sessions were divided in different areas, e.g. .NET, web development, agile and smart phones. It was never hard to find a session I wanted to go to. I, however, recommend to create your own schedule beforehand as it’s really handy to have with you when you’re at the conference running between sessions.

During the sessions I tried to write notes about the things I found most interesting, but it was hard to keep up with both listening and taking notes. Following is notes I wrote down from some of the sessions I attended.

Patterns for Building Internal DSL's in C# 3.0

In this session Jeremy D. Miller talked about Fluent Interfaces which are handy in certain APIs, like a Twitter client API.

When creating such interfaces you should think about:

Don’t try to make everything grammatically correct. Small and tidy method names are better and easier to understand.
You should limit the possible choices in the API to guide user to the right methods. This can be done by using Interfaces instead of returning the same object over and over again.
You should keep the chaining within 3 chain calls.

Better Practices for Building Fast Web Apps

This was quite an interesting talk as it covered lots of tools I hadn’t heard of before. Giorgio Sardo mention tools you can use to increase the performance of your sites. Like using sprites, finding out not used CSS styles and a tool called Doloto that converts your existing scripts to be lazy loaded instead.

The tip I liked especially much was when he mention about a new API called Web Timing API that browsers are starting to implement. It can be used to find lots of details about how fast your site has loaded. I knew about this API before the talk, but what caught my attention was when gave the smart tip of actually sending this data (serialized JavaScript object) to the server to get free profiling information from your users. How cool isn’t that!

//IE
 window.msPerfomance
 
 //Webkit
 window.webkitPerformance

CSS3

Jonathan Snook talked about all the new fun things in CSS3, like animations, transitions, border-radius and shadows of all kind, etc. He also went through all different browsers and what they currently support.

Until CSS3 is ready it has to go through these states: Working Draft, Last Call, Candidate Recommendation, Proposed Recommendation and finally Recommendation. Note that each module in CSS3 has its own state, and not one all together. You can see in which state each module is in at the W3C site.

Good links shared by Snook:

CSS3 slideshow in CSS3: http://leaverou.me/ft2010/
Find out about browser support: http://caniuse.com/
Detect which features are available in the browser: http://www.modernizr.com/

ASP.NET MVC 3

A few days before the conference Scott Gu (and all other the bloggers) announced that ASP.NET MVC 3 Release Candidate was released. This is great news as it means there is only bug-fixing left before we get the final version. Brad Wilson had this talk and he did it great! He talked about the new Razor syntax, the new package manager NuGet and some new features in MVC 3.

Partial caching in child actions.
Unobtrusive JavaScript validation.
Razor syntax highlighting in Visual Studio.
A way to turn of session for a controller ([ControllerSessionState()]).
And lots more…

“Abusing C#” and “C#'s Greatest Mistakes”

These two talks was given by Jon Skeet, the man, the myth, the legend in C#. It was a really interesting talk covering lots of different ways to hack around in C# in ways you maybe shouldn’t do in production mode.

The two talks were very similar in the way they were presented. They both had no slides and only covered Skeet going through examples of areas the audience wanted to learn more about. It really felt like we could fill a whole conference with only Jon Skeet talking about C# (I would totally go on it).

Now I’m eagerly waiting for Øredev to publish the videos of all the other sessions I didn’t attend to. It seems they will be published on Vimeo. Read more details about the other sessions at my colleague’s blog Dileno. See you at the next Øredev!

Schedule for Øredev 2010

Mon, 08 Nov 2010 21:57:33 GMT

The yearly Øredev Developer Conference is now closing in, and I’m really excited to be able to participated this year. I’m leaving Wednesday and getting there around 10-11 AM which means I will unfortunately miss a few sessions in the morning but I’m sure the other sessions will weight up.

I look forward to learning a lot of new interesting techniques and patterns, especially in sessions covering .NET, web app development, HTML5/CSS3 and nosql. It will also be great to see people like Jon Skeet, Brad Wilson, Jeremy D. Miller and Jonathan Snook “in real life”. Makes me wonder if Jon Skeet will even answer questions now when he can’t get any up-votes for it?

The sessions I will attend to are:

Wednesday

11:20: ASP.NET Web Matrix and Web Pages, Brad Wilson
13:10: ★ Patterns for Building Internal DSL's in C# 3.0, Jeremy D. Miller
14:15: Better Practices for Building Fast Web Apps, Giorgio Sardo
15:35: Automated Testing of Web Applications, Jeremy D. Miller
16:40: ★ CSS3, Jonathan Snook

Thursday

10:15: ★ Higher-Order JavaScript, Giles Bowkett
11:20: Exploring Windows Phone Dev, Jeff Wilcox
13:10: ★ CouchDB for .NET Developers, Hadi Hariri
14:15: ★ ASP.NET MVC 3, Brad Wilson
15:35: ★ Abusing C#, Jon Skeet
16:40: Compositional Design with Responsibility Driven Design, Jeremy D. Miller

Friday

10:15: My last 30 failures, Ted Valentin
11:20: ★ C#'s Greatest Mistakes, Jon Skeet
13:10: ★ 19 1/2 Things to Make You a Better Object Oriented Programmer, Greg Young
14:15: ★ Top 20 tools and tips that make me a better developer, Roy Osherove
15:35: ★ Pluggable web applications, Rob Ashton

★ = me like.

“Key has already been added” exception with PageTypeBuilder

Thu, 07 Oct 2010 07:50:56 GMT

This is one of those exceptions you get and you know you have had them before but never remember the solution, and googling them doesn’t give you any answers. Time to fix that!

Background

I was in the process of creating lots of new page-types for a new EPiServer website and suddenly it threw an exception after building and running the site. The exception message I got was “An item with the same key has already been added.” with the following Stack Trace:

[ArgumentException: An item with the same key has already been added.]
   System.ThrowHelper.ThrowArgumentException(ExceptionResource resource) +56
   System.Collections.Generic.Dictionary`2.Insert(TKey key, TValue value, Boolean add) +10290303
   System.Collections.Generic.Dictionary`2.Add(TKey key, TValue value) +12
   PageTypeBuilder.PageTypeResolver.AddPageType(Int32 pageTypeID, Type pageTypeType) +52
   PageTypeBuilder.Synchronization.PageTypeSynchronizer.AddPageTypesToResolver(List`1 pageTypeDefinitions) +159

What we can understand from the above Stack Trace is that when PageTypeBuilder adds a new page-type to the dictionary it fails because another item with the same key already exists. My colleagues and I were determined this key must be the page-type GUID that you specify in the attribute of a page-type. I opened the database and deleted all page-types directly, and then changed the GUIDs in my classes. This has to work – but it did not.

Solution

I gave up and continued working with my page-types. After a few minutes I found a page-type with an incorrect name – it was a duplicate of another page-type! I changed it to the right name and ran my site. Everything worked! I had been affected by the “copy-paste error”.

To sum it up: Every page-type must have a unique Name property or else it’ll fail in runtime.

It would be nice if PageTypeBuilder threw a friendly exception if the key already exists. If the exception message also mention which page-type (by ID or name) it would be really easy to find and solve the problem.

Maybe it’s time to submit a patch to the PageTypeBuilder project?

Import Namespaces for Razor Views

Wed, 28 Jul 2010 21:43:02 GMT

Previously when developing with the WebForms view engine we could use the Web.config file to import namespaces where we stored our extension methods or models. They would then be available to all our views without having to explicitly declare them in each view.

In Razor this is no longer possible due to how it’s built, which is why we have to manually register them in the Application_Start event.

To do this begin with opening Global.asax and create a new method called RegisterGlobalImports, and call it from the Application_Start method. In the newly created method you add all the namespaces you wish to have in your view by calling AddGlobalImport on CodeGeneratorSettings.

public static void RegisterGlobalImports() {
     CodeGeneratorSettings.AddGlobalImport("MvcApplicationRazor.Core.Extensions");
     CodeGeneratorSettings.AddGlobalImport("MvcApplicationRazor.Core.Models");
 }
 
 protected void Application_Start() {
     RegisterGlobalImports();
     
     AreaRegistration.RegisterAllAreas();            
     RegisterRoutes(RouteTable.Routes);
 }

I usually register extension methods, that should be available in the view, and models so I won’t have to type namespaces over and over again.

Getting HTML Colorization with Razor View Engine

Tue, 27 Jul 2010 23:21:09 GMT

Today the Gu announced the first preview of ASP.NET MVC 3, which included the new Razor view engine. I’ve been really excited about it as I feel it makes our views a lot prettier than before with Web Forms view engine. It will also be a lot quicker and smoother to type without all those messy <%-characters.

To the point! I am currently upgrading an existing site to use MVC 3 and Razor. However in this first preview of MVC 3 we won’t have any File Colorization or IntelliSense in .cshtml files. This means it will look like we’re editing in Notepad. It got me wondering if there was a way to at least get some colorization, more specifically HTML colorization. I wandered around in the options of VS2010, and eventually found the place where I could map an extension to a different colorization.

This is how you get HTML colorization in .cshtml files:

Open Tools menu.
Choose Options…
Go to Text Editor, and third choice; File Extension.
Enter cshtml as Extension and choose HTML Editor in the dropdown.
Click Add and OK. Now try to open a .cshtml file – you should get HTML colorization.

Remember to remove this setting when VS2010 officially gets Razor colorization and IntelliSense.

That’s it. Hopefully it will be a little bit easier on your eyes.

How to Use the Omnibox API in Google Chrome

Mon, 26 Jul 2010 23:36:35 GMT

The Omnibox API in Chrome is currently an experimental API, which means you can’t upload the extension to the gallery if your using it. Though, it works very well for local testing, and that is what we are going to do now.

When I first heard there was going to be an Omnibox API I figured it would let us hook in on every change in the address bar and then add my own results to it. However, this isn’t how the API was implemented, and after reading Aaron’s comment about why, I understand and believe it’s the right way to go.

[…] The omnibox has a very small results space. I'm hesitant to get into a
situation where a bunch of extensions are fighting to make their results the most relevant. […]
― Aaron Boodman

In fact the only difference from how I thought it would work is that each extension sets a keyword (like search engines) in the manifest (omnibox_keyword) and this is the word the extension will respond to in the Omnibox. This means that, like Aaron said, we won’t have to fight with other extensions about space – we have our own reserved space in the results list. Smart!

How to Use

Like mentioned earlier, you need to first add a setting to the manifest.json file where you specify the keyword the Omnibox will respond to. This will look identical to how the custom search engines behave in the Omnibox

Currently the Omnibox API consists of four events:

chrome.experimental.omnibox.onInputStarted
chrome.experimental.omnibox.onInputChanged
chrome.experimental.omnibox.onInputEntered
chrome.experimental.omnibox.onInputCancelled

The two events you will use the most are onInputChanged and onInputEntered. InputChanged occurs every time you type something in the Omnibar (after typing the keyword). This is also the event where you will be inserting the suggestions you want to show up in the results list. This is done in the following manner (placed in the background.html file):

chrome.experimental.omnibox.onInputChanged.addListener(function (text, suggest) {
     if (text.search('coffee') > -1) {
         var suggestions = [];
 
         suggestions.push({ content: 'Coffee - Wikipedia', description: 'Coffee - Wikipedia' });
         suggestions.push({ content: 'Starbucks Coffee', description: 'Starbucks Coffee' });
 
         suggest(suggestions);
     }
 });

The suggest function we are calling at the end wants an array of suggestions. Each suggestion object has tree properties; content, description, and descriptionStyles (optional). The content property is the value the address bar will get when we choose this suggestion, and also the value we receive in the onInputEntered event. The description is the text we see in the results list. Lastly the descriptionStyles; it lets us style the description in different ways, e.g. green, grayed and bold. More on how this works later.

When running this code and typing our keyword in the Omnibox (e.g. “sp”), pressing space, and typing “coffee” you will get the following results:

Pretty awesome, right! Now this example is quite useless but we could do something much smarter such as submitting this command to a web server, which then starts the coffeemaker and a notification popup is shown when it’s ready.

Whenever you press enter the value will be sent to the event listeners of the onInputEntered event. This event receives the entered text through it’s first parameter “text”. See example:

chrome.experimental.omnibox.onInputEntered.addListener(function (text) {
     alert('You entered: ' + text);
 });

If you liked the idea about the coffeemaker, then here is where you will send the command to the web server. Or whatever you like it to do!

Beautify it

The suggestions objects we created earlier only used the content and description properties, and leaving out the descriptionStyles property. This property is quite cool (and nicely implemented). It determines how the description will look in the results list. We can choose between four different styles:

styleDim – slightly grayed out, used for helper text
styleMatch – used to display matched text, in bold
styleUrl – used for URLs and filenames
styleNone – resets the style to normal

They are then used by inserting in an array and specifying at which offset it should take effect. This means we can stack up as many different styles we want. We only have to set the offset at which their styles begin. Lets say we have a suggestion where we will display an URL and its page title. It would look like this in code:

var url = 'http://google.com';
 var title = 'Google Search';
 
 var suggestion = {
     content: url,
     description: url + ' - ' + title,
 
     descriptionStyles: [
         chrome.experimental.omnibox.styleUrl(0),
         chrome.experimental.omnibox.styleDim(url.length)
     ]
 };

And this is how it looks in our Omnibar:

Go create some code!

That’s all I have about the Omnibox API. It’s your turn now to create some nice extensions making use of this API, I sure will. However as noted before, you can’t upload extensions using experimental APIs to the extensions gallery. Hopefully it won’t take that long before the Chrome devs finish it.

If anything’s unclear, feel free to leave a comment :-)

Resources

Omnibox API docs

Faking Dynamic Properties with PageTypeBuilder in EPiServer

Wed, 21 Jul 2010 11:41:00 GMT

When building websites in EPiServer you sometimes want a value of a property to be inherited from the parent page. Previously we used Dynamic Properties to have properties inherited, but when using PageTypeBuilder we are spolied with being able to code all our page type properties programactially in classes. However PageTypeBuilder doesn’t support creating Dynamic Properties, but that doesn’t stop us from creating the same functionality with ordinary properties.

After reading Joel’s blog post about dynamic properties with PageTypeBuilder and trying out the snippets of code he wrote, I decided to convert it into an extension method to make it easier to implement in more properties and projects.

Extension Method

public static TProperty GetInheritedProperty<TPageData, TProperty>(this TPageData pageData, Expression<Func<TPageData, TProperty>> expression)
     where TPageData : PageData
     where TProperty : class
 {
     if (pageData == null) return null;
     if (expression == null) throw new ArgumentException("Missing expression parameter", "expression");
 
     TProperty value = pageData.GetPropertyValue(expression);
 
     if (value == null && pageData.ParentLink != null && pageData.PageLink != PageReference.StartPage)
     {
         var page = DataFactory.Instance.GetPage(pageData.ParentLink) as TPageData;
         value = page != null ? expression.Compile()(page) : null;
     }
 
     return value;
 }

Sample Usage

[PageTypeProperty(Type = typeof(PropertyString), Tab = typeof(Information))]
 public string MyInheirtedProperty
 {
     get { return this.GetInheritedProperty(page => page.MyInheirtedProperty); }
 }

If you know any improvements that can be made to this method – please do leave a comment.

To-Do Chrome Extension Part 3 – Make it Work

Sun, 18 Apr 2010 13:05:38 GMT

This is part three of the series on making a to-do extension for Google Chrome.

In this post we are going to finish the browser action popup to a state where it is fully functional. That means being able to add, remove, edit and complete tasks. We will also apply some styling so our eyes won’t burn to death each time we look at it.

Bind event handlers

We have a lot of elements laying in our extension, that does nothing. We need to hook these up to an event handler. In JavaScript there are two ways you can add an event handler to an element. First, and most common, is by using the addEventListener method (target.addEventListener('click', handler, false)) or using jQuery ($(target).click(handler)). These are great because they make the HTML code very clean from JavaScript and element attributes. The other way is through element attributes, e.g. <a onclick="handler()">. In a website this easily gets messy in the markup and makes it harder to maintain. On the other hand, in extensions we write a lot more JavaScript than in a normal webpage and would rather choose to have clean and maintainable script files. This is why I will attach all event handlers through element attributes in our extension.

We only need four handlers in our popup – the checkbox (onchange), task textbox (onkeyup), remove button (onclick) and the add task textbox (onkeyup), which makes our code look like this:

<div id="results">  
     <div class="item" jsselect="$this" jsvalues="id:id">
         <input type="checkbox" onchange="view.changeCompleted(this.parentNode.id, !!this.value)" class="completed" checked="checked" jsvalues="checked:completed" /> 
         <span class="title" onkeyup="view.changeTitle(this.parentNode.id, this.innerText)" contenteditable="true" jscontent="title"></span>    
         <button class="remove" onclick="view.removeTask(this.parentNode.id)" title="Remove Task">Remove</button>
     </div>
 </div>
 <input type="text" id="add" onkeyup="view.newTask(event)" placeholder="Write task and press enter..." />

You likely notice that I have included some parameters to each event handler. These help to identify which task I am changing. E.g. this.parentNode.id gets the parent element’s id attribute (where we store the task’s id).

Implementing the handlers

We will be keep all our handlers in the view object that we created in the previous post. The first handler is the one to add a task, called newTask. It will fire each time you type in the textbox but we only want save a new task when the user presses the enter key, which is why we need an if statement to check for that. The rest is simply adding the new task with our TaskRepository and resetting the textbox. We will also change the init function a bit since last post.

textbox: null,
 
 init: function() {
     this.textbox = document.getElementById('add');
     this.renderView();
 },
 
 newTask: function(e) {
     if (e != null && e.which == 13 && this.textbox.value != "") { // enter key
         db.create({
             title: this.textbox.value,
             completed: false,
             created: new Date()
         });
         this.textbox.value = '';
         view.renderView();
     }
 },

There are three handlers left to write, but they are very self explanatory and won’t need a closer description as they will merely be using methods of TaskRepository. Following is the code for changeTitle, changeCompleted and removeTask:

changeTitle: function(id, title) {
     db.getById(id).title = title;
     db.save();
 },
 
 changeCompleted: function(id, completed) {
     db.getById(id).completed = completed;
     db.save();
 },
 
 removeTask: function(id) {
     db.remove({ id: id });
     view.renderView();
     return;
 },

Styling the popup

If you run the extension in its current state you will see that all functionality works as expected, but like I said in the previous post, it looks horrible and is hard to use. I have prepared some CSS styles for it, but as this post isn’t about CSS I won’t be getting into details about it. If you want to have a look at the CSS code, see the ZIP file at the bottom.

Before and after styling the popup:

Round up

In only three posts we managed to create a fully functional to-do manager for Google Chrome. This shows how easy it is to develop for Chrome with HTML 5 and JavaScript.

Our extension still doesn’t fulfill all our requirements, though. We still need to implement an options page and a task counter in the icon. That’s the subject for the next post.

I have “compiled” the extension to an installable .crx file in case you want to run it and see how it works. Personally I’m already using this extension for my to-do lists.

Source code is, like always, available in a link below.

Downloads

Install extension!
Download To-Do Extension Source (Part 3)

Client-Side Validation Using xVal and ASP.NET MVC 2

Wed, 31 Mar 2010 20:17:00 GMT

Validating input on the server-side in ASP.NET MVC 2 is quite easy when using the new Data Annotations on our Model classes. It means that we have automatic validation every time someone submits data to our Controller, the model binder of ASP.NET MVC will take care of running the validation rules we set up in the model.

However the problem arises when we want client side validation on our model. We don’t want to repeat our validation rules to a client side library as that will be a pain in the ass to maintain later, when the model changes. What we do want is something that is using our preexisting rules in a way that the client side library understands.

This is where xVal enters the game. It does exactly what I just described, which is converting our Data Annotation attribute-rules to rules which the excellent jQuery Validation plugin can understand. To give an example of how you can implement xVal with ASP.NET MVC, I will create a user registration form which will feature a few standard validation rules.

Validating a user registration form

Begin with downloading xVal library from CodePlex and reference the file from our new and empty ASP.NET MVC 2 project in Visual Studio. Also add the xVal.jquery.validate.js file to our scripts folder. We need a user class to play with. Add a class named User in the Models folder and add the following code.

[MetadataType(typeof(UserMetadata))]       
public class User {       
    public string Username { get; set; }       
    public string Password { get; set; }       
    public string Email { get; set; }       
    public string Name { get; set; }       
      
    private class UserMetadata {       
        [Required, StringLength(30)]             
        public object Username { get; set; }       
      
        [Required, StringLength(30)]       
        public string Password { get; set; }       
      
        [Required, DataType(DataType.EmailAddress)]       
        public object Email { get; set; }       
    }       
}

This will require a user to enter a username, password and email address. Username and password will require a maximum of 30 characters long and the name field will be optional.

We got the model, but we need somewhere to store them. For this simple demo I will be creating a dummy repository class which saves the user objects in memory, like the following snippet.

public class UserRepository {       
    readonly List<User> _users = new List<User>();       
      
    public void Create(User user) {       
        // Save to database       
        _users.Add(user);       
    }       
}

Now we need a controller and actions for our registration form. Two Register actions will be created – one for the GET and one for the POST. The GET will simply return a View and display a registration form, with the fields of our model. When submitting the form we will get to our POST action method which will check the ModelState.IsValid property if the input data is valid, if not the method will return the View, with supplied data. Otherwise the user object is saved to our dummy database and the user is redirected to the success page.

public ActionResult Register() {       
    return View();       
}       
      
[HttpPost]       
public ActionResult Register(User user) {       
    if (!ModelState.IsValid)       
        return View(user);       
      
    _userRepository.Create(user);       
      
    return RedirectToAction("Registered");       
}       
      
public ActionResult Registered() {       
    return View();       
}

If you have created the View files for these actions you should be having a fully functional registration form, with server-side validation.

Magically turn on client-side validation

The server-side validation is working, and all we ever want now is client-side validation! The steps to make that work is so easy it is laughable. We only need to include these script files in the head section.

<script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>       
<script src="/scripts/jquery.validate.js" type="text/javascript"></script>       
<script src="/scripts/xval.jquery.validate.js" type="text/javascript"></script>

Lastly we need to tell xVal to output the Data Annotation rules to our page, so that it can be read by JavaScript. This is very easily done with the following HtmlHelper method, at the bottom of our View page:

<%= Html.ClientSideValidation<User>() %>

That’s all!? Yes, in fact that is all we have to do, to get client-side validation in ASP.NET MVC 2. Try it out, and then get back here to see what more ways you can customize xVal.

Remote validation

Sometimes only client-side validation is not enough to validate certain properties of a model. We need to validate business rules which uses a database to validate. In these cases it can be really useful to move the validation back to the server, but still keeping the snappy, instant validation that client-side validation gives us.

In xVal this is possible through something that is called RemoteRule. To create a Remote Rule you only need to create a new Action method in your Controller, which receives the model, validates it, and finally returns a true/false result. In our project we will check if a username is already taken, so that two users can’t have the same username. We will start with the following Action method:

public RemoteValidationResult UsernameIsTaken(User user) {       
    var exists = _userRepository.ExistsUsername(user.Username);       
    return exists       
        ? RemoteValidationResult.Failure("Username is already taken.")       
        : RemoteValidationResult.Success;       
}

I also updated the UserRepository class to include an ExistsUsername method which returns true if the username starts with “yadda”.

To register the Remote Rule with xVal we need to open the “Register” view and find the ClientSideValidation method we used earlier, and run a method on the returned object.

<%= Html.ClientSideValidation<User>()       
    .AddRule("Username", new RemoteRule(Url.Action("UsernameIsTaken"))) %>

Remote Validation is now hooked up and you can try it out by typing “yadda” in the username field. It should then say the username is taken when you tab out of the field. Awesomely easy!

Custom attributes with client-side validation

In those cases where you do not need remote validation but only classic JavaScript validation will do just fine, then creating a new Data Annotation attribute is a good idea. We will use this technique when validating if a password is good-enough for us.

We will start with a new class, that inherit from ValidationAttribute (from Data Annotation) and implements the ICustomRule interface (from xVal). From the inherited class you will override the IsValid method which does the actual validation. In this case we will use Regular Expressions to determine if the password is decent. The other method, which we got from the ICustomRule interface will tell xVal which JavaScript function to run when doing the client-side validation. I have named it “GoodPassword”, and it won’t receive any parameters (null). If the validation fails, it will use the error message set in the constructor.

public class GoodPasswordAttribute : ValidationAttribute, ICustomRule {       
    public GoodPasswordAttribute() {       
        ErrorMessage = "Enter a better password.";       
    }       
      
    public override bool IsValid(object value) {       
        if (!(value is string))       
            return false;       
      
        // Requires passwords to have atleast 5 chars and one number       
        return Regex.IsMatch(value.ToString(), @"^.*(?=.{5})(?=.*\d)(?=.*\w).*$");       
    }       
      
    public CustomRule ToCustomRule() {       
        // First parameter is the JavaScript function name       
        return new CustomRule("GoodPassword", null, ErrorMessage);       
    }       
}

Finally the last thing is implementing the JavaScript function, which will use the same regex pattern as the server-side. The pattern could have been sent over to the JavaScript function through a parameter, but I wanted to keep them separate incase the JavaScript version needed modifications. Following is the last snippet showing the final JavaScript function.

function GoodPassword(value, element, params) {       
    var regex = /^.*(?=.{5})(?=.*\d)(?=.*\w).*$/g;       
    return (value.match(regex) != null);       
}

Now try this in the form by typing passwords such as “monster2” and “foo”. We have got both client-side validation and server-side validation of our custom rule!

Summary

In this post we have covered how to implement basic client-side and server-side validation using xVal, jQuery Validation and Data Annotation in ASP.NET MVC 2. We also went further and created remote validation and custom rules for both server-side and client-side. See the demo link below for a quick look how it turned out, and download the source for a closer look.

View the demo
Download the source

To-Do Chrome Extension Part 2 – Browser Action Popup

Thu, 25 Mar 2010 20:35:41 GMT

This is part two of the series on making a to-do extension for Google Chrome.

Part 1 – Project Setup
Part 2 – Browser Action Popup
Part 3 – Make it Work

In this post I will cover how to implement a good database layer for our extension, as well as how to use the jsTemplate library to display our data nicely. Fairly simple right? Let’s get to work.

We will begin with writing the necessary HTML markup for displaying the tasks. To make it easier to display data from JavaScript in HTML we will be using a template system called jsTemplate, created by Google. It will allow us to separate the presentation from logic, which is always a good idea.

Let’s add the jsTemplate library to our popup.html file. There are three files needed to run the library, but to save some file requests I joined them to one file. You can find this file in the ZIP-archive at the bottom of this post. Extract the file in the /js/libs/ folder and add the following line to the head section:

We need to define the properties of a task – a task will have a descriptive title, a boolean for whether the task is completed, and lastly a date of creation. Translating this to HTML markup means we need a checkbox, text element and a remove button for each task item. The date of creation will not be displayed in my version, but it is always good idea to include it incase you need it later. The template for a task item will look like the snippet below.

<div id="results">
     <div class="item" jsselect="$this" jsvalues="id:id">
         <input type="checkbox" class="completed" checked="checked" jsvalues="checked:completed" /> 
         <span class="title" contenteditable="true" jscontent="title"></span>    
         <button class="remove" title="Remove Task">Remove</button>
     </div>
 </div>

As you have probably already seen—there are a number of weird, non-standard attributes in the code. These are used by jsTemplate to select properties from the data we pass in. The jsselect attribute means we will iterate over the variable specified in it—in this case the $this variable. The jsvalues attribute can change properties of the element, and jscontent sets the text of the element. Now there is one more attribute that is not very commonly used in HTML, which is the contenteditable attribute. It makes it possible to edit the content even though it is not an input or textarea element, which is perfect for this specific use-case (we can style it just like we want to).

We will also need a text box for entering a new task, which will look like this:

Just a normal input element, but with the new HTML 5 attribute called placeholder. It shows the text in gray and when clicking the text box it disappears. Very cool feature, that previously required lots of scripts and styling.

Data storage in extensions

If you load the extension in Chrome it won’t really do much at all – even though we have made a template and included the necessary scripts. What we need to do is bind the data storage to the template system so that it has some data to play with. To store data in Chrome we can use two different systems, Local Storage or Web Database. The most common and easiest one is Local Storage and is also the one we will use here. It is simply an object that we can set properties on and they are automatically saved for us, even after browser restarts.

Remember that localStorage can only store strings, which means you have to store your objects in a JSON-string with JSON.stringify(object)

Before we get ahead of ourselves and hook up the template system (fun!), we will create a class for handling data storage. This will make it a lot easier to get, add and remove tasks from the storage.

TaskRepository = function() {
     this.init();
     return this;
 };
 
 TaskRepository.prototype = {
     tasks: [],
     index: 0,
 
     init: function() {
         this.load();
     },
 
     create: function(task) {
         if (task == null) throw new TypeError('Missing task parameter');
 
         task.id = this.index++;
 
         this.tasks.push(task);
         this.save();
     },
 
     // 'get' and 'remove' functions removed for brevity,
     // see ZIP-archive for full code sample.
 
     load: function() {
         this.tasks = (localStorage.tasks ? JSON.parse(localStorage.tasks) : []);
         this.index = localStorage.index ? localStorage.index : 0;
     },
 
     save: function() {
         localStorage.tasks = this.tasks ? JSON.stringify(this.tasks) : null;
         localStorage.index = this.index;
     }
 };

That is quite a bit of code but quite simple at a closer look. Basically what it does is load data from localStorage in init() and puts it in a local variable, tasks, and each method uses that variable to query data. After editing data you will have to save the data back to localStorage with the save method. An index number variable is also increased every time you create a task – it is used as ID which makes it easier to get and remove a specific task.

Hook up the template system and display some data

We are now ready to display some data in our browser action popup. To do that we create a View class which will include all presentation logics like load, edit and remove. We initialize this class in the onload event (and of course, in the popup.html file).

View = function() { return this; }
 View.prototype = {
     init: function() {
         // Manually create a task
         db.create({
             title: 'My first task is to make a task',
             completed: false,
             created: new Date()
         });
         
         this.renderView();
     },
 
     renderView: function() {
         // Tells jsTemplate to load our tasks and display them with our template
         jstProcess(new JsEvalContext(db.tasks), document.getElementById('results'));
     }
 };
 
 var db = new TaskRepository();
 var view = new View();
 
 window.onload = function() { view.init(); };

Round up

If you reload the extension in Chrome you should see one task appearing in the list, and you should also notice that the layout is worse than the web was ‘99 (see image). There is no way to add a task either, nor remove or edit yet. In the next post we will fix all these points.

Download the Source

Download To-Do Extension Source (Part 2)

Experimental APIs in Chrome Extensions - #1

Sat, 20 Mar 2010 13:35:48 GMT

This post covers the new Chrome Extension API methods which are in development. Some of which are already in the dev release of Google Chrome (5.0.356.2). Most of these methods will most likely change before they are released in the stable channel, but it will give you an idea of what you can expect from the extension API in the future.

Enabling experimental APIs

To use the experimental methods you need to first turn them on in both Chrome and on per extension basis. Begin with adding --enable-experimental-extension-apis to the command arguments of Chrome. Next find the extension you want to try the experimental APIs on and add experimental to the permission section of the manifest file.

Clipboard (chrome.experimental.clipboard)

Copying text is already possible in Chrome by selecting text in a textarea and executing the execCommand("Copy") method. Though, this is quite a hacky way so it is great to know that this will now be offered through an API method. Methods for cutting and pasting data is also available.

Following is an example of usage:

// Select
 document.getElementById('textarea1').select();
 
 // Copy/Cut [executeCopy(tabid, callback)]
 chrome.experimental.clipboard.executeCopy(1, function() {
     console.log('copied!');
 
     // Focus an element
     document.getElementById('textarea2').focus();
 
     // Paste [executePaste(tabid, callback)]
     chrome.experimental.clipboard.executePaste(1, function() {
         console.log('pasted!');
     });
 });

What I am missing is a method where I can pass a string as an argument, which will be copied directly, without needing to select the text beforehand.

Infobar (chrome.experimental.infobars)

You are most likely familiar with infobars from when you login to a web page and Chrome asks if it should remember your login. Infobars can be used when you want to alert users of a completed action, or when you want to give user a choice to take an action (e.g. backup the extensions data).

Following is an example usage:

// Show an infobar [show(details, callback)]
 chrome.experimental.infobars.show({ path: 'infobar.html' }, function(window) {
     console.log('Infobar showed, in window ', window);
 });

It would be great if we got some default CSS styles for buttons and links for a consistent look, as currently we have to style them ourselves. I am pretty sure this is in the pipeline, though.

Idle (chrome.experimental.idle)

This API is quite interesting. It allows us to query which state (idle, active) Chrome currently is in. This can be useful when you want to run a certain process when Chrome gets in idle state, e.g. pause the music of a music player after being idle for 30 minutes.

Following is an example usage:

// Find out which state Chrome is in. [queryState(threshold, callback)]
 chrome.experimental.idle.queryState(15, function(state) {
     console.log('Chrome is in ', state, ' state.');
 });
 
 // Event which fires when state changes
 chrome.experimental.idle.onStateChanged.addListener(function(state) {
     console.log('Changed to ', state, ' state.');
 });

Currently the documentation for this API is not ready (or the API itself for that matter) which means I don’t know which unit the threshold is in, but we can assume it is in seconds.

Stay up to date

As these experimental APIs changes a lot before they are released it is a good idea to check back at the documentation at Google Code regularly. You can also have a look at the latest trunk, more specifically the extension_api.json file, for the absolute latest APIs.

These were only some of the experimental APIs the extension API offers, for more a full documentation see the links above. I will also continue writing these type of posts for the experimental APIs in Chrome.