Jul
11
Written by:
Delordson
Wed, 11 Jul 2012 07:24:43 GMT
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.
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:
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).
Browse Golf Clubs
The BrowseGolfClubs pages uses a Rows Layout to displays a List of Golf Clubs.
The rendered page looks like this.
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.
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.
The details page looks like this:
Note the DETAILS, COURSE, FACILITIES, CONTACT and PHOTOS tabs at the top. These correspond to tabs in the ‘ViewGolfClubDetail’ page.
The Course tab uses a custom control in a List to display information about each hole.
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.
…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.
The Facilities tab ends up looking like this:
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