Previously I’ve written about how to create data charts using Silverlight. The data was coming from an static array, which is not that useful after all. Now lets see how to use data from an XML file. Bellow you can see an example of the XML file we’ll use. It is as simple as it can be, having pairs of labels and their associated value.
In your Silverlight project, if you try to open directly the XML file using something like XDocument.Load(”Data.xml”) Silverlight will try to find the file inside the XAP file. We could place the XML file inside the XAP file in order to make it work, but when we needed to update the file we would have to change the XAP file (replacing an XML file in a ZIP file)… Instead, we will use an external XML file. We must download the file using a WebClient (the download term applies: remember that Silverlight code runs in the client side, so while accessing you website resources you are accessing remote resources).
The download is asynchronous, so we need to create an event handler to be executed when the XML file download is completed. The XML file is downloaded as a string, so we need to parse it into a XDocument object, in order to manipulate it. The example bellow shows a little bit of LINQ to XML. LINQ (Language Integrated Query) allows you to query several data sources, including XML, Databases, Object collections, etc (even Amazon…). A nice tutorial about LINQ to XML can be found at Scott Guthrie’s blog.
We iterate through the data points present in the XML file and create a list of pairs containing the labels and respective values. After building the dataPoints list, the remaining code is similar to the code I’ve shown you in the Part 1 of these tutorials.
The next and final step will be to use a WCF web service to retrieve the data from an database in order to create a real dynamic chart powered by Silverlight.
Download Source Code
Recently someone told me about a data visualization component library powered by Microsoft Silverlight.
What is Visifire?
Visifire is a set of open source data visualization components - powered by
Microsoft® Silverlight™. With Visifire you can create and embed visually stunning animated Silverlight Charts within minutes. Visifire is easy to use and independent of the server side technology. It can be used with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails or just simple HTML. Don’t take our word for it! Visit
Visifire Gallery or design your own chart using
Chart Designer.
I’ve tried out these components and I learned a lot from it. This is the first of some posts that I am writing about it. They will include topic about Silverlight 2.0, LINQ to XML/SQL, WCF.
Bellow you can see the final result that is intended. I want to display a chart with the number of employees of
AdventureWorks database per city in the United States of America.
But this first post will not yet use a database as a source of data. First I’ll take care of the user interface. Well, I will not do designer work, I’ll just setup a sample chart. First of all you have to download the Visifire Charts Package and unpack it wherever you like. Then, create a new Silverlight 2.0 project in Visual Studio 2008. You will need the Silverlight Tools Beta 2 for Visual Studio 2008. If you’re new to Silverlight 2.0 check out this nice Hello World tutorial from Scott Guthrie.
After creating your new project add the references to the dll files that you have previously downloaded from Visifire.
Now it’s coding time! The source code bellow can be put in the Page.xaml.cs file inside the class constructor.
It creates a chart, creates a DataSeries, and adds DataPoints to it. After the setup is done the chart is appended to the Silverlight canvas. A DataPoint has 2 important properties: the YValue (the number of employees) and the AxisLabel (name of the city).
What are DataSeries? They are groups of DataPoints. In a simple columns chart having one is enough, because each DataPoint will represente a column. But if you want, for instance, to compare the number of employees per city in the last 3 years you will have 3 DataSeries, one for each year. This way, for each city in the Axis you will have 3 columns. The example bellow is illustrative. It has 2 DataSeries, one for 2007 and another one for 2006.
Next time I’ll show how to populate the chart using an XML file as a data source. Meanwhile you can see the different kinds of charts you can generate in the Visifire Chart Gallery and mess around with the source code of this first part.
Today I was testing a website using a HTML W3C validation tool (XHTML 1.0 Transitional) and I found a problem in my links. Some URLs had the & symbol, since they linked to dynamic webpages which need parameters. The trivial solution is to replace the “&” occurrences on all links by the equivalent “&” expression. But while changing some dynamically generated URLs I found out an interesting fact about ASP.NET controls vs HTML controls that I was not aware of.
In the example bellow you can see 2 pairs of Links and Images. The first set are ASP.NET controls, the second one are HTML controls (markup) with runat attribute set to server in order to allow their manipulation by ASP.NET code.
When you look at the source code in the client side bellow you can spot a slight difference that can make your HTML validation fail. href and src attributes that originally contained the “&” and which are the result of ASP.NET controls rendering have “&” instead, but the HTML controls still have the invalid &-based URL’s.
Since I had both type of elements mixed in the website, and I was threating them in the same way I was getting different behaviors. Now I know why…
In the System namespace there is a class called Environment which gives you access to a lot of information about the environment where your application is running. A nice one that I use is stored in the NewLine property. It gives you the characters sequence that represent a new line (\n and \r together typically, and since I never remember the order, this property is useful :-P)
In the image above you can the complete list of properties and methods available. More information can be found at the MSDN .NET Framework Developer Center.
You can find several ways of putting some sample text in a HTML input text which fades away when you click it. Some of them use a few lines of javascript, others take advantage of Javascript frameworks, and there are even ways to achieve it using just CSS (but it doesn’t work in IE anyway). But I haven’t found any guidance on doing it to password inputs. So I did it my way.
The problem
The image bellow shows the desired behavior. When you open the webpage you can see an input with a grayed out message on it, telling the user that it is a password field. When you click the input, you can type your password (without being displayed on the page). If you click outside the input, and it is empty, the “Password” message appears again.
The solution I present is based in Javascript, and you can achieve it without using any server-side technology. But since I had to do this using ASP.NET, I’ll show you an example using this technology.
ASP.NET markup
First of all let’s take a look at the markup. I’ve create 2 textboxes, one using the Password text mode, where you can type text without displaying it on the browser, and another one which is a simple textbox with our “Password” message. I’ve grayed out this message and left the input as readonly, since we don’t need its value.
Disclaimer
As you may know I am a fan of C#, and I don’t like VB.NET that much… But since while writing this demo I accidentally created an VB.NET project, instead of creating another one I took advantage of the opportunity to test my VB.NET skills. 
Now I love C# even more…
Javascript Injection
Now lets the the Javascript part of the solution. I use ASP.NET to inject the Javascript into the page in the server-side. I use the Attributes property of the textboxes to set styles and client-site event handlers. In order to hide the real password input when the page is rendered, I set the style attribute of the input element with the value “display:none”. When the fake password input gets focus, the browser hides it, shows the real password input and changes the focus to it. The user doesn’t even notice the input switch, at least if you make sure that the two inputs have the same style. When the password input loses focus (onblur event), if it is empty, the fake input is shown again .
About ClientID
If you are not that familiar with ASP.NET, or at least with client-side scripting used with ASP.NET, you may be wondering that is ClientID. Well, in this example it has the server-side name of the textbox, but when you use User Controls or Master Pages, not always the server-side name of a control is the same that the name/id in the client-side. So the ClientID property gives you the name/id that will be valid while trying to access the control on the client.
What if there is no Javascript support…
Ok, it works fine. And it is pretty clean. But what if by some reason the Javascript is disabled in the client browser? Well… The user won’t have access to the real password input, and will get stuck with the fake input which has the “Password” text and is read only. Even if he could write on it, in the server side the password wasn’t expected from that input anyway. So we need a solution that works even when Javascript is disabled. The user will not have the fancy sample text inside the input, but he will be able to type and send the password to the server. How?
First of all the default visibility status of the inputs will have to change. When the page is rendered the real password input must be visible and the fake one invisible. This way if Javascript is disabled, the user will get a standard password input. After the page is loaded, if Javascript is enabled, we switch the inputs. This switch occurs before the user sees the page, so the final result is the same (while using a Javascript-enabled browser).
The code that the “…” hides is the code of the first VB.NET block.
RegisterStartupScript
This is the method used in order to register script that is supposed to be used in the client side. Page.ClientScript has other nice methods, that allow your to attach onSubmit client-side event handlers and do other client-side Javascript related tasks. Two nice links about RegisterStartupScript are this an this.
You can download the complete source-code of this post.
