Blog Stats
  • Posts - 62
  • Articles - 1
  • Comments - 29
  • Trackbacks - 64

 

Nifty Cube and ASP.NET 2.0 MasterPages: Think Round

Earlier I mentioned NIftyCube as a tool for creating rounded html element corners. Nifty attaches its function to the window.load event and provides a way of grabbing a Nifty delegate if you don't want to explicitly attach to the event. So the head of the page would have something like this:

NiftyLoad=function(){Nifty("div.roundcont","top"); Nifty("div.nestedContent","big"); Nifty("div.nestedMenu","big"); Nifty("ul#nav a","big transparent top"); }

The Nifty javascript is smart enough to snatch this function block and attach it to the window.load event for you. But I wanted to have rounded corners on my Master page as well as some elements on individual pages.

So I first created a class called NiftyCubeCommand which would generate the "Nifty" call above (for example, Nifty("div.roundcont","top");)

   13     /// <summary>

   14     /// Summary description for NiftyCubeCommand

   15     /// </summary>

   16     public class NiftyCubeCommand

   17     {

   18         /// <summary>

   19         /// Default constructor. Class declaration is default.

   20         /// </summary>

   21         /// <param name="tag"></param>

   22         /// <param name="name"></param>

   23         /// <param name="options"></param>

   24         public NiftyCubeCommand(HtmlTextWriterTag tag, string name,params string[] options) : this(tag, name,false, options) { }

   25 

   26         /// <summary>

   27         /// .ctor for using Nifty with ID selectors.

   28         /// </summary>

   29         /// <param name="tag"></param>

   30         /// <param name="name"></param>

   31         /// <param name="useIdSelector"></param>

   32         /// <param name="options"></param>

   33         public NiftyCubeCommand(HtmlTextWriterTag tag, string name, bool useIdSelector, params string[] options)

   34         {

   35             _tag = tag;

   36             _name = name;

   37             _useIdSelector = useIdSelector;

   38             _options = options;

   39 

   40         }

   41 

   42         private HtmlTextWriterTag _tag;

   43 

   44         public HtmlTextWriterTag Tag

   45         {

   46             get { return _tag; }

   47         }

   48 

   49         private string _name;

   50         public string Name

   51         {

   52             get { return _name; }

   53         }

   54 

   55         private bool _useIdSelector;

   56         /// <summary>

   57         /// Indicates whether the CSS selector is a class or ID selector (either # or . )

   58         /// </summary>

   59         public bool UseIdSelector

   60         {

   61             get { return _useIdSelector; }

   62         }

   63         private string[] _options;

   64 

   65         public string[] Options

   66         {

   67             get { return _options; }

   68         }

   69         public override string ToString()

   70         {

   71             string tag = HtmlTagLookupTable.Instance.Tags[_tag];

   72             string options = "";

   73             if (_options.Length > 0)

   74             {

   75                 options = string.Concat(",\"", string.Join(" ", _options), "\"");

   76             }

   77 

   78             string selector = UseIdSelector ? "#" : ".";

   79 

   80             return string.Concat("Nifty(\"", tag, selector,_name,"\"",  options, "); ");

   81         }

   82 

   83 

   84     }

In order to resolve the tag names by the HtmlTextWriterTag enumeration, I copped MS's lookup table and use that to firm up what tag names can be passed to my Nifty Command

   15 public class HtmlTagLookupTable

   16 {

   17 

   18         #region Singleton Instantiation

   19     HtmlTagLookupTable() { RegisterTags(); }

   20         public static HtmlTagLookupTable Instance

   21         {

   22             getreturn Singleton.instance; }

   23         }

   24         class Singleton

   25         {

   26             static Singleton() { }

   27             internal static readonly HtmlTagLookupTable instance =

   28                 new HtmlTagLookupTable();

   29         }

   30         #endregion

   31     private IDictionary<HtmlTextWriterTag, string> _innerHash = new Dictionary<HtmlTextWriterTag, string>();

   32     public IDictionary<HtmlTextWriterTag,string> Tags

   33     {

   34         get{return _innerHash;}

   35         }

   36     private void RegisterTags()

   37     {

   38         _innerHash.Add(HtmlTextWriterTag.A, "a");

   39         _innerHash.Add(HtmlTextWriterTag.Acronym, "acronym");

   40         _innerHash.Add(HtmlTextWriterTag.Address, "address");

   41         _innerHash.Add(HtmlTextWriterTag.Area, "area");

   42         _innerHash.Add(HtmlTextWriterTag.B, "b");

   43         _innerHash.Add(HtmlTextWriterTag.Base, "base");

   44         _innerHash.Add(HtmlTextWriterTag.Basefont, "basefont");

   45         _innerHash.Add(HtmlTextWriterTag.Bdo, "bdo");

   46         _innerHash.Add(HtmlTextWriterTag.Bgsound, "bgsound");

   47         _innerHash.Add(HtmlTextWriterTag.Big, "big");

   48         _innerHash.Add(HtmlTextWriterTag.Blockquote, "blockquote");

   49         _innerHash.Add(HtmlTextWriterTag.Body, "body");

   50         _innerHash.Add(HtmlTextWriterTag.Br, "br");

   51         _innerHash.Add(HtmlTextWriterTag.Button, "button");

   52         _innerHash.Add(HtmlTextWriterTag.Caption, "caption");

   53         _innerHash.Add(HtmlTextWriterTag.Center, "center");

   54         _innerHash.Add(HtmlTextWriterTag.Cite, "cite");

   55         _innerHash.Add(HtmlTextWriterTag.Code, "code");

   56         _innerHash.Add(HtmlTextWriterTag.Col, "col");

   57         _innerHash.Add(HtmlTextWriterTag.Colgroup, "colgroup");

   58         _innerHash.Add(HtmlTextWriterTag.Del, "del");

   59         _innerHash.Add(HtmlTextWriterTag.Dd, "dd");

   60         _innerHash.Add(HtmlTextWriterTag.Dfn, "dfn");

   61         _innerHash.Add(HtmlTextWriterTag.Dir, "dir");

   62         _innerHash.Add(HtmlTextWriterTag.Div, "div");

   63         _innerHash.Add(HtmlTextWriterTag.Dl, "dl");

   64         _innerHash.Add(HtmlTextWriterTag.Dt, "dt");

   65         _innerHash.Add(HtmlTextWriterTag.Em, "em");

   66         _innerHash.Add(HtmlTextWriterTag.Embed, "embed");

   67         _innerHash.Add(HtmlTextWriterTag.Fieldset, "fieldset");

   68         _innerHash.Add(HtmlTextWriterTag.Font, "font");

   69         _innerHash.Add(HtmlTextWriterTag.Form, "form");

   70         _innerHash.Add(HtmlTextWriterTag.Frame, "frame");

   71         _innerHash.Add(HtmlTextWriterTag.Frameset, "frameset");

   72         _innerHash.Add(HtmlTextWriterTag.H1, "h1");

   73         _innerHash.Add(HtmlTextWriterTag.H2, "h2");

   74         _innerHash.Add(HtmlTextWriterTag.H3, "h3");

   75         _innerHash.Add(HtmlTextWriterTag.H4, "h4");

   76         _innerHash.Add(HtmlTextWriterTag.H5, "h5");

   77         _innerHash.Add(HtmlTextWriterTag.H6, "h6");

   78         _innerHash.Add(HtmlTextWriterTag.Head, "head");

   79         _innerHash.Add(HtmlTextWriterTag.Hr, "hr");

   80         _innerHash.Add(HtmlTextWriterTag.Html, "html");

   81         _innerHash.Add(HtmlTextWriterTag.I, "i");

   82         _innerHash.Add(HtmlTextWriterTag.Iframe, "iframe");

   83         _innerHash.Add(HtmlTextWriterTag.Img, "img");

   84         _innerHash.Add(HtmlTextWriterTag.Input, "input");

   85         _innerHash.Add(HtmlTextWriterTag.Ins, "ins");

   86         _innerHash.Add(HtmlTextWriterTag.Isindex, "isindex");

   87         _innerHash.Add(HtmlTextWriterTag.Kbd, "kbd");

   88         _innerHash.Add(HtmlTextWriterTag.Label, "label");

   89         _innerHash.Add(HtmlTextWriterTag.Legend, "legend");

   90         _innerHash.Add(HtmlTextWriterTag.Li, "li");

   91         _innerHash.Add(HtmlTextWriterTag.Link, "link");

   92         _innerHash.Add(HtmlTextWriterTag.Map, "map");

   93         _innerHash.Add(HtmlTextWriterTag.Marquee, "marquee");

   94         _innerHash.Add(HtmlTextWriterTag.Menu, "menu");

   95         _innerHash.Add(HtmlTextWriterTag.Meta, "meta");

   96         _innerHash.Add(HtmlTextWriterTag.Nobr, "nobr");

   97         _innerHash.Add(HtmlTextWriterTag.Noframes, "noframes");

   98         _innerHash.Add(HtmlTextWriterTag.Noscript, "noscript");

   99         _innerHash.Add(HtmlTextWriterTag.Object, "object");

  100         _innerHash.Add(HtmlTextWriterTag.Ol, "ol");

  101         _innerHash.Add(HtmlTextWriterTag.Option, "option");

  102         _innerHash.Add(HtmlTextWriterTag.P, "p");

  103         _innerHash.Add(HtmlTextWriterTag.Param, "param");

  104         _innerHash.Add(HtmlTextWriterTag.Pre, "pre");

  105         _innerHash.Add(HtmlTextWriterTag.Ruby, "ruby");

  106         _innerHash.Add(HtmlTextWriterTag.Rt, "rt");

  107         _innerHash.Add(HtmlTextWriterTag.Q, "q");

  108         _innerHash.Add(HtmlTextWriterTag.S, "s");

  109         _innerHash.Add(HtmlTextWriterTag.Samp, "samp");

  110         _innerHash.Add(HtmlTextWriterTag.Script, "script");

  111         _innerHash.Add(HtmlTextWriterTag.Select, "select");

  112         _innerHash.Add(HtmlTextWriterTag.Small, "small");

  113         _innerHash.Add(HtmlTextWriterTag.Span, "span");

  114         _innerHash.Add(HtmlTextWriterTag.Strike, "strike");

  115         _innerHash.Add(HtmlTextWriterTag.Strong, "strong");

  116         _innerHash.Add(HtmlTextWriterTag.Style, "style");

  117         _innerHash.Add(HtmlTextWriterTag.Sub, "sub");

  118         _innerHash.Add(HtmlTextWriterTag.Sup, "sup");

  119         _innerHash.Add(HtmlTextWriterTag.Table, "table");

  120         _innerHash.Add(HtmlTextWriterTag.Tbody, "tbody");

  121         _innerHash.Add(HtmlTextWriterTag.Td, "td");

  122         _innerHash.Add(HtmlTextWriterTag.Textarea, "textarea");

  123         _innerHash.Add(HtmlTextWriterTag.Tfoot, "tfoot");

  124         _innerHash.Add(HtmlTextWriterTag.Th, "th");

  125         _innerHash.Add(HtmlTextWriterTag.Thead, "thead");

  126         _innerHash.Add(HtmlTextWriterTag.Title, "title");

  127         _innerHash.Add(HtmlTextWriterTag.Tr, "tr");

  128         _innerHash.Add(HtmlTextWriterTag.Tt, "tt");

  129         _innerHash.Add(HtmlTextWriterTag.U, "u");

  130         _innerHash.Add(HtmlTextWriterTag.Ul, "ul");

  131         _innerHash.Add(HtmlTextWriterTag.Var, "var");

  132         _innerHash.Add(HtmlTextWriterTag.Wbr, "wbr");

  133         _innerHash.Add(HtmlTextWriterTag.Xml, "xml");

  134 

  135 

  136 

  137     }

  138 

  139 

  140 

  141 }

In order to be sure I am using the correct NiftyCube commands, I created a Resource file called NiftyCube that has all the options. I use these when creating my command instances.

NAMEVALUE
AllCornersall
BottomLeftCornerbl
BottomRightCornerbr
FixedHeightfixed-height
LeftCornersleft
LowerCornersbottom
NoCornersnone
RightCornersright
RoundingSize_Bigbig
RoundingSize_Normalnormal
RoundingSize_Smallsmall
SameHeightsame-height
TopLeftCornertl
TopRightCornertr
Transparenttransparent
UpperCornerstop

Then, I created a collection in my MasterPage base class to hold all NiftyCubeCommand instances.

   30         private IList<NiftyCubeCommand> _niftyCubeCommands = new List<NiftyCubeCommand>();

   31         public IList<NiftyCubeCommand> NiftyCubeCommands

   32         {

   33             get { return _niftyCubeCommands; }

   34         }

The base class all my pages inherit from simply reference this collection using ((MasterPageBase)this.Master).NiftyCubeCommands

Now we are all set up to allow me to round whatever elements I want to from the pages that are using the Master page.

My MasterPage class overrides the OnPreRender event to squirt in the necessary javascript.

  103             NiftyCubeCommand cmd1 = new NiftyCubeCommand(HtmlTextWriterTag.Div, "nestedContent", Resources.NiftyCube.RoundingSize_Big);

  104             NiftyCubeCommand cmd2 = new NiftyCubeCommand(HtmlTextWriterTag.Div, "nestedMenu", Resources.NiftyCube.RoundingSize_Big);

  105             NiftyCubeCommand cmd3 = new NiftyCubeCommand(HtmlTextWriterTag.Ul, "nav a",true,

  106                 Resources.NiftyCube.RoundingSize_Big,Resources.NiftyCube.Transparent,Resources.NiftyCube.UpperCorners);

  107 

  108             NiftyCubeCommands.Add(cmd1);

  109             NiftyCubeCommands.Add(cmd2);

  110             NiftyCubeCommands.Add(cmd3);

  111 

  112             //Register the script

  113             if (!Page.ClientScript.IsClientScriptBlockRegistered("NiftyLoad"))

  114             {

  115                 StringBuilder commands = new StringBuilder();

  116                 foreach (NiftyCubeCommand command in NiftyCubeCommands)

  117                 {

  118                     commands.Append(command.ToString());

  119                 }

  120                 Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"NiftyLoad",

  121                     "NiftyLoad=function(){" + commands.ToString() + "}",true);

  122             }

Now to apply rounded corners to a control in one of my pages it is as simple as :

  108             NiftyCubeCommand cmd = new NiftyCubeCommand(HtmlTextWriterTag.Div,"roundcont",Resources.NiftyCube.UpperCorners);

  109             this.NiftyCubeCommands.Add(cmd);

Beats the heck out of customizing images and maintaining them each time a theme changes!


Feedback

# re: Nifty Cube and ASP.NET 2.0 MasterPages: Think Round

Gravatar Mike,
You should also checkout the new Atlas Control Toolkit. It has a nice little extender you can use to implement rounded corners.

-Bill 7/28/2006 4:48 AM | Bill Pierce

# re: Nifty Cube and ASP.NET 2.0 MasterPages: Think Round

Gravatar Thanks Bill...I have worked with the control kit and have liked it (probably will even more now that you can use the update panel inside template controls). I want to wait until they get settled down with the code tho before I use it on the site I am building. Are you using this control? 7/28/2006 2:51 PM | Mike

# re: Nifty Cube and ASP.NET 2.0 MasterPages: Think Round

Gravatar I'm trying to implement your code using vb.net instead of csharp and I'm having a little trouble translating lines 30-34 (second set). Also, where I do put lines 103-122. Are you saying in the MasterPage's code behind file? Also, is it even possible to override the OnPreRender event for a MasterPage? Obviously I'm confused. Help! 11/8/2006 9:12 AM | Jane

# re: Nifty Cube and ASP.NET 2.0 MasterPages: Think Round

Gravatar Hi Jane, I am not a VB guy but I think this is close to how lines 30-34 would look...

Dim _niftyCubeCommands As New IList (Of NiftyCubeCommand)


Public ReadOnly Property NiftyCubeCommands As IList(Of NiftyCubeCommand)
Get
Return _niftyCubeCommands
End Get
End Property

Lines 103-122 should be placed in the MasterPage's code-behind in its (overridden) OnPreRender event.

I'd recommend you give the (formerly Atlas) ASP.NET 2.0 Ajax Controls a look for the rounded corners Bill mentioned above. They are in Release Candidate 2 stage and are stable so I use those now instead of Nifty Cube ... mainly because Nifty Cube couldn't handle background-images like the Atlas controls do.

If you need more help you can include your email and I'll shout back at you.

MIKE
11/8/2006 7:11 PM | Mike

# re: Nifty Cube and ASP.NET 2.0 MasterPages: Think Round

Gravatar Wow .. this is exactly what I was looking for! Saves me from writing it!

Is there any way you could upload a demo version?

Thanks 2/13/2007 3:55 PM | Chris

# re: Nifty Cube and ASP.NET 2.0 MasterPages: Think Round

Gravatar Excellent...thanks! 3/2/2007 11:56 AM | Pete

# re: Nifty Cube and ASP.NET 2.0 MasterPages: Think Round

Gravatar I've successfully implemented this out. But doesn't works. No errors, but I can't get those corners :(.
In PHP, nifty corners worked for me, but ASP.NET is more complex.

Anyone can upload sources? Or explain me how the OnPreRender() should be implemented?

Thanks! 9/26/2007 2:29 PM | ADX

Post a comment





 

Please add 7 and 1 and type the answer here:

 

 

Copyright © Mike Nichols