Dec 8

Written by: Michael Washington
12/8/2011 7:06 PM 

An HTML Website that Uses Visual Studio LightSwitch

LightSwitch is a powerful application creator. However, you may need HTML pages. LightSwitch can still be used for all processes that do not need to be HTML.

In this article we will explore a real-world project I recently completed. It is a LightSwitch application that manages the WindowsDevNews.com site. The reason the WindowsDevNews.com site needed a LightSwitch application to manage it, is because it requires the following functionality:

• HTML (.aspx) web pages
  • Allow anonymous users to submit “Posts”
  • Display Blogs (created by Dave based on “Posts”)
  • Allow search by category
  • RSS Feeds
  • Blog Posts
    • “In This issue” list of each author (with link to their post)
    • “Above The Fold” (with link to their post)
    • Shoutouts
    • “Post” description uses the Blog Post Text field (not the synopsis)
  • Searchable database of “Posts”
• LightSwitch Application
  • Category administration
  • Allow “Posts” to be searched (using Filter control) and edited
  • Button to Email the Author
  • Tweet This button that points to the database entry
  • Blogs
    • Edit Blog Footer and Header (used for new Blogs does not change existing Blogs)
    • Enter and edit “Shout Out” entries
    • Tweet button for entire Blog Post
    • Create/Edit Blog
    • Select “Posts” from database that are not already included in a Blog post
    • Edit Administrative fields such as “BlogPostText” and “IncludeInAboveTheFold”
    • Edit any Blog using Telerik Rich Text Editor (this allows Blog posts to be created that do not consists of database “Posts”)

The Email From Dave Campbell

This project started when I asked Dave Campbell to send me an email describing how he processes posts for the SilverlightCream.com site (the precursor to the WindowsDevNews.com site):

From: Dave Campbell
To: Michael Washington
Subject: WindowsDevNews
How I currently roll up a blog post
(or, how painful can this really be)
I get submittals as email… most of the information I can copy/paste over except for the URL shortening, but that’s just a button press. I use their info or part of it in the synopsis that goes on the site, but may still type my own comment. So it’s mail open, submittal form open, copy/paste a bunch of fields, read/skim the post, bang up some commentary. I post it to twitter also during this manual process. And… All posts are also submitted to a secondary form that inserts them in the big tag cloud at WynApse.com
For ones I find myself, I may have to search out the author’s name, I have to shorten the URL, rat out a synopsis, figure out the tags, type my comments, then post to twitter and the two submit forms (SilverlightCream and WynApse.com).
When I’ve got enough for a post…
Near the bottom of my admin form is a piece I’ve built that I cut and paste to the top “In this edition” section of contributors names and links into the body.
I also have the formatted up links with anchor tags for the body of the post, and I paste those in.
Then I go through and deal with any multiple article issues from a single dev (with the (-2-, -3-) tagging .. I wrote a macro in my editor to do the -2- but anything beyond that is free-form coding.
Then I copy/paste my comments into the boilerplate I previously pasted in from my admin page… interleaving with the author’s name
Then I run it locally to make sure it’s formatted correctly.
Reading through it, I decide on the ‘above the fold’ entries, and insert that information manually… I’ve got markers set up for it in the html template.
Then I refresh it locally.
If it looks good, I log into GeeksWithBlogs, start a new post, copy/paste the markup into the GWB box, select the tags and post
Then I open the post in a new tab, get the shortened URL and send it out on twitter.
That sounds like a LOT of work… and I suppose it is, but it’s a rhythm I’ve gotten into and it isn’t really as painful as it sounds unless I’m tired… like last night and just said heck with it...

This is the basic architecture I came up with:

Below is the database structure. This basically copies the original SilverlightCream.com site (because the data from that site will eventually be imported into the new one), and I simply connected the tables in LightSwitch as external data:

The Program Flow

The process starts when a visitor submits a post to the database.

Dave periodically logs into the LightSwitch application, and using the Filter Control Extension, searches for new Posts and performs the following functions:

• Set the Post to show in the database
• Flag the Post to show in a Blog
• Set the Post to show "Above The Fold" in the Blog
• Enter the Blog text for the Post
• Change the categories for the Post
• View the web page for the Post
• Send an email to the Poster
• Post to Twitter about the Post

On the Blog administration screen, Dave can create or select a Blog and edit the Posts.

The Add Post button will automatically find any Post marked to be included in a Blog, but not currently associated with a Blog.

Dave updates the Header and Footer that will be used for all new Blogs.

He simply clicks the Generate Blog button to create or update the Blog post.

After the Blog is generated, he can edit the text and even add pictures.

The public side of the site shows the Blogs.

It also shows the Posts in a searchable database.

Source Control And Hosting

When the site was completed, I posted it to the server provided by DiscountASP. I checked the entire solution into the TFS Hosting account that they also provide.