Munkii Magic

An intertesting event happened to me today. For the first time in over a year I read about something and though “cool, that is worth sharing”. The semantic marking up of Event data and what google is going to be doing with it.

I am currently working for a large “organiser of trade and consumer events” where we are in the process of building a CMS platform, on top of EPiServer, to enable the different events to have a compelling presence on the Internet. We often have to display Event data and from time to time I have looked at using Microformats but mainly ‘cos I thought that was the right thing to do not because i could see any really compelling use of them, until now.

Last year Google introduced “Rich Snippets”. Using microformats to signal particular datatypes Google could pull through that data and display it alongside the Site Title in the Google results

This image shows a search result displaying a Review, Google also added support for People and later Video. On Friday Google posted on the Webmaster Central Blog (an excellent read) that they are now supporting Event data. Whilst I am going to have to wait a while to get that on our official Product Backlog and I am going to mark this auspicious event (me posting a blog for the first time in over a year) with some Event mark-up.

So we all know of IE6 and the problem it can have have when you have multiple submit buttons on a form and you press enter in an edit control. IE6 gets confused over what button should be sent to the server as the submit button. This annoyance is covered here and here.

The issue I had recently was that even though I was directly clicking on a button (the search button on this page) ASP.NET was firing the code for the final button on the page (which in this instance was a "Finish" button). Once I realised that this is what was happening i took a  look at the form that was being posted to the server. In the form variables collection I found both button elements! This is is an IE6 only issue and darn annoying. 

The fix was to disable the unneeded buttons, which stops them being included as part of the form post. More specifically I hook the click event on all the input and button elements, of type "submit", on the page, when it first loads. Then when the click happens I disable all the button elements and reenable them using setTimeout after 2 seconds.

The only exception to this disabling is if it was a button that caused the click. That button is obviously not disabled.

You can see the  solution on this page here http://www.ditto.net/Topics/MoviesMakeMeLaugh/fill in the function hookAllButtonsForDisabling().

Originally published on my old Charteris blog

This is part 6 of the training course originally described here with parts 2,3, 4 and 5 available here, here, here and here respectively. So far we have covered WPF fundamentals, XAML, brushes, shapes, controls, styling, resources and layout.

Part6

1. Data
   1. Binding class
      1. Converter property
      2. ElementName property
      3. Mode property
      4. Path property
      5. RelativeSource property
      6. XPath property
   2. LAB12 - Databinding elements to each other
   3. DataContext
   4. DataProviders
   5. LAB13 - Binding to an ObjectDataProvider
   6. DataTemplates
   7. DataTemplateSelector
2. ItemsControl
   1. Introduction
   2. ItemsSource property
   3. ItemTemplate property
   4. ItemsPanel property
   5. ItemContainerStyle
   6. LAB14 - Using ItemControl with ItemsSource, ItemsPanelTemplate, ItemsPanel, ItemContainerStyle and DataTriggers

Download Part6.zip which includes a slide deck and the 3 labs. Code to get you started with the labs is included.

Originally published on my old Charteris blog

Seeing as I blogged the Behind The Scenes look at Microsoft Surface I thought it only fair to give equal attention to this very funny (IMHO) tongue-in-cheek look at Microsoft Surface.

Microsoft Surface Parody on YouTube

Originally published on my old Charteris blog

Debugging layout issues is something I had to do fairly often particularly with some of the complex layouts we were trying in the past. Trying to work out why "such and such" FrameworkElement would not stretch to the size of "whatever" layout panel I was using. 

Before we get to the detail of stretching there is one simple layout, debugging technique that I think is worth sharing; It is that setting the backgrounds of all the various panels that you are using, whilst debugging, makes life much easier. Take this relatively simple layout problem

Imagine if we are trying to find work out why the buttons "2" are not aligned to the bottom of the screen even though they have VerticalAlignment set to Bottom. Well colouring the different layout panels will as you can see make it easier to see what is constraining what.

From this you can see that is more than likely the PaleGoldenRod coloured panel that is causing the panel containing the "2" buttons to layout as they are.

Stretching - Bible

I know it is a little arrogant to suggest I could write a bible on anything but this was the most often referenced pieces of WPF information I had, on a previous project. I cover it in the upcoming Part5 of my WPF Training Course, but I thought it was useful enough to pull out here.

FrameworkElements have a default of Stretch for their HorizontalAlignment and VerticalAlignment but whether or not this stretching is performed all depends on the containing layout panel and how that Panel is being used. It is this information that I refer to as the "Stretching - Bible"

* Except when using "Auto" rows and columns

Yes in the above table means "Children are stretched to available size"

No in the above table means "Children are their desired size"

I find myself referring back to this table whenever I am wondering why elements are not stretching even though I have set their alignment(s) to Stretch. Hope it helps someone else too.

Originally published on my old Charteris blog

This is part 5 of the training course originally described here with parts 2,3 and 4 available here, here and here respectively. So far we have covered WPF fundamentals, XAML, brushes, shapes, controls, styling and resources.

Again if anyone wants to contact me for clarifications or to talk over part of the course just use a Comment or the Contact link at the top of the page. Good luck!

The details of part 5 are below, the labs and any associated code are in the download package. LAB 11 is fairly important to get right and to understand why it is right. You may get something that looks close but it could be light years away from the correct solution, therefore I am going to include a completed solution as well. You don't have to use it but it is worth referring to when you have finished. Before starting Part5 I strongly suggest looking at parts 1 - 4 as this part really does draw on all the previous ones. If you think you know it all already at least review the contents of each part that I put in the blog post. If you are happy that you know the pre-reqs then great let's go!

Part5

1. Margins and Padding
2. Alignment
3. Layout logic overview
4. Height and Width
5. Transforms
   1. RotateTransform
   2. ScaleTransform
   3. SkewTransform
   4. TranslateTransform
6. RenderTransform vs LayoutTransform
7. LAB10 - Adding Interactions with Triggers
8. Dependency Properties Explained
9. Attached Properties Explained
10. Layout Panels
    1. StackPanel
    2. Grid
    3. UniformGrid
    4. DockPanel
    5. Canvas
    6. WrapPanel
11. Stretching - Bible
12. Z-Order
13. LAB11 - Run dialog (LAB 11 is fairly important to get right and to understand why it is right. You may get something that looks close but it could be light years away from the correct solution, therefore I am going to include a completed solution in the download as well.)

Download Part5.zip which includes a slide deck and the 2 labs. Code to get you started with the labs is included.

Originally published on my old Charteris blog

For the last year or so I have been working on the Microsoft Health Common User Interface (CUI) project at Microsoft and today it was released here (www.mscui.com) and on here on CodePlex (http://www.codeplex.com/mscui).

The work released today comes from two areas of the ongoing work that Microsoft is doing in this area. First up is Design Guidance, this is a collection of best practice user interface guidance for clinical applications. Apologies for simply quoting the website but people smarter than me came up with the words so I might as well quote them

Design Guidance has been produced through a rigorous user-centred design process that incorporates primary and secondary research, usability testing, consultation with software providers and integrated hazard assessments. Patient Safety Assessments (PSAs) are continually performed to ensure the Design Guidance meets safety concerns.

The guidance is targeted at both existing clinical applications and those that are being designed and architected right now. The second part of this release is the implementation of much of that guidance in the form of control libraries for both WinForms 2.0 and ASP.NET. The website contains explanation and samples for each of the Web controls with the Codeplex project hosting a download of both the Winforms and the ASP.NET Control library.

The ASP.NET controls use much of ASP.NET Ajax and the extensions to that technology provided by the AjaxControlToolkit. There are some really handy controls on the site that I am sure you will find useful even if you are not working on clinical applications, take for instance the DateInputBox control.

Originally published on my old Charteris blog

This is part 4 of the training course originally described here with parts 2 & 3 available here and here respectively. So far we have covered WPF fundamentals, XAML, brushes, shapes, controls and control templating.

Again if anyone wants to contact me for clarifications or to talk over part of the course just use a Comment or the Contact link at the top of the page. Good luck!

The details of part 4 are below, the labs and any associated code are in the download package

Part4

1. ResourceDictionaries
   1. Reusing XAML
   2. Why use a ResourceDictionary?
   3. Resource discovery
   4. File-based resource dictionaries
   5. LAB8 - Resources - Referencing System colours, Dynamic and Static
2. Styles
   1. Referencing Styles
   2. TargetType
   3. BasedOn
   4. LAB9 - Debugging Styling Issues
3. Triggers
   1. EventTrigger
   2. Property-based Trigger

Download Part4.zip which includes a slide deck and the 2 labs. Code to get you started with the labs is included.

Originally published on my old Charteris blog

First up this post is as much for me as it is for the person that happens upon it via a SE, this stuff is kind of confusing and I will need reminding.

Secondly I am far from an expert, only recently something blindingly obvious about Key Codes and why they are called key codes was point out to me. Thanks Richard.

KeyCode vs CharCode

A KeyCode is a not a code for a specific character; for instance the same code is returned whether or not it’s character is UPPER or lower case. The KeyCode resulting from the number 7 being pressed on the main QWERTY part of the keyboard is not the same as the KeyCode resulting from the number 7 being pressed on the num-pad.

A CharCode on the other hand does map to a specific character and that character can be obtained from the String.fromCharCode function. Do not pass a KeyCode to this function it may work for some KeyCode but on the whole you will get “wild results for many keys”. For example pressing the Down navigational key will result in a KeyCode of 40, passing that into fromCharCode will get you the “(“ character! (I’ve been there and it hurt when I kicked myself)

On the whole a KeyCode is what is used in the keyDown and keyUp events with CharCode being the one to use in keyPress. I say “on the whole” because as usual browsers do differ. JavaScript Madness: Keyboard Events is a great article for giving more detail, particularly around the differences between the browsers.

Key and Character Codes vs. Event Types is a great little page for discovering what charCode and/or KeyCode is sent as a result of a key being pressed on the keyboard.

Interestingly whilst we cannot say a KeyCode is a code for a specific character the codes do seem linked. For instance my UK keyboard gives me the KeyCode of 81 when I press the key with the letter “Q” on it however when I switch to a French keyboard that same physical key will give me a KeyCode of 65 (and the character ‘a’). Therefore we can say the KeyCode is not hard-wired to a physical key. If I press the key with the letter “A” on it, whilst in a French keyboard, I get the KeyCode of 81 (and the character ‘q’) which is what I got when I pressed the “Q” key in the UK keyboard. This tells me that the KeyCodes are linked in some way to characters but the link is not absolute and is not true for all keys.

If you are checking this out for yourself make sure you restart your browser after changing keyboard. I was testing in IE7 and the keyboard change was not picked up until after I reloaded the browser.

ASP.NET Ajax's DomEvent wrapper

Like most of the often used things in AJAX development, there is a cross browser wrapper for the standard JavaScript event object argument, DomEvent. The docs for DomEvent only ever talk about charCode. Do not do as I did and assume that the DomEvent is mapping KeyCodes and CharCodes to a single charCode member on DomEvent. The follow on form that assumption is that you should always use DomEvent.CharCode, wrong. There is a documentation error as of 4 July 2007, the docs are missing KeyCode it does exists and the current script v1.0.61025 populates it like so

if (e.type === 'keypress') {
    this.charCode = e.charCode || e.keyCode;
}

else if (e.keyCode && (e.keyCode === 46)) {
    this.keyCode = 127;
}
else {
    this.keyCode = e.keyCode;
}

Note the ‘e’ variable in this code is the original event arg that is being wrapped by DomEvent

Therefore we can safely say that when using DomEvent:

• The KeyPress event will give us a charCode member populated from either a CharCode or a KeyCode with CharCode taking precedence.
• The KeyDown and KeyUp events will always result in a keyCode member equal to a keyCode

Originally published on my old Charteris blog

This is part 3 of the training course originally described here with part 2 available here. From this part onwards the course tends to concentrate more on labs and classroom interaction than on plain slide content. This worked great in a classroom scenario but it may make it hard otherwise. I have edited some of the downloadable slides to make them easier to read in isolation.

Again if anyone wants to contact me for clarifications or to talk over part of the course just use a Comment or the Contact link at the top of the page. Good luck!

Part3

1. Controls
2. ContentControl
3. LAB6 - ContentControls - Creating a UI only a mother could love
4. Controls (remixed)
   1. Retemplating
   2. LAB7 - Retemplate a Standard Button

Download Part3.zip which includes a slide deck and the 2 labs. Code to get you started with the labs is included.

<Edit>

</Edit>