You are here:   Blog
Register   |  Login

LightSwitch News

 

Jul 11

Written by: Delordson
Wed, 11 Jul 2012 07:24:43 GMT  RssIcon

The Golf Clubs app is a LightSwitch HTML Client Preview sample app which has a fully featured Silverlight Client as well as a mobile html client. You can download it from the Gallery. Here I describe how the HTML client was built. I wont cover the Silverlight client as there are many tutorials on the website and elsewhere showing how to do that.

 

The Server

The HTML client uses the same server as the Silverlight Client.

SolutionSide

The key table is GolfClubs table. Each Golf Club has a Course which has a Length, Number of Holes and a Par score. One obvious future extensibility point is to have multiple Courses for some Golf Clubs. For now there is only one Course per Golf Club. Each Course has a CourseType. Examples of Course Types include ‘Links’ and ‘Parkland’. A Course can have multiple Holes with each hole having a Length, a Par score and a description of the hazards as well as the Green. The sample App also has a table for capturing pictures from the Golf Club.

 

The relationship between the tables looks like this:

Entities

 

The HTML Client

The HTML Client has two pages, a page for viewing a list of Golf Clubs (BrowseGolfClubs) and a page for viewing details of a selected Golf Club (ViewGolfClubDetail).

HTMLClient

 

Browse Golf Clubs

The BrowseGolfClubs pages uses a Rows Layout to displays a List of Golf Clubs.

BrowseGolfClubs

 

The rendered page looks like this.

htmlClubsList

 

Note the ‘NEW…’ button used to add new Golf Clubs. A ‘New Golf Club’ Dialog has been added to the BrowseGolfClubs  page to allow this. Unlike the Silverlight Client, the LightSwitch HTML Preview allows these types of dialog to be added and called without any code. Simply choose the “[EntitiesName]AddAndEditNew” Method and choose the dialog to navigate to.

NewGolfClub

 

 

View Golf Club Detail

The ‘ViewGolfClubDetail’ page is accessed by tabbing on a Golf Club from the list. Again no code required to enable this. Simply choose the list and edit the item tab action. Select the “Show[DetailsPageName]” method and pass in the selected item as a parameter.

TabToGolfClubDetails

 

The details page looks like this:

Features01

Note the DETAILS, COURSE, FACILITIES, CONTACT and PHOTOS tabs at the top. These correspond to tabs in the ‘ViewGolfClubDetail’ page.

GolfClubDetailsView

 

The Course tab uses a custom control in a List to display information about each hole.

HoleCustomControl

 

The Render event for the custom control is used to construct the html and pass it to the template using the data in the contentItem ViewModel.

HoleRenerCode

 

…which gives this:

 

Currently, the LightSwitch HTML Client Preview uses a textbox when displaying a Boolean value. I’m really hoping this changes before RTM but for now, a custom control can be used to create checkboxes. A GetChecKBox function is called in the Render event of the custom control, passing in the contentItem ViewModel. A HTML checkbox is simply an input control with the type set to ‘checkbox’. I’ve also used the LabelFor to display contentItem value (true or false).

 

If the value of the contentItem is ‘true’ we set the checked attribute of the checkbox to true.

FacilitiesCustomCode

 

The Facilities tab ends up looking like this:

Features03

 

 

Wrap Up

All said and done this is a fantastic piece of work by the LightSwitch team. Once we know the extensibility story we will have extensions available over at http://www.lightswitchextras.com/ and here on http://www.lightswitchhelpwebsite.com/Home.aspx

Tags:
Categories:
Location: Blogs Parent Separator DELORDSON

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation