Archives

All posts for the month April, 2012


I’m going to show you how to convert a List<T> object into a properly formatted XML string you can use to POST to a HTTP endpoint.

First, let me show you my C# POCO classes:

   1: [Serializable()]

   2: public class GameMatch

   3: {

   4:     public GameMatch()

   5:     {

   6:         Summoners = new List<Summoner>();

   7:     }

   8:  

   9:     public int GameId { get; set; }

  10:     public string MethodType { get; set; }

  11:     public int GameLength { get; set; }

  12:     public string GameMode { get; set; }

  13:     public string GameType { get; set; }

  14:     public int IpEarned { get; set; }

  15:     public int IpTotal { get; set; }

  16:  

  17:     public List<Summoner> Summoners { get; set; }

  18: }

  19:  

  20: [Serializable()]

  21: public class Summoner

  22: {

  23:     public Summoner()

  24:     {

  25:         Items = new List<Item>();

  26:     }

  27:  

  28:     public List<Item> Items { get; set; } //DONE

  29:  

  30:     public int ProfileIconId { get; set; } //DONE

  31:     public string SummonerName { get; set; } //DONE

  32:     public int Level { get; set; } //DONE

  33:     public int ChampionLevel { get; set; } //DONE

  34:     public bool BotPlayer { get; set; } //DONE

  35:         

  36:     public int Wins { get; set; } //DONE

  37:     public int Losses { get; set; } //DONE

  38:     public int Leaves { get; set; } //DONE

  39:  

  40:     public int NeutralCreepsKilled { get; set; } //DONE

  41:     public int MinionsKilled { get; set; } //DONE

  42:     public int ChampionsKilled { get; set; } //DONE

  43:     public int Assists { get; set; } //DONE

  44:     public int LargestMultiKill { get; set; } //DONE

  45:         

  46:     public string SkinName { get; set; } //DONE

  47:     public int SummonerSpell1Id { get; set; } //DONE

  48:     public int SummonerSpell2Id { get; set; } //DONE

  49:  

  50:     public int DamageDealt { get; set; } //DONE

  51:     public int PhysicalDamageDealt { get; set; } //DONE

  52:     public int MagicDamageDealt { get; set; } //DONE

  53:     public int LargestCriticalStrike { get; set; } //DONE

  54:     public int HealingDone { get; set; } //DONE

  55:  

  56:     public int PhysicalDamageTaken { get; set; } //DONE

  57:     public int DamageTaken { get; set; } //DONE

  58:     public int MagicDamageTaken { get; set; } //DONE

  59:  

  60:     public int GoldEarned { get; set; } //DONE

  61:     public int TimeSpentDead { get; set; } //DONE

  62:  

  63:         

  64:         

  65:     public int InhibitorsDestroyed { get; set; } //DONE

  66:     public int TurretsDestroyed { get; set; } //DONE

  67:         

  68:     public int Deaths { get; set; } //DONE

  69:     public int LargestKillingSpree { get; set; } //DONE

  70:     public int Lose { get; set; } // Maybe this means, 1 = lost; 0 = won? Look into it.

  71: }

  72:  

  73: [Serializable()]

  74: public class Item

  75: {

  76:     public int ItemId { get; set; }

  77: }

 

Simple easy to understand POCO classes with automatic properties.

Next, to serialize them all we need to do is use a XmlTextWriter and XmlSerialWriter

   1: List<GameMatch> parsedMatches = LogParser.Parse(path);

   2:  

   3: StringWriter stringWriter = new StringWriter();

   4: XmlDocument xmlDoc = new XmlDocument();

   5:  

   6: XmlTextWriter xmlWriter = new XmlTextWriter(stringWriter);

   7:  

   8: XmlSerializer serializer = new XmlSerializer(typeof(List<GameMatch>));

   9:  

  10: serializer.Serialize(xmlWriter, parsedMatches);

  11:  

  12: string xmlResult = stringWriter.ToString();

  13:  

  14: xmlDoc.LoadXml(xmlResult);

At this point stringWriter.ToString() will return a pure string of the XML representation of your List<T> object.

Hope this helps!


If you haven’t heard already there is a (no-so) new HTML input type used specifically for date inputs. The idea is that in the future instead of having to use a library such as jQuery, you can just invoke a simple HTML input:

   1: <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>

And it looks and feels wonderful.

Let’s see what styling we can apply to this elegant input.

1. Applying the color rule.

You can apply the color rule to the input and it works as you would expect:

   1: input {

   2:   color:red;

   3: }

ss1

2. Applying the border rule.

You can also apply the border rule but it seems this only applies to the input, not the calendar widget that appears on focus.

   1: input {

   2:   border:1px solid red;

   3: }

ss2

3. Applying the padding rule.

Padding can also be used for this input, however the calendar widget remains untouched.

   1: input {

   2:   padding:10px;

   3: }

ss3

 

So we can’t customize the look and feel of the calendar widget?

After testing this new input it seems that the browsers that support it (Google Chrome Canary and the latest Opera) do not allow you to change how the calendar looks.

Google Chrome uses this stylesheet to apply design to the input, but you won’t get any changes on the other browsers.

This is bad news as sometimes we as web developers are asked to modify existing calendar widgets to match the look and feel of the website.

Hopefully this changes in the future, we’ll keep our eyes peeled.


When you’re a web developer, most companies ask you to create some input forms, and more often than not you’re required to ask the user for a date input.

The above element was created using the most excellent jQueryUI DatePicker widget. Usage is simple:

   1: $('input[name="dateofbirth"]').datepicker();

It’s small, lean and since you are probably already using jQuery the overhead is minimal. But still, this should be something that’s built in, correct?

And it turns out that there is in fact an HTML element that’s build for this purpose. Baked right into the browser!

Firefox users you’re out of luck as of 11.0
Google Chrome users you’re out of luck as of 18.0
Opera users, once again your browser of choice is a pioneer leading the way.

It’s a shame this browser isn’t getting more market share it’s blazing fast, very light and it has never once crashed on me in the 7 years I’ve been using it.

Let’s see the input type=”date” element in action:
http://dev.w3.org/html5/markup/input.date.html

   1: <input type="date" min="1989-08-09" max="2012-12-0" value="2010-05-15"/>

Save the markup in a regular html file and open it using the latest version of Opera.

Works exactly as you would expect from a modern calendar select widget and it’s very lightweight coming down the wire.

You can even style it as you please. (More or less, more on that later)

I would love to see more browsers update to implement correct standards, it would be so exciting! And in that regard, I applaud Chrome for automatically upgrading without letting users know what version they are running. Chrome users more often than not are just running the cutting edge latest version of their browsers whereas I know some people still rocking Firefox 3.