Friday, 26 February 2010

ASP.Net using both inner properties and default innner properties

This post should have been titled Have your cake and eat it, too, but people need to find it in Google.

First of all, a bit of theory.

Web controls in ASP.Net can persist their properties in markup in two ways: attributes and nested tags. The problem with attributes is that the type of the property may be complex and iself have properties.

ASP.Net does have a mechanism for specifying subproperties by using a hyphen to separate properties and their subproperties. For example the BackColor property of a row of a GridView can be specified as both BackColor="Red" in the RowStyle tag or as RowStyle-BackColor="Red" in the GridView tag. However, that way is pretty unreadable and cumbersome that is why using inner tags is sometimes necessary (and implemented by decorating the properties with [PersistenceMode(PersistenceMode.InnerProperty)]).

But using inner tags is not always possible! Imagine a control like Panel. Its contents are interpreted as controls that are supposed to be rendered, so an inner tag would just be rendered to the page and not interpreted. There is no way of making such a control (decorated in its class declaration with [ParseChildren(false)]) have inner properties, but one can use something like an ITemplate property so that the controls can be placed in a tag of their own.

Also, consider controls like the DropDownList, in which ListItems are placed directly in the control tag and it is assumed automatically that they are children of the Items collection. That is because the Items collection is marked as [PersistenceMode(PersistenceMode.InnerDefaultProperty)] which means all the children of the control are considered elements in the property. Adding an inner tag would raise an error, as it would not be a ListItem object.

Yet, there is a way! And finding it was like discovering the holly grail. I have only tested it on a ListControl, but it should work on templated controls as well.

Let's start with a class that inherits from ListControl, therefore it has the Items collection in it and adding a complex property to it. I will create a special class called InnerTagClass that has a Text property. The control that inherits from ListControl and which I will call BaseClass will have an InnerTag property of type InnerTagClass. The code would look like this:

public class BaseClass:ListControl
{
private InnerTagClass mInnerTag;

[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[NotifyParentProperty(true)]
public virtual InnerTagClass InnerTag
{
get
{
if (mInnerTag==null)
{
mInnerTag=new InnerTagClass();
}
return mInnerTag;
}
set
{
mInnerTag = value;
}
}
}
Now go into the designer and modify the Text property of InnerTag. You will notice that it will be saved as a hyphen attribute, while adding items to the Items collection would render the list items as children in the BaseClass tag:

<local:BaseClass ID="BaseClass1" runat=server InnerTag-Text="Test">
<asp:ListItem>Test</asp:ListItem>
</local:BaseClass>
Now, an InnerDefaultProperty is still an InnerProperty. You can put the ListItem inside an Items tag and it will still work, and also you can add an InnerTag tag with a Text attribute and it will work as well! However, if you go into the designer and you change the Text for the InnerTag property you get the changed property as an attribute and the previous InnerTag tag, with the old value. That is not acceptable.

However, you can inherit from the BaseClass, override the Items and the InnerTag properties and change their persistence mode to InnerTag! Here is the code:

public class InheritedClass : BaseClass
{
[PersistenceMode(PersistenceMode.InnerProperty)]
public override System.Web.UI.WebControls.ListItemCollection Items
{
get
{
return base.Items;
}
}

[PersistenceMode(PersistenceMode.InnerProperty)]
public override InnerTagClass InnerTag
{
get
{
return base.InnerTag;
}
set
{
base.InnerTag = value;
}
}
}
Now editing in the designer will create the Items tag and add the list items to it and an InnerTag tag with a Text attribute! But when you type it in source view, you get intellisense for both the Items tag and the ListItem tag! Adding only list items to the control works just like an inner default property.

There is a catch, though, as adding list items as direct children of the InheritedClass tag will not allow you to change the values of Items or InnerTag from the designer. It will save the current items in an Items tag, create the InnerTag, but fail to remove the previous items and thus throw a designer error. Still, fixing that is as easy as switching to source view and removing the old items.

Another possible question would be if one could add both InnerDefaultProperty and InnerProperty as decoration to a property in a class, but the answer is no. An error of Duplicate 'PersistenceMode' attribute is thrown.

Also, it might be possible to be able to fix that via a specialised editor, but I think it would be too complicated by far.

So there you have it: a way to satisfy both the styles of source people (like myself) and designer people by using inheritance and persisting differently the base property and its override.

Wednesday, 24 February 2010

Multiple CSS classes on the same element

You have an HTML element with two or more classes in the class name, something like "class1 class2" (separated by space and not by comma as some sites wrongly suggest) and some of the rules in the two classes overlap. What is order in which rules are read and do they overwrite other rules that are already in place?

I made a test HTML and I noticed that the rules in class2 overwrote the ones in class1, but since I had asked the wrong question, I had the wrong answer. If I changed the class name to "class2 class1" the result was the same!

It appears that the rules in CSS classes that overlap are overwritten based on their order in the document and latest win, overwriting the previous. In other words, if class1 would be defined later than class2, then its properties would overwrite class2's. The order of classes in a class name is complete without relevance!

Monday, 22 February 2010

System.MissingMethodException in Visual Studio DesignMode

Well, there are a lot of reasons why you might get exceptions in the designer, but just in case you get one of these, that make no sense, and you open another Visual Studio with the same solution and you debug the other Visual Studio when entering design mode and you still don't get any meaningful result... shut down Visual Studio and restart it.

Persisting subproperties as attributes rather than inner tags

There are all these attributes that can be used to decorate properties and classes so that the Property Grid control knows to handle them. One of these attributes is PersistenceModeAttribute, which specifies how to persist the information in ASP.Net markup. More often than not, you need to persist a complex object with subproperties as an inner tag. In that case one uses [PersistenceMode(PersistenceMode.InnerProperty)]. For the possible values of the constructor parameter, just follow the link if interested.

The problem comes when you want to persist the properties as attributes, in the ASP.Net specific "flattened" syntax, using a hyphen to separate property from subproperty. (<Style Color="red"/> as an inner tag is the same as Style-Color="red" as an attribute). You want this because some controls interpret their inner content as controls to be placed in them, such as the Panel control. You cannot add a Style tag in it because it just gets rendered in the page. The solution is to not use PersistenceMode! Of course, you might say, that's obvious. But it is not when your property already has the PersistenceModeAttribute decorating it and you are desperately looking for a parameter that does what you want. There is no such parameter. Not decorating the property is a separate option and it is the default behavior.

Saturday, 20 February 2010

The Bonehunters by Steven Erikson

Book coverOh, man, what a book this is. Steven Erikson uses a pattern in his epic Malazan Book of the Fallen series, with books that are standalone(ish) and others that continue the humongous story arches started in previous (or, indeed, later) books. The Bonehunters was heralded like a separate story, however that cannot be said to be true in any way. Old characters, patterns that evoke old stories, as is the birth of the Bonehunters, reminiscent of the Bridgeburners, and the sheer number of new characters, races and even gods make this book more of a hinge rather than a singular pillar in the epic. The number of open ended threads and unexplained new characters paves the way for the next four books. I am already starting to fear for the ending of the series.

What the book is about is difficult if not impossible to explain. It starts with a military campaign of punishment against the remnants of the Seven Cities army, but it ends suddenly and quite strange. The leadership of the elder Tavore sister unites the Malazans and binds them to her, in truth becoming hers and not merely an imperial army. There are strange machinations and moves from all the gods one can imagine, most of them hidden and quite hard to understand. What is even harder to explain is the way the empress allies herself with Mallick Rel and Korbolo Dom and starts rumours that make the Malazan population hate the Wickans, in truth war heroes of impecable honor. The ending is explosive but in no way final, leading the path onwards in the story.

Thursday, 18 February 2010

CSS cellpadding and cellspacing

There is one spiny issue when trying to move a html source from inline to CSS styling and that is the parameters of the table: cellspacing and cellpadding in particular.

From my tests it appears that cellpadding is overwritten by the CSS styling (the first time I ever see an inline attribute being overridden by CSS), however cellspacing does not. In order to remove the default cellspacing, use border-collapse:collapse on the table.

In order to set the table cellspacing through CSS, use the border of the td elements. Unfortunately, it doesn't work with transparent color, so you must set it to the color of the background. No luck if the background is an image. Margin on the cells doesn't work. Who uses cell spacing, anyway? Non Internet Explorer browsers have a table property called border-spacing, but it only works for some DOCTYPEs even in other browsers, so it's not reliable.

To set the table cell padding through CSS, just use the padding property of the cells. As I said earlier, it overrides the cellpadding property of the table.

So, in order to set 5px cell spacing and 5px cell padding through CSS, use this:
 body {
background-color:white; /* use the same color for the border of cells */
}
table {
border-collapse:collapse; /* remove default cellspacing */
border-spacing:5px; /* it works on some browsers on some DOCTYPEs */
}
td {
padding:5px; /* cell padding */
border:5px solid white; /* cell spacing */
}


You should set the padding as a general rule for all the TDs on the page. CSS classes like
table.MyClass td { padding:1px }
will affect all cells in all child tables! The more general the CSS selector, the easier will be to avoid overwriting some of your normal settings. For example, the CSS rule above would override
.myTD { padding-right:3px; }
because it is more specific.

Monday, 15 February 2010

The access key underline and the focused elements visual style

I was testing this WPF application on different operating systems and I have noticed that on Windows 2003 the access key letters in labels were always shown as opposed to the other operating systems where only by pressing Alt you could see the shortcut keys.

Apparently unrelated, there was another difference between Windows 2003 and other operating systems: clicking on elements would show their focus styling, while on any other, one needed to navigate using the keyboard Tab. This until I noticed that pressing Alt made the focus style appear on controls that I had clicked on.

Yes, the two are related and are linked to an operating system option that apparently cannot be changed on an application level. In Windows XP go to en empty area of the desktop, click Properties, go to the Appearance tab and click on the Effects button. Both the behaviors described above can be enabled or disabled by unchecking or checking Hide underlined letters for keyboard navigation until I press the Alt key. Here is the Microsoft link with instructions on how to do it.

In WPF, removing the visual focus to a control is as simple as setting the FocusVisualStyle property to {x:Null}, however there doesn't seem to be a way to enable or disable access key underscore.

Others have noticed this behavior, and people have suggested using the WM_CHANGEUISTATE Message on the window to set this functionality, by setting/unsetting the UISF_HIDEFOCUS flag. I have not tried it, though.

One can also try to change the setting in the registry. It seems the key is HKEY_CURRENT_USER\Control Panel\Desktop\UserPreferencesMask and if you want to hide the key focus and the label underline until you press alt you should unset the flag 20H from the first byte in the key.