You are here:   Blog
Register   |  Login

 

Dec 8

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

image

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:

img7

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:

img9

The Program Flow

img5

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

img10

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

imgC

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

imgB

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

imgF

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

img11

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.

img13

The public side of the site shows the Blogs.

img17

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.

4 comment(s) so far...


Gravatar

Re: WindowsDevNews.com: A Visual Studio LightSwitch Application

What a great advert for LightSwitch! Do you think Dave would agree to adding a tag line such as 'Powered by LightSwitch' somewhere in the footer?

By Delordson on   12/10/2011 12:29 AM
Gravatar

Re: WindowsDevNews.com: A Visual Studio LightSwitch Application

@Delordson - Dave has blogged and Tweeted about it, and he has a Link to the LighSwitch Daily on all his blogs.

By Michael Washington on   12/10/2011 12:30 AM
Gravatar

Re: WindowsDevNews.com: A Visual Studio LightSwitch Application

Its always good to learn tips like you share for blog posting. As I just started posting comments for blog and facing problem of lots of rejections. I think your suggestion would be helpful for me. I will let you know if its work for me too. Thanks and keep post such a informative blogs.
SEO Expert India | SEO Freelancer India

By james on   12/16/2011 6:57 AM
Gravatar

Re: WindowsDevNews.com: A Visual Studio LightSwitch Application

HTML coding in Microsoft Word? It's a high level!!! ))

By Candice on   1/11/2012 9:57 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation