Part 1: MySQL

Part 2: PHP

Download all files (PHP & Silverlight)
Download PHP files only
Download Silverlight project only

In Part 1, we created the MySQL tables necessary to store data for a simple to-do list. In Part 2, we wrote a PHP service to deliver the items in our to-do list in JSON format. In Part 3, we’ll create a Silverlight application that can utilize this web service to retrieve, display, and edit the to-do list.

Part 3: Connecting Silverlight To Our PHP Web Service

First, let’s start a new Silverlight project. (You can download the full project here.) In the interest of time, I’m not going to go into the details of the “ideal” implementation for this. I’m just going to show the parts necessary to retrieve, display and interact with the to-do data.

Before we start with the UI, let’s build a model so that we can appropriately bind our data. Add a new folder to the Silverlight project and name it “Models”. Add a new class to it and name the class “ToDoItem.cs”. In this instance, we’re just going to make the model look just like our MySQL table.

ToDoItem.cs

public class ToDoItem
{
public bool isDone { get; set; }
public string toDoDescription {get; set;}
public int toDoID {get; set;}

public ToDoItem() { }
}

Now, we’ll add to our MainPage.xaml a ListBox named “ToDoList” that will hold the to-do items and a Grid to house the UI to add a new to-do. We’ll work on gathering and displaying our items first.

Right-click on the ListBox and go to “Edit Additional Templates –> Edit Generated Items (ItemTemplate) –> Create Empty…”

You’ll love this part… Just add a checkbox to it. That’s all we’ll need, so that’s all we’ll add. Then, go into the XAML and make the checkbox look like this:

<CheckBox Content=”{Binding toDoDescription}”
IsChecked=”{Binding isDone}”
Tag=”{Binding toDoID}” />

This binding is all we’ll need once we gather our to-dos from the web service and attach it to the ListBox. Let’s go ahead and get that data into this ListBox.

Open MainPage.xaml.cs and, at the top of the class, add:

WebClient wc = new WebClient();
ObservableCollection<ToDoItem> myToDoList = new ObservableCollection<ToDoItem>();
string baseURI = “http://<Web_address_holding_your_php_files>”;

You may have to add “using System.Net;” and “using System.Collections.ObjectModel;” to the top of the file. While we’re adding references, right-click on the “References” folder and find the “System.Json” component and add it to the project. Then add “using System.Json;” to the references section in the top. It’ll come in handy in a minute.

In the MainPage() method under InitializeComponent(), type “wc.DownloadStringCompleted += “ and hit TAB twice. This will add an event handler for when the WebClient has finished connecting to the web service we wrote.

The resulting event handler (which should be named “wc_DownloadStringCompleted”), is the code that our application will go to whenever it makes a call to our web service and gets a result. In it, we will do the following things:

1. Check to make sure we got a result without error
2. Check to see what kind of result we got (did we get all to-do items? or add a new to-do item?)
3. Walk through the result, extracting the data we need
4. Apply that data to the UI

Let’s add the code to do that for getting all the items. Make your event handler look like this:

With this in place, all we need to do is make a call to the get_todo_items.php, which we can do by adding this code just below the wc.DownloadStringCompleted line in the MainPage() method.

wc.DownloadStringAsync(new Uri(baseURI + “get_todo_items.php”));

When we run the project, we should get all objects from our database and the results should show up just the way we want in our Silverlight application. We will follow the exact same model to add new to-do items and update the to-do items we already have.

I’m in the process of separating out the final part of this tutorial (adding and updating the items) into a supplemental post so that I can wrap this post up. I encourage anyone walking through this to try to complete those parts by yourself and refer to the last bit only if you get stuck.

Finally, a little bit of warning. I structured this project to get it working in as straightforward a manner as possible. It is not in any way the ideal architectural example for a data-driven Silverlight application. It’s just a good way to get started using Silverlight in an environment that isn’t 100% Microsoft technologies.

Here is an example of the finished product (I reserve the right to clean up the data on a regular basis):

Part 1: MySQL

Part 3: Silverlight

Download all files (PHP & Silverlight)
Download PHP files only
Download Silverlight project only

In Part 1, we created the MySQL tables necessary to store data for a simple to-do list. In Part 2, we’ll write some PHP code that will give us the ability to grab the data out of the database and send it, in JSON format, to our Silverlight application.

Part 2: Writing the PHP Web Service

We’re going to create 4 PHP files (download php files):

• mysql_vars.php – holds all the information for connecting to the MySQL database
• get_todo_items.php – for getting all the to do items
• add_todo_item.php – adds a to do item
• change_status.php – changes a to-do item from “not done” to “done” or vice versa

Since all these projects will be using the information in mysql_vars.php, we’ll write that first.

mysql_vars.php

<?php
$dbUsername = “[my_database_username]“;
$dbPassword = “[my_database_password]“;
$db = “[my_database_name]“;
$server = “[my_database_server]“;

//To Do Table and Column Names
$mysql_todoTable  = “to_do_data“;
$mysql_todoIndexCol = “index_key“;
$mysql_isDoneCol = “is_done“;
$mysql_todoTextCol = “to_do_text“;

$connection = mysql_connect($server, $dbUsername, $dbPassword);

function formatInput($rawURLData)
{
$returnString = urldecode($rawURLData);
$returnString = mysql_real_escape_string($returnString);
return $returnString;
}
?>

We’ve added the to-do table and column names so that, if we decide to change anything later, we can just go to this file and update the table or column once.

Just for good measure, we’ve added a function we’ll want to use across our php files. The function “formatInput” will be used to make sure all our data is decoded from the URL that calls our web service (the urldecode method) and then try to block any SQL injections (the mysql_real_escape_string method).

Now, let’s write the basic “Get the data” file. What we’re going to do is write it so that the we can choose to get:

• all the to-do items
• all the to-do items that are “done”
• all the to-do items that are “not done”

This range of functionality isn’t even close to ideal. In a perfect world, we would want a wider range of options in gathering items (for example, items that contain a certain word or one item in particular or limit the number of items we call by a date range). However, for our very simple purposes, this will do.

The way our web service will work is that we have a URL that we’ll call from Silverlight when we want to get some data. When we calls this web service, we may want only the “not done” items or only the “done” items. We’ll handle that option by adding “?itemStatus=done” or “?itemStatus=notDone” to the end of the URL.

Example: if our base URL is

http://www.mywebsite.com/

the call to

http://www.mywebsite.com/get_todo_items.php

will get all items, regardless of their completed status while

http://www.mywebsite.com/get_todo_items.php?itemStatus=done

will get all the to do items that are complete. So we need to make sure that our web service responds appropriately to both calls.

There are comments in the code, but I’ll just explain the basic concept in picture form:

We take in a URL, extract the variables from it, create the MySQL query based on the variables, execute the MySQL query, extract the results, and then send back the php object encoded as a Json object. Each one of our files will follow this same pattern.

get_todo_items.php

<?
include ‘mysql_vars.php’;

//    set up the “itemStatus” URL option and build a query addition
//        to account for the itemStatus variable
$itemStatus = $_GET['itemStatus'];
$itemQueryAddition = “”;

if($itemStatus != NULL)
{
if($itemStatus == “done”)
{
$itemQueryAddition = “WHERE `$mysql_isDoneCol` = 1″;
} else if ($itemStatus == “notDone”)
{
$itemQueryAddition = “WHERE `$mysql_isDoneCol` = 0″;
}

// Construct our MySQL query
$todoQuery = “SELECT * FROM `$mysql_todoTable` $itemQueryAddition ;”;

// execute the query and gather the results…
mysql_select_db($db, $connection);
$todoResult = mysql_query($todoQuery);
$todoArray = array();

while($itemRow = mysql_fetch_array($todoResult))
{
$todoArray[] = array( “ToDoIndex” => $itemRow['index_key'],
“IsDone” => $itemRow['is_done'],
“TodoText” => $itemRow['to_do_text'] );
}
mysql_close($connection);

// … then encode the results as JSON Text…
// we’re using a “returnType” field so that our Silverlight application can differentiate between
// the kind of return values it recieves and parse the Json object appropriately

$returnItems = array( “returnType” => “todoItems”,
“results” => $returnItems);
$JSONResult = json_encode($todoArray);

// … and print the results so that our app can read them
echo $JSONResult;
?>

The other two files, add_todo_item.php and change_status.php use exactly the same structure to add a new item and change the status of an existing item (respectively). I won’t put all the code here in this post that is already too long, but you can download all the files here.

Update the mysql_vars.php file to fit your needs and you should be able to just upload these files and have your running to-do web service all ready for Silverlight to call it for data, which is something we’ll deal with in Part 3.

Here is an example of the finished product (I reserve the right to clean up the data on a regular basis):

This tutorial will walk through the steps to create a simple to-do list. Our to-do list will hold text of what it is we need to do and a value indicating if the task has been done. In this tutorial, we will create a MySQL table to hold our data, a PHP service to call the data and a Silverlight application to display and interact with the data.

Part 2: PHP

Part 3: Silverlight

Download all files (PHP & Silverlight)
Download PHP files only
Download Silverlight project only

Part 1: The MySQL Database

First, let’s create the table we need for our data.

If you don’t have or don’t like phpMyAdmin, the MySQL query to create the table described below is:

CREATE TABLE `[your_database_name]`.`to_do_data` (
`index_key` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`is_done` TINYINT( 4 ) NOT NULL DEFAULT ’0′,
`to_do_text` TEXT NOT NULL ,
FULLTEXT ( `to_do_text` )
) ENGINE = MYISAM

If you have phpMyAdmin, I highly suggest using it if you’re a MySQL novice. In phpMyAdmin, go to your database and enter the name of the table you want to create in the “Create new table on database [your_db_name]” section.

We’ll call our table “to_do_data” and give it 3 fields.

• index_key – identifies the to-do item uniquely
• is_done  – true/false value indicates the status of the to-do item
• to_do_text – a short text to describe what needs to be done

In phpMyAdmin, it will look like this:

A couple of notes about the fields:

index_key

This is the primary key of the table and is used to uniquely identify the given row. As such, it cannot be null and it auto-increments as rows are added to the table.

is_done

We use “TINYINT” type for this value because using BOOLEAN is basically the same thing. It is not null because every item must either be “done” or “not done”. “Done” = true = 1 and “not done” = false = 0. We are going to default to “0” (false) because we’re assuming that users aren’t going to make a to do list of stuff that is already complete.

to_do_text

We have artificially limited the text size to 1024 because we assume that this will be a set of short to-dos to, not a set of journal entries. We’ve also turned on “Fulltext” which lets the MySQL database index our entries for quick searching.

Now we just click the “Save” button at the bottom and we have our table.

Now our database system is in place and we’re ready to write a PHP webservice to implement all the CRUD (create, read, update, delete) capabilities our system will need.

If you want to learn more about MySQL, I highly recommend “A Visual Introduction to SQL“. This is the book I have, a left-over of my grad school years and it is an exceptional book for picking your way through various database scenarios.

If you’re looking for something a bit less costly, “MySQL Crash Course” is a fine book on the subject as well.

Every once in a while, Sunlight Foundation runs contests to either visualize or interact with government data. I submitted a Silverlight project called “Recovery Review” for the latest contest, “Design for America”. With Recovery Review, users can search and visualize stimulus projects. If they find information that they think is inaccurate, they can flag that project for inaccurate information.

The idea behind the visualization is that users can search through the data using a couple of key points (how much money was awarded to a project, where the project is, how many jobs were reported as “saved or created” due to the project, etc) and the system will deliver in a visual format a set of results that match that search. It will also visualize (as seen above) the total of all awards that match that search in the context of the stimulus awarded as a whole.

If the user clicks on the on one of the projects in the list, the visualization resizes so the user can see how much money and how many jobs that individual project represents, both in relation to the search total and in relation to the total stimulus.

Here’s a video overview of the project (runs about 8 mins).

And here is a blog post for the project that discusses some of the design decisions made and what I would change given more time.

Looking at the competition, I find it unlikely that I will win, but building the project was a pretty exciting learning experience. I’ll be posting my lessons here in the next couple weeks.

Unemployment Data Demo Code

Bing Maps Twitter Demo Code

In case you want to take a look at the unemployment visualization, I’ve added it below. I’m looking for a place to do ASP.Net hosting because my Bing Maps visualization is driven using Twitter data called and served through a WCF service, so if you have a recommendation for a noob ASP.Net guy, let me know. I’d love to host that as well.

(Apparently some people are having trouble with my demo below. I’ll try to get a more compatible version up soon.)

You can copy the code for to embed this with the text below:

<object data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2″ width=”800px” height=”600px”><param name=”source” value=”http://www.designersilverlight.com/Silverlight/UnemploymentViz.xap”/> <param name=”onError” value=”onSilverlightError” /> <param name=”background” value=”white” /><param name=”minRuntimeVersion” value=”3.0.40818.0″ /><param name=”autoUpgrade” value=”true” /><a href=”http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0″ style=”text-decoration:none”><img src=”http://go.microsoft.com/fwlink/?LinkId=108181″ alt=”Get Microsoft Silverlight” style=”border-style:none”/><br /> </a></object>

• Florida Crime Rate Visualization – My attempts to use Silverlight for information visualizations are going pretty well. In this post, I visualize the Florida crime rate by county over almost 20 years. There are project files availalbe for anyone who wants to dig into how I did it a little more.
• Adobe Illustrator to XAML Conversion Options – This post walks through the pros and cons of two methods for taking an SVG file (or Adobe Illustrator) file and pulling it into Blend as a XAML file. It also has a XAML copy of a vector map of the US by county for download.
• Create A Snapping Slider In Blend Using Behaviors – This provides a downloadable behavior for getting a slider to snap to integers (or an integer multiple based on certain settings). I’ve provided project files as well as a tutorial for how to do it.
• How To Create a PART in Your Silverlight Custom Control – Because there are about a dozen tutorials on building a custom control, but I keep forgetting exactly how to do this part of it.
• How To Animate a Changing Property in a Custom Control in Silverlight – Have you ever wanted your property to animation automatically when it changes in your Silverlight Custom Control. I say, “Who hasn’t!?” at which point my wife forces me out into the fresh air and sunshine (or, as I call it, the Blinding Day Star). After I scurry back inside, I wrote this blog post.
• How To Build a Storyboard Animation for Silverlight in C# – Because sometimes you want to enjoy the benefits of the Silverlight animation engine but you really need to build the animation in the code instead of the XAML.

Veracity Solutions is the software consulting firm where I work and we’ve decided that it would be a good idea to do some sponsored posting there.

Blog posts up so far are:

• Styling a ComboBox in Silverlight 3
• How To Wrap Text In a Silverlight 3 ComboBox
• How To Get a Silverlight 3 AutoCompleteBox to Show Sample Data In Blend 3
• How To Create A ListBox with CheckBoxes (or RadioButtons) In Silverlight 3

More are coming, including tutorials on behaviors and paths.

INotifyPropertyChanged snippet (PropertyChangedEventHandler and RaisePropertyChanged method)

INotifyPropertyChanged Property snippet

Just download them into your "Visual Studio 2008CodeSnippetsVisual C#My CodeSnippets" folder and they should work. Just type "notify" and intellisense should show you "notifyo" (for NotifyObject) and "notifyp" (for NotifyProperty). Hit tab twice and the code should dump into your project.

This is definitely a "use at your own risk" project.

You see, there I was, minding my own business and trying to build some data to use with some XAML comps I was playing with and I was having some of the strangest things happen with my data. I had a DependecyProperty ObservableCollection in my ViewModel and I put a couple different views in my screen. (I was using an MVVM pattern, because that’s what all the kool kids are doing.)

Then, it suddenly seemed as if all my Views were sharing the same ObservableCollection, even though every other DependencyProperty they were bound to had unique values. So I did what I always do when I have problems like this… I ask Joe McBride.

It turns out I had gotten confused. I understood that DependencyProperties were good for the following:

• Providing callbacks when the property is changed
• Binding to stuff
• Animations

I figured that this is the kind of behavior I wanted from my data. I was wrong. As it turns out that is the kind of behavior I want out of the properties that I use in my WPF and Silverlight controls. It seems that DependencyProperties are meant to be used with controls and not for stand-alone data.

For stand-alone data, I should have used INotifyPropertyChanged, which is an interface for… well… notifying things when a property changes. I already had handy snippets for creating DependencyProperties (thanks to Robby Ingebretsen). So I tweaked his snippets so that they work for INotifyPropertyChanged properties.

Because it seems silly to implement the PropertyChangedEventHandler in every class that needs notify-able properties, I like to create a "NotifyObject" class:

class NotifyObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if(handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }       
}

Then, I can make my new class inherit from NotifyObject and away I go creating my bindable, notify-able data:

public class MyNotifyableData : NotifyObject
{
    public MyNotifyableData()
    {
    }

    #region MyProperty (INotifyPropertyChanged Property)
    private string _myProperty;

    public string MyProperty
    {
        get { return _myProperty; }
        set
        {
            _myProperty = value;
            RaisePropertyChanged("MyProperty");
        }
    }
    #endregion
}

This property was created using my snippet above. Hope it helps.

Presidential Candidate News Tracker Source Code

JSON Data File With Candidate Data (Note: Apparently, WordPress likes to uncapitalize file names for me, you may have to re-name the file to “CandData.json” to get it to work with the app.)

Warning: This code is a disaster. I was having strange problems getting my custom controls to work and, after a couple hours fighting with it, I gave up and ended up writing the exact same layout and code for 14 separate candidates. Same problem with the “dates-of-note” along the timeline.

Not pretty, but it works. Have fun.

Fortunately for everyone involved (especially me), this tutorial is much shorter. It is also another in my “without a line of code” series in which you can do everything without even touching the code. Let’s open up our project in Blend and get started. (To see an example what this tutorial makes, scroll to the bottom of this post.)

First of all, I lied. You do have to touch one line of code because you need to get your NYT API key and plug it into the myApiKey variable in the Page constructor (line 26 in the project available for download). The line should look like this:

myApiKey = “&api-key=your_api_key_here”;

Now, right click on the project solution and select “Build Solution” (in Visual Studio or Blend, it doesn’t matter).

This should build the assemblies so that Blend can do a really neat trick. In the Project tab in Blend, you should see a Data panel in the bottom half. Click on the “+ CLR Object” button.

A pop-up will gently encourage you to name your new data source and choose from a list of available data sources. Select “NYTResult” and hit OK.

You will now have your NYTResult data source show up in your Data pane. Before we start building a nice slick looking interface, select your ListBox (named “ResultsDisplay”) and, in the Properties pane, find the “Display Member Path” and reset it by clicking on the little gray box to the right.

Now, right-click on the ListBox  in your “Objects and Timeline” panel and select “Bind ItemsSource to Data…”

Select the data source you just created and select “NYTResult”. Then click on “Define DataTemplate” at the bottom. This will take you to the “Create Data Template” panel, where the fun happens. You will see “New Data Template and Display Fields” automatically selected. We like this. This lets us select all the data we want and give it some basic structure and Blend will do all the bindings for us.

Let’s make a few changes from the standard Data Template setup. Expand the Date field and check Day, DayOfWeek, Month, and Year and change the order with the up and down buttons to something you like. Then, change the Url from “StackPanel” to “TextBlock”. I reordered the data a little bit, so my template looks like this:

Hit OK. The point of that whole exercise was so that Blend would build our data template for us. We don’t actually want the data source and we don’t want our ListBox bound to it. So reset the “ItemSource” property on the ListBox and remove the NYTResult data source. If you run the project now, you should get something like this:

At least we’re getting more data now. Doesn’t look that great, but we’re getting there. Go back to your project in Blend and right-click on your ListBox and go to “Edit Other Templates –> Edit Generated Items (ItemTemplate) –> Edit Template”

We’re now in the DataTemplate but we sadly have no visible data, which makes manipulating it a tad difficult. What I have found works best for me is just to build my desired layout with static data and then translate the bindings. (I haven’t mentioned this, but you should be working in Split mode as a general rule, so you should be able to see the bindings in the XAML.)

So… long story short (it’s getting really late here): I changed the layout to replicate the NYT story design… the Title is a hyperlink button that takes us to the full story, followed by a small byline, the beginning of the story and the date on which the story appeared. If you’d like to look at the design itself in more detail, download the project at the end of this post.

I do want to mention one issue… the issue of getting your text to wrap. With my current redesigned DataTemplate, my project looks like this:

It scrolls horizontally to a degree that is certainly unhealthy. What is happening is that the TextBlock in the DataTemplate is making a request for space and when it hits a limit, it will start wrapping. Unfortunately for us, when the ScrollViewer in the ListBox has the HorizontalScrollBarVisibility set to “Auto”, it is telling the TextBlock that it has all the room in the world and that it doesn’t need to wrap. So, let’s just change the HorizontalScrollBarVisibility on the ListBox to “Disabled”.

And we’re done.

You can download the source here

JSON – Silverlight – New York Times Tutorial (Part 2) Project Files

Questions and comments are always welcome.