NavigationService.Navigate(new Uri(“/OurView/NextView.xaml”, UriKind.Relative));

The scenario we wanted went something like this: We wanted the user to tap a button and launch the camera task. This would close (tombstone) the application until the camera task was complete (the user took a picture and returned to the app). Upon completion, the application is re-initiated and the camera task hands the application an image stream that we can use to determine the bar code number. We then navigate to a screen that will show all the information about the product the user just scanned.

The problem with this way of doing things is that when we tried to navigate to a new page in our camera.Completed event handler (helpfully titled camera_Completed), we got a NullReferenceException on our NavigationService.

“How could this be?” I asked myself and the Internet. The NavigationService was there when we left. How could it not be there when we got back? The Internet had no helpful answers. Stupid Internet.

As it turns out, the NavigationService doesn’t actually show up in a page until the page UI is fully loaded (or so I have been told). That means that we simply can’t navigate directly from the camera.Completed event because the UI isn’t loaded.

Most other Windows Phone 7 programs with camera tasks we looked at had some additional user input after the task was completed that users would then interact with to handle navigation. We didn’t want that. Once the user took a picture, we wanted them to start getting results without any additional interactions.

Here is our solution for navigating after the camera task (which will also work for navigating after any task):

First, add a property to the page that can determine if the application was initiated after the task.

bool comingFromCamera = false;

Make sure you set this to true in your camera.Completed event handler:

void camera_Completed(object sender, PhotoResult e)
{
this.comingFromCamera = true;
}

Add an event handler for the page loading event  in the page constructor:

public MainPage()
{
InitializeComponent();
// Whatever other stuff you need in here
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}

In the MainPage_Loaded event handler, check to see if the page was initialized after the camera task or initialized normally. If it was initialized after the task, navigate to your heart’s content.

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if(this.comingFromCamera)
NavigationService.Navigate(new Uri(“/OurView/NextView.xaml”), UriKind.Relative));
}

And that should work. Let me know in the comments if you’re having additional difficulties.

• Apress "Intoducing Silverlight 4" e-book for $10 http://bit.ly/aAec0G #
• You're really just borrowing Steve Jobs' iPhone, not buying your own http://bit.ly/cweTwu via @CaseySoftware #
• +1 RT @adkinn: iPhone to Windows Phone 7 Tutorial series from @JesseLiberty http://bit.ly/cUUAWM – Looking forward to this! #
• @nathandunlap That is why Twitter (and Twitter clients) need a 10 second "undo" button. Dammit. in reply to nathandunlap #
• for @justsomeguy RT @TIME: It's National Waffle Day. Check out the five coolest waffle makers | http://su.pr/479RLz #
• It looks like I will, totally by accident, be in Munich during Oktoberfest. Freaking score. #
• Customizing an application tile in Windows Phone 7 #wp7 #wp7dev http://bit.ly/bbXbjD #
• Related: Sending Push Notification to Windows Phone 7 #wp7 #wp7dev http://bit.ly/cGCLlo #
• A list of apps & tasks you can launch from within your Windows Phone 7 app #Launchers http://bit.ly/aHIDvE #
• Windows Phone 7 comes pre-loaded with Jack Bauer's direct number #WP7KillerApp #
• RT @MSExpression: MultiTouch Behavior for Windows Phone 7 – http://bit.ly/9PF7BS – #Expression #Blend #WP7 #

Powered by Twitter Tools

• @Chris_Mayer I'm partial to the 22-23 inch monitors, the price-to-quality is just right for me. in reply to Chris_Mayer #
• Sunday only, get Accelerated SQL Server 2008 e-book from Apress for $10 http://bit.ly/aAec0G #
• 30 free high quality fonts http://bit.ly/9cdc3l #
• RT @biginjapaninc: TechNews.AM | ShopSavvy for Windows Phone 7 Screenshots – http://cot.ag/dg3sQd #
• Note to self: RT @ShawnWildermuth: Blogged: What I learned about Windows Phone 7 from Android http://is.gd/ejE6Q #
• Smashing Magazine post: "1001 Blog Posts That Are More Info Dump Than Helpful Information" #
• Based on current growth patterns, our baby should look like this (lower right) http://yfrog.com/nfaitp #
• @spangborn Oooo… green tea sounds good #Impressionable (Also, Oolong is nice and Rooibos if you like something sweet) in reply to spangborn #
• RT @myzt, @SharpGIS: The main idea of "Inception": if you run a VM inside a VM inside a VM inside a VM, everything will be very slow #
• Geo tag testing, 1, 2, 3 http://yfrog.com/j7g14gp http://yfrog.com/8bpxhp #
• Creating sample data in XAML for Windows Phone 7 project. Super. Awesome. #wp7 #
• You audio people are freaking weird. How is a $1000 speakers set "entry level"? My TV cost that much. #
• 1 thing I don't like about Blend #WP7 default projects: The data templates are in line. Harder to style. #
• @rustyclark Can you point me to a good intro on determining speaker quality? I'm basically guessing right now. in reply to rustyclark #
• @rustyclark Mostly movies. I listen to most of my music in my office, but it's nice to sit down and enjoy quality music every now & again in reply to rustyclark #
• I start pinching my face like a Victorian woman on a date #SignsImWorkingTooHard #
• @rickbarraza You're just being difficult now in reply to rickbarraza #
• RT @EATerrell: Interesting Infographic "The Worlds Best Countries" via @newsweek http://bit.ly/a0qIAu #
• @JustinAngel I was just noticing that. But the interaction & visualization is awesome. @EATerrell #
• @rickbarraza I'm not moving to San Diego because I hate sunshine and happiness. in reply to rickbarraza #
• @ShawnWildermuth Here's the one I use http://bit.ly/bjk2vj in reply to ShawnWildermuth #
• Wife: They're selling coffee-free Starbucks ice cream. Me: Isn't that just regular ice cream? #
• For reasons that US News & World Report wants me to pay to see, Georgia Tech is the 35th best school in the US #
• does anyone know how the Windows Phone 7 system decides scroll position when bringing a textbox in focus? #
• RT @timheuer: DynamicTextBlock works for windows phone dev http://timh.me/b9UrJj #wp7dev #silverlight #
• Asshole tenants put unbagged food trash in our garbage can so it spilled out this morning. Why? WHY?!? #
• @Pete_Brown Maybe something like "I'll just stick that one in my 'Mind Your Own Business' file" in reply to Pete_Brown #
• Someday I'm going to write a "Margin Armageddon" script that sets all margins & padding in a WPF/SL project to 0. Scorched earth! #
• The Steve Jobs Exemption Clause: All statements about how to do good design workflow do not apply to Apple. #
• The Steve Jobs Exclusivity Clause: Very few Apple design workflows can be translated effectively to any other company. #
• @Pete_Brown That thing is gorgeous! Where do I go to make that screen? in reply to Pete_Brown #
• NUIGroup.com has a free book on DYI multi-touch displays http://bit.ly/9uCYha (via @joshblake) #
• RT @lizardbill: Some learn best by reading. Some by doing. I learn best by publicly embarrassing myself. #
• It is one of those days in SLC where no amount of swamp cooler can make the house cool enough. #NeedAC #
• @joshblake Re: Margin Armageddon: I've done several projects where I have to go searching through templates for that 2 px misalignment… in reply to joshblake #
• 5-hour Energy, I am now your slave. #
• Windows Phone 7 Essential Control: @ingebretsen's TextTrimming TextBlock http://bit.ly/cvRWeD #wp7dev #wp7 #
• Windows Phone 7 Essential Control: WrapPanel (stolen from @jeffwilcox) http://bit.ly/c0Obmg #wp7dev #wp7 #
• RT @SilverlightNews: Improving ListBox Performance in Silverlight for Windows Phone 7: Data Virtualization – http://bit.ly/clxvEr #
• @JeffParies Laptop upgrade: I love my Studio XPS 16. (i7, 8GB Ram, 1080p) However, it does light my jeans on fire. in reply to JeffParies #
• Windows Phone 7 ListBox doesn't use virtualization unless using a DataTemplate? Weird. http://bit.ly/acCGxx #
• @josefajardo Voting for suck-y candidates: I always thought that was a uniquely American problem. in reply to josefajardo #

Powered by Twitter Tools

(For those who are new to Silverlight/WPF/Windows Phone 7, the WrapPanel stacks UI elements either horizontally or vertically like the StackPanel except that, when it hits the panel limit it… wait for it… wraps and starts stacking in a new column/row. Handy.)

I found a way to add it with the Silverlight Toolkit, but doing that added 140 Kb to my application. Maybe I’m just stuck in the world of J2ME, but adding 140 Kb to my mobile app isn’t OK if I can help it. I found this post from Jeff Wilcox on adding the WrapPanel and that didn’t seem to work for me. (My comments are the whiny ones at the end of the post.)

But I finally got it working and I’ll tell you how.

Or I could just taunt you. That would be fun too.

Naw, I’m just kidding. Here’s the stuff you need.

Windows Phone 7 WrapPanel and DockPanel (Source)

Windows Phone 7 WrapPanel and DockPanel (DLL)

All you have to do is download the DLL, unzip and reference in your app like so:

Right click on the “References” section of your project.

Select the WP7Panels DLL from whatever folder you put it in and see it show up in your References

Open up the “Assets” section and type “wrap” or “dock” the wrap-or-dock panel should show up. Double click it or drag it onto the canvas to add it to your app. Blend will take care of the rest of the namespaces and everything.

And start adding items to your panel. It should work the way it’s supposed to work.

One note with the DockPanel… items placed in the DockPanel need to have the attached property

[xmlns]:DockPanel.Dock=”[something]”

if you want them to do something other than align in the center. The [xmlns] name should be the same thing that is before the “DockPanel” in the XAML. It will most likely be “WP7Panels”. Therefore, the following XAML:

<WP7Panels:DockPanel>
    <Button Content="Button" WP7Panels:DockPanel.Dock="Bottom" />
    <Button Content="Button" WP7Panels:DockPanel.Dock="Top" />
    <Button Content="Button" WP7Panels:DockPanel.Dock="Right" />
    <Button Content="Button" WP7Panels:DockPanel.Dock="Left" />
    <Button Content="Button" />
</WP7Panels:DockPanel>

…should look like this:

If you want to add the actual files to your Windows Phone 7 app instead of just referencing the DLL (perhaps you are crazy or you have a deep and desperate need to fully understand absolutely everything you touch or you are a C++ developer), you can download the source. I’ve consolidated the DockPanel code into a single file (DockPanel.cs), but you’ll need the following files to get the WrapPanel working (all included in the source).

• LengthConverter.cs
• NumericalExtensions.cs
• OrientedSize.cs
• TypeConverter.cs
• WrapPanel.cs

Finally, if you need something else for Windows Phone 7 from the Silverlight Toolkit, you can either add the entire toolkit (explained here) or download the source for the latest Silverlight 3 build and open it in Visual Studio 2010 (for some reason, I couldn’t get it to open in Visual Studio 2008). It should update and you should be all set playing around in there to extract the stuff you need.

Good luck!

I’m also doing some Windows Phone 7 design and I want to have a place to go to look at as many videos of Windows Phone 7 in action to figure out how to design an application motion flow that fits with the rest of the app. Watch these videos carefully and notice that pretty much everyone is doing something slightly different for their motion flow. The same navigation concepts are in place, but the motion flow is different for many of the apps.

So… here is my collection of Windows Phone 7 videos and animations.

From Engadget:

(more at the Engadget post)

E-mail on the Windows Mobile 7 Phone

The AP application (by Archetype) (skip to 3:30)

Seesmic for Windows Phone 7 (skip to 6:40)

The marketplace hub

That’s all for me for now… I’ll try to update this with more examples later

A new feature in Silverlight 4 is the ability to using the StringFormat feature when binding. Previously, if I wanted to have a piece of text that said “Your name is [username]” I could either use the old Horizontal-Stack-Panel-And-2-TextBlocks trick (as seen below)…
<StackPanel Orientation=”Horizontal”>
<TextBlock Text=”Your name is” Margin=”0,0,4,0″/>
<TextBlock Text=”{Binding username}“/>
</StackPanel>

…or write a value converter (not going to be seen below because there’s a great example of it over here. Incidentally, that example is totally irrelevant if you’re going to use StringFormat, but more on that in a second).

The StringFormat option in Silverlight 4 allows you put all that information into a single field, which is extremely useful not only for TextBlocks, but for Content fields in a Button. In fact, let’s use that as an example.

Let’s say you want to create a Button to log out, so you want it to say “Log Out of <Username> Account”. (A bit clumsy, but the technique is the important part.) All you would have to do is the following:

<Button Content=”{Binding username, StringFormat=’Log Out of \{0\} Account’}“/>

This gets even better for things like number formatting. Let’s say we want the user to enter an amount of money (for example, $1,593.29) into a TextBox (maybe in a PayPal application). If we have bound that value to a numeric format, we can express that format through binding and when the TextBox loses focus, the StringFormat will take the number entered and format in a currency format.

<TextBox Text=”{Binding paymentAmount, StringFormat=\{0:C2\}}“/>

The only issue with numerical and date formats is they the MUST be bound to a number or date.

With that in mind, here is a sampling of StringFormat options, stolen mostly from Kathy Kam. For more complete options, check out the MSDN articles on String.Format and trial-and-error your way through things. If you want to play around with this, download my StringFormat project or look at the Silverlight sample app at the bottom of this page.

Strings

For a string with the value “Silverlight”

Using \{0\,#\} effectively forces the string to be at least # characters long, using spaces to pad it to the requested length.

StringFormat=\{0\,20\} : “                  Silverlight”
StringFormat=\{0\,-20\} : “Silverlight                  ”
StringFormat=’I just typed &quot;\{0\}&quot;.’ : “I just typed “Silverlight”.”

MSDN article on Composite Formatting

Numbers

For a double with the value : “38293.53”

StringFormat=c : “$38,293.53” – Use ‘c’ for currency
StringFormat=e : “3.829353e+004” – Use ‘e’ for exponential (scientific)
StringFormat=n : “38,293.53” – Use n for number

You can also use these in the following format:

\{0:(letter)(number)\}

where (number) indicates how many decimal places there should be. The format will use standard rounding rules to determine the last digit. For example:

StringFormat=\{0:c0\} : “$38,294”
StringFormat=\{0:n4\} : “38,293.5300”
StringFormat=You have \{0:c1\} : “You have $38,293.5”

MSDN article for standard number formatting
MSDN article for custom number formatting

Dates

The date formatting has a huge range of options.

For the DateTime of “April 17, 2004, 1:52:45 PM”

You can either use a set of standard formats (standard formats)…
StringFormat=f : “Saturday, April 17, 2004 1:52 PM”
StringFormat=g : “4/17/2004 1:52 PM”
StringFormat=m : “April 17”
StringFormat=y : “April, 2004”
StringFormat=t : “1:52 PM”
StringFormat=u : “2004-04-17 13:52:45Z”
StringFormat=o : “2004-04-17T13:52:45.0000000”

… or you can create your own date formatting using letters (custom formats)

StringFormat=’MM/dd/yy’ : “04/17/04”
StringFormat=’MMMM dd, yyyy g’ : “April 17, 2004 A.D.”
StringFormat=’hh:mm:ss.fff tt’ : “01:52:45.000 PM”

MDSN article for standard date formatting
MSDN article for custom date formatting

Sample App

I’ve recently written a chapter on storytelling and information visualization for O’Reilly media to publish in the book Beautiful Visualization.

And you can read it for free.

download: Download Once Upon A Stacked Time Series - Matthias Shapiro (689.54KB)

You can buy the e-book or per-order Beautiful Visualization directly from O’Reilly media or pre-order a hard copy of Beautiful Visualization from Amazon

Quick Summary

Information visualization is a powerful medium for the communication of data, but one of the things that makes it so powerful is the fact that it plays a part in the larger story of reality. Information visualizations can tell the part of the story that is data heavy in a way that is gripping and memorable. The first half of my chapter walks through the process of creating a visualization and the importance of anchoring that visualization in the context of a larger story (including some thought-experiment examples).

The second half of the chapter walks through the entire process of creating an information visualization, from data gathering to munging (sorting, filtering, re-aligning) a large data set, to visual representation. This visualization is done using Microsoft Excel (you could use Google Docs, which is free) and Adobe Photoshop (you could use GIMP, which is free).

If you like my chapter, you will love the whole book. Beautiful Visualization is twenty chapters of unadulterated awesome visualization tips, tricks, discussions, and lessons from scientists, artists and visualization experts. Once again, your purchase options are to buy the e-book or per-order Beautiful Visualization directly from O’Reilly media or pre-order a hard copy of Beautiful Visualization from Amazon.

Finally, if you’re one of those people who is constantly thinking “I really wish I could financially support someone who is soooooo awesome that they put their professional work online for free”, today is your lucky day. You can donate whatever you would like directly to me as a thank you via PayPal.

But, most of all, read my chapter! Comment on it, tear it to shreds, pick out the good parts, pick out the bad parts, print it out and light it on fire. I hope it will be helpful in whatever you’re doing.

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.