Navigation through FancyTree using TAB Key

Finally back to Blog after a long time, so starting with a short one!

Recently I had to deal with a requirement to provide Tree like navigation menu, as I am very much familiar with DynaTree using FancyTree (DynaTree is apparently being retired) was a no brainer however the tree navigation had to be accessible i.e. users should be able to navigate through the tree using TAB and Arrow key and pressing ENTER on the tree node behaves like a click event.
FancyTree renders ULs and Lis and you can navigate through the tree using Arrow keys but using TAB was a problem also pressing the ENTER key on the Tree node had no effect, so here is a little extension to FancyTree which provides that functionality.

Extension basically Adds tabindex=0 to Tree node and captures ENTER key event to perform action on the node, I only needed to either expand/collapse the node or navigate to the Href.

Ah also first time using Git -:)

Accessible FancyTree Demo
Code @ Git Hub (Look into jquert.fancytree.Tabable.js)

Advertisements

WPF/E in Firefox

WPF/E in Firefox

“Re-post of the blog from the original blog on Conchango’s Server http://blogs.conchango.com/ketulpatel/default.aspx

For the past few weeks I have been working on a project primarily using WPF/E and ASP.NET AJAX. Now as WPF/E is supposed to be cross-browser and cross platform, we were hoping our WPF/E site (which works fine in IE 7) would work in Firefox without needing any tricks or changes to the code, well that was not entirely true but the good news is there were only a few things that required changes and here are things that I would be careful of if I want my WPF/E site cross browser:

1. x:Name Issue
If you try to access Name property of XAML elements for which no x:Name has been specified firefox will throw an exception indicating no name property exists for the object instead of returning empty string as in IE7. So if you have code block which is something like:

vay myCanvas = _wpfeControl.findName("myCanvas");
//Iterating through children of myCanvas
for(var i=0;i<myCanvas.children.count;i++)
{
    var child = myCanvas.children.getItem(i);
    alert(child.Name);
    //Above line will throw an exception in firefox if no x:Name has been specified for the XAML Element
}

One obvious thing that I was tempted to use was hasOwnProperty method of Javascript object, which did not work either

if(child.hasOwnProperty("Name"))
    alert(child.Name);

The solution that we came up with was to create a helper function to read the name property and return empty string if an exception is caught

function GetXamlElementName(xamlElm)
{
    var name = "";
    try
    {
        name = xamlElm.Name;
    }catch(e)
    {}
    return name;
}

You can also create a more generic function which can be used to read any property and not just the name

function GetXamlAttributeValue(xamlElm, propertyName)
{
    var attrValue = "";
    try
    {
        attrValue = xamlElm[propertyName];
    }catch(e)
    {}
    return attrValue;
}

I am no way arguing that this is the best approach but it worked well for our purpose.

2. setValue(….) Issue

Firefox is not going to like if in your javascript you are setting property values on XAML element using setValue, instead use the short hand syntax for example:

vay myCanvas = _wpfeControl.findName("myCanvas");
myCanvas.setValue(“Canvas.Top”)=50; //NO NO for firefox 
//instead use:
myCanvas[“Canvas.Top”]=50; 

Surprisingly, this is not true for getValue(…..) , getValue(“Canvas.Top”) works in firefox.

3. Programmatically assigning null values to XAML element properties.

If your Javascript code is assigning null values to a XAML element property, then firefox will growl at you.

For example if you are trying to assign a variable value to Text property of a TextBlock:

var searchText = myCanvas.findName(“searchText”)
var textBoxValue = GetTextBoxValue();
// GetTextBoxValue() is some function which returns a value that
//needs to be populated into the textblock, the return
//value of the function could be null.


searchText.Text = textBoxValue //NO NO for firefox if textBoxValue is null 

Instead check for the null value before assigning it to property
if(textBoxValue != null)
          searchText.Text = textBoxValue

4. Special character showing up before the £ sign

Special character in WPF/E

This only happens when using WPF/E’s createFromXaml() method

For example if you have XAML within a .xaml file

<TextBlock> £ </TextBlock>

it shows up correctly on Firefox but if you pass the same string to createFromXaml(..) method the TextBlock which is created shows a special character in front of £ sign. I tried all kinds of encoding/decoding, escaping etc but nothing seems to work which lead us to believe it could be a bug in WPF/E run time itself.

_wpfeControl.createFromXaml(“<TextBlock> £ </TextBlock>”)

Other than £ sign most of the special characters seem to work fine. So far I haven’t found a solution to it Sad

To summarize in one sentence; most of the issues were around Javascript’s interaction with WPF/E’s object model. I think that was pretty much it to make the site work in Firefox and yes it did work on MAC

If I forgot to mention this was in WPF/E February CTP release.