Themes and ASP.NET MVC

I wanted to easily add theme support to yonkly, so that others can install it and modify its look and feel as they please.  I also wanted it to be as easy as installing a theme in wordpress.

I created a themes folder under the content folder

image

Then I referenced my css file in the master page using a helper method

<%= ThemeHelper.GetCss() %>

I also use a helper method for images

<img src='<%=ThemeHelper.GetImageUrl("reply.png")%>’ alt="reply" class="icon" />

But most of my images are set in the stylesheet, which makes it easier to manipulate different skins

The helper methods above look at the defined theme in the config file (or database or wherever you store your settings) and then return the path to the correct resource.

Take a look at these live samples:

They are all using the same codebase but have a different theme defined.  The trick is in making your HTML css-friendly by naming elements and assigning them classes as well as using Divs and avoiding tables.  This allows you to create a stylesheet that radically changes the look of the site.  Think of the element ids and classes as an API to your view, that the css can manipulate.

I also added a feature that lets you upload a folder theme as a zip file and have the application unzip it into the themes folder.

image

It would be cool if we can define a "virtual folder" in our application, so I wouldn’t have to use helper methods.  Imagine if you could just say /content/theme/logo.gif and it would just work.  The theme folder doesn’t really exist but instead it would route to the correct folder based on a setting.  I wonder if I can do that with current routing mechanism in asp.net mvc!!!  Anyone?

The Best JavaScript Library

I am in the process of creating a new web application using asp.net mvc and I am trying to choose the best JavaScript library to use.  I am pretty much sure that I am going to go with jQuery but nonetheless I wanted to review the libraries out there.  One reason is that I am writing a book and I want to be able to justify to the readers why I am going with jQuery and not the others.

What do I want from my JavaScript Library?

I want it to be easy (I am not a JavaScript expert)
I want it to be small
I want it to be fast
I want it to be extensible
I want good documentation and/or community support
I want good/easy AJAX support
I want it to be asp.net-friendly
I also want it to be testable (I am using TDD for this project/book)
Open Source would be nice but not required

What are my options?

jQuery – http://jquery.com/
Microsoft AJAX – http://www.asp.net/ajax/
Dojo – http://dojotoolkit.org/
Prototype – http://www.prototypejs.org/
YUI – http://developer.yahoo.com/yui/

This is a shortlist but if you want a more exhaustive, read this.  I only picked these, for the simple reasons that I have heard of them and are somewhat known by the community.

3 days later

It’s been 3 days since I started this post and I have spent all that time playing around with these libraries…  I have gone back and forth in my opinion on which library to use.  I love jQuery’s selectors, ease of use and community support.  Porototype is also very popular and somewhat similar to jQuery; but I would take jQuery over Prototype for the simple reason that I like jQuery.  YUI (Yahoo! UI) library is beautiful looking and very comprehensive.

jQuery

Pros

  1. Ease to learn and use
  2. Beautiful syntax (the least typing)
  3. Great community support and lots of fans
  4. Decent Documentation
  5. I already own the book
  6. QUnit test framework (http://docs.jquery.com/QUnit)

Cons

  1. UI isn’t that great
  2. Library is not as full-featured without plugins
  3. Plugins are somewhat inconsistent in quality depending on the author

Prototype

Pros

  1. Good documentation
  2. Good community support
  3. Lots of books
    1. Practical Prototype and script-aculo.us
    2. Prototype and script.aculo.us: You Never Knew JavaScript Could Do This!
    3. and many more…
  4. Great UI with the add-on script.aculo.us (http://script.aculo.us/)

Cons

  1. Couldn’t find a testing framework (but I didn’t look too hard)
  2. For some purely emotional reason, I prefer jQuery

YUI

Pros

  1. Great UI components and styles
  2. The best documented library out there, hands down.
  3. Distributed hosting of JS files – the script files will be downloaded from Yahoo server, so when my site becomes a mega-hit, it will scale better.
  4. Great test framework and test runner – check these demos
    image
  5. The most complete library
  6. PDF cheat sheets for every component

Cons

  1. Very verbose – not as elegant as jQuery, but that’s not too hard to fix e.g. I can assign YAHOO.util.Event to a variable $E and use $E as the shorthand.

The rest

I got tired of all the research and decided to wrap it up, so I glanced over Microsoft AJAX and Dojo and realized that there isn’t enough there to justify more research.

The winner…

When I started this post, I was pretty certain my final choice will be jQuery.  Then I started playing with Prototype and it looked really good, which kind of opened my eyes to the need to be open minded and objective.  This lead to a more objective look at YUI and the conclusion to use YUI.  I was very impressed with YUI’s look & feel, extensive documentation, testing framework and the icing on the cake was the free hosting of the JavaScript libraries.  This was a really tough decision because I still love jQuery the best.

[poll id=”2″]

Ruby on Rails Crumbs – Part 1

If you have been following along, I blogged previously about my experience trying Ruby on Rails as a .net developer (here and here).  I quickly realized how different things are and that I desperately need some help, so I got myself the beta PDF version of Agile Web Development with Rails and Rails Recipes.  Both great books but not Rails Recipes doesn’t cover rails latest version – 2.0. 

As I read through these books, I realized there are lots of things I need to keep track of, that is lots of crumbs.  This series of blog posts are a way for me to keep track of these crumbs as well as share them with others.  I don’t plan to explain everything in detail (because I can’t).  This is more of a quick reference to remind me of features and things that I read about in the books because there is no FREAKING INTELLISENSE in rails.  You will realize how valuable Intellisense is when you don’t have it.

These crumbs are not in any specific order.  For the most part, they are in the order I discovered them.

content_tag

Use it to surround a block of text with a tag.  The code below creates <b>make me bold</b>

content_tag (:b, “make me bold”)

&block

I can’t find a good explanation of this but when you call a method from your views like this

<% my_foo() do %>
  [content]
<% end %>

And the method is defined like this

def my_foo(&block)
end

Then the &block parameter will contain all the text that is wrapped by this method in the view.  In the above example &block would contain [content]

blind_down

Use to generate a blind down effect in JavaScript to make hiding an element smoother than just setting display to none.  In you rjs template, write:

page[:element_id_to_blind].visual_effect :blind_down

request.xhr?

This returns true if the request is xhr i.e. an AJAX request.  I like the trailing question mark.  In .net, it would be named IsXhr.

has_many

Use in your model to create a relationship.  For example, an article model class might look like this

class Article < ActiveRecord::Base
has_many :categories
end

NOTE: your category model class name is Category but the has_many uses the actual table name which categories.  This is so weird for me – no compiler errors, no warnings, nothing.  I know, I know, convention over configuration.

belongs_to

Same idea as has_many but in reverse, so the category model class would look like this

class Category < ActiveRecord::Base
belongs_to :articles
end

button_to

A helper method that generates an HTML form containing a button that submits to a URL when clicked.  For example:

button_to “Edit”, :action => ‘edit’, :id => 3

Creates a form with an Edit button that submits to the edit action and pass 3 as an id parameter.  If we were editing an article, the generated html looks like this:

<form class=”button-to” action=”/articles/edit/3″ method=”post”>
    <div><input type=”submit” value=”Edit” /></div>
</form>

More crumbs to come – stay tuned.  Also feel free to add your own crumbs to the comments, it might help someone.

Ajax with ASP.NET MVC Framework Preview 2

This is the updated version of the Nikhil’s excellent example on how to use Ajax with ASP.net MVC.

I commented all the changes made in the code and prefixed them with //emad. So just search for //emad and you will see all the changes I made… Here is a quick list of the changes I made to make this compile and run on MVC Preview 2:

  1. Removed the [ControllerAction] tags – they are no longer needed.
  2. Updated the Route Table creation in the global.asax.cs file to work with the new format
  3. Updated the Ajax framework project to use the new classes
    1. HttpContextBase instead of IHttpContext
    2. HttpRequestBased instead of IHttpRequest
    3. HttpResponseBase instead of IHttpResponse
  4. Updated the AjaxViewContext constructor to match ViewContext constructor
  5. Changed the web.config to work with the new version (copied and pasted from another preview 2 project)

Note: Test project was not updated and will not compile – sorry, I didn’t have time to do it.

Here is the updated code: tasklist.zip

Cross Domain Error Fix for Silverlight

The easiest/quickest way to fix a cross domain error is to create a test website to host your Silverlight application.

image

When you hit F5 to debug the application, it will run the development server and the address bar will say http://localhost:xxx/blahblah.  This will prevent a cross-domain error.

If you try to run it using an test html page from the file system i.e. browser address would say something like c:projectssilverlighttest.html then it will throw the cross-domain error.

If you already have your Silverlight application created then just create an empty website or web application project and then right-click on it and click "Add Silverlight Link…"

image

Then follow the instructions on the screen

image

Fame, Fortune and WCF

I need your help to bring me fame and fortune.

I wrote an article at code project which was entered for a competition.  The winner gets $10k.  Can you please check it out at http://www.codeproject.com/KB/WCF/myfeedreader.aspx and if you like it, please vote for it.  I can’t win if you don’t vote.  Voting will be closed on December 31st.

To vote, you need to login and find the voting area at the bottom that looks like this:

image

Thanks and I hope you find the article helpful.

ASP.NET AJAX: Rendering a Gmail-like ‘Loading’ Indicator

Here is an interesting article on how to display Gmail-like progress indicator: Matt Berseth: ASP.NET AJAX: Rendering a Gmail-like ‘Loading’ Indicator over a Specific ASP.NET Control

But I have a much easier method to do that, which I use in www.yongazonga.com:

First, add your UpdateProgress control like this:

<asp:UpdateProgress ID="UpdateProgress2" runat="server"
    AssociatedUpdatePanelID="pnlNewUser"
   DisplayAfter="0" DynamicLayout="True">
      <ProgressTemplate>
         <div class='progresspanel'>
                Loading...
         </div>
      </ProgressTemplate>
</asp:UpdateProgress>

And then apply this style to the div:

.progresspanel
{
    background-color: RED;
    color: White;
    top: 1px;
    color: white;
    position: absolute;
    right: 16px;
    z-index: 999;
}

Do you have a better/easier way of doing this?

kick it on DotNetKicks.com