Lightswitch app without any coding. Part II – screens

In Part I we constructed a simple model for our “MovieApp”. Right now that we have our model, let’s have some fun building screens on it.

8. Rightclick MovieApp.HTMLClient (the project) / Screens (folder) and select “Add Screen…”

This screen will be our Main Screen to browse movies, so select “Browse Data Screen”  as the screen template. Select “Movies” as Screen Data and name the screen “Main”:

Press OK.

Now the screen designer will open and show:

Now in the column on the left, you see data that can be bound to this “Main Screen”. On the right there’s a hierarchical view of the screen layout with data from bound from the “Movie”- table (or entity if you like). You can easily trace from root “Screen” to the inner 3 “Title”, “Year” and “Image Path” nodes what data will be rendered and how.

Please don’t worry if you don’t fully understand this at this point if you’re totally new to LightSwitch. After experimenting a little bit, it will make sense. I promise!.

Press F5 to run the Application and view the result in a Browser:

Of course there aren’t any movies added yet.

9. To make this possible we have to add a button / a command and a new screen:

right-click the Command-Bar node and select “Add Button…”

Then, choose an existing method: “Movies.addAndEditNew” and leave “Navigate To:” to “(New Screen..)” as we want to define a new screen for this:

Click “OK”. The “Add New Screen” dialog will open where we can define our new screen.

Select “Add/Edit Details Screen” as screen-template, name it AddEditMovie as this screen will be used to add movies as well as to edit them. For screendata select “Movie” and as additional data select all options:

Click “OK”.The Designer of the screen will show:

Let’s run this in the Browser (F5)

First you’ll see the main screen again and at the bottom bar (default layout) there’s a button “Add Movie”. Click on it. The “AddEditMovie-Screen” appears:

Now enter some data here: (tip: use an existing moviedb online app like “imdb.com” or “the movie database”. Let’s add the new (2014 movie) “Noah” here: (I haven’t yet seen it btw, but I expect it to be a good movie ;-) )

(tip: to add an image path: in the browser (chrome) right-click on the image on the webpage and select copy image-url, then past it into the “Image Path” textbox)

Next click the save-icon. The “AddEditMovie-Screen” will close and the Main screen returns.

Let’s see what we have in our list of movies:

Right, no image as you will notice. Of course we can easily change that by setting the imagePath (data) to an “image”-control instead of a “Text”-control:

Now hit F5 again and see what we have:

Well…. great for now! In the meantime if you get little bored by copying, reading understanding all of this, you could go take a look at the result in a mobile device. Notice that LS will automatically scale things for you. Look and feel keeps solid as you switch devices!

10. Now we have to make sure that when the user selects the movie in the list (by clicking or tapping) the AddEditMovie screen is shown again. Select the “Rows-Layout” row:

Then click on the Actions menu / Tap: None – link in the properties window, select “Movies.editSelected for the existing method and leave “Add Edit Movie” as navigation:

Click “OK”.

Now run the app (F5) and check the result. By click on the movie “Noah” (or some of your choice) the edit screen will open and you will be able to edit the corresponding data.

Now back to the user and his/her experience of your application. Whilst adding or editing a movie he/she should be able to add a person and part to the movie. Let’s see how we can make this happen:

11.

First delete 2 nodes in the “AddEditMovie” designer screen, since we will build this part from scratch:

(rightclick – delete)

Next drag MoviePersons again under the Columns-Layout node

and make it a “Tile List” by rightclick and selecting “Tile List” from the option submenu:

Then switch from “Summary” to “Rows Layout” in the Person submenu:

Now delete all fields except “FirstName”, “LastName” and “ImagePath” :

Again change “Image Path” here to a Image instead of Text (via the submenu, as described earlier).

Then delete some more fields by selecting and clicking “delete” on the toolbar in visual studio:

Now we have our relevant information for a movieperson. As you can see I renamed MoviePerson (next to “Tile List” )to “Cast” by selecting it and in the properties-window changing the “Display Name”.

But we still have not added any person to our movie. Our user can’t either because there isn’t any command to make this happen.

12.

Right-click the commandbar and select “Add Button…”  and select MoviePersons / addAndEditNew:

You will end up with a new screen: “AddEditMoviePerson”. Now open the submenu of the movie details picker, and click “Rows Layout”. It will now unfold all the movie bound fields. Remove all except “Image Path”. Next drag it up under the “Columns Layout” and again make it of type Image by selecting it from the submenu.  Then, drag a “Part”  field from the left column (of the screen editor under MoviePerson) right under the person details – picker. You’ll end up with:

As you’d have noticed, there’s also a new button involved here: “New Person”. Before we include it, we’ll have to make a new screen.

13.

In the solutionexplorer right-click Screens and select “Add Screen…” , select “Add/Edit Details Screen” as template, “Person” as ScreenData, “Person Details” as Additional Data to Include and click OK. The only thing you’ll have to add in this screen is another “Image Path” field (drag from the left, right beneath the other). Make it an Image Type:

14. Now back to the “AddEditMoviePerson” screen.  Right-click the commandbar and add a new Button. Choose the existing method “showAddEditPerson”:

Next, drag this button right beneath the Person details picker and give it the display name: ” Add Person (properties-window)”:

Now let’s see what we have here. Summary in steps: (kind of a use-case ;) )

1. Edit a movie
2. Add a person and his/her part to the movie by selecting from a list
3. If the person is not yet in the system, we have to add him/her
4. Add the person
5. confirm
6. Select this person
7. Add the part
8. Confirm.
9. Save

In pictures; this is what you should have now. We skip step 1-3.

4.	5.
6.	7.
8.	9.

As you will notice, there’s some work to do here and there, but it the application gets its shape bit by bit. In the next part we’re going to add the genre-part as well as the finetuning.