Whew! Last week my hosting provider pulled a giant #fail. I was trying to get some support on recovering a WordPress database that my wife uses for her blog. In an attempt to recover the database, the support representative ended up destroying the database for this blog. Thank goodness for backups – I was able to recover my database myself. Unfortunately we are still waiting on the promised recovery of my wifes database. It’s been more than 4 days now, and the promised 24-48 hour SLA has well expired. I am at their mercy and it is not sitting well with me right now. I’ve phoned, emailed, and submitted daily (sometimes twice a day) messages on the tickets. I can’t even get a status update.

Okay, enough of the soapbox already.

In my last post (which I am still trying to recover because of you know what), I went through a process of creating a table. At the end of that post I mentioned that I was going to talk about how to customize the table. I was thinking some more about this on the weekend and I realized that when I customize the table I need to see the results of what I did. So what I am going to do today is use the table I built in my last post and show what a simple form would look like using this table. Sort of a quick start to LightSwitch.

The table I created is called Customers and it contains fields to contain some simple customer specific information. Here is what it looks like..

The Customers Table

What I want to do is create a screen that will allow me to enter customer data into my Customers table, as well as another screen to display a list of all my customers in the Customers table. To do this, we will tell LightRoom to create these screens using our Customers table.

At the top of the designed I click the Screen… button on the designer button bar.

Click the Screen... button on the designer tool bar

This opened the Add New Screen dialog window. The Add New Screen dialog is where you tell LightRoom what kind of screen you want to create, and what data you want to use for it. In my application, I want to first create a screen so for creating new customer data.

So, I select the New Data Screen template.

I then enter “NewCustomer” (no quotes) in the Screen Name field. Note that the value you enter here can not contain any spaces. This is because this is the name of the screen; not to be confused with the title of the screen that you might see when running the application.

From the Screen Data drop down box I select  Customers. I leave everything else alone.

Here is what my Add New Screen dialog looks like…

Add New Screen dialog.

What shows up next is something that is likely going to raise an eyebrow or two. Rather than displaying something that would look like a screen to enter data into, LightSwitch displays the screen designer. Behind the scenes LightSwitch has created a screen using information from the Customers table, however what gets displayed in the designer is the details about the screen.

NewCustomer screen created by LightSwitch

I was a bit confused by what was first because I am used to seeing a graphical view of a screen while I am developing  Windows SmartClient, ASP.Net, and even MS Access applications. This is because LightSwitch takes a data centric approach to creating applications; meaning that everything revolves around the data, or entites, the application is being created for. I will talk about this in more detail in following posts.

For now, I am going to trust that LightSwitch to show a screen based on what it understands about my customer entity.

With the screen created, I want to see what it looks like when the application is running. At the top of the Visual Studio LightSwitch IDE, I click the Start Debugging button.

Click the Start Debugging button (or click F5)

Groovy! LightSwitch takes the stuff I’ve created; the Customers table and the NewCustomer screen I created, and fires up an application that displays a NewCustomer screen containing the fields I created for my customer entity.

The MyFirstApplication running with the NewCustomer screen.

I’m not going to talk about the “design” of the application right now. However what is interesting to note is how LightSwitch created an application that is a very usable solution. The design it created is consistent with applications created today. This includes a; ribbon bar on the top for actions, a menu bar on the left for navigation, and an area on the right to contain the screens. The built in application design is done using what are called “best practices” – Common and proven software development practices.

Again, the creation of the screens uses a data centric aproach. For example, the DateLastContacted field in my Customers table displays as a calender selection in the form. Similarly, the boolean (true or false) IsActive field shows as a checkbox. Not getting into too much detail here, but the default design is not completely bound to what LightSwitch creates. This is also a topic for a future post about customizing the generated screen design.

For now, I am going to move on to create another screen that displays a list of customers. So, for sake of my next task, I enter three customers using the running application. The process I used was to enter information in all the fields in the NewCustomer screen, and then press the Save button in the top ribbon bar.

Doh! Something went wrong. I receive an error message…

Doh!! An error message when I click Save

{insert Simpsons’ Nelson Muntz “Haw Haw” laugh here}

I should have known better (see previous #fail post). If it weren’t for my experience at falling when learning how to install LightSwitch, I wouldn’t have immediately known what the problem is.

LightSwitch uses Microsoft SQL Server 2008 Express to manage the information about the tables I want to use. I already have SQL 2005 Express installed. So, I have to replace my SQL 2005 Express installation with SQL 2008 Express. Fortunately, the installer for SQL Server 2008 R2 Express (available from here)  lets me upgrade my SQLExpress instance rather than doing a complete uninstall and install. I’ll be right back…

{insert drive-in theater intermission music here}

…thanks for waiting. How was the popcorn? Feel free to pick kernels out of your teeth…

With SQL Express 2008 ( I am use R2), I hit the Start Debugging button again…

OOPS!

Make sure the .SQLExpress is actually running.

…I forgot to start up the SQLExpress service when I rebooted my computer after the upgrade.

So, NOW with everything working as it should, I click the Start Debugging button. The application starts up and I add my first customer. I enter information into all the fields and click the Save button on the ribbon bar.

YES!! (Exclaiming the work “yes” when something works as you hoped it would IS a software development best practice. Well, maybe in my case anyway.) The application saved my new customer and indicated so by re-titling the NewCustomer tab with the name of my customer…

My newly added customer record.

I click the NewCustomer item in the Menu on the left. I want to add a couple more customers so that I can demonstrate a different kind of screen here later. So I add a couple more…

Three newly added customers

Now I want to create a screen that will display a list of all my customers. I need some way of looking for customers and then viewing their details.

I close the application and head back to the Visual Studio LightRoom IDE.

This time, instead of using the designer window, I select to create a new screen from the solution explorer. I right-click the Screens folder and click the Add Screen… item.

Adding a new screen from the Solution Explorer

The familiar Add New Screen dialog opens. This time I select the List and Details Screen item in the list of screen templates. To give my screen a more name I can easily refer to, I enter “CustomerList” in the Screen Name field. From the Screen Data drop down box, I select the CustomerSet as the source of data for my screen…

Adding a new CustomerList screen

I click the OK button. Again, the familiar designer opens up for the newly created CustomerList screen.

The CutomerList screen designer

I am not going to touch a thing here. Instead, I want to see what this screen looks like in my application. So I click the Start Debugging button to see what happens.

My application starts, and the familiar NewCustomer screen is displayed. Instead of entering a new customer, I click the CustomerList item in the Menu on the left.

The CustomerList screen menu item.

Click the CustomerList menu item opens up my new screen. The CustomerList screen displays a listing of customers by name. The screen also displays the details of the customer for the record that is selected in the list. What’s more is that this screen allows me to edit the details.

I edited the CustomerName of my first record from Able Actuators to Able Actuators Inc…

LightSwitch recognized that I edited a customer record so it enabled the Save button in the top ribbon bar. For the sake of clarity, when a data entity has been edited, it is considered to be in a “dirty” state. A dirty entity is something that LightSwitch knows as to be different than what is was before. This is a useful term to know when it comes time to talk about applying business rules to entities (yes, in a later post).

So there you have it. A quick and easy (if you don’t fail like the first time I did in this and past posts) way of creating a simple application using LightSwitch.

And on that, I have just finished my third litre flavored water and about to burst. So, in my next post I will demonstrate how I will customize the entities (tables) and their fields to help me better manage my usage of the data. For example, using required fields, adding appearance descriptions, and using choice lists.

Cheers ’till then.