2005 2006 2007 2008 2009 2010 2011 2015 2016 2017 aspnet azure csharp debugging elasticsearch exceptions firefox javascriptajax linux llblgen mongodb powershell projects python security services silverlight training videos wcf wpf xag xhtmlcss

Converting JSON to XAML

For reasons beyond human comprehension, the world felt like making an huge deal about Microsoft "revealing" SilverLight even even though WPF/E has been known about for some time now and even though nothing technical has changed even in the slightest with the simple change of a name. Having said that... it will probably be an awesome technology and I'm sure I'll be marinating many of my future applications in it. Editing XAML in notepad is much more appealing to me than being forced to use the overpriced and overly complicated Flash.

As cool as that is, however, since most of the work I do involves pure Ajax/JavaScript clients with almost all .NET coding at the service level, I definitely find JSON (which IS a JavaScript object) easier to manage than XML (which CAN BE a JavaScript object). So, in one of my applications I have the service that provides graphical information to Silverlight in the form of JSON serialized XAML, which will then be converted into XAML.

Here is an example of something the service would provide:

var jsonElement1 = {
        'Ellipse': {
        'Canvas.Left': '130',
        'Canvas.Top': '130',
        Height: '200',
        Width: '200',
        Stroke: 'Red',
        StrokeThickness: '10',
        Fill: 'SlateBlue'
    }
};

No, it's not human readable like XML is, but it's what JavaScript loves to see and it's what my service creates. Also, no, this is done for for efficiently purposes. This doesn't lower the service "message" size in the slightest, but it does however help to keep a consistence programming model across all my service calls. Furthermore, given that the data was in a database and not in XAML on the server, there's no real overhead. If, however, the data was in XAML on the server it would be a sign of pure stupidity for me to convert that to JSON and then back to XAML.

The parsing for something like this is actually really simple: just iterate through the JSON objects and arrays and creating an XML tree from it. As a reminder or reference, with regard to XML in a web browser, Firefox uses document.implementation.createDocument for XML while IE uses the MSXML2.DOMDocument COM object. Furthermore, Firefox is more strict in its usage of XML than the more familiar COM model that IE uses.

Here is an example of what I mean:

var doc = null;
if(DOM.implementation && DOM.implementation.createDocument) {
    doc = DOM.implementation.createDocument('', '', null);
    Xaml.ScanJSONElements(doc, data, doc);


    var xmlSerializer = new XMLSerializer( );
    return xmlSerializer.serializeToString(doc);
}
else {
    doc = new ActiveXObject("MSXML2.DOMDocument");
    Xaml.ScanJSONElements(doc, data, doc);
    return doc.xml;
}

As you look through the Xaml.js file provided, you will also see that Firefox is very explicit about it's namespaces, while the COM model figured you will take care of them. There's nothing wrong with either approach, it's just something you will want to be aware of if you ever create XML in JavaScript.

Links

Object Range Selection and Emulating Word 2007's Formatting Box

Say you're working on a text driven web application and you want to get the selected text in order to see what was selected. With JavaScript that's easy enough, but what if you wanted to know what strongly-typed text was selected in order to recreate the selection later? This would come in tremendously handy if you want to have text annotation capabilities in your application. But, why stop there? If you are going to do that, why not add a nice pop-up window over your selection to give easy access to appropriate toolbox options? That's exactly what Word 2007 gives you and you can do the same in your JavaScript applications.

Implementing these two things involves the following tasks: assign each word (or letter if you want really fine grained control) a container span with an id and then watch for hovering over an object. When an object is hovered over, start a timer counter for the time of the hover. If hovering ends, reset the timer. When a specified amount of hover time has elapsed, see if they is a selection and if the object currently hovered over is in the selection. If so, show the toolbox. The first word and he last word selected are saved in the browser's Selection object as the 'anchorNode' and 'focusNode' objects of the selection, respectively.

Here's the meat:

// Get all spans and iterate through them making sure each REALLY exists and
// making sure each as an id.
var b = document.getElementsByTagName('span');
for(var a in b) {
    if(b[a] && b[a].id) {
    
        // Only use those with an id starting with 'wid'.
        if(b[a].id.substring(0, 3) == 'wid') {
        
            // Set the event that is called at each interval.
            b[a].timercall = function(evt){
            
                // It there is a saved object (see onmouseover event below), 
                // then continue...
                if(gHoverObject) {
                
                    // Increment counter.  When there are 4 timer intervals, 
                    // then get the object information and show the hover box.
                    hoverCounter++;
                    if(hoverCounter > 3) {
                    
                        // Get the text selection
                        var selection = window.getSelection( );
                        
                        // Does the selection contain the object the cursor is currently over?
                        // false means that the object the cursor is over must be fully selected.
                        // That is, half the word being selected won't cut it.
                        if(selection && selection.containsNode(gHoverObject, false)) {
                        
                            // Save the first object id selected and the last object id selected
                            toolboxObj.start = selection.anchorNode.parentNode.id;
                            toolboxObj.end = selection.focusNode.parentNode.id;
                            toolboxObj.style.display = 'block';
                            toolboxObj.style.left = parseInt(gHoverObject.x) + 'px';
                            toolboxObj.style.top = parseInt(gHoverObject.y) + 'px';
                        }
                    }
                }
            };

            b[a].onmouseover = function(evt) {
                // When the object is hovered over, save the object.
                gHoverObject = this;
                gHoverObject.x = evt.pageX;
                gHoverObject.y = evt.pageY;
                
                this.timer = setInterval(this.timercall, 150);
                hoverCounter = 0;
            };
            
            b[a].onmouseout = function(evt) {
                // Destroy the object so the algorithm doesn't run.
                gHoverObject = null;
                clearInterval(this.timer);
                hoverCounter = 0;
            };
        }
    }
}

The provided proof-of-concept demonstration also demonstrates how to setup regular text to be strongly typed. This is simply done by splitting the text by a space and putting each word into a span, then putting each span into a parent object and finally putting that parent object before the original text and deleting the original text. You can view all this happening and see the resulting structure using Firebug for Mozilla Firefox.

The proof-of-concept demonstration provided is for Mozilla Firefox only.  Internet Explorer does NOT have the abilities to do this.

Important Disclaimer: it's not my intention to teach anyone JavaScript. This information is not for someone to simply copy/paste into their own applications. A solid understanding of the DOM, JavaScript syntax and dynamics, and XHTML is required before any true application can be built. So, please do not ask me any "how do I..." questions. When I get those I merely explain the basics and tell the person to figure it out on their own. In other words, I won't do your homework for you.

Links

XmlHttp Service Interop - Part 2 (Utilizing WCF)

Today I'm publishing the second in an article series regarding XmlHttp Service Interop. In this article, entitled "Utilizing WCF", I explain how to build WCF services, how to trace their XML messages, and how to communicate with them and other SOAP services via raw XmlHttp.

Instead of posting the entire thing on my blog, from here on out I'm going to be posting articles in their own pages to make them easier to read and easier to access. This will also make it easier for me to update and edit as well. You may access this article as well as others in the series by the links below.

.NET Slides

Back in 2005 I taught a class where I gave an overview of various parts of the .NET universe (at the time, the WinFX universe). I covered everything from C# to data binding to ASP.NET to service-oriented architecture to web standards. My goal was to give a familiarization with each of the topics so that the students can then learn the topics on their own in a way that best fits them.

My first session, however, was a presentation experiment. Instead of using really nasty verbose slides, I had just a few words on a slide and on one slide I had simply the number 42. Don Box would have loved my presentation. The point of the experiment was to make sure that people were paying attention to the topic and not simply reading a useless slide. I really think that PowerPoint is a massive hindrance to education. You can access my experimental presentation, named .NET Overview, below.

My next to last session was on web standards and in this session I simply told a story and then gave a few examples showing how web standards development is the only web development that is acceptable. You can access this presentation, named Web Standards Presentation, below.

Below is also a link to a video where Don Box talks about giving great technical presentations. I would recommend this video to anyone who gives talks on really any topic. Don't just watch it, study it. It takes practice.

English Standard Version Bible Web Service via WCF

The WCF version of this died years ago. The new versions are at https://bitbucket.org/davidbetz/esv-bible-services-for-.net

Many of the applications that I create are Bible based applications and my designs are made easier thanks to the the English Standard Version of Scripture. Long before I used it for development, I fell in love with it and made it my primary Bible version, not only because it's an incredible Bible translation with incredible accuracy and amazing readability, but also because it's so widely accessible. Their website at http://www.gnpcb.org/esv/ is by far one of my favorite websites. I can read on my screen, adjusting the font-size on a whim or click on an audio link to listen to any chapter in a variety of formats. Furthermore, they have great Firefox support and great technical articles explaining the internals of the system.

Not only that, you can also access the ESV text through e-mail and through a SOAP interface. Being someone deeply involved with interop and someone who has commited myself to the study of Scripture I am overjoyed to have the ability to directly access the ESV Bible data source. That said, now adays I'm a WCF user and the ESV Bible Web Service interface has methods and properties which, when used in WCF, are very Java-ish. Not a problem... I went ahead and got the svcutil code and modified it a bit to make the proxy follow the .NET Framework Design Guidelines. I cleaned up the svcutil output, added XML comments, added an added enumeration class and then split into different files for easier modification. Feel free to take the classes and combine them back into one proxy file as you wish. Here is a sample application using the fixed proxy:

using (var client = new ESVBibleClient( )) {
    var options = new OutputOptions( );
    options.IncludeFootnotes = true;
    options.IncludeCopyright = true;
    options.OutputFormat = OutputFormat.PlainText;

    String text = client.DoPassageQuery("TEST", "1 John 2", options);

    Console.WriteLine(text);
    Console.ReadLine( );
}

Powered by
Python / Django / Elasticsearch / Azure / Nginx / CentOS 7

Mini-icons are part of the Silk Icons set of icons at famfamfam.com