Building a LightSwitch HTML Client: eBay Daily Deals (Andy Kung)

Building a LightSwitch HTML Client: eBay Daily Deals (Andy Kung)

Rate This
  • Comments 7

With the release of the LightSwitch HTML Client Preview 2, I’d like to take this opportunity to showcase the simple steps to get an HTML client up and running. The holiday season is now upon us. In this tutorial, we will create a simple HTML client to display daily deals from eBay. Something like this:

clip_image001

Make sure you have the LightSwitch HTML Client Preview 2 installed on your machine. Ready? Let’s start!

Create a project

Launch Visual Studio 2012. Create a LightSwitch HTML Application project by going to File, New Project. You can choose a VB or C# project. Name the project DailyDeals.

clip_image003

Start with data

After the project is created, LightSwitch will prompt you to start with data. As you know, LightSwitch supports producing and consuming OData feeds in Visual Studio 2012. I found an eBay OData feed listed on the Open Data Protocol website that we can use in our example.

Let’s attach to the OData service. Click Attach to external Data Source.

clip_image004

In the Attach Data Source Wizard, select OData Service, then click Next.

clip_image005

Enter the URL for the eBay OData feed (http://ebayodata.cloudapp.net/). Select None for authentication (since the feed doesn’t require any authentication). Click Next.

clip_image006

The wizard finds all the data entities from the data service. In our example, we’re only interacting with the Deals table. Select Deals and click Finish.

clip_image007

Deals table now appears in the Solution Explorer. We have successfully attached to the eBay OData service.

clip_image008

Next, let’s create a screen for Deals. In Solution Explorer, right click on the Client node and select Add Screen.

clip_image009

In the Add New Screen dialog, select Browse Data Screen template. Name the screen DailyDeals. Select Deals as the screen data. Click OK.

clip_image011

DailyDeal screen is created and opened in Screen Designer.

clip_image012

Let’s see what we’ve got so far. Run the application by pressing F5. The HTML client is now running in your default browser!

clip_image013

We’ve got a list of daily deals from eBay. It is a good starting point, but there are some things we can make better. For example:

  • The screen says Daily Deals and the list also has a Deals header. It seems redundant.
  • The information in each deal doesn’t make much sense to me. What I really want is a list of product pictures and a way to drill in for more information about the deal.

Let’s see how we can go about to address these issues. Close the browser and return to the Visual Studio IDE.

Turn off list header

Since the screen title already says Daily Deals. It is redundant for the list to show a header. Select Deals in the screen content tree and uncheck Show Header in the Properties window.

clip_image014

Use a tile list

I’d like to present the deals as image thumbnails instead of a vertical list of text. LightSwitch provides a Tile List control just for that! In the screen content tree, select Deals and change its control from List to Tile List.

clip_image015

Once the Tile List is selected, the Deal node underneath it will expend to show all the fields available. clip_image016

You can think of the Deal node as a tile. By default, it is a 150x150 pixel tile. You can customize the size via the Properties window. We will keep it 150x150 in our example.  

Delete every but Picture Url under Deal. Set it to use Image control. Note that the built-in Image control works with both binary data as well as an image URL. In the Properties window, set the Width and Height of the image to 150x150. The image will take up the entire tile.

clip_image018

Press F5 and run the application. We’ve got a list of product images! Next, let’s allow the user to find information about the deal by tapping on an image. Close the application and return to the Visual Studio IDE.

clip_image019

Create a detail dialog

In Screen Designer, drag Selected Item from the left pane to create a new dialog under Dialogs node.

clip_image020

Change the Display Name of the dialog to Daily Deal via Properties window. Also,

  • Change Label Position to None, since we don’t want to show labels of the fields in the dialog.
  • Check Use read-only controls, since we don’t allow users to edit the data.

In the dialog, delete everything but Picture Url, Title, and Converted Current Price.

  • Use Image control for Picture Url.
  • Move the Picture Url to the front.

clip_image021

Next, let’s make it open the dialog when the user tap on a deal in the tile list. Select the Deals node (Tile List) and find the Item Tap action in the Properties window. Click None.

clip_image023

Configure the tap action as follows. This indicates that we want to show the Daily Deal dialog with the Item Tap event on the list items. Click OK.

clip_image024

Press F5 to run the application. Tap on a deal to launch the deal dialog!

clip_image025

Alright, we’re getting closer! We can certainly make this dialog look a little better. For example:

  • Make the picture bigger to fill up the dialog
  • Add a currency symbol for the price
  • Emphasis on the title and price with some formatting

Close the application and return to the Visual Studio IDE.

Customize the dialog

In the Screen Designer:

clip_image026

  • Select Daily Deal (Dialog), set its Width to Fixed Width of 400 pixels.
  • Select Picture Url, set the size to 400 x 350 via Properties window.
  • Select Title, set the Font Style to Strong via Properties window.

Create a custom control

Next, let’s add a currency symbol to the Converted Current Price. Since the Text control doesn’t know that it’s a currency, we will write our own HTML to visualize the value.

Select Converted Current Price and choose Custom Control. Then, select Edit Render Code via the Properties window. This will launch the code editor.

clip_image027

Write the following code to visualize the price value with a currency symbol in an h1 tag.

myapp.DailyDeals.ConvertedCurrentPrice_render = function(element, contentItem) {

     var itemTemplate = $("<div></div>");

     var title = $("<h1>$" + contentItem.value + "</h1>");

     title.appendTo($(itemTemplate));

     itemTemplate.appendTo($(element));

 };

Add a button

Finally, we need to enable the user to go to the actually site to purchase the item. Let’s add a button in the dialog to do that.

Right click on the Daily Deal dialog and select Add Button.

clip_image028

Create a method called ViewDeal and click OK.

clip_image029

A button is now added inside the dialog. Double click on View Deal button to edit the method in the code editor.

clip_image030

Write the following code to open a browser window.

myapp.DailyDeals.ViewDeal_execute = function(screen) {

    window.open(screen.Deals.selectedItem.DealUrl, "mywindow");

 };

Press F5 to run the application. Tap a product image to see the much improved dialog!

clip_image031

Run the application on a device

So far we’ve been using the application in the debug mode with the default desktop browser. I encourage you to publish the application to Azure and view it on your favorite mobile devices.

That’s it for now. Happy holidays everybody!

-andy

Leave a Comment
  • Please add 1 and 7 and type the answer here:
  • Post
  • Hi Andy

    Nice article again. Thank You.

  • I agree with #Babloo1436 ... very nice tutorial!

  • You guys rock!

  • Hi Andy,

    really nice article and a really nice product, too!

    But I get an 403 if I publish the project in Azure WebSite, created exclusivly for this little demo. Any ideas what could be going wrong? Publishing projects from within Web Matrix 2 is running fine.

    Andreas

  • @Andreas - when you publish an HTML client application you need to navigate to the client directory that you want to run (because you could have multiple clients in a solution). So you if your Azure web address is myapp.azurewebsites.net and you named your HTML client "HTMLClient" then you run it from myapp.azurewebsites.net/HTMLClient

    HTH,

    -Beth

  • One word: "Awesome"!

  • nice tutorial!!

Page 1 of 1 (7 items)