Sunshine Design

Removing the XML Declaration when using XSLT

Wed, 10 Jun 2009 00:46:00 GMT

Recently I came across a problem while validating my XHTML for a website I was making.

There was an XML declaration halfway through the body tag. I realised it was above some content that had been displayed using XSLT. The XML declaration at the top of the XSLT had been rendered in the HTML.

Curses!

The Fix

The solution is very simple. Simply add the omit-xml-declaration attribute to your xml:output.

That's it. No more litter in your HTML!

Embedding XSLT inside a DLL

Sat, 23 May 2009 14:34:00 GMT

It's useful having XSLT embedded inside a DLL. If you're building custom controls that rely on XML and XSLT for their output you might need to specify a default stylesheet. Having this embedded inside your DLL means that you don't need to copy stylesheets among your solutions and you can send your DLL to a friend or colleague without having to include any ancillary files. Nifty eh?

First things first

First you need to add a resource file. This is a file you can use to add resources such as images, icons and text files to your DLL. Right click on your solution in the solution explorer and choose Add then New Item. Select Resources File and name it anything you like. Rather imaginitively, I have called mine Resource.resx.

Adding an XSLT file

Open your Resource.resx file. You should see a blank white screen with a menu above it. To add your XSLT file click the Add Resource drop down and choose Add Existing File.

Then navigate to and open your XSLT file. You should see your file appear in your Resources.resx file. In addition a folder called Resources is generated for you and the XSLT has been copied into it. The file is now ready to use.

Using the XSLT

Now all that is left to do is to load the XSLT file. This is nice and easy to do as the following code demonstrates.

        XslTransform xslt = new XslTransform();

        using (Stream s = new MemoryStream(ASCIIEncoding.Default.GetBytes(Resource.XsltFile)))
        {
            using (XmlReader reader = new XmlTextReader(s))
            {
                xslt.Load(reader);
            }
        }

You can access your resource from the Resource.resx file using the notation Resource.XsltFile. Any resource you place in the Resource.resx will appear in your intellisense. That's it! Your XSLT file is now ready to be used.

Setting up JQuery AJAX in .NET

Thu, 21 May 2009 22:26:00 GMT

In this article I'm going to outline how you can use JQuery to provide a lightweight AJAX solution for .NET. JQuery's AJAX has several advantages over .NET's AJAX.

If you were including JQuery on your site anyway then the only overhead is from the AJAX .NET plugin and the required JSON file. This totals roughly 6kb so it is a lightweight solution - far smaller than .NET's AJAX. We can write using JQuery's fantastically easy to use syntax so that we can write slicker behaviours far easier that we ever could before. This ease of use is great news for usability.

The code in this article is very similar to the example code that comes with the AJAX .NET plugin, however, I found that code did not work when I tried to replicate it in my own solution. This provided the motivation for a simple step-by-step tutorial.

AJAX .NET Plugin

The first step is to download and set up the required plugin. You will also need to download JSON as this is the method the plugin used to encode its server requests. I will assume you already have the latest version of JQuery. I am using version 1.3.2 for this tutorial.

Download: AJAX .NET plugin

Download: JSON

Unzip the downloads and locate jquery.ajaxdotnet.3.min.js and json2.min.js. Add these to your solution. Both of these files should then be added to the head of your document as such:

Add an AJAX Enabled WCF Service

The next step is to add our web service. This will handle the server requests and it's where we will write our server side functions. Right click your solution in the Solution Explorer and choose Add > New Item. Then choose AJAX-enabled WCF Service as show below. You can name this anything you like, I have called mine 'Service.svc'.

If you now open up your Web.config file you will find that the following code has been generated for you:

<system.serviceModel>
    <behaviors>
        <endpointBehaviors>
            <behavior name="DotNetAjaxTest.ServiceAspNetAjaxBehavior">
                <enableWebScript />
            </behavior>
        </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
    <services>
        <service name="DotNetAjaxTest.Service">
            <endpoint address="" behaviorConfiguration="DotNetAjaxTest.ServiceAspNetAjaxBehavior"
                binding="webHttpBinding" contract="DotNetAjaxTest.Service" />
        </service>
    </services>
</system.serviceModel>

You don't need to do anything with this code but you might find it useful to know it's there. If you delete the service you should also delete the Web.config entries because Visual Studio won't do it for you.

Consuming the Service

We now have a working AJAX Enabled WCF Service set up so we can start writing code to use it. There are two sides to this. Firstly there is the server side code - this going in Service.svc. Then there is the JQuery where we will make requests to our web service - add a javascript file to the solution for this.

Server Side Code

Lets start off by writing a simple Hello World function to check that our service is working. Open Service.svc and add the following:

[WebGet]
[OperationContract]
public string HelloWorld()
 {
    return "Hello World!";
}

Note that because we are only retrieving information from the server we should add the WebGet attribute. The application will then allow us to use the standard HTTP Get protocol for accessing the function.

This is all we need to add on the server side. Now lets take a look at the code for accessing this function.

The JQuery

Open the javascript file you added earlier. Add the following code:

$(document).ready(function() {
    $.ajaxDotNet("Service.svc/HelloWorld", {
        verb: "GET",
        success: function(obj) {
            var hi = obj.d;
            $(".HelloWorld").text(hi);
        }
    });
});

This function tells the service we're going to use HTTP Get to access the service. It has a success function to handle the reply from the server. Open up Default.aspx and add an HTML paragraph as follows:

<p class="HelloWorld">Loading...</p>

We add the loading text to this paragraph because we will see the text before the AJAX executes. While our function is very simple and does not really require feedback for the user because it loads very quickly it's important to understand why it's there - to let the user know something is happening. If you run your solution you should see the words Hello World! pop up in place of your loading text.

Success!

This is a basic example of what is possible. At the very least it allows you to check that your WCF service is working correctly. In further articles I will go into passing data to the server, error handling and some examples of applications for JQuery and AJAX.

Welcome to Sunshine Design

Sat, 09 May 2009 05:45:00 GMT

Sunshine Design is a new blog founded by me, Jon Howson. I've been working in web development for eighteen months and consider myself lucky to have found a job that I love so much. This blog is intended as a place that I can post my ideas, tutorials and interesting tips and tricks. The focus will predominantly be on backend coding but I think it is important for any web developer to keep many other areas in mind - managing this challenge is what makes web development so interesting.

.NET

Anyone that has coded in the .NET framework will know that it is a behemoth. This makes it a lot of fun to work with - you're constantly learning! I will be sharing many of my favourite techniques over the coming months. Developing in .NET also allows you to make the shift into developing desktop applications with ease and this will be a subject I will also touch upon.

CSS

I love CSS. Turning a design into a website is one of my favourite jobs. I hand-code valid XHTML strict and CSS to the highest standard. I am something of a CSS purist - I like clean, semantic code with minimal use of hacks. There are some exciting advancements in CSS on the horizon with the advent of CSS3. I have used plenty of CSS3 on this website and it's something we're going to see more of as the latest browsers adopt more and more of the guidelines.

Javascript & JQuery

JQuery has revolutionised Javascript and is the talk of the web design and development community. Once you learn JQuery you won't go back! There are many tutorials and tips across the web and I hope to add mine to the mix. It's also important to understand the Javascript under the hood of JQuery.

AJAX

I recently ventured into the realm of AJAX and I haven't looked back. Learning how to utilise the power of AJAX will push your development into a new paradigm. Fortunately, with the power of JQuery, AJAX couldn't be easier to implement. Check out my contact form for an example. This form is coded with unobtrusive Javascript and works using traditional .NET postbacks if Javascript is disabled!

Flash & Actionscript

I have been coding in Actionscript across it's different versions. In its latest incarnation the language feels like a true programming language. Anyone who can code in .NET can make the jump into Actionscript. The interface for Flash is complex and requires time to understand the many different layers. However the effects that can be achieved are amazing and I have several ideas for some exciting tutorials.

SEO

SEO is getting more and more important for modern businesses. With more people consuming online services it's important that you're high in the search rankings if you want to drive traffic to your website. I have a large amount of experience with SEO and I believe it's important that web developers keep SEO in mind when creating a website. There's plenty you can do to aid the ranking of a website during the development phase.

Usability

Usability is something that is paramount to a developer. Putting a design into practice can reveal all sorts of usability pitfalls and it's important you learn to recognise these early on. This is something that can save you time and money. I'll offer some handy tips for spotting these flaws and what you can do to rectify them.

Accessibility

A much abused but incredibly important topic. Accessibility is a fine art as much as it is an academic science. This means that it can be very time consuming and will often fall by the wayside when the budget is tight. However, ignoring this demographic could be costing you valuable traffic so it's worth spending time making sure your website meets the requirements. It's also a legal requirement in the UK and therefore something we're all going to have to learn to implement.

Further development of Sunshine Design

In addition to writing articles on the above topics I will be constantly upgrading this website. At the moment it is still in its infancy - as you can see! This is because I coded the whole site from the ground up. There's plenty to come so watch this space!