SpotGnome.com

Validating XML Against XML Schema (XSD)

2008-12-29T04:30:46.224-07:00

XML documents can reference optional documents that specify how the XML documents should be structured. These optional documents called Documents Type Definitions (DTDs) and Schemas.

There are two kinds of definition for schemas currently:

1. Microsoft XML Schema

It uses the extension .xdr (XML-Data Reduced) you can check the attached files for the this Schema syntax, it is an xml document, but has special elements and attributes.

2. W3C XML Schema

It uses the extension .xsd (XML Schema Definitions) also it is an XML Document with special elements.

The second approach, XSD Schema, has been supported by Microsoft .NET Framework and is the best approach for .NET developers. Schema files are a special kind of XML file that define the structure of an XML file via some pre-defined elements and attributes.

Using this Schema file you can validate your XML file to make sure it fits to your application's needs and validate the inputs in order to prevent any exception in your code.

The .Net framework gives you all the tools you need so that you can build XSD schemas and also validate them.

First, let's see how can we create a schema using XSD.exe file (It comes with Visual Studio):

The XML Schema Definition tool generates XML schema or common language runtime classes from XDR, XML, and XSD files, or from classes in a runtime assembly.

The following command generates an XML schema from myFile.xml and saves it to the specified directory
xsd myFile.xml /outputdir:myOutputDir
Consider that we have the following xml data file EmployeeList.xml:
<EmployeeList>


<Company ID="1">


<Employee>Employee11Employee>


<Employee>Employee12Employee>


<Employee>Employee13Employee>


Company>


<Company ID="2">


<Employee>Employee21Employee>


<Employee>Employee22Employee>


<Employee>Employee23Employee>


Company>


<Company ID="3">


<Employee>Employee31Employee>


<Employee>Employee32Employee>


<Employee>Employee33Employee>


<Employee>Employee34Employee>


Company>


EmployeeList>
Now, execute XSD.exe on the xml data file:
> XSD EmployeeList.xml

The result xsd file EmployeeList.xsd will be :
xml version="1.0" encoding="utf-8"?>
<xs:schema id="EmployeeList" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xs:element name="EmployeeList" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
<xs:complexType>
<xs:choice minOccurs="0" maxOccurs="unbounded">
<xs:element name="Company">
<xs:complexType>
<xs:sequence>
<xs:element name="Employee" nillable="true" minOccurs="0" maxOccurs="unbounded">
<xs:complexType>
<xs:simpleContent msdata:ColumnName="Employee_Text" msdata:Ordinal="0">
<xs:extension base="xs:string">
xs:extension>
xs:simpleContent>
xs:complexType>
xs:element>
xs:sequence>
<xs:attribute name="ID" type="xs:string" />
xs:complexType>
xs:element>
xs:choice>
xs:complexType>
xs:element>
xs:schema>

Second, now that we have our Schema let's see the steps that we need to do in order to validate against our schema (.NET 2.0):

1. Read the XML file content as Stream, TextReader or XmlReader.

2. Read the Schema file content as Stream, TextReader or XmlReader.

3. Create a new instance of XmlSchema object.

4. Set XmlSchema object by calling XmlSchema.Read() method and passing the content of Schema file
and ValidationEventHandler method address to it.

5. Create a new instance of XmlReaderSettings object.

6. Set ValidationType for XmlReaderSettings object to Schema.

7. Add your XmlSchema object to XmlReaderSettings Schemas collection by calling its Schemas.Add() method.

8. Add your ValidationEventHandler method address to XmlValidationReader's ValidationEventHandler handler.

9. Create a new instance of XmlReader object and pass your XML file content (as Stream or a Reader object)
and XmlReaderSettings object to it.

10. Call Read() method of the Reader or Stream object to contain your XML file content in a loop to parse
and validate it completely.

11. Add your logic to ValidationEventHandler method you created to implement what you want to be done in
the validation process.

Here is the code to accomplish this:
private void ValidatingProcess(string XSDPath, string XMLPath)

{

try


{

//
1- Read XML file content


this.Reader = new XmlTextReader(XMLPath);



//
2- Read Schema file content


StreamReader SR = new StreamReader(XSDPath); 




//
3- Create a new instance of XmlSchema object


XmlSchema Schema = new XmlSchema();

//
4- Set Schema object by calling XmlSchema.Read() method


Schema = XmlSchema.Read(SR, 


new ValidationEventHandler(ReaderSettings_ValidationEventHandler)); 




//
5- Create a new instance of XmlReaderSettings object


XmlReaderSettings ReaderSettings = new XmlReaderSettings(); 


//
6- Set ValidationType for XmlReaderSettings object


ReaderSettings.ValidationType = ValidationType.Schema; 


//
7- Add Schema to XmlReaderSettings Schemas collection


ReaderSettings.Schemas.Add(Schema); 




//
8- Add your ValidationEventHandler address to


//
XmlReaderSettings ValidationEventHandler


ReaderSettings.ValidationEventHandler += 


new ValidationEventHandler(ReaderSettings_ValidationEventHandler);



//
9- Create a new instance of XmlReader object


XmlReader objXmlReader = XmlReader.Create(Reader,
ReaderSettings);





//
10- Read XML content in a loop


while (objXmlReader.Read())

{ /*Empty
loop*/} 




}//try


//
Handle exceptions if you want


catch (UnauthorizedAccessException
AccessEx)

{

throw AccessEx;

}//catch


catch (Exception
Ex)

{

throw Ex;

}//catch


}



private void ReaderSettings_ValidationEventHandler(object sender, 


ValidationEventArgs args)

{

//
11- Implement your logic for each validation iteration


string strTemp;

strTemp = "Line:
" + this.Reader.LineNumber + "
- Position: " 


+ this.Reader.LinePosition + "
- " + args.Message; 




this.Results.Add(strTemp);

}

Returning XML From Web Service

2008-12-24T03:01:38.536-07:00

Don't use your web methods to return strings as most programmers do, use them to return true XMLs.

instead of using this:

[WebMethod]
public string MyLameWebMethod()
{
XmlDocument dom = new XmlDocument();
// load XML Data ...
return dom.OuterXml;
}

Now when we want to read it on the client side we want the XML and then the operation is:
XML -> String -> XML

Use this:

[WebMethod]
public XmlDocument MyBetterWebMethod()
{
XmlDocument dom = new XmlDocument();
// load some XML ...
return dom;
}

Here we are skipping over the String step and using much more valid XML document.

Now you are avoiding an added level of transferring your XML document to string and then back to XML.

Google Charts API Update

2008-03-18T00:08:39.042-07:00

Google updated their charts API, which they first released back in December 2007. First of all, the old limit of 50,000 queries per user per day has been removed (though Google asks you email them if you receive more than 250,000 queries a day so they can better scale this).

Also, there are several extended or new features. Among them are radar charts, sparklines, and maps. The last one is perhaps the most interesting, as it lets you display and color a map. While you can already use the Google Maps API for certain needs, this is a much more minimalist map that might come in handy for illustrations, games, traffic visualization and other things. As usual, generating maps or any other chart type consists of simply formulating a special URL.

Quick Ajax Loading Icons

2008-03-17T01:33:41.032-07:00

If you've done any Ajax development then you know that much of the loading of data is done in the background. This is great from a developers stand point, but from a users stand point it can be confusing as to what is happening while the data is being loaded. The solution to this is to show a loading indicator.

A loading indicator is a great idea and a nice animated image that could be hidden would be nice. However, if you are like most developers making a nice animated image may not be your strongest point. Well, today while seeing what was getting bookmarked on del.icio.us, using the del.icio.us Spy, I found an interesting and simple service that makes it very easy to get a nice looking loading indicator.

The service is call Ajaxload and is very easy to use. You simply choose the loading icon that you like and the background/foreground colors (you can even have the background transparent). Then you just save it to your computer using the "Download It" button and then you have your own customized loading indicator.

You can go to the service by clicking here.

If you have used this or a similar service I would love to hear about your experience with it (you can leave a comment, or if you would like you can write a blog post about it on this blog, using your free Ajaxonomy account). So, remember that your users would love to see a loading indicator when it is appropriate.

Delegates in C#

2008-03-10T01:28:46.114-07:00

This article discusses the delegate type and how it can be used to point to methods in the application which can be invoked at later time. This article demonstrates also the delegate ability to multicast and delegate covariance.

A delegate is a type-safe object that can point to another method (or possibly multiple methods) in the application, which can be invoked at later time.

Delegates also can invoke methods Asynchronously.

A delegate type maintains three important pices of information :

The name of the method on which it make calls.
Any argument (if any) of this method.
The return value (if any) of this method.

Defining a Delegate in C#

when you want to create a delegate in C# you make use of delegate keyword.

The name of your delegate can be whatever you desire. However, you must define the delegate to match the signature of the method it will point to. fo example the following delegate can point to any method taking two integers and returning an integer.

public delegate int DelegateName(int x, int y);

A Delegate Usage Example

namespace MyFirstDelegate

{

//This delegate can point to any method,

//taking two integers and returning an

//integer.

public delegate int MyDelegate(int x, int y);

//This class contains methods that MyDelegate will point to.

public class MyClass

{

public static int Add(int x, int y)

{

return x + y;

}

public static int Multiply(int x, int y)

{

return x * y;

}

class Program

{

static void Main(string[] args)

{

//Create an Instance of MyDelegate

//that points to MyClass.Add().

MyDelegate del1 = new MyDelegate(MyClass.Add);

//Invoke Add() method using the delegate.

int addResult = del1(5, 5);

Console.WriteLine("5 + 5 = {0}\n", addResult);

//Create an Instance of MyDelegate

//that points to MyClass.Multiply().

MyDelegate del2 = new MyDelegate(MyClass.Multiply);

//Invoke Multiply() method using the delegate.

int multiplyResult = del2(5, 5);

Console.WriteLine("5 X 5 = {0}", multiplyResult);

Console.ReadLine();

}

}
}

Delegate ability to Multicast

Delegate ability to multicast mean that a delegate object can maintain a list of methods to call, rather than a single method
if you want to add a method to the invocation list of a delegate object , you simply make use of the overloaded += operator, and if you want to remove a method from the invocation list you make use of the overloaded operator -= .

Note:Multicast delegate must contain only methods that return void, or you will get a run time exception.

A Multicast Delegate Example

>

namespace MyMulticastDelegate

{

//this delegate will be used to call more than one

//method at once

public delegate void MulticastDelegate(int x, int y);

//This class contains methods that MyDelegate will point to.

public class MyClass

{

public static void Add(int x, int y)

{

Console.WriteLine("You are in Add() Method");

Console.WriteLine("{0} + {1} = {2}\n", x, y, x + y);

}

public static void Multiply(int x, int y)

{

Console.WriteLine("You are in Multiply() Method");

Console.WriteLine("{0} X {1} = {2}", x, y, x * y);

}

class Program

{

static void Main(string[] args)

{

//Create an Instance of MulticastDelegate

//that points to MyClass.Add().

MulticastDelegate del = new MulticastDelegate(MyClass.Add);

//using the same instance of MulticastDelegate

//to call MyClass.Multibly() by adding it to it's

//invocation list.

del += new MulticastDelegate(MyClass.Multiply);

//Invoke Add() and Multiply() methods using the delegate.

//Note that these methods must have a void return vlue

Console.WriteLine("****calling Add() and Multibly() Methods.****\n\n");

del(5, 5);

//removing the Add() method from the invocation list

del -= new MulticastDelegate(MyClass.Add);

Console.WriteLine("\n\n****Add() Method removed.****\n\n");

//this will invoke the Multibly() method only.

del(5, 5);

}

}

Delegate Covariance

Assume you are designing a delegate that can point to methods returning a custom class type:

//Define a delegate pointing to methods returning Employee types.

public delegate Employee EmployeeDelegate();

if you were to derive a new class from Employee Type named SalesEmployee and wish to create a delegate type that can point to methods returning this class type you would be required to define an entirely new delegate to do so

//a new delegate pointing to methods returning SalesEmployee types.

public delegate SalesEmployee SalesEmployeeDelegate();

Example

namespace MyEmployeesDelegate

{

//Define a delegate pointing to methods returning Employee types.

public delegate Employee EmployeeDelegate();

//a new delegate pointing to methods returning SalesEmployee types.

public delegate SalesEmployee SalesEmployeeDelegate();

class Program

{

public static Employee GetEmployee()

{

return new Employee();

}

public static SalesEmployee GetSalesEmployee()

{

return new SalesEmployee();

}

static void Main(string[] args)

{

EmployeeDelegate empDel = new EmployeeDelegate(GetEmployee);

Employee emp = empDel();

SalesEmployeeDelegate salesEmpDel = new SalesEmployeeDelegate(GetSalesEmployee);

SalesEmployee emp2 = salesEmpDel();

}

public class Employee

{

protected string firstName;

protected string lastName;

protected int Age;

public Employee()

{ }

public Employee(string fName, string lName, int age)

{

this.firstName = fName;

this.lastName = lName;

this.Age = age;

}

public class SalesEmployee : Employee

{

protected int salesNumber;

public SalesEmployee()

{ }

public SalesEmployee(string fName, string lName, int age, int sNumber): base(fName, lName, age)

{

this.salesNumber = sNumber;

}

}

It would be ideal to build a single delegate type that can point to methods returning either Employee or SelesEmployee types.
Covariance allows you to build a single delegate that can point to methods returning class types related by classical inheritance.

Delegate Covariance Example

namespace DelegateCovariance

{

//Define a single delegate that may return an Employee

// or SalesEmployee

public delegate Employee EmployeeDelegate();

class Program

{

public static Employee GetEmployee()

{

return new Employee();

}

public static SalesEmployee GetSalesEmployee()

{

return new SalesEmployee();

}

static void Main(string[] args)

{

EmployeeDelegate emp = new EmployeeDelegate(GetEmployee);

Employee emp1 = emp();

EmployeeDelegate empB = new EmployeeDelegate(GetSalesEmployee);

//to obtain a derived type you must perform an explicit cast.

SalesEmployee emp2 = (SalesEmployee)empB();

}

public class Employee

{

protected string firstName;

protected string lastName;

protected int Age;

public Employee()

{ }

public Employee(string fName, string lName, int age)

{

this.firstName = fName;

this.lastName = lName;

this.Age = age;

}

public class SalesEmployee : Employee

{

protected int salesNumber;

public SalesEmployee()

{ }

public SalesEmployee(string fName, string lName, int age, int sNumber): base(fName, lName, age)

{

this.salesNumber = sNumber;

}

}

I hope you are now have a good idea with the creation and usage of delegates types.>

Progressive CSS Enhancement

2008-03-09T02:24:37.367-07:00

A common - and desirable - technique for constructing JavaScript-based web applications is that of progressive enhancement: only providing capable browsers with the features that they are capable of utilizing - but providing incapable browsers with an adequate, albeit degraded, experience otherwise.

This provides the best of both worlds: Users of modern browsers (the majority audience) can get the best experience while those that are using incapable browsers (such as most mobile devices) will still get an interface that suits them well.

There's one thing, overriding in all of this, however: Progressive enhancement is nearly only ever applied to the JavaScript functionality of web applications. Presumably it's assumed that if a browser is capable of supporting the desired JavaScript features of an application then it must, also, be capable of supporting the specific CSS styling as well.

One technique that has greatly interested me, as of late, is one employed by the Filament Group (a local design shop here in Boston): Progressive CSS Enhancement. The premise is that progressive enhancement is done with page styling in mind, primarily, rather than from a purely-JavaScript perspective.

This is particularly important for a couple reasons:

It should be easy to degrade page styling in a manner that isn't reliant upon CSS browser hacks - this technique makes it so.
Not all pages utilize heavy JavaScript (and, thus, progressive JavaScript enhancement does not apply to them).

Their technique works as follows: You choose to provide the user with, either, the enhanced or the decreased experience by default. In either case a basic script is run which attempts to verify a couple CSS styling behaviors along with some basic JavaScript functionality (just enough to be able to run the test).

A couple of the CSS techniques that they test for:

Box model: make sure the width and padding of a div add up properly using offsetWidth.
Positioning: position a div and check its positioning using offsetTop and offsetLeft.
Float: float 2 divs next to each other and evaluate their offsetTop values for equality.
Clear: test to make sure a list item will clear beneath a preceding floated list item.
Overflow: wrap a tall div with a shorter div with overflow set to 'auto', and test its offsetHeight.

With those in place you can pretty safely begin designing a useful CSS-based layout. Note that the experience will only ever be upgraded if all of the tests pass - if any fail then it simply won't continue. Obviously there'll still exist some browser discrepancies (like in the differences in the box model between Internet Explorer 6 and most other browsers) but that's usually an acceptable level of hackage (meaning that you won't have to deviate much from what you're already doing).

The actual implementation is quite simple. It consists of a number of JavaScript-based rules that test for behavior. For example the following rule tests for a working box model:

var newDiv = document.createElement('div');
document.body.appendChild(newDiv);
newDiv.style.visibility = 'hidden';
newDiv.style.width = '20px';
newDiv.style.padding = '10px';
var divWidth = newDiv.offsetWidth;
if(divWidth != 40){document.body.removeChild(newDiv); returnfalse;}

That check, alone, is able to knock off a number of older browser whom aren't able to successfully implement that CSS behavior. Currently all the rules are in a large code block, which makes maintenance unwieldily. I think that this library could definitely benefit from extensibility (being able to add/remove rules that you wish to honor).

When it comes time to actually use this technique within your application there are a number of strategies that you can use. However, for the sake of discussion here, let's assume that you're sending, by default, the degraded experience to the client (optionally upgrading if the browser is capable). Then you would be able to use these two techniques:

A class of "enhanced" is assigned to the body element to be used for optional CSS scoping (such as: body.enhanced {background: red;}).
Any links to alternate stylesheets that have a class of "enhanced" will be enabled.

In this manner you can specify all of your stylesheets in your header with some disabled (being alternate stylesheets) or with some CSS rules being only applied with the body.enhanced match.

Their implementation also allows you to only execute JavaScript if all the rules pass - however I'm not sure if that's an acceptable solution, in this situation. If you want to verify that your desired JavaScript functionality is able to operate then you should check for just that. However, in this case, we can get the other side of the equation: Verifying that CSS works as you would expect it to, knowing that an adequate experience can be provided.

If you're curious as to which devices are supported by the default rules in the test file you can view the result matrix on the tool's site.

I definitely think that this technique has a lot of merit, especially in the realm of mobile-accessible web sites. Since it's virtually impossible to design, and test, your pages to work on such a large number of obscure platforms this degraded strategy is really one that will help to benefit both you, and your users, in the long run.

Export Complete Database To Excel

2008-03-07T02:42:11.525-07:00

This article explains how you can extract all Tables, including Data, to an Excel file. Every Table will have it's own worksheet. The code does need an excel application installed on the server, while it's using Office Interop.

To get this code to work, you need to add a reference to Excel.dll by using Add Reference on the project and selecting Microsoft Excel 9.0 (or 10.0) Object Library from the COM tab on the Add Reference dialog.

And then import the following namespace:

Imports System.Runtime.InteropServices.Marshal

Now add the following class to your project:

Private Sub create(ByVal sDatabaseName As String)
Dim dsTables As DataSet = New DataSet

'Get all Tables from database
dsTables = getAllTables(sDatabaseName)
'Create Excel Application, Workbook, and WorkSheets
Dim xlExcel As New Excel.Application
Dim xlBooks As Excel.Workbooks
Dim xlBook As Excel.Workbook
Dim tblSheet As Excel.Worksheet
Dim xlCells As Excel.Range
Dim sFile As String

'File name for the excel file
sFile = Server.MapPath("~\Sheets\" & sDatabaseName & "_data.xls")

xlExcel.Visible = False : xlExcel.DisplayAlerts = False
xlBooks = xlExcel.Workbooks
xlBook = xlBooks.Add

For i As Integer = 0 To dsTables.Tables.Count - 1
    tblSheet = xlBook.Worksheets.Add
    tblSheet.Name = dsTables.Tables(i).TableName
    xlCells = tblSheet.Cells
    'Fill all cells with data
    GenerateExcelFile(dsTables.Tables(i), xlCells)
Next

'Remove initial excel sheets. Within a try catch because the database
'could be empty (a workbook without worksheets is not allowed)
Try
    Dim SheetCount As Integer = xlExcel.Sheets.Count
    CType(xlExcel.Sheets(SheetCount - 0), Excel.Worksheet).Delete()
    CType(xlExcel.Sheets(SheetCount - 1), Excel.Worksheet).Delete()
    CType(xlExcel.Sheets(SheetCount - 2), Excel.Worksheet).Delete()
Catch ex As Exception

End Try

'Save the excel file
xlBook.SaveAs(sFile)

'Make sure all objects are disposed
xlBook.Close()
xlExcel.Quit()
ReleaseComObject(xlCells)
ReleaseComObject(tblSheet)
ReleaseComObject(xlBook)
ReleaseComObject(xlBooks)
ReleaseComObject(xlExcel)
xlExcel = Nothing
xlBooks = Nothing
xlBook = Nothing
tblSheet = Nothing
xlCells = Nothing
'Let the Garbage Collector know it can get to work
GC.Collect()

'Export Excel for download
Try
HttpContext.Current.Response.ContentType = "application/octet-stream"
HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=" + System.IO.Path.GetFileName(sFile))
HttpContext.Current.Response.Clear()
HttpContext.Current.Response.WriteFile(sFile)
HttpContext.Current.Response.End()
Catch ex As Exception
'An exception will be thrown, but can just be ignored
End Try

End Sub

To generate the individual sheets, the following Sub is used:

Private Sub GenerateExcelFile(ByRef table As DataTable, ByVal xlCells As Excel.Range)
Dim dr As DataRow, ary() As Object
Dim iRow As Integer, iCol As Integer

'Output Column Headers
For iCol = 0 To table.Columns.Count - 1
xlCells(1, iCol + 1) = table.Columns(iCol).ToString
xlCells(1).EntireRow.Font.Bold = True
Next

'Output Data
For iRow = 0 To table.Rows.Count - 1
    dr = table.Rows.Item(iRow)
    ary = dr.ItemArray
    For iCol = 0 To UBound(ary)
        xlCells(iRow + 2, iCol + 1) = ary(iCol).ToString
        Response.Write(ary(iCol).ToString & vbTab)
    Next
Next
xlCells.Columns.AutoFit()
End Sub

And now the trick to getting all tables and data from a database:

Public database as String

Public ReadOnly Property getAllTables(ByVal sDB As String) As DataSet
    Get
        database = sDB
        Dim m_dshelp As DataSet = New DataSet
        getRequestedAllTables(m_dshelp)
        Return m_dshelp
    End Get
End Property

Private Function getRequestedAllTables(ByRef p_dataset As DataSet) As Boolean

'Retrieve all tablenames from the database:
Dim sSQL As String
Dim dsTables As DataSet = New DataSet
sSQL = "SELECT [TableName] = so.name, [RowCount] = MAX(si.rows) " & _
"FROM sysobjects so, sysindexes si " & _
"WHERE so.xtype = 'U' AND si.id = OBJECT_ID(so.name) AND si.rows > 0 " & _
"GROUP BY so.name " & _
"ORDER BY 2 DESC"

getData(sSQL, "Tables", dsTables)

'Loop thrue all tables and do a SELECT *. Then add them to the dataset
For i As Integer = 0 To dsTables.Tables(0).Rows.Count - 1
sSQL = "SELECT * FROM " & dsTables.Tables(0).Rows(i).Item(0)
getData(sSQL, dsTables.Tables(0).Rows(i).Item(0), p_dataset)
Next
End Function

Private Function getData(ByVal p_sql As String, ByVal p_table As String, ByRef pdataset As DataSet) As Boolean

Dim objDataAdapter As SqlDataAdapter
Dim objcommand As SqlCommand
objcommand = New SqlCommand(p_sql, getConnection)
objDataAdapter = New SqlDataAdapter(objcommand)
objDataAdapter.Fill(pdataset, p_table)
End Function

Private Function getConnection() As SqlConnection
If (ConfigurationManager.AppSettings("SQLPW") <> "") Then
    getConnection = New SqlConnection("Server=" & _
    ConfigurationManager.AppSettings("SQLserver") & ";password=" & _
    ConfigurationManager.AppSettings("SQLPW") & "; user=" & _
    ConfigurationManager.AppSettings("SQLUser") & ";database=" & database)
Else
    getConnection = New SqlConnection("Data Source=" & _
   ConfigurationManager.AppSettings("SQLserver") & ";Initial Catalog=" & _
   database & ";Integrated Security=True")
End If
End Function

Creating and Styling Resizable Buttons

2008-03-05T01:14:42.371-07:00

When structuring your markup there are many paths you can choose to reach the same goal. Most of the times it's a matter of preferences which element you wish to apply on a specific spot. I have my own personal preferences. One of them is preferring BUTTON over INPUT type="submit" elements. Why? Well W3C says it "Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities".

It's the rendering that I am after. You can easily apply image replacement techniques to buttons and make your form look good. Most interesting feature is that BUTTON element may have content. I will use that possibility in this tutorial.

So, the goal is to create and style button that can handle variable length so there is no need for later interventions. We'll treat button element as a container and add some markup.

Take a look at the demo | Download zip file

HTML

Here it is:

This is a valid code, and it gives us a lot to work with.

Please note, I am using two child elements instead of only one because I couldn't get rid of some paddings that button preserved. If anyone succeeds in styling with one child element only, please let me know :)

Concept

This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:

This one is 550px wide. I believe that is more than sufficient for buttons :)
So, we apply this image as a background image of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.

Height of the button is fixed in my example but you can use similar technique and some more markup and place the same background image to all 4 corners.
To make sure that the text is vertically centered I use line-height property.

CSS

button{
	border:none;
	background:none;
	padding:0;
	margin:0;
	width:auto;
	overflow:visible;					
	text-align:center;	
	white-space:nowrap;	
	height:40px;
	line-height:38px;			
	}

Resetting button's default styling.

button span, button em{
	display:block;
	height:40px;
	line-height:38px;			
	margin:0;
	color:#954b05;
	}

Setting child elements. Note that value of height property is different than line-height. That's because I have 2px shadow at the bottom. Line-height vertically centers the text within the button graphic, shadow is excluded.

button span{
	padding-left:20px;
	background:url(bg_button.gif) no-repeat 0 0;
	}	
button em{
	font-style:normal;
	padding-right:20px;
	background:url(bg_button.gif) no-repeat 100% 0;
	}

Setting backgrounds and paddings for both child elements.

As I mentioned earlier, it would be more elegant if I could use BUTTON and SPAN only, but I couldn' t get rid of BUTTON paddings.