Posted on 3:52pm 9/29/2008 by Bruno Silva in
My Life,
Web

Today I was amazed to realize that my University systems allow you to use the new Portuguese Citizen Card!
I’m pretty sure that almost no one will use this feature, but it is a nice initiative to embrace this new authentication mechanism.
Ontem necessitei de fazer uma encomenda no site da FNAC, mas não foi propriamente fácil. Fiquei frustrado o suficiente para lhes enviar um e-mail para o Apoio a Clientes.
Bom dia.
Acabei agora de realizar uma encomenda na loja online, e há algumas coisas que não percebo. Primeiro tive bastantes dificuldades em realizar a encomenda devido a questões de usabilidade: Ao seleccionar como local de entrega uma loja FNAC, as caixas de texto para expedição (morada, código postal, etc) ficaram inactivas (o que é espectável). No entanto permaneceram com preenchimento obrigatório, o que me obrigou a mudar o local de entrega para "Morada", preencher tudo, e só aí escolher a loja para entrega…
Quando é aberto o formulário para expedição, no envio para morada apenas aparece a opção de recepção das 9 às 18 horas, só preenchendo os diversos campos aparece a opção das 19 às 22h. Ora além da falta de
transparência para o utilizador, ainda se arriscam a perder encomendas por falta desta informação. Finalmente no pagamento, é-me pedido o NIB, o qual copio da minha aplicação de e-banking e colo na caixa de texto.
Recebo uma mensagem de "NIB incorrecto" à qual não é anexada qualquer informação do formato esperado, depois de tirar espaços, o código do país e os digitos finais de checkdigit, lá consegui submeter o pedido.
Têm sorte que não desisti a meio. Por fim em vez de uma mensagem de "Compra efectuada com sucesso, vá ao seu e-mail" tenho o carrinho vazio, levando-me a pensar que tinha perdido o processo de encomenda.
Aconselhava seriamente a uma revisão da usabilidade do vosso site.
Com os melhores cumprimentos,
Bruno Silva
Foram simpáticos o suficiente para responderem a pedir desculpas e a dizerem que se encontravam com “problemas técnicos”… Era o que esperava, mas pelo menos despejei a frustração!
Também achei curioso dizerem que estavam totalmente disponíveis para mais esclarecimentos, e de seguida me fecharem o ticket no sistema deles. lol
Since I’m having trouble to get enough time to complete these post series (1 post was left), I’ll just leave you the source code.
It contains a sample of a WCF service that uses LINQ to SQL to retrieve some data from a SQL Server Database (AdventureWorks) and return it as XML. I’ve also some commented code in order to add a JSON endpoint.
Download Source Code
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.