Google+

WebMatrix Proves an Excellent Tool for Creating Small Sites Quickly

As our work on the Appleton Compassion Project was wrapping up, Skyline took over ownership of the database that runs the site from the School District so we could easily make corrections and additions without having to download a new version of the database each night. Now that we "owned" the database, we realized we needed a way to maintain and manage it. For this we used Microsoft's new tool, WebMatrix.

Right about now you are asking yourself, really, another programming tool? An excellent question. WebMatrix is a response from Microsoft to Ruby on Rails and PHP. The benefit these development stacks is that they can generally be used to implement data driven sites relatively quickly and, until now, Microsoft didn't have a tool that allowed that.

While the .NET stack is a great development platform, it doesn't always allow for quick website development. As developers we tend to over-engineer sites, especially the ones that only need to be a couple of pages. We create a data layer, we create a business layer, and then we create a UI layer. These are, of course, industry best practices, but they are industry best practices for sites that are going to scale. If you're building a site for a couple of users who just want to see a list of their child's soccer games, this is definitely over engineering. WebMatrix is Microsoft's answer to that.

WebMatrix harkens back to the days of Classic ASP. It contains code logic in a single page, including the SQL statement. You can then render your page using Microsoft's new Razor engine.

Getting Started To get started, download WebMatrix using Microsoft's web platform installer. Upon starting up the application you'll see a nice, simple-to-use page that includes many templates you can use to get started with your development quickly and easily.

So, what does the code look like? Truthfully, it's really simple. Here is the basis of a page we used to create a list of all students participating in the Compassion Project.

The first thing to realize is the @{ } syntax is part of the Razor view engine. It is the replacement for <%= %> that tells the runtime you are escaping out to do something code like. Essentially, to get our list of data we do three things ... open a database connection, tell it the SQL command, and execute the SQL statement, the same three things we always do. In this case however, those three things are three lines:

@{
    var db=Database.Open("Dev");
    var sqlQuery = "select * from ProjectData order by LastName, FirstName";
    var data = db.Query(sqlQuery);
}

Next we have to render the output to the page. Again, we rely on the Razor View engine (look for the @ symbol):

<body>
    <ul>
        @foreach (var row in data) {
            <li><a href="[email protected]">@row.PictureNumber</a> @row.LastName @row.FirstName</li>
        }
    </ul>
</body>

We are essentially saying for each (@foreach is Razor syntax) row in our data set (data is a globally scoped variable on the page), create a link to a key (@ is again the Razor syntax, so @row.PictureNumber tells the page to use the picture number) and create hypertext for the person's name. That's it! As you can see from the code snippets above, it takes very few lines to get data from a database.

The update part is also similar. It is, of course, longer since there is a bit more logic, but notice how all of the syntax is on a single page:

@{
    var id = Request["ID"];
    var sqlSelect = "select Id, PictureNumber, LastName, FirstName, Grade, HomeSchool, TileLocation,IsNull(DisplayStudentOnline,1) as DisplayStudentOnline,IsNull(FeaturedImage,0) as FeaturedImage,IsNull(FeaturedStatement,0) as FeaturedStatement,Description from ProjectData where [email protected]";
    var db=Database.Open("Dev");
    var sqlQuery = db.QuerySingle(sqlSelect,id);
    var studentFirstName = sqlQuery.FirstName;
    var studentLastName = sqlQuery.LastName;
    var compassionStatement = sqlQuery.Description;
    var homeSchool = sqlQuery.HomeSchool;
    var tileLocation = sqlQuery.TileLocation;
    var displayOnline = sqlQuery.DisplayStudentOnline;
    var isFeaturedImage = sqlQuery.FeaturedImage;
    var isFeaturedStatement = sqlQuery.FeaturedStatement;
    var pictureID = sqlQuery.PictureNumber;
    var imageUrl = "http://images.appletoncompassion.org/compassionimagesfull/thumb/" + @pictureID + ".jpg";
    var isImageCheck = string.Empty;

    if (isFeaturedImage) {
        isImageCheck = "checked";
    }

    var isStatementCheck = "";

    if (isFeaturedStatement) {
        isStatementCheck = "checked";
    }

    var displayOnlineCheck = "";
    if (displayOnline) {
        displayOnlineCheck = "checked";
    }

    var ischeckedonpost = string.Empty;

    if (IsPost) {
        compassionStatement = Request["statement"];
        tileLocation = Request["tileLoc"]
        displayOnline = ParseCheckBox(Request["displayOnline"]);
        isFeaturedImage = ParseCheckBox(Request["chkFeaturedImage"]);
        isFeaturedStatement = ParseCheckBox(Request["chkFeaturedStatement"]);
        var sqlUpdate = "Update ProjectData set description = @0, [email protected], [email protected], [email protected],[email protected] where [email protected]";
        db.Execute(sqlUpdate,compassionStatement,tileLocation,displayOnline,isFeaturedImage,isFeaturedStatement,pictureID);
        Response.Redirect("Page.cshtml");
    }
}

@functions {

bool ParseCheckBox(string checkBoxValue) {
    Response.Write("Value in: " + checkBoxValue +"</br>");
    bool returnValue = false;

    if (checkBoxValue == "on") {
        returnValue = true;
    }
    else {
        returnValue = false;
    }

    Response.Write("Value out: " + returnValue +"</br>");
    return returnValue;
    }
}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Edit Artist</title>
</head>
<body>
    <a href="Page.cshtml">Home Page</a>
        <form action="" method="post">
        <p>Picture Number: @pictureID</p>
        <p>First Name: @studentFirstName</p>
        <p>Last Name: @studentLastName</p>
        <p>Home School: @homeSchool</p>
        <p>Tile Location: <input type="text" name="tileLoc" value="@tileLocation"/></p>
        <p>Statement:</p><p> <textarea id="txtStatement" rows="10" columns="20" style="width:600px" name="statement">@compassionStatement</textarea></p>
        <p>Display Student Online <input type="checkbox" name="displayOnline" @displayOnlineCheck/></p>
        <p>Featured Art <input type="checkbox" name="chkFeaturedImage" @isImageCheck/></p>
        <p>Featured Statement<input type="checkbox" name="chkFeaturedStatement" @isStatementCheck/></p>
        <img src="@imageUrl"/>
        <p><input type="submit" value="Save"/></p>
    </form>
</body>
</html>

Why Use it? WebMatrix is Microsoft's response to tools such as Ruby and PHP that generally use inline SQL and allow developers to quickly get sites published. It includes many templates so you can get started quickly, and it will tie into Open Source projects such as Joomla.

I want to learn more! Official WebMatrix Site

WebMatrix Development 101

Web Matrix 101 book - This is a nice little introduction and is only $1 for the Kindle.


 

Mobile Apps Provide the "Finishing Touches" to the Appleton Compassion Project

The Appleton Compassion Projectis a community art project in which all Appleton Area School District students created a 6" x 6" tile depicting their idea of compassion. Each student then wrote a statement about their tile and what compassion means to them. The art and statements can be viewed in the Trout Museum of Art or online at www.appletoncompassion.org. Adding the writing element to the art project has produced some very well rounded, heartfelt depictions of the word "Compassion".

The artist statements range all over the board; from moving, to amusing, to first-grader-cute. It quickly became apparent that with the job of physically displaying over 10,000 pieces of Art on the walls of the Trout Museum of Art, that the compassion statements would not be available for display alongside the tiles. Since the writing element was just as important to the project as the art, we knew we needed to come up with a solution to allow museum visitors to read the statements. The answer? Smartphone apps! Skyline created applications for the three major platforms - Android, iPhone and Windows Phone 7 - that museum visitors can install on their mobile phones so they can view artist statements along with the art.

Since this is the first time that Skyline has created mobile apps for the three major mobile platforms, I thought I'd share how we approached the design of the applications, focusing on what was common between all three. Then, in future blog posts each of the mobile platforms will be discussed from a development standpoint.

In essence, the goal of the mobile application design, at a high level, focused on two things: One, consistency of functionality within three applications, and two, have the application behave like a native application on the individual mobile phones. Okay, what does this really mean? We sat down as a team and identified the functionality the application should have. For the mobile applications these were the features we wanted:

  • Highlight featured art upon entering the app
  • By clicking on an image users would be able to view the compassion statement
  • Search by student name
  • Search by picture number
  • Allow users to mark and keep a list of favorites
  • Have static text to highlight information about the museum, exhibit, hours, Skyline, etc. Once a set of features was decided on, we focused on having those pieces display consistently within the applications, so that featured art was first, favorites was second, and so on. We also wanted to make sure that search was available on each screen across the application. Finally, we attempted to use consistency with the graphics across platforms wherever possible. All of the applications have the same splash screen (featuring Art by Skyline employees) and use the same logo where needed.

Each developer took these requirements and implemented them within the various mobile platforms so they were consistent for the users of that platform. For example, the iPhone and Windows Phone 7 have very different UI implementations. The iPhone has more of a button-driven menu interface, where the Windows Phone UI utilizes text and swiping as a function of their Metro UI. This results in the search button being at the bottom of the screen for the iPhone application and at the top for the Windows Phone application. Each application has the same functionality, just implemented differently - appropriate for the native platform.

The last part of the mobile applications is the data services that feed the application. Surprisingly enough, there are only two. The services are REST-based, with the data returned to the client in XML format.

The first service returns a random set of featured art (http://www.appletoncompassion.org/rest/FeaturedStatements/12). With REST, you can provide parameters in the URL, so in the instance the number tells you how many items to return. We have a single object type we used for both of the services to return, so in this instance there is some excess data in the XML stream that would not necessarily be needed, but it made development easier. This REST call is used to return the featured images that greet the user each time they start the application.

The second service is responsible for searching. Within the application, there are two types of search. The first one is by picture number, so if you are at the exhibit in the museum you can type in a number and see the artist statement that corresponds with the tile. The second is by name, so you can look up a specific child. We were able to implement this search functionality in a single service call, by having the back end service worry about if the search was a number only or if it had text. The service can search by number (http://www.appletoncompassion.org/rest/search/7158), last name (http://www.appletoncompassion.org/rest/search/ptacek) or full name (http://www.appletoncompassion.org/rest/search/nora%20ptacek).

It's a small example, but it illustrates the point of trying to encapsulate as much logic is possible in our service calls and not put the burden on the mobile phone. This way if there's a bug or change that needs to be made in the search functionality, we can update the service call, and not have to go through the lengthy process of updating three mobile applications in their respective mobile stores.

Watch for future blog posts that discuss each individual platform in more detail.


 

Microsoft's Deep Zoom Technology Allows for Powerful User Experience

Closely tied to the Silverlight Pivot Viewer I discussed in my previous blog post, is Microsoft's Deep Zoom technology. Deep Zoom enables users to pan and zoom around a high resolution image, or in the case of how we use it for the Appleton Compassion Project Virtual Exhibit, navigate a large collection of images.

Deep Zoom accomplishes this by using a process similar to Google/Bing maps. There are layers to the image, so one layer can show the entire collection with very small sizes for the images. The images are also broken up into tiles, so as you go to higher resolution images, it may be broken up into several tiles so you do not have to load the entire image. As you zoom closer into the document, you are navigating to layers that are deeper and deeper in the collection, with increasing image resolution and will be loading a tile that is a subset of the image. Microsoft has a nice picture of this and an accompanying description at their MSDN site.

Deep Zoom consists of several XML based files. The first is the Deep Zoom image (DZI). This file is essentially an XML file that contains the layers and tile information for a given image. The Deep Zoom image creation process creates a directory for each image, this directory will then have the layers, and images that are broken into tiles. For example, in testing that we did, a single image taken with a home digital camera that is 4 MB in size, was broken up into 12 sub folders, each containing tiled images. One image created 12 directories and 238 files. For the Appleton Compassion Project, the collection of 10,000+ art pieces has created nearly one million files!

The second deep zoom file type is the Deep Zoom Collection (DZC). This file essentially is the high level collection that points to the DZI files. The Silverlight Pivot viewer then references this DZC file for the zooming process.

There are two ways to create Deep Zoom files. The first is to use the Deep Zoom composer that is part of Expression Blend. This process, outlined in the link above, is manual which obviously won't work for 10,000 images. The interesting thing is Microsoft really doesn't have an SDK or install for creating the Deep Zoom files. You need to physical copy a DLL from the Deep Zoom Composer directory and make it part of your application, outlined here.

Why Use it? Deep Zoom allows for a interactive zoom and pan user experience.

I want to learn more! MSDN Deep Zoom site .aspx)

Blog post on programmatically creating Deep Zoom

 

Jaime Rodrigues goes deep on Deep Zoom


 

John Ptacek I'm John Ptacek, a software developer for Skyline Technologies. This blog is my contains my content and opinionss, which are not those of my employer.

Currently, I am reading Norse Mythology by Neil Gaiman

@jptacekGitHubLinkedInStack OverflowGoogle+