TEERA 2.0

I find Linq to comes in handy from time-to-time, especially when I refactor my code and try to shorten it. Consider this example, let’s say I have a Book data that I want to dump into XML document. Now I have a Book class to represent the object.

    class Book
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
        public double Price { get; set; }
        public Book(int id, string title, string author, double price)
        {
            ID = id;
            Title = title;
            Author = author;
            Price = price;
        }
    }

To dump a collection of Book to XML, the old fashion way of doing it is creating foreach loop over Book collection and create XML object. With Linq it can become a one-liner.

            List<book> bookList = new List<book>();
 
            //Create book collection
            bookList.Add(new Book
                            (787, @"The Back of the Napkin: "+
                             @"Solving Problems and Selling "+
                             @"Ideas with Pictures", "Dan Roam", 16.47));
            bookList.Add(new Book
                (89, @"Presentation Zen: Simple Ideas "+
                 @"on Presentation Design and Delivery"
                 , "Garr Reynolds", 19.79));
            bookList.Add(new Book
                (897, @"C# in Depth: What you need to master C# 2 and 3",
                "Jon Skeet", 26.29));
 
            //Generate XML tree from Book collection data
            XElement xmlElement =
                        new XElement("Books",
                                bookList.Select(
                                    book => new XElement("Book",
                                                new XAttribute("ID", book.ID.ToString()),
                                                new XElement("Title", book.Title),
                                                new XElement("Author", book.Author),
                                                new XElement("Price", book.Price)
                                                        )
                                               )
                                    );
            Console.WriteLine("{0}", xmlElement.ToString());</book></book>

This query yields the XML output. No loop or messy enumeration required, the code is also more readable the Linq query.

I ran into a situation that I have to write JavaScript that execute only when the page is posted back. Currently there’s no straight forward way in ASP.NET Ajax to check IsPostback from JavaScript. If you google around, you might find various way of getting this to work, like this one.

After some thought, the easiest hack I came up with is this.

function IsPostBack() {
   return <%= IsPostBack.ToString().ToLower() %>;
}

In part 1 of this post, you can see how you can encrypted your ViewState and ensure its integrity across postbacks. A few more things you can do to beef up your ViewState security.

ViewState validation with ViewStateUserKey

It is possible for someone who got a hand on your ViewState data and reuse it at some other time or different user session. This scenario is what we call ‘One-Click attacks‘, a variation of XSS. ASP.NET provides ViewStateUserKey as a way to ensure that ViewState data is tied to specific user session.

In short, ASP.NET can use ViewStateUserKey for encryption salt. So if we set ViewStateUserKey to current session ID or specific user information, this ViewState data will not be usable to other users or sessions. For more detail explanation, check out Scott Hanselman’s posts here and here.

Note that setting ViewStateUserKey should be called early in the OnInit method, before ViewState is encrypted.

Taking ViewState out of Page output

The ultimate measure to secure ViewState is to remove it from rendered page altogether and store it somewhere else. Apart from tighten up security, another benefit is reducing the size of output HTML page.

ASP.NET uses a page state persister class to take care of persisting ViewState data. By default, ASP.NET page uses HiddenFieldPageStatePersister, which as the name implies, persist ViewState to page’s hidden field. Another default persister is SessionPageStatePersister which keeps page ViewState in current session.

To switch to use session persister, add <sessionPageState> in Web.config file. You can also specify the size of maximum saved ViewState.

Custom page ViewState Persister

ASP.NET 2.0 allows you to create custom persister by overriding PageStatePersister class. In the code sample, I create a persister that save ViewState in a separate text file.

Subclassing System.Web.UI.PageStatePersister

Next, we have to override Save method. This method is called when ViewState data is persisted to storage medium. In this case, I persist ViewState data to Text file.

Generate GUID for ViewState persisting file name

Note that I keep GUID in a hidden field. We’ll need this GUID when we load back ViewState on postback.

Writing ViewState data to text file.

You’ll see on the output HTML that __VIEWSTATE hidden field is now empty! We only keep GUID in a hidden field to refer back when we load ViewState data. This helps reduce page size significantly if your page relies on heavy ViewState data.

Lastly, override Load method to get ViewState value back from persistence medium.

Now you need to tell your aspx page to use this custom persister. To do that, simply override PageStatePersister property on the page.

You can download the code for this class HERE.

Where should I put ViewState data

Putting ViewState in Session has some disadvantages. First, you can lose session ViewState if it reaches historySize limit (if you open multiple windows of the same web page). You may also run into a memory problem if ViewState is very large. Consider when you have a lot of users with large ViewState data, all these data is kept in web server memory. From the sample code, persisting ViewState to external text file is effective against large ViewState, yet it can incur significant file IO cost. With ability to create custom page ViewState persister, you can go as far as persist it to SQL database

I didn’t pay much attention on the security aspect of ASP.NET ViewState until a few days ago when I got to use my friend’s labtop. After browsing around, I could see that his web browsers cached some pages from ASP.NET website. So just for fun, I quickly downloaded ViewStateDecoder and decoded the cached page’s leftover ViewState. Here’s what I found:

The blackened part is my friend’s email

Now this cached page was from an online shopping site in Asia. With information like username and email, a moderately evil geek can do quite a lot of financial damage to my poor friend.

As ASP.NET developer, ViewState is one thing that we grow to love and hate. Love - it’s the key technique that make stateful ASP.NET controls work on stateless HTTP protocol! Hate - it’s heavyweight and expose a security hole. Here’re a few things you can do to protect ViewState from malicious attacker.

Enable ViewState MAC

MAC - Machine Authentication Check, is a mechanism to ensure the integrity of ViewState data (data received is the same as data transmitted). Before ViewState data is sent out, ASP.NET quickly computes hash data from the ViewState and append that hash to the end of ViewState. When Postback occurs, ASP.NET deserialized returning ViewState and compare the original hash value to the returned hash value. If both values are NOT the same, the ViewState data has been corrupted/changed.

Enabling ViewState MAC is very easy. You can either do it for a specific page.

Or you can apply to every pages through Web.config file

By default, MAC hashing algorithm is SHA1. You can change the algorithm by setting validation attribute of machineKey section in Web.config file.

You can also encrypt it by selecting Triple DES (3DES) algorithm

ViewState Encryption

If you select “3DES” or “AES” as machineKey validation attribute, your ViewState will get encryption automatically. Specifying encryption algorithm in Web.Config file will apply to all pages. You can enable/disable encryption on page basis as well by setting ViewStateEncryptionMode. By default, the value is Auto.

An extra hidden field will be added for a page with encrypted ViewState. This marker field tells ASP.NET that the ViewState hidden field has to be decrypted on postbacks.

Alternatively, you can programatically request ViewState encryption from C# code. The case that you’ll need this is when you have ViewStateEncryptionMode directive set to ‘Auto’ and want to request encryption for this page from code. ASP.NET 2.0 introduced a new Page.RegisterRequiresViewStateEncryption() method. Note that you should call this method before LoadViewState event for postback (call it in Init method).

By default, ASP.NET generate random key for encryption. If you want a stronger encryption or you are working in a web farm, you’ll need to specify your own validation key. The validation key is a string of 20 to 64 random, cryptographically-strong bytes, represented as 40 to 128 hexadecimal characters. The longer the key the better.

The easiest way to generate this key is to use System.Security.Cryptography.RNGCryptoServiceProvider class.

The keyLength parameter can be 40 or 128. This method returns cryptographically strong validation key.

Once you get the validation key, set it for machineKey in web.config file. If your application is hosted in a web farm, make sure that the validation key is consistent across all the servers.

In the part 2 of this post, I’ll show you how to user ViewStateUserKey and create custom ViewState persister that allows you to remove ViewState data from rendered page entirely.

I ran into a problem of creating color panel in a Silverlight project I’m working on. This color panel initially have to show system named colors that are static properties of System.Windows.Media.Colors class.

After some thoughts, I didn’t find any other solutions but to go down the Reflection path. Also, to make the colors in the panel arranged harmoniously they needed to be sorted before adding to the panel.

This method can certainly be improved with the combination of Reflection and Linq.

Half the code is gone. Looks much better now

REMIX SEA event was held on Friday May 29 in Thailand, which I happened to be there on my vacation. The event itself was awesome. The theme seemed to be focusing around three things: User Experience (UX), Expression tool, and Silverlight 2.

Developers, Developers, Developers!

Nice show for the opening keynote

Leon Brown opened up with the keynote

Arturo from MS Expression team showed off the Expression tool

Shane Morris tells you how to “pimp you app” and the zen of UX

Some of the questions that I got answers from attending this event.

Is Silverlight a contender to Flash?

My take is ‘Not yet’. I have yet to a see something on the UI side that you can do with Silverlight but not in Flash.

IMHO, the cool thing about Silverlight is it’s very developer friendly. Many .NET developers, including myself, are used to the event based OO programming. They often find it difficult to wrap their head around timeline-based in Flash. After all, Flash is designer-centric. What Silverlight offers is an easier alternative for developers to build animation and RIA. A programmer like myself can leverage my knowledge of C# and .NET framework.

Should I care about MS Expression tool?

‘Yes’ you should, if you want to develop a serious Silverlight or WPF application. Of course you can build the entire Silverlight application with Visual Studio. What Expression tool gives you is the easy collaboration between designers and developers. Designers can work in the Timeline-based development like Flash while collaborate seamlessly with developers.

Note: A surprise that MS gave out a copy of Expression Studio to everyone at the event ☺

Is Expression tool going to eclipse PhotoShop?

No. At least not in a few years. Microsoft itself does not intend for it to replace other designer tools neither. From what I see, Expression is not yet mature as an ultimate tool for designer. It still needs sometime to get enough features to complete with Adobe’s products in this area.

Should I take the Silverlight kool-aid?

Yes. You’ve got to see things they are doing and what you can do with Silverlight. There’s a lot of potential in this technology.

Is UX just another fad?

I’ve learned quite a few things on this subject attending Shane Morris’s session. And No, it’s not another fad. In fact, UX is the most important things when it comes to developing software application for any human. It’s just that many technology companies start to ‘get it’.

Apple has shown them that there’s a profit in making a product with fewer features but richer in user experience. Many companies also found that the technological competition has already been pushed to the limit and UX is the area waiting to be improved.

Make sure you check these out:

• Arturo’s blog
• Kudzu’s blog
• HugeFlow
• Shiverlight
• NBC Olympic site (developed with Silverlight)
• Hardrock memorabilia
• ScottGu’s blog
• Shane Morris’s blog

For the past week I’ve started working with Sang Shin to convert some open source Ruby on Rails applications as Netbeans projects for download. So far the process has been fairly easy. My goal for this post is to show you how to pull down RoR project source code from source control (Subversion) and convert it to a Netbeans project.

Typo blogging engine

Project site: http://www.typosphere.org

Dev site: http://trac.typosphere.org

Checking out source code from Subversion

With Netbeans, working with Subversion can’t be any easier. First I fire up Netbeans 6.1, then on menu bar, choose ‘Versioning’ > ‘Subversion’ > ‘Check out’

Netbeans will ask for repository URL and source revision number.

Next, enter the directory where you want the source files to go to. Note that I tick “Skip release_4_1_x and check out only its content”. This is because I do not want additional folder level. I want the source files to go directly to ‘Typo’ folder I’ve created earlier.

Lastly, Netbeans will ask if you want to create a new project for the source you just checked out.

Choose Ruby on Rails project with existing resource and navigate to the source folder.

The last step is to name your project and select version of ruby to run and web server.

And that’s all easy right? You can download Netbeans project for Typo HERE.

Last year I added additional Thai and Japanese languages to my spa website. Now that I recently got a chance to do the same for a Java and PHP web sites, I’m amazed at how easy it is to do this in ASP.NET.

To do this, I first start from designing the web page. I create a language bar user control that contain 3 link buttons for each language. I put this user control at the bottom of the page.

Now in my web project in Visual Studio, I add resource files to the project. If you are using VS2005 or 2008, the tool will automatically add App_GlobalResources folder for you. Here I create 3 resource files for 3 languages. Note that I name them all the same (I put the localized strings for entire site in one file). You can have multiple resource files as well. I also append “.<culture code>” to the end of each resource file to indicate the language that it should serve.

I go ahead and design the web page. For each text label, instead of define the string content for Text property, I set it so that the value would be automatically injected from the resource file. The value format is

<%$ Resources:<resource file name>, <resource entry name> %>

Alternatively, I can programmatically set the localized string value from C# code as well. Here’s a code-behind example.

After I have all the required labels laid out, I can now go to the resource file and enter the localized string values. Note that HTML tag is also allowed for localized string value.

Lastly, the most important piece. How you can go about telling ASP.NET of the language you choose. The key here is to set the right UICulture for the current thread. The way I do this is to keep the current culture code in a session value. Once the user selects preferred language from the user control, I assigned the value to the current thread.

Using the selected language’s culture info code to create CultureInfo object and assign it to the current thread.

You also have another option by setting your web page to automatically localize display string by the browser’s current culture. Simply set aspx page Culture attribute to “auto” and the ASP.NET runtime will use browser’s current culture setting by default.

And that’s it. I didn’t realize how easy it was until I had to do this same thing on other platform.

Comparing to other programming languages, JavaScript has always been a pain in the neck for me. Netbeans 6.1 (currently in Beta 1) comes with a lot of improvement in JavaScript support. IMHO, the most evident enhancement here seems to be in the area of code completion.

Pretty neat huh? And it’s pretty fast. I heard that Tor Norbye rewrote the JavaScript support in Netbeans 6.1 to use the same logic as the ruby editor. It also allows you to add comment and documentation that appears in the code completion widget.

You can also add code completion support for your custom JavaScript as well. Here I create a custom JavaScript class and add some documentation/comment to it.

You can enable code completion support for custom JavaScript function as well

Now I get code completion support with proper documentation for my custom JavaScript code as well!

On my last post, I’ve explained how Model-View-Presenter (MVP) pattern and help you achieve extensibility on Java platform by decoupling your application from presentation technology. Yet, it’d be a shame if I stop the discussion there - I have not mentioned anything about the JVM! On this post, I’ll take it a step further. I’ll show you how you can leverage the power of Java Virtual Machine (JVM) and MVP pattern to transform your Java application to JRuby on Rails.

You can download the source code for this example HERE

Power of the JVM

Being on Java platform, developers can also reap another benefit from their best friend: the JVM. To demonstrate what good Java VM can bring is to look at this example. Assume that our bookstore site has become popular and our CEO just recently returned from a Ruby on Rails user group meeting. The CEO declares that we need to jump on the Rails bandwagon and get books data from XML file instead of hard coding it in the application.

The issue here is now we have to migrate our application across different technologies. To minimize cost and avoid writing a lot of code, we decide to leverage existing Java platform and go with JRuby.

JRuby allows Ruby class to implements Java interface. So we first start from creating a new data model where it reads books data from XML file.

Reading books data from XML file with REXML library

Sample XML books data

Rails controller = The ‘View’ controller

Now that we have the data model ready, we go ahead to implementing the view layer. This is similar to last example on servlet and JSP. We have Rails controller class implements the IBookDetailView interface. The controller is responsible for fetching data to .rhtml file to display.

The key idea here is that it’s the Rails controller that is the ‘View’ in MVP. The presenter is simply an instance of BookDetailPresenter Java class that we can use here with the magic of JRuby.

Rails controller implements IBookDetailView interface

Rails controller acts as the view and controls data that will get displayed on rhtml page

Running this application and there we have it on JRuby Rails

The virtual machine empowers Java and makes it a platform, not just a technology or programming language. Developers can benefit from MVP and, combining with the power of JVM, can take this pattern to another level.